/*
Theme Name: HZ Performance
Theme URI: https://github.com/dg-agentur/hz-performance
Description: Site-spezifisches Child-Theme für HZ Performance — KFZ Meister- und Tuningbetrieb, Zirndorf. Dark-first Markenwelt auf Basis von dg-factory-blocks. Enthält keine Domain-Hardcodings.
Author: dg-agentur
Template: dg-factory-blocks
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hz-performance
*/

/* -------------------------------------------------------------------------
   HZ Performance — dark-first Markenwelt

   Kontrastregel, verbindlich (gemessen, WCAG 2.1 AA):
     Auf dunklem Grund tragen Text (#F2F5F8), Muted (#A8B4C2) und Accent
     (#268DEE) — alle >= 4.5:1.
     Auf hellem Grund trägt AUSSCHLIESSLICH Deep Blue (#022A75, 13.2:1).
     #268DEE erreicht auf Weiß nur 3.43:1 und ist dort für Fließtext und
     Buttonbeschriftungen unzulässig — nur als Grafik-/Großtextakzent.
   ------------------------------------------------------------------------- */

:root {
  --hz-ground:        #0e1116;
  --hz-surface:       #161a21;
  --hz-elevated:      #1e242d;
  --hz-line:          #2a323d;
  --hz-line-strong:   #3a4553;

  --hz-text:          #f2f5f8;
  --hz-muted:         #a8b4c2;

  --hz-accent:        #268dee;
  --hz-accent-hi:     #4fa5f2;
  --hz-accent-soft:   #86c0fc;
  --hz-deep:          #022a75;

  /* Ordnungszahlen und Anschriebszeilen. Der Wert stand als #46505f direkt in
     den Regeln und erreichte gegen die dunklen Gruende nur 2,1 bis 2,4:1 —
     gegen die Kontrastregel, die dieses Stylesheet weiter oben selbst als
     verbindlich formuliert. Gemessen liegt der neue Wert bei 4,76:1 auf der
     Flaeche, 5,16:1 auf dem Grund und 5,44:1 auf der Schwerpunktflaeche. */
  --hz-dim:           #7986a0;

  --hz-light:         #f5f7fa;
  --hz-light-line:    #dbe2ea;

  --hz-radius:        4px;
  --hz-radius-lg:     8px;
  --hz-shadow:        0 1px 2px rgba(0,0,0,.5), 0 16px 40px -24px rgba(0,0,0,.9);
  --hz-ring:          0 0 0 2px var(--hz-accent);

  /* Beschriftung auf gefüllten blauen Flächen.
     Weiß auf #268DEE erreicht nur 3,43:1 und ist für Buttonschrift unzulässig —
     entscheidend ist der Kontrast gegen die Buttonfläche, nicht gegen den Grund.
     #06121F erreicht 5,50:1 gegen #268DEE und 7,18:1 gegen #4FA5F2. */
  --hz-on-accent:     #06121f;
}

/* --- Grundfläche ---------------------------------------------------------- */

body {
  background: var(--hz-ground);
  color: var(--hz-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Typografie ----------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 { letter-spacing: -0.028em; }

.hz-eyebrow,
.wp-block-paragraph.is-style-hz-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hz-accent);
  margin-block-end: 0.75rem;
}

.hz-lead,
.wp-block-paragraph.is-style-hz-lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--hz-muted);
  max-width: 60ch;
}

p { max-width: 72ch; }
.wp-block-column p,
.hz-section--full p { max-width: none; }

/* --- Abschnitte ----------------------------------------------------------- */

.hz-section,
.wp-block-group.is-style-hz-section-dark,
.wp-block-group.is-style-hz-section-deep,
.wp-block-group.is-style-hz-section-light {
  padding-block: var(--wp--preset--spacing--70);
}

.hz-section--dark,
.wp-block-group.is-style-hz-section-dark {
  background: var(--hz-surface);
  color: var(--hz-text);
}

.hz-section--deep,
.wp-block-group.is-style-hz-section-deep {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(38,141,238,.14) 0%, transparent 60%),
    var(--hz-ground);
  color: var(--hz-text);
}

/* Helle Kontrastfläche: hier gilt Deep Blue als Textfarbe. */
.hz-section--light,
.wp-block-group.is-style-hz-section-light {
  background: var(--hz-light);
  color: var(--hz-deep);
}
.hz-section--light h1,
.hz-section--light h2,
.hz-section--light h3,
.hz-section--light h4,
.hz-section--light p,
.hz-section--light li { color: var(--hz-deep); }
.hz-section--light a:not(.wp-block-button__link) { color: var(--hz-deep); }
.hz-section--light .hz-eyebrow { color: var(--hz-deep); }
.wp-block-group.is-style-hz-section-light :is(h1,h2,h3,h4,h5,h6,p,li,a:not(.wp-block-button__link)) { color: var(--hz-deep); }
.wp-block-group.is-style-hz-section-light :is(.hz-eyebrow, .wp-block-paragraph.is-style-hz-eyebrow, .wp-block-paragraph.is-style-hz-lead) { color: var(--hz-deep); }

/* --- Karten --------------------------------------------------------------- */

.hz-card,
.wp-block-group.is-style-hz-card,
.wp-block-group.is-style-hz-card-service {
  background: var(--hz-elevated);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-lg);
  padding: var(--wp--preset--spacing--50);
  height: 100%;
}

.hz-card--link,
.wp-block-group.is-style-hz-card-service {
  transition: border-color .18s ease, transform .18s ease;
}
.hz-card--link:hover,
.hz-card--link:focus-within,
.wp-block-group.is-style-hz-card-service:hover {
  border-color: var(--hz-accent);
  transform: translateY(-2px);
}

.hz-section--light .hz-card,
.wp-block-group.is-style-hz-section-light :is(.is-style-hz-card, .is-style-hz-card-service) {
  background: #ffffff;
  border-color: var(--hz-light-line);
}

/* --- Akzentkante für Leistungskacheln ------------------------------------- */

.hz-card--service,
.wp-block-group.is-style-hz-card-service {
  position: relative;
  overflow: hidden;
}
.hz-card--service::before,
.wp-block-group.is-style-hz-card-service::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background: linear-gradient(90deg, var(--hz-accent) 0%, var(--hz-accent-soft) 100%);
  opacity: .55;
}
.hz-card--service:hover::before,
.wp-block-group.is-style-hz-card-service:hover::before { opacity: 1; }

/* --- Buttons -------------------------------------------------------------- */

.wp-block-button__link {
  border-radius: var(--hz-radius);
  font-weight: 600;
  letter-spacing: .01em;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--hz-accent);
  color: var(--hz-on-accent);
}
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: var(--hz-accent-hi);
  color: var(--hz-on-accent);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  border: 1px solid var(--hz-line-strong);
  color: var(--hz-text);
  background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--hz-accent);
  color: var(--hz-accent);
}

.hz-section--light .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--hz-deep);
  color: var(--hz-deep);
}

/* --- Fokus (Barrierefreiheit) --------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--hz-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.hz-section--light a:focus-visible,
.hz-section--light button:focus-visible {
  outline-color: var(--hz-deep);
}

/* --- Kopfbereich ---------------------------------------------------------- */

.hz-header {
  background: rgba(14, 17, 22, .92);
  border-block-end: 1px solid var(--hz-line);
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
}
/* Hier stand `backdrop-filter: blur(10px)`. Die Regel ist entfernt, und zwar
   nicht aus Geschmacksgruenden, sondern weil sie das Mobilmenue kaputtgemacht
   hat: Ein Element mit `backdrop-filter` wird zum Bezugsrahmen fuer alle
   `position: fixed`-Nachfahren. Das Overlay der Navigation liegt im
   Kopfbereich; statt den Viewport zu fuellen, hat es sich auf die Masse der
   Kopfzeile gelegt — gemessen 390 x 63 px bei y = 79. Von fuenf Menuepunkten
   war einer sichtbar, die uebrigen hat `overflow: auto` abgeschnitten. Auf
   jeder Seite, auf jedem Telefon.

   Der Verlust ist gering: Der Grund liegt ohnehin bei 92 % Deckkraft, die
   Unschaerfe war kaum wahrnehmbar. Nebenbei nennt der Auftrag Glassmorphismus
   ausdruecklich als eines der Muster, die verschwinden sollen. */

.hz-header .wp-block-site-logo img { max-block-size: 44px; inline-size: auto; }

.hz-header .wp-block-navigation a {
  color: var(--hz-text);
  font-weight: 500;
}
.hz-header .wp-block-navigation a:hover,
.hz-header .wp-block-navigation .current-menu-item > a {
  color: var(--hz-accent);
}

/* --- Kontaktleiste im Kopf ------------------------------------------------ */

.hz-topbar {
  background: var(--hz-surface);
  border-block-end: 1px solid var(--hz-line);
  font-size: 0.875rem;
}
.hz-topbar a { color: var(--hz-muted); text-decoration: none; }
.hz-topbar a:hover { color: var(--hz-accent); }

/* --- Fußbereich ----------------------------------------------------------- */

.hz-footer {
  background: #0a0d11;
  border-block-start: 1px solid var(--hz-line);
  color: var(--hz-muted);
}
.hz-footer h2, .hz-footer h3 { color: var(--hz-text); }
.hz-footer a { color: var(--hz-muted); }
.hz-footer a:hover { color: var(--hz-accent); }

.hz-footer-legal {
  border-block-start: 1px solid var(--hz-line);
  font-size: 0.8125rem;
}


/* --- Öffnungszeiten ------------------------------------------------------- */

.hz-hours {
  display: grid;
  gap: .5rem;
}
.hz-hours__row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .4rem;
  border-block-end: 1px solid var(--hz-line);
}
.hz-hours__row:last-child { border-block-end: 0; }
.hz-hours__day { color: var(--hz-muted); }
.hz-hours__time { font-variant-numeric: tabular-nums; }
.hz-section--light .hz-hours__row { border-color: var(--hz-light-line); }
.hz-section--light .hz-hours__day { color: var(--hz-deep); opacity: .75; }

/* --- Formulare (WPForms) -------------------------------------------------- */

.wpforms-container .wpforms-field-label { color: var(--hz-text); font-weight: 600; }
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container select,
.wpforms-container textarea {
  background: var(--hz-elevated);
  border: 1px solid var(--hz-line-strong);
  border-radius: var(--hz-radius);
  color: var(--hz-text);
  padding: .7rem .85rem;
}
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder { color: #7d8b9b; }
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  border-color: var(--hz-accent);
  outline: 2px solid var(--hz-accent);
  outline-offset: 1px;
}
.wpforms-container .wpforms-submit {
  background: var(--hz-accent);
  color: var(--hz-on-accent);
  border: 0;
  border-radius: var(--hz-radius);
  font-weight: 600;
  padding: .8rem 1.6rem;
  cursor: pointer;
}
.wpforms-container .wpforms-submit:hover { background: var(--hz-accent-hi); color: var(--hz-on-accent); }
.wpforms-container .wpforms-required-label { color: var(--hz-accent-soft); }

.hz-section--light .wpforms-container .wpforms-field-label { color: var(--hz-deep); }
.hz-section--light .wpforms-container input[type="text"],
.hz-section--light .wpforms-container input[type="email"],
.hz-section--light .wpforms-container input[type="tel"],
.hz-section--light .wpforms-container select,
.hz-section--light .wpforms-container textarea {
  background: #ffffff;
  border-color: var(--hz-light-line);
  color: var(--hz-deep);
}

/* --- Karriere ------------------------------------------------------------- */

.hz-job-card {
  display: block;
  background: var(--hz-elevated);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-lg);
  padding: var(--wp--preset--spacing--50);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease;
}
.hz-job-card:hover { border-color: var(--hz-accent); }
.hz-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-start: .75rem;
}
.hz-job-meta__item {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hz-accent-soft);
  background: rgba(38,141,238,.12);
  border-radius: 2px;
  padding: .2rem .55rem;
}

/* Shortcode-Ausgabe des Factory-Karrieremoduls einbetten */
.dg-factory-shortcode { color: var(--hz-muted); }
.dg-factory-shortcode ul { padding-inline-start: 1.25rem; }

/* --- Sprungmarke ---------------------------------------------------------- */

/* Eigenes Verstecken statt der Kernklasse `screen-reader-text`. Deren Regel
   setzt `position: absolute !important` — gemessen lag der Sprunglink dadurch
   als ein Pixel bei -1/-1, wurde im Fokus nicht sichtbar und riss die Seite von
   Scrollposition 1500 auf 0 zurueck. Ein Sprunglink, der die Leseposition
   verwirft und sich dabei nicht zeigt, ist schlechter als keiner. */
.hz-skip-link {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hz-skip-link:focus {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  z-index: 999;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  clip-path: none;
  background: var(--hz-accent);
  color: var(--hz-on-accent);
  padding: .6rem 1rem;
  border-radius: var(--hz-radius);
  text-decoration: none;
  font-weight: 700;
}

/* --- Bewegung reduzieren -------------------------------------------------- */

/* Die Reduced-Motion-Regeln stehen bewusst NICHT hier, sondern werden vom
   Theme inline im Kopfbereich ausgegeben (functions.php). WP Rockets
   "ungenutztes CSS entfernen" wertet Media-Feature-Zustände beim Crawlen nicht
   aus und verwirft den Block sonst vollständig — Nutzer mit reduzierter
   Bewegung bekämen dann trotzdem Animationen. Inline ausgegebenes CSS wird
   davon nicht angefasst. */

/* -------------------------------------------------------------------------
   Überschreibungen gegen das Parent-Theme

   Das Parent setzt in seiner style.css per Elementselektor eine Serifenschrift
   für h1–h6 und eine grüne Linkfarbe. Theme.json-Presets laden früher als
   Theme-Stylesheets und verlieren deshalb gegen diese Regeln. Die folgenden
   Deklarationen stellen die HZ-Typografie und -Farbigkeit wieder her.
   ------------------------------------------------------------------------- */

body {
  font-family: var(--wp--preset--font-family--hz-sans, "Open Sans", system-ui, sans-serif);
}

/* Die Ueberschriften tragen die Displayschrift. Diese Regel muss hier stehen und
   nicht nur in theme.json: Das Parent setzt per Elementselektor eine Serife, und
   theme.json-Presets laden frueher und verlieren dagegen. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title,
.wp-block-site-title {
  font-family: var(--wp--preset--font-family--hz-display, Archivo, "Open Sans", system-ui, sans-serif);
  letter-spacing: -0.02em;
}
h1, .wp-block-post-title { letter-spacing: -0.032em; }

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  color: var(--hz-text);
}

a { color: var(--hz-accent); }
a:hover, a:focus { color: var(--hz-accent-hi); }

.hz-section--light h1,
.hz-section--light h2,
.hz-section--light h3,
.hz-section--light h4,
.hz-section--light h5,
.hz-section--light h6,
.hz-section--light .wp-block-heading,
.hz-section--light p,
.hz-section--light li,
.hz-section--light a { color: var(--hz-deep); }

/* Karten-Überschriften erben die Kartenfarbe, Links darin bleiben unterstrichen-frei */
.hz-card h3 a,
.hz-card h2 a { color: var(--hz-text); text-decoration: none; }
.hz-card h3 a:hover,
.hz-card h2 a:hover { color: var(--hz-accent); }
.hz-section--light .hz-card h3 a { color: var(--hz-deep); }

/* Buttons: das Parent setzt runde Pillen und Grün — beides passt nicht zur Marke */
.wp-block-button__link,
.wp-block-button .wp-block-button__link {
  border-radius: var(--hz-radius);
  font-family: var(--wp--preset--font-family--hz-sans, "Open Sans", system-ui, sans-serif);
  letter-spacing: .01em;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--hz-accent);
  color: var(--hz-on-accent);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--hz-accent-hi);
  color: var(--hz-on-accent);
}

/* Navigation: horizontale Ausrichtung auf Desktop absichern */
.hz-header .wp-block-navigation__container {
  gap: 1.5rem;
}
.hz-header .wp-block-navigation a:where(:not(.wp-element-button)) {
  color: var(--hz-text);
  text-decoration: none;
}
.hz-header .wp-block-navigation a:where(:not(.wp-element-button)):hover {
  color: var(--hz-accent);
}

/* Abschnittsabstände: das Parent bringt eigene .dg-section-Abstände mit, die
   zusammen mit unseren Paddings zu doppelten Leerräumen führen. */
.hz-section > .wp-block-group__inner-container,
.hz-section { margin-block: 0; }

/* -------------------------------------------------------------------------
   Überlaufschutz

   Auf schmalen Viewports lief der Inhalt über den rechten Rand hinaus.
   Ursache sind Inhaltsbreiten, die nicht auf die Viewportbreite begrenzt sind.
   Die folgenden Regeln begrenzen Blockcontainer und erlauben langen deutschen
   Komposita einen Umbruch, statt den Container zu sprengen.
   ------------------------------------------------------------------------- */

html { overflow-x: hidden; }

.wp-site-blocks,
.wp-block-group,
.wp-block-columns,
.wp-block-column {
  min-width: 0;
}

/* `max-inline-size: 100%` stand hier bis zum 06.09.2026 mit in der Regel und
   war ein stiller Fehler mit Klassenspezifitaet.

   WordPress vergibt die Inhaltsbreite eines `constrained`-Containers ueber
   `:where(.wp-container-… > *) { max-width: 1320px }`. `:where()` hat die
   Spezifitaet null; eine Regel mit einer Klasse gewinnt dagegen immer. Jede
   Gruppe und jedes Spaltenpaar in einem solchen Container bekam damit nicht die
   Containerbreite, sondern die volle Polsterbreite: gemessen bei 1440 px
   1392 px ab x = 24 statt 1320 ab 60.

   Aufgefallen ist es erst jetzt, und zwar durch einen Zufall: WP Rocket streicht
   diese Regel beim Zusammenstreichen des Stylesheets weg, weil sie ihm ungenutzt
   erscheint. Auf Seiten mit fertigem, reduziertem Stylesheet sass alles richtig,
   auf Seiten ohne nicht — dieselbe Vorlage, zwei Ergebnisse. Die Messung hat das
   als flackernden Befund gemeldet, bevor die Ursache klar war.

   Weg kann die Angabe ohne Ersatz. Ein Blockelement passt ohnehin in seinen
   Container; gegen den Ueberlauf durch lange deutsche Komposita wirkt
   `min-width: 0`, und das bleibt. Nachgemessen auf 39 Kombinationen:
   `scrollWidth` entspricht ueberall weiterhin genau der Viewportbreite. */

/* Die Regel darüber war zu pauschal und hat einen sichtbaren Fehler auf jeder
   Seite erzeugt. Vollbreite Gruppen liegen im Beitragsinhalt, der links und
   rechts 24 px Innenabstand trägt. Der Kern gleicht das mit
   `margin-inline: -24px` und `max-width: none` aus — die 100 % oben haben das
   `none` überschrieben, und damit blieb jede Fläche bei 1392 statt 1440 px
   stehen, mobil bei 342 statt 390. Laufband, Leistungsflächen, der Abschnitt
   „Die Halle" und die blaue Kontaktfläche endeten alle 48 px vor dem rechten
   Rand, während Kopfbereich, Fußbereich und die Coverblöcke bis zum Rand
   gingen. Genau diese Kante hat die unabhängige Bildprüfung als sichtbarsten
   Fehler der Seite gemeldet.

   `min-width: 0` bleibt: Das ist der Teil, der lange deutsche Komposita am
   Sprengen des Containers hindert. Nur die Breitenbegrenzung wird für
   ausgerichtete Blöcke zurückgenommen. */
.wp-block-group.alignfull,
.wp-block-columns.alignfull {
  max-inline-size: none;
}
/* `.alignwide` stand hier zunaechst mit drin — falsch. Der Kern deckelt
   ausgerichtete Bloecke auf die wideSize; `none` hat diesen Deckel mit
   entfernt, und die Spaltenpaare der Leistungsseiten liefen daraufhin ueber
   die volle Breite statt in der Spalte zu bleiben. Gemessen: Ueberschriften
   in einem solchen Paar begannen bei x = 24 statt bei x = 60. Nur `alignfull`
   braucht die Ausnahme, denn nur dort setzt der Kern selbst `max-width: none`. */

p, li, dd, dt,
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  overflow-wrap: break-word;
}

/* Deutsche Komposita brechen sonst erst nach dem Container. */
.hz-card p,
.hz-card h2,
.hz-card h3,
.hz-lead {
  hyphens: auto;
  -webkit-hyphens: auto;
}

img, svg, video, iframe, table, pre { max-inline-size: 100%; }
pre { overflow-x: auto; }

@media (max-width: 600px) {
  p, .hz-lead { max-inline-size: 100%; }
  .hz-section { padding-block: var(--wp--preset--spacing--60); }
}

/* -------------------------------------------------------------------------
   WPForms

   Das Plugin nutzt in seinem modernen Markup eigene CSS-Variablen und setzt sie
   inline am Formularcontainer. Gegen Inline-Werte kommt keine Selektorregel an —
   der vorgesehene Weg ist, die Variablen selbst zu überschreiben. Genau das
   passiert hier, statt mit Spezifität oder !important dagegenzuhalten.

   Der Feldkontrast ist gemessen: Text #F2F5F8 auf Feldfläche #1E242D ergibt
   14,3:1, die Beschriftung ebenso. Der Absendeknopf trägt #06121F auf #268DEE
   mit 5,50:1 — dieselbe Regel wie bei den übrigen Buttons.
   ------------------------------------------------------------------------- */

.wpforms-container,
.wpforms-container.wpforms-container-full,
div[class*="wpforms-container"] {
  --wpforms-field-background-color: #1e242d;
  --wpforms-field-border-color: #3a4553;
  --wpforms-field-border-color-spare: #3a4553;
  --wpforms-field-border-radius: 4px;
  --wpforms-field-text-color: #f2f5f8;
  --wpforms-field-menu-color: #1e242d;
  --wpforms-label-color: #f2f5f8;
  --wpforms-label-sublabel-color: #a8b4c2;
  --wpforms-label-error-color: #ff9b91;
  --wpforms-button-background-color: #268dee;
  --wpforms-button-border-color: #268dee;
  --wpforms-button-text-color: #06121f;
  --wpforms-button-border-radius: 4px;
  --wpforms-page-break-color: #268dee;
}

/* Helle Kontrastfläche: dort trägt Deep Blue. */
.hz-section--light .wpforms-container,
.wp-block-group.is-style-hz-section-light .wpforms-container {
  --wpforms-field-background-color: #ffffff;
  --wpforms-field-border-color: #dbe2ea;
  --wpforms-field-border-color-spare: #dbe2ea;
  --wpforms-field-text-color: #022a75;
  --wpforms-field-menu-color: #ffffff;
  --wpforms-label-color: #022a75;
  --wpforms-label-sublabel-color: #022a75;
}

/* Abstände und Lesbarkeit, die das Plugin nicht über Variablen abbildet. */
.wpforms-container .wpforms-field { padding-block: 0; margin-block-end: var(--wp--preset--spacing--40); }
.wpforms-container .wpforms-field-label { display: block; margin-block-end: .4rem; line-height: 1.4; }
.wpforms-container .wpforms-field-description,
.wpforms-container .wpforms-field-sublabel {
  display: block;
  margin-block-start: .4rem;
  font-size: .8125rem;
  line-height: 1.5;
}
.wpforms-container .wpforms-required-label { color: var(--hz-accent-soft); margin-inline-start: .15rem; }

/* Einwilligung: eigene Zeile, ausreichender Abstand zur Checkbox. */
.wpforms-container .wpforms-field-checkbox ul { list-style: none; margin: 0; padding: 0; }
.wpforms-container .wpforms-field-checkbox li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
}
.wpforms-container .wpforms-field-checkbox label { font-weight: 400; line-height: 1.55; margin: 0; }
.wpforms-container input[type="checkbox"] { accent-color: var(--hz-accent); inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: .2rem; }

.wpforms-container .wpforms-submit-container { margin-block-start: var(--wp--preset--spacing--40); }
.wpforms-container .wpforms-submit { font-weight: 600; cursor: pointer; }
.wpforms-container .wpforms-submit:hover { background-color: var(--hz-accent-hi) !important; }

.wpforms-confirmation-container-full {
  background: var(--hz-elevated);
  border: 1px solid var(--hz-accent);
  border-radius: var(--hz-radius);
  color: var(--hz-text);
  padding: var(--wp--preset--spacing--40);
}

/* -------------------------------------------------------------------------
   Block-Style-Varianten

   register_block_style() erzeugt Klassen nach dem Muster `is-style-<name>`.
   Ein `class`-Feld im Registrierungs-Array hat keine Wirkung — es gehört nicht
   zur API. Die im Editor wählbaren Varianten brauchen deshalb eigene Selektoren,
   sonst erscheinen sie in der Werkzeugleiste, ändern aber nichts.

   Diese Selektoren stehen NICHT hier, sondern jeweils bei der Regel, die sie
   teilen — `.hz-section, .wp-block-group.is-style-hz-section-dark { … }` und so
   weiter. Vorher lagen die Deklarationen zweimal in dieser Datei, Wert für Wert
   identisch; jede Änderung hätte an zwei Stellen nachgezogen werden müssen, und
   genau das geht auf Dauer schief.
   ------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   Wortumbruch in Kartenüberschriften

   `hyphens: auto` setzt ein Silbentrennungswörterbuch der Rendering-Engine
   voraus. Fehlt es — unter Linux-Chromium der Normalfall —, greift der
   Fallback `overflow-wrap: break-word` und bricht lange Komposita roh mitten
   im Wort ab („Reparaturservic|e"). Für Überschriften ist ein solcher Bruch
   schlechter als eine zweite Zeile.
   ------------------------------------------------------------------------- */

.hz-card :is(h2, h3, h4),
.wp-block-group.is-style-hz-card :is(h2, h3, h4),
.wp-block-group.is-style-hz-card-service :is(h2, h3, h4) {
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: balance;
}

/* =========================================================================
   Redaktionelle Bildkomposition

   Bis hierher bestand die Startseite aus Textblöcken und gleich großen
   Kacheln — die Mediathek war leer. Mit den 15 aufbereiteten Motiven kommen
   die Bausteine dazu, die eine Bildführung überhaupt erst möglich machen:
   randlose Bildbühnen, Bild/Text-Wechsel und eine eigene Fläche für den
   Schwerpunkt Tuning.
   ========================================================================= */

/* --- Randlose Abschnitte -------------------------------------------------
   Die Abschnitte lagen bisher innerhalb der 1240-px-Inhaltsspalte, weshalb
   ihre Hintergrundflächen auf 1440 px nur gut die Hälfte der Breite
   einnahmen und der Desktop wie eine zentrierte Mobilseite wirkte. Sie
   laufen jetzt als `alignfull` durch; das Innenmaß regelt die Inhaltsbreite. */

.hz-section.alignfull,
.wp-block-group.alignfull.is-style-hz-section-dark,
.wp-block-group.alignfull.is-style-hz-section-deep,
.wp-block-group.alignfull.is-style-hz-section-light {
  padding-inline: var(--wp--preset--spacing--40);
}

/* --- Bildbühne (core/cover) ---------------------------------------------
   Ein Verlauf statt einer flächigen Abdunklung: Der Text steht unten links,
   dort muss das Bild dunkel sein, oben darf es hell bleiben. Eine gleichmäßige
   Abdunklung über das ganze Bild nimmt dem Foto die Tiefe, ohne die
   Lesbarkeit dort zu verbessern, wo sie gebraucht wird. */

.hz-stage.wp-block-cover {
  min-block-size: clamp(30rem, 76vh, 46rem);
  padding: 0;
  align-items: flex-end;
}
.hz-stage.wp-block-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,13,17,.55) 0%, rgba(10,13,17,.30) 30%, rgba(10,13,17,.97) 100%),
    linear-gradient(90deg, rgba(10,13,17,.90) 0%, rgba(10,13,17,.52) 45%, rgba(10,13,17,.10) 100%);
}
/* Der waagerechte Verlauf sorgt auf dem Desktop dafür, dass der Text links auf
   dunklem Grund steht. Auf einem 390 px breiten Viewport deckt er die ganze
   Bildbreite ab und macht das Foto nahezu unsichtbar — dort trägt allein der
   senkrechte Verlauf. */
@media (max-width: 781px) {
  .hz-stage.wp-block-cover::before {
    background: linear-gradient(180deg, rgba(10,13,17,.45) 0%, rgba(10,13,17,.42) 26%, rgba(10,13,17,.97) 88%);
  }
  .hz-stage.wp-block-cover { min-block-size: clamp(28rem, 82vh, 38rem); }
}
.hz-stage.wp-block-cover .wp-block-cover__inner-container { z-index: 2; }
.hz-stage.wp-block-cover .wp-block-cover__inner-container {
  /* Ohne border-box addiert sich das seitliche Innenmaß auf die vollen 100 % —
     auf 390 px war der Container dadurch 438 px breit. */
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 1320px;
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--40);
  padding-block-end: clamp(2.5rem, 6vw, 5rem);
  padding-block-start: clamp(4rem, 12vw, 8rem);
}
.hz-stage .hz-stage__text { max-inline-size: 44rem; }
/* Ueber einem Foto reicht das gedaempfte Grau nicht — dort tragen helle Werte. */
.hz-stage .hz-lead { color: #e7edf4; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.hz-stage .hz-factline { color: #cfd9e4; text-shadow: 0 1px 10px rgba(0,0,0,.65); }
.hz-stage .hz-factline strong,
.hz-stage .hz-factline a { color: #ffffff; }
.hz-stage .hz-eyebrow { color: var(--hz-accent-soft); text-shadow: 0 1px 10px rgba(0,0,0,.7); }

/* Kleinere Ausführung für Unterseiten: weniger Höhe und deutlich weniger
   Vorlauf über der Überschrift als auf der Startseite. */
.hz-stage--page.wp-block-cover { min-block-size: clamp(18rem, 40vh, 25rem); }
.hz-stage--page.wp-block-cover .wp-block-cover__inner-container {
  padding-block-start: clamp(2.5rem, 7vw, 4.5rem);
  padding-block-end: clamp(2rem, 4vw, 3.5rem);
}

.hz-stage h1 { text-shadow: 0 2px 24px rgba(0,0,0,.55); }

/* --- Kontaktzeile unter dem Hero ---------------------------------------- */

.hz-factline {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.6rem;
  align-items: center;
  margin-block-start: var(--wp--preset--spacing--40);
  font-size: .9375rem;
  color: var(--hz-muted);
}
.hz-factline strong { color: var(--hz-text); font-weight: 600; }

/* --- Bild/Text-Wechsel --------------------------------------------------
   Kein Kartenraster, sondern zwei ungleiche Spalten: das Bild trägt, der Text
   erklärt. Auf schmalen Viewports kippt es in die Lesereihenfolge Bild → Text. */

.hz-split.wp-block-columns {
  gap: clamp(1.75rem, 4vw, 4.5rem);
  align-items: center;
}
.hz-split .wp-block-image { margin: 0; }
.hz-split .wp-block-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: var(--hz-radius-lg);
  display: block;
}

/* Bildseite bekommt ein festes Seitenverhältnis, damit die Zeile nicht je nach
   Textlänge springt. */
.hz-split--tall .wp-block-image img { aspect-ratio: 4 / 5; }
.hz-split--wide .wp-block-image img { aspect-ratio: 16 / 10; }

/* Auf schmalen Viewports bleibt das Hochformat hochformatig. Wird es dort auf
   16:10 gezwungen, zeigt der Ausschnitt nur noch das mittlere Band des Bildes —
   beim Hallenfoto also den Boden. */
@media (max-width: 781px) {
  .hz-split--wide .wp-block-image img { aspect-ratio: 16 / 10; }
  .hz-split--tall .wp-block-image img { aspect-ratio: 4 / 5; }
}

/* --- Leistungsblöcke ----------------------------------------------------
   Ersetzt sechs gleich große Kacheln durch eine Hierarchie: zwei große
   redaktionelle Bildflächen für die Schwerpunkte, darunter die ergänzenden
   Leistungen als schlichte Liste mit Trennlinien statt als Kästchen. */

.hz-lead-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--hz-radius-lg);
  color: var(--hz-text);
  text-decoration: none;
  min-block-size: clamp(19rem, 34vw, 26rem);
  isolation: isolate;
}
.hz-lead-card img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .5s ease;
}
.hz-lead-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14,17,22,.15) 0%, rgba(14,17,22,.55) 48%, rgba(14,17,22,.94) 100%);
}
.hz-lead-card:hover img,
.hz-lead-card:focus-visible img { transform: scale(1.035); }
.hz-lead-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  block-size: 100%;
  min-block-size: inherit;
  padding: var(--wp--preset--spacing--50);
}
.hz-lead-card__body h3 {
  font-family: var(--wp--preset--font-family--hz-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  margin: 0 0 .5rem;
}
.hz-lead-card__body p { margin: 0; color: #dbe3ec; max-inline-size: 34ch; }
.hz-lead-card__more {
  margin-block-start: 1rem;
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hz-accent-soft);
}

/* Ergänzende Leistungen: Liste mit Linien, keine Kästchen. */
.hz-service-rows { display: grid; gap: 0; margin-block-start: var(--wp--preset--spacing--50); }
.hz-service-row {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) 1fr auto;
  gap: 1rem 2rem;
  align-items: baseline;
  padding-block: var(--wp--preset--spacing--40);
  border-block-start: 1px solid var(--hz-line);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease;
}
.hz-service-row:last-child { border-block-end: 1px solid var(--hz-line); }
.hz-service-row__name {
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--hz-text);
}
.hz-service-row__text { color: var(--hz-muted); font-size: .9375rem; max-inline-size: 52ch; }
.hz-service-row__arrow { color: var(--hz-accent); font-size: 1.25rem; line-height: 1; }
.hz-service-row:hover { border-color: var(--hz-accent); }
.hz-service-row:hover .hz-service-row__name { color: var(--hz-accent); }

@media (max-width: 781px) {
  .hz-service-row { grid-template-columns: 1fr auto; }
  /* Der Pfeil gehört neben den Namen. Ohne feste Platzierung schiebt ihn die
     über beide Spalten laufende Beschreibung in eine dritte Zeile. */
  .hz-service-row__arrow { grid-row: 1; grid-column: 2; }
  .hz-service-row__text { grid-row: 2; grid-column: 1 / -1; }
}

/* --- Schwerpunktfläche Tuning -------------------------------------------
   Nahezu schwarz, asymmetrisch, wenig Dekoration. Der Kontrast zur übrigen
   Seite entsteht über Fläche und Typografie, nicht über Effekte. */

.hz-signature {
  background: #07090c;
  border-block: 1px solid #14181e;
}
/* Hier standen ein Zweispaltenraster, eine Ueberschriftengroesse und eine
   Bildregel aus der Zeit, als die Schwerpunktflaeche ein `core/cover` mit
   danebenstehendem Bild war. Das Raster wurde nie im Inhalt verwendet, und die
   Ueberschriftenregel hat mit `.hz-signature h2` die neue Regel
   `.hz-signature__title` ueberstimmt — die dort gesetzte Groesse, Zeilenhoehe
   und Sperrung waren wirkungslos. Entfernt statt ergaenzt. */

/* Aufzählung technischer Arbeiten, ohne Icon-Kästchen. */
.hz-marks { list-style: none; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; display: grid; gap: .85rem; }
.hz-marks li {
  position: relative;
  padding-inline-start: 1.6rem;
  color: var(--hz-muted);
}
.hz-marks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  inline-size: .6rem;
  block-size: 2px;
  background: var(--hz-accent);
}
.hz-marks strong { color: var(--hz-text); font-weight: 600; }

/* --- Bewertungen --------------------------------------------------------
   Drei Karten, keine Wand. Der Name steht unter dem Zitat, die Quelle wird
   benannt — Bewertungen ohne erkennbare Herkunft sind wertlos. */

.hz-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
@media (max-width: 900px) { .hz-reviews { grid-template-columns: 1fr; } }

.hz-review {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  background: var(--hz-surface);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-lg);
  padding: var(--wp--preset--spacing--50);
}
.hz-review__stars { color: var(--hz-accent-soft); letter-spacing: .18em; font-size: .95rem; }
.hz-review__text { margin: 0; color: var(--hz-text); font-size: 1rem; line-height: 1.6; }
.hz-review__meta { margin: auto 0 0; font-size: .8125rem; color: var(--hz-muted); }
.hz-review__meta strong { color: var(--hz-text); font-weight: 600; display: block; }

/* --- Abschlussfläche Kontakt -------------------------------------------- */

/* `line-height` steht hier nicht: Weiter unten setzt eine spätere Regel 1.06,
   und die gewinnt. Eine zweite Angabe an dieser Stelle wäre tot und würde beim
   nächsten Umbau jemanden in die Irre führen. */
.hz-closing h2 {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  letter-spacing: -.032em;
}
.hz-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: var(--wp--preset--spacing--50);
  margin-block-start: var(--wp--preset--spacing--60);
  padding-block-start: var(--wp--preset--spacing--50);
  border-block-start: 1px solid var(--hz-line);
}
.hz-contact-grid dt {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hz-accent);
  margin-block-end: .5rem;
}
.hz-contact-grid dd { margin: 0; color: var(--hz-text); line-height: 1.6; }
.hz-contact-grid a { text-decoration: none; }

/* --- Markenzeichen im Kopfbereich ---------------------------------------

   Bis zu dieser Phase lag keine Logodatei vor; hier stand eine typografische
   Wortmarke als Notlösung. Jetzt trägt der Kopfbereich das echte Zeichen:
   eine Fahrzeugsilhouette im Blau-Chrom-Verlauf über der Wortmarke.

   Signet und Wortmarke sind zwei Dateien auf derselben Zeichenfläche und liegen
   deckungsgleich übereinander. Das erlaubt den gestaffelten Aufbau beim ersten
   Laden, ohne das SVG in jede Seite einzubetten — als `img` bleibt es
   zwischenspeicherbar, und zwei Einbindungen auf einer Seite können sich nicht
   über gleichnamige Verlaufs-IDs gegenseitig überschreiben.

   Die Fläche ist über `aspect-ratio` und feste Höhe reserviert, bevor die
   Dateien geladen sind — der Aufbau darf das Layout nicht verschieben.
   ------------------------------------------------------------------------- */

/* Seitenverhältnisse der zugeschnittenen Fassungen: Sperrung 361,36 : 74,
   vollständiges Zeichen 361,36 : 92. */
.hz-brand {
  --hz-brand-h: 2.9rem;
  position: relative;
  display: block;
  flex: none;
  block-size: var(--hz-brand-h);
  inline-size: calc(var(--hz-brand-h) * 361.3567 / 74);
}
.hz-brand__signet,
.hz-brand__word {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* Aufbau beim ersten Laden: erst die Silhouette, dann die Wortmarke — in der
   Reihenfolge, in der das Auge das Zeichen ohnehin liest. */
@media (prefers-reduced-motion: no-preference) {
  .hz-brand__signet {
    animation: hz-wipe 620ms cubic-bezier(.22,.61,.36,1) both;
  }
  .hz-brand__word {
    animation: hz-wipe 520ms cubic-bezier(.22,.61,.36,1) 160ms both;
  }
  @keyframes hz-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }

  /* Beim Überfahren ein einzelner Lichtstreifen über das Zeichen. Kein Dauer-
     effekt: Er läuft einmal durch und ist danach wieder weg. */
  .hz-brand::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -40%;
    inline-size: 28%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent);
    opacity: 0;
    pointer-events: none;
  }
  .hz-brand:hover::after,
  .hz-brand:focus-visible::after {
    animation: hz-sheen 760ms ease-out;
  }
  @keyframes hz-sheen {
    0%   { opacity: 0; transform: translateX(0); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(520%); }
  }
}

.hz-brand:focus-visible { outline: 2px solid var(--hz-accent); outline-offset: 4px; border-radius: 2px; }

/* Im Fußbereich das vollständige Zeichen inklusive Beizeile — dort steht keine
   Kontaktleiste darüber, die sie wiederholen würde. */
.hz-footer .hz-brand {
  --hz-brand-h: 3.4rem;
  inline-size: calc(var(--hz-brand-h) * 361.3567 / 92);
}
/* Im Fußbereich kein Aufbau — dort ist das Zeichen Fußnote, nicht Auftritt. */
.hz-footer .hz-brand__signet,
.hz-footer .hz-brand__word { animation: none; }

@media (max-width: 781px) {
  .hz-brand { --hz-brand-h: 2.3rem; }
  .hz-footer .hz-brand { --hz-brand-h: 3rem; }
}

/* --- Wortumbruch in Überschriften ---------------------------------------
   Die weiter oben gesetzte Regel `overflow-wrap: break-word` galt auch für
   h1–h6. Auf schmalen Spalten hat sie deutsche Komposita mitten im Wort
   getrennt („Leistungsoptimi|erung"). Für Überschriften ist eine dritte Zeile
   immer besser als ein roher Bruch; nur wenn ein einzelnes Wort breiter ist
   als der Container, darf noch gebrochen werden. */

/* `break-word` bricht ein Wort nur dann, wenn es allein nicht in eine Zeile
   passt. Genau das ist hier gewollt: Ohne die Regel lief die Überschrift
   „Kostenvoranschlag für Ihr Tuning" auf 390 px 112 px über den Rand hinaus.
   Der frühere Fehlbruch („Leistungsoptimi|erung") kam nicht von dieser Regel,
   sondern von einer viel zu schmalen Spalte — die Ursache ist behoben, seit die
   Abschnitte randlos laufen. `hyphens: auto` greift zusätzlich, wo die
   Rendering-Engine ein deutsches Trennwörterbuch mitbringt. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}
h1, h2 { text-wrap: balance; }

/* --- Bilder -------------------------------------------------------------- */

.wp-block-image img { border-radius: var(--hz-radius-lg); }
.wp-block-image.alignfull img,
.wp-block-cover img { border-radius: 0; }

/* --- Bewegung ------------------------------------------------------------
   Die Reduced-Motion-Regeln fuer diese Komponenten stehen bewusst NICHT hier,
   sondern werden vom Theme inline im Kopfbereich ausgegeben (functions.php) —
   aus demselben Grund wie die uebrigen: WP Rockets "ungenutztes CSS entfernen"
   wertet Media-Feature-Zustaende beim Crawlen nicht aus. Eine zweite Fassung an
   dieser Stelle waere doppelte Pflege mit demselben Zweck. */

/* --- Feinschliff Runde 1 ------------------------------------------------- */

/* Fußbereich: Unterstreichung auf jedem Link macht die Spalten unruhig. Der
   Kontrastwechsel beim Überfahren reicht als Zustandsanzeige. */
.hz-footer a { text-decoration: none; }
.hz-footer a:hover,
.hz-footer a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

/* Kontaktzeile im Hero: Die Unterstreichung lief über das nachfolgende
   Leerzeichen hinaus und sah aus wie ein Strich hinter der Nummer. */
.hz-factline a { text-decoration: none; border-block-end: 1px solid rgba(255,255,255,.45); }
.hz-factline a:hover { border-color: var(--hz-accent); color: var(--hz-accent-hi); }

/* Wortmarke im Fußbereich hat eigenen Abstand, sonst klebt sie am Text. */

/* =========================================================================
   Bausteine der Leistungsseiten
   ========================================================================= */

/* --- Leistungsdetails ----------------------------------------------------
   Gleiche Zeilenlogik wie die Leistungsübersicht, aber ohne Verlinkung: Hier
   steht, was tatsächlich gemacht wird, nicht wohin es führt. */

.hz-detail-rows { display: grid; margin-block-start: var(--wp--preset--spacing--50); }
.hz-detail-row {
  display: grid;
  grid-template-columns: minmax(12rem, 17rem) 1fr;
  gap: .5rem 2.5rem;
  align-items: baseline;
  padding-block: var(--wp--preset--spacing--40);
  border-block-start: 1px solid var(--hz-line);
}
.hz-detail-row:last-child { border-block-end: 1px solid var(--hz-line); }
.hz-detail-row__name {
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--hz-text);
}
.hz-detail-row__text { color: var(--hz-muted); max-inline-size: 60ch; }
@media (max-width: 781px) {
  .hz-detail-row { grid-template-columns: 1fr; gap: .35rem; }
}

/* --- Fragen und Antworten -----------------------------------------------
   Die vorherige Fassung stand auf einer weißen Fläche mitten in einer sonst
   durchgehend dunklen Seite. Der Bruch war stärker als die Gliederung, die er
   erzeugen sollte. Jetzt eine eigene dunkle Fläche mit Trennlinien. */

.hz-faq { display: grid; margin-block-start: var(--wp--preset--spacing--50); max-inline-size: 60rem; }
.hz-faq details {
  border-block-start: 1px solid var(--hz-line);
  padding-block: var(--wp--preset--spacing--30);
}
.hz-faq details:last-of-type { border-block-end: 1px solid var(--hz-line); }
.hz-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
  padding-block: .55rem;
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--hz-text);
}
.hz-faq summary::-webkit-details-marker { display: none; }
.hz-faq summary::after {
  content: "+";
  color: var(--hz-accent);
  font-size: 1.4rem;
  line-height: 1;
  flex: none;
}
.hz-faq details[open] summary::after { content: "–"; }
.hz-faq summary:hover { color: var(--hz-accent); }
.hz-faq details > p,
.hz-faq details > div {
  margin-block: .35rem 0.9rem;
  color: var(--hz-muted);
  max-inline-size: 68ch;
}

/* --- Einzelne Kundenstimme ----------------------------------------------
   Auf den Leistungsseiten stand auf der Alt-Site achtmal derselbe
   Bewertungsblock. Hier trägt eine Stimme, die zur jeweiligen Leistung passt,
   plus ein Verweis auf die übrigen. */

.hz-quote {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  max-inline-size: 46rem;
  border-inline-start: 2px solid var(--hz-accent);
  padding-inline-start: var(--wp--preset--spacing--50);
}
.hz-quote blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  font-family: var(--wp--preset--font-family--hz-display);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--hz-text);
}
.hz-quote figcaption { font-size: .8125rem; color: var(--hz-muted); }
.hz-quote figcaption strong { color: var(--hz-text); font-weight: 600; display: block; }
/* Der Verweis auf die übrigen Bewertungen gehört optisch zum Zitat, nicht an
   den linken Seitenrand. */
.hz-quote + p { margin-inline-start: calc(var(--wp--preset--spacing--50) + 2px); }

/* --- Nachbarleistungen --------------------------------------------------- */

.hz-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-block-start: var(--wp--preset--spacing--50);
  padding-block-start: var(--wp--preset--spacing--40);
  border-block-start: 1px solid var(--hz-line);
  list-style: none;
  padding-inline-start: 0;
}
.hz-siblings a {
  display: inline-block;
  padding: .45rem .95rem;
  border: 1px solid var(--hz-line);
  border-radius: 999px;
  font-size: .875rem;
  color: var(--hz-muted);
  text-decoration: none;
}
.hz-siblings a:hover { border-color: var(--hz-accent); color: var(--hz-accent); }

/* --- Titelband ohne Beitragsbild ----------------------------------------
   Rechtstexte tragen kein Motiv. Ohne eigene Fläche stünde ihr Titel sonst
   direkt auf dem Grund und der Kopfbereich klebte am Fließtext. */

.hz-stage--page:not(:has(.wp-block-cover__image-background)) {
  background: linear-gradient(180deg, var(--hz-surface) 0%, var(--hz-ground) 100%);
  min-block-size: clamp(13rem, 26vh, 18rem);
}

/* --- Linksbündigkeit gegen die Layoutregel des Blockeditors ---------------
   Der constrained-Layout-Container setzt für jedes Kind
   `margin-left: auto !important; margin-right: auto !important`. Komponenten
   mit eigener Maximalbreite — Fragenliste und Kundenstimme — landen dadurch
   mittig, während die Überschrift darüber am linken Rand steht. Das ist die
   eine Stelle, an der `!important` nötig ist, weil dagegen keine Spezifität
   hilft. */
.hz-faq,
.hz-quote,
.hz-lead,
.hz-tel,
.hz-region .wp-block-heading {
  /* Erste Fassung setzte hier schlicht `margin-inline-start: 0`. Das ruecht das
     Element an den Rand des Elternkastens — und der ist um das seitliche
     Innenmass breiter als die Textspalte. Ergebnis: Fragenliste, Zitat und Lead
     standen 36 px weiter links als jede Ueberschrift darueber, auf jeder
     Unterseite. Aufgefallen ist es erst in der unabhaengigen Bildpruefung.

     Der Ausdruck rechnet denselben Einzug aus, den der constrained-Container
     seinen ungedeckelten Kindern gibt: die halbe Differenz zwischen der Breite
     des Elternkastens und der Inhaltsbreite. Ist der Elternkasten schmaler als
     1320 px — also auf jedem Viewport unter rund 1400 px —, ergibt `max()`
     null, und alles steht buendig am linken Rand wie der uebrige Inhalt. */
  --hz-spalte: 1320px;
  margin-inline-start: max(0px, (100% - var(--hz-spalte)) / 2) !important;
  margin-inline-end: auto !important;
}
/* Der Verweis unter dem Zitat richtet sich an dessen Textkante aus, nicht am
   Seitenrand. */
.hz-quote + p {
  margin-inline-start: calc(var(--wp--preset--spacing--50) + 2px) !important;
  margin-inline-end: auto !important;
}

/* =========================================================================
   Ratgeber
   ========================================================================= */

/* --- Beitragsraster ------------------------------------------------------ */

.hz-postgrid .wp-block-post-template {
  gap: var(--wp--preset--spacing--50);
}
/* Die Karte war ein Raster mit `align-content: start`. Der freie Platz einer
   ungleich hohen Karte liegt damit hinter der letzten Zeile, und `margin-block-
   start: auto` am Abschluss kann ihn nicht aufnehmen — im Raster stand der
   Hinweis „Beitrag lesen" je nach Titellaenge auf drei verschiedenen Hoehen.
   Als Spalte nimmt der Abschluss den Rest auf und alle Karten schliessen
   buendig ab. */
.hz-post-card { display: flex; flex-direction: column; gap: .6rem; }
.hz-post-card .wp-block-post-featured-image { margin-block-end: .5rem; }
.hz-post-card .wp-block-post-featured-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.hz-post-card .wp-block-post-title { margin: 0; }
.hz-post-card .wp-block-post-title a { color: var(--hz-text); text-decoration: none; }
.hz-post-card .wp-block-post-title a:hover { color: var(--hz-accent); }
.hz-post-card .wp-block-post-date { margin: 0; }
.hz-post-card .wp-block-post-excerpt { margin: 0; }
.hz-post-card .wp-block-post-excerpt__excerpt { margin: 0; }

/* Der Zustandswechsel gehört auf die ganze Karte, nicht nur auf den Titel. */
.hz-post-card:hover .wp-block-post-title a { color: var(--hz-accent); }
.hz-post-card .wp-block-post-featured-image img { transition: opacity .2s ease; }
.hz-post-card:hover .wp-block-post-featured-image img { opacity: .82; }

/* --- Seitenwechsel ------------------------------------------------------- */

.hz-pagination {
  margin-block-start: var(--wp--preset--spacing--70);
  padding-block-start: var(--wp--preset--spacing--40);
  border-block-start: 1px solid var(--hz-line);
  font-size: .9375rem;
}
.hz-pagination a, .hz-pagination span { text-decoration: none; }
.hz-pagination .page-numbers { padding-inline: .45rem; color: var(--hz-muted); }
.hz-pagination .page-numbers.current { color: var(--hz-text); font-weight: 700; }
.hz-pagination a:hover { color: var(--hz-accent); }

/* --- Beitragstext --------------------------------------------------------
   Lesebreite und Rhythmus. Ohne eigene Abstände laufen H2 und Absatz im
   Artikel gleich weit auseinander und die Gliederung verschwindet. */

.hz-article .wp-block-post-content > * { margin-block: 0 1.15em; }
.hz-article .wp-block-post-content > :is(h2, h3) { margin-block-start: 2.1em; }
.hz-article .wp-block-post-content > h2 { font-size: var(--wp--preset--font-size--xl); }
.hz-article .wp-block-post-content > h3 { font-size: var(--wp--preset--font-size--lg); }
.hz-article .wp-block-post-content > p { font-size: 1.0625rem; line-height: 1.75; }
.hz-article .wp-block-post-content > ul,
.hz-article .wp-block-post-content > ol { color: var(--hz-muted); padding-inline-start: 1.3rem; }
.hz-article .wp-block-post-content li { margin-block-end: .5rem; }

/* Die Layoutregel von WordPress traegt genau einen Klassenselektor; zwei
   Klassen gewinnen die Kaskade ohne `!important`. */
@media (max-width: 900px) {
  .hz-postgrid .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hz-postgrid .wp-block-post-template { grid-template-columns: 1fr; }
}

/* --- Stellenzeile im Karrierebereich -------------------------------------
   Eine Kachel pro Stelle wirkt bei einer einzigen offenen Stelle verloren.
   Die Zeile mit Trennlinie trägt eine wie zwanzig. */

.hz-job-row {
  display: grid;
  gap: .4rem;
  padding-block: var(--wp--preset--spacing--50);
  border-block-start: 1px solid var(--hz-line);
}
.wp-block-post-template > li:last-child .hz-job-row { border-block-end: 1px solid var(--hz-line); }
.hz-job-row .wp-block-post-title { margin: 0; }
.hz-job-row .wp-block-post-title a { color: var(--hz-text); text-decoration: none; }
.hz-job-row .wp-block-post-title a:hover { color: var(--hz-accent); }
.hz-job-row .wp-block-post-excerpt { margin: 0; max-inline-size: 62ch; }
.hz-job-row .wp-block-post-excerpt__excerpt { margin: 0; }

/* Der Karriere-Kopfbereich verlinkt zurück auf die Übersicht. */
.hz-stage .hz-eyebrow a { color: inherit; text-decoration: none; }
.hz-stage .hz-eyebrow a:hover { color: var(--hz-text); }
.hz-stage .hz-job-meta { margin-block-start: var(--wp--preset--spacing--30); }

/* --- Doppeltes Innenmaß in der Bildbühne ---------------------------------
   Der Textcontainer der Bühne ist eine `constrained`-Gruppe. WordPress gibt
   ihr wegen `useRootPaddingAwareAlignments` selbst ein seitliches Innenmaß —
   zusätzlich zu dem, das die Bühne schon setzt. Auf 390 px stand die
   Überschrift dadurch rund 24 px weiter rechts als der Text der folgenden
   Abschnitte, was als schiefe Kante auffällt. */
.hz-stage .hz-stage__text.has-global-padding {
  padding-inline: 0;
}

/* --- Telefon im klebenden Kopfbereich ------------------------------------
   Auf Mobilgeräten sind die Leistungsseiten 7000 px und mehr lang. Die
   Telefonnummer stand bisher nur in der Kontaktleiste ganz oben und im
   Abschluss ganz unten — beim Lesen der Leistungsbeschreibung, also genau in
   dem Moment, in dem der Anrufimpuls entsteht, war sie nicht im Bild.

   Auf dem Desktop steht die Nummer weiterhin in der Kontaktleiste; dort wäre
   eine zweite Schaltfläche daneben nur Wiederholung. */

.hz-header-call {
  margin: 0;
  display: none;
}
.hz-header-call a {
  display: inline-block;
  padding: .4rem .85rem;
  border: 1px solid var(--hz-line-strong);
  border-radius: var(--hz-radius);
  color: var(--hz-text);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 600;
  white-space: nowrap;
}
.hz-header-call a:hover,
.hz-header-call a:focus-visible { border-color: var(--hz-accent); color: var(--hz-accent); }

@media (max-width: 781px) {
  .hz-header-call { display: block; }
  /* Die Kontaktleiste darüber scrollt weg; der Kopfbereich bleibt kleben und
     trägt die Nummer dann mit. */
  .hz-topbar { font-size: .8125rem; }
}

/* --- Feinschliff aus dem unabhängigen visuellen Review --------------------- */

/* Die Beschreibungsspalte der Leistungs- und Detailzeilen endete bei rund
   740 px, während der Pfeil allein bei 1345 px stand — auf 1440 px lag knapp
   die Hälfte der Zeile brach. Das Raster verteilt jetzt Titel, Beschreibung und
   Pfeil über die volle Breite. */
.hz-service-row { grid-template-columns: minmax(11rem, 3fr) 7fr auto; }
.hz-service-row__text { max-inline-size: none; }
.hz-detail-row { grid-template-columns: minmax(12rem, 3fr) 7fr; }
.hz-detail-row__text { max-inline-size: none; }

/* Die Mobil-Regeln stehen weiter oben in der Datei und verlieren gegen diese
   spaeteren Deklarationen. Ohne die Wiederholung hier bleibt die erste Spalte
   auf 390 px bei 12 rem stehen und die Zeile laeuft ueber den Rand hinaus —
   gemessen: scrollWidth 425 bei 390 px Viewport. */
@media (max-width: 781px) {
  .hz-service-row { grid-template-columns: 1fr auto; }
  .hz-detail-row { grid-template-columns: 1fr; }
}

/* Die Fragenliste war je nach Seite 960 oder 1320 px breit, ohne erkennbaren
   Grund — die Breite hing daran, ob die Antworten kurz genug für 60 rem waren.
   Jetzt überall dieselbe Lesebreite. */
.hz-faq { max-inline-size: 64rem; }
.hz-faq details > p { max-inline-size: 74ch; }

/* Die Stellenzeile trug keine erkennbare Verlinkung: Titel und Auszug standen
   ohne Hinweis darauf, dass die Zeile anklickbar ist. */
.hz-job-row { position: relative; }
.hz-job-row::after {
  content: "Zur Stellenanzeige →";
  display: block;
  margin-block-start: .9rem;
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hz-accent);
}
.hz-job-row:hover::after { color: var(--hz-accent-hi); }

/* Abschlussüberschriften standen auf `display` und waren damit größer als jede
   H2 der Seite — die Seite rief am lautesten dort, wo sie um einen Anruf bittet.
   Die Größe kommt jetzt aus dem Markup (xxl); hier bleibt nur die Zeilenführung. */
.hz-closing h2 { line-height: 1.06; }

/* Blogkarten trugen keine erkennbare Verlinkung: Titel und Auszug standen ohne
   Hinweis darauf, dass die Karte irgendwohin führt. */
.hz-post-card .hz-readmore {
  margin-block-start: auto;
  padding-block-start: .6rem;
  border: 0;
  padding-inline: 0;
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hz-accent);
  text-decoration: none;
}
.hz-post-card .hz-readmore::after { content: " →"; }
.hz-post-card:hover .hz-readmore { color: var(--hz-accent-hi); }

/* =========================================================================
   VISUELLER NEUAUFBAU — Automotive

   Anlass: Der Auftraggeber hat den vorherigen Auftritt als „generischer AI
   Slop" abgelehnt und ausdrücklich mehr Nähe zur Alt-Site und mehr Tuning
   verlangt. Die Bausteine hier ersetzen die zurückhaltende Fassung, sie
   ergänzen sie nicht.

   Drei Entscheidungen tragen den Unterschied:
   1. Fläche statt Kachel — der Rhythmus entsteht aus vollflächigen Bildern und
      einer satten Farbfläche, nicht aus gleich großen Kästchen.
   2. Bild und Wort teilen sich eine Fläche, statt nebeneinanderzustehen.
   3. Das Signet aus dem Logo ist das grafische System, nicht ein Zierrat.
   ========================================================================= */

/* --- Bildbühne ------------------------------------------------------------
   Das Fahrzeug sitzt rechts und ist am Rand angeschnitten; links bleibt eine
   dunkle, bildarme Zone für die Ansprache. Ein mittig stehendes, vollständiges
   Auto liest sich als Beleg — ein angeschnittenes als Aussage. */

.hz-stage--auto.wp-block-cover {
  min-block-size: clamp(34rem, 86vh, 52rem);
  align-items: center;
}
.hz-stage--auto.wp-block-cover::before {
  background:
    linear-gradient(90deg, rgba(7,9,12,.97) 0%, rgba(7,9,12,.80) 34%, rgba(7,9,12,.22) 66%, rgba(7,9,12,.05) 100%),
    linear-gradient(180deg, rgba(7,9,12,.65) 0%, transparent 26%, rgba(7,9,12,.75) 100%);
}
.hz-stage--auto .wp-block-cover__image-background { object-position: 64% 52%; }

/* Das Signet als Wasserzeichen hinter der Überschrift. Sichtbar genug, um als
   Absicht zu lesen, zurückhaltend genug, um den Text nicht zu stören — im
   ersten Entwurf lag es bei 7 % Deckkraft und war schlicht nicht da. */
/* Wasserzeichen der Fahrzeugsilhouette.
   Drei Fassungen liegen hinter dieser Regel. Die erste lag mittig in der
   Textspalte und lief quer durch das Wort „PERFORMANCE". Die zweite lief oben
   und links aus dem Bild — ruhiger, aber so klein und so grau, dass der
   unabhaengige Kritiker sie zweimal hintereinander als „unsichtbar" gemeldet
   hat. Seine Forderung, dreimal gestellt, lautete: groesser als der Viewport,
   oben angeschnitten, im Markenblau, 12 bis 15 Prozent.

   Umgesetzt als Maske statt als Bild. Das Zeichen traegt im Original einen
   Verlauf; ein `<img>` liesse sich nicht einfaerben, ohne den Verlauf zu
   verfaelschen. Die Maske nimmt nur die Form und faerbt sie mit der Markenfarbe
   — dieselbe Silhouette, aber als Grafik und nicht als zweites Logo. */
.hz-stage--auto::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset-inline-start: -20%;
  inset-block-start: -26%;
  inline-size: 132%;
  /* Das Seitenverhaeltnis muss das der viewBox sein, nicht das des sichtbaren
     Zeichens: `contain` rechnet gegen die viewBox, und mit 361:74 waere die
     Grafik in die Hoehe gestaucht statt formatfuellend. */
  aspect-ratio: 361.3567 / 133.3578;
  background: var(--hz-accent);
  -webkit-mask: url("assets/brand/hz-signet-mono.svg") no-repeat center / contain;
          mask: url("assets/brand/hz-signet-mono.svg") no-repeat center / contain;
  opacity: .14;
  pointer-events: none;
}
.hz-stage--auto .wp-block-cover__inner-container { padding-block: clamp(3rem, 8vw, 6rem); }
/* Die Textspalte der Bühne ist breiter als sonst, damit die versale Zeile
   nicht umbrechen muss. */
/* Die Textspalte war auf 52 rem gerechnet, damit „PERFORMANCE" bei 5,6 rem in
   eine Zeile passt. Der Entwurf, den der Auftraggeber gesehen hat, setzt die
   Zeile aber rund 900 px breit — bei 0,64 em je Zeichen sind das 7,6 rem, und
   dafuer braucht die Spalte 74 rem. Kleiner gesetzt verliert die Buehne genau
   die Wucht, um die es in dieser Phase geht. */
.hz-stage--auto .hz-stage__text { max-inline-size: 74rem; }

/* Nachgemessen am gerenderten Bild: „PERFORMANCE" belegt in Archivo Bold
   versal 0,64 em je Zeichen, also 7,05 em Laufweite fuer elf Zeichen. Damit die
   Zeile in jeder Stufe ungebrochen bleibt, muss die Spalte mindestens das
   Siebenfache der Schriftgroesse breit sein — bei 7,6 rem sind das 53,2 rem,
   die 74 rem der Spalte lassen Luft. Erst dadurch darf `overflow-wrap: normal`
   stehen, ohne einen Ueberlauf zu riskieren. */
.hz-hero-title {
  font-size: clamp(2.5rem, 8.6vw, 7.6rem) !important;
  line-height: .94;
  letter-spacing: -.04em;
  text-transform: uppercase;
  max-inline-size: 16ch;
  overflow-wrap: normal;
  hyphens: none;
}
.hz-hero-title em { font-style: normal; color: var(--hz-accent-hi); }

/* --- Laufband -------------------------------------------------------------
   Kein Zierstreifen: Es benennt die sechs Bereiche und trennt die Bühne vom
   Inhalt mit einem harten Farbschlag. */

.hz-ticker {
  background: var(--hz-accent);
  color: var(--hz-on-accent);
  overflow: hidden;
}
.hz-ticker__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 2.4rem;
  padding-block: .8rem;
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hz-ticker__row span { white-space: nowrap; }

/* Auf schmalen Viewports brach die Zeile in fuenf zentrierte Reihen um und sah
   damit aus wie eine Schlagwortwolke — genau die Anmutung, die dieser Umbau
   loswerden soll. Stattdessen bleibt es eine Zeile, die seitlich weiterlaeuft;
   die ausgeblendete rechte Kante zeigt, dass da noch etwas kommt. Kein
   Automatiklauf, damit nichts gegen prefers-reduced-motion arbeitet. */
@media (max-width: 781px) {
  .hz-ticker {
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
            mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .hz-ticker__row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1.8rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-inline-end: 3rem;
  }
  .hz-ticker__row::-webkit-scrollbar { display: none; }
}

/* --- Leistungen als Zeilen ------------------------------------------------
   Die Nummerierung bildet den Weg ab, den ein Fahrzeug durch den Betrieb
   nimmt. Sie ist damit Information, kein Dekor. */

.hz-lines { border-block-start: 1px solid #1b2029; margin-block-start: var(--wp--preset--spacing--60); }
.hz-line {
  display: grid;
  /* Vier Spalten statt drei: Nummer, Name, Beschreibung, Pfeil — alles auf
     einer Grundlinie. Vorher standen Name und Beschreibung untereinander, was
     jede Zeile rund 150 px hoch machte; sechs davon waren ein 900 px langes
     Loch zwischen zwei Bildern. Nebeneinander liest sich dieselbe Information
     wie eine technische Liste und nicht wie sechs kleine Absätze. */
  /* Breite der Namensspalte, hergeleitet statt geraten. Jede Zeile ist ein
     eigenes Grid — `max-content` hat deshalb pro Zeile ein anderes Maß ergeben
     und die Beschreibungen links ausgefranst. Ein festes Maß wiederum passt
     immer nur zu einer Schriftgröße: Bei 15 rem ragte „KLIMASERVICE" in die
     Beschreibung.

     Deshalb an die Schriftgröße gekoppelt. Versales Archivo Bold belegt
     gemessen rund 0,71 em je Zeichen; das längste Wort hat zwölf Zeichen, also
     8,5 em. 8,8 em geben etwas Luft und wachsen mit jeder Stufe der
     clamp-Funktion mit. */
  /* Fuenf Spalten: Zeichen, Nummer, Name, Beschreibung, Pfeil. Das Zeichen
     kam mit dem Bewegungssystem dazu und steht vor der Nummer — es benennt
     den Bereich, die Nummer ordnet ihn ein. */
  grid-template-columns: 1.75rem 2.9rem minmax(9rem, calc(8.8 * clamp(1.5rem, 3.2vw, 2.4rem))) 1fr 2rem;
  gap: .2rem 1.4rem;
  align-items: baseline;
  padding-block: var(--wp--preset--spacing--30);
  border-block-end: 1px solid #1b2029;
  text-decoration: none;
  color: inherit;
  transition: background-color .18s ease;
}
.hz-line:hover, .hz-line:focus-visible { background: #10141b; }
.hz-line__name {
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--hz-text);
}
.hz-line:hover .hz-line__name { color: var(--hz-accent-hi); }
.hz-line__text {
  /* Die Auszeichnung listet Nummer, Name, Pfeil, Text — die Spalten weichen
     bewusst von dieser Reihenfolge ab, damit der Pfeil im Quelltext direkt
     hinter dem Namen steht und Screenreader ihn dort vorfinden. */
  grid-column: 4;
  /* `grid-row: 1` ist Pflicht, nicht Kosmetik: Im Quelltext steht der Pfeil vor
     dem Text. Die automatische Platzierung arbeitet die Kinder der Reihe nach
     ab, ist bei Spalte 4 angekommen und setzt den Text deshalb in Zeile 2 —
     sichtbar als Versatz von rund 12 px gegen die Grundlinie des Namens. */
  grid-row: 1;
  color: var(--hz-muted);
  font-size: .9375rem;
  max-inline-size: 62ch;
}
/* Vier Spalten seit dem Wegfall der Ziffer: Zeichen, Name, Text, Pfeil.
   Die endgültige Spaltenzuweisung steht weiter unten im Abschnitt zur
   Nummernentfernung; hier bleibt nur, was sie nicht überschreibt. */
.hz-line__icon { grid-column: 1; grid-row: 1; align-self: center; display: block; }
.hz-line__arrow {
  grid-row: 1;
  justify-self: end;
  font-size: 1.35rem;
  color: var(--hz-accent);
  line-height: 1;
}
/* Weg und Uebergang des Pfeils stehen im Bewegungsabschnitt weiter unten.
   Hier standen sie zusaetzlich mit `transform: translateX(.3rem)`: Beide
   Eigenschaften wirkten nebeneinander, der Pfeil lief also 0,8 rem statt
   0,5 rem — und weil der neue Uebergang nur `translate` erfasst, sprang der
   `transform`-Anteil ohne Uebergang. Sichtbar als zweistufiger Ruck. */

@media (max-width: 781px) {
  /* Auf schmalen Viewports passen Name und Beschreibung nicht nebeneinander;
     dort wieder gestapelt, aber mit engerem Abstand als zuvor. */
  /* Die Spalten selbst stehen weiter unten im Abschnitt zur Entfernung der
     Ordnungszahlen; hier bleibt nur, was dort nicht noch einmal vorkommt. */
  .hz-line { gap: .15rem .7rem; }
  .hz-line__icon { grid-column: 1; grid-row: 1; }
  .hz-line__text { margin-block-start: .2rem; }
  .hz-icon { inline-size: 1.5rem; block-size: 1.5rem; }
}

/* --- Vollflächiger Bildmoment --------------------------------------------
   Überschrift und Text liegen auf dem Foto, nicht daneben. Genau ein solcher
   Moment je Seite — sonst nutzt sich der Effekt ab. */

.hz-full.wp-block-cover {
  min-block-size: clamp(30rem, 78vh, 46rem);
  align-items: flex-end;
  padding: 0;
}
.hz-full.wp-block-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7,9,12,.55) 0%, rgba(7,9,12,.12) 32%, rgba(7,9,12,.97) 100%);
}
.hz-full .wp-block-cover__inner-container {
  z-index: 2;
  inline-size: 100%;
  max-inline-size: 1320px;
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--40);
  padding-block-end: clamp(2.5rem, 6vw, 5rem);
}
.hz-full h2 {
  font-size: clamp(2.4rem, 6.4vw, 5rem);
  line-height: .94;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-shadow: 0 2px 28px rgba(0,0,0,.6);
}

/* Der Verlauf war fuer den Desktop gerechnet, wo der Text im unteren Drittel
   sitzt. Auf schmalen Viewports fuellt derselbe Text die ganze Flaeche, und die
   Beizeile „Schwerpunkt Tuning" landete auf einer Spiegelung im Lack — im
   Screenshot war sie nicht mehr lesbar. Deshalb dort ein fast durchgehender
   Schleier statt eines Verlaufs, plus Schattenkante an den kleinen Graden. */
@media (max-width: 781px) {
  .hz-full.wp-block-cover::before {
    background: linear-gradient(180deg, rgba(7,9,12,.62) 0%, rgba(7,9,12,.66) 30%, rgba(7,9,12,.97) 100%);
  }
}
.hz-full .hz-eyebrow,
.hz-full li,
.hz-full p { text-shadow: 0 1px 12px rgba(0,0,0,.75); }

/* --- Bildstrecke „Aus der Halle" -----------------------------------------
   Vier Ausschnitte in ungleichen Höhen. Gleich hohe Kacheln wären wieder ein
   Raster; der Versatz erzeugt den Rhythmus, den der Abschnitt tragen soll. */

.hz-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--30); margin-block-start: var(--wp--preset--spacing--50); }
.hz-strip figure { margin: 0; }
.hz-strip img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 4px; display: block; }
@media (max-width: 781px) {
  /* Auf zwei Spalten trifft in jeder Reihe ein 3:4- auf ein 4:5-Bild; die
     Oberkanten der zweiten Reihe standen dadurch 31 px versetzt. Der Versatz
     ist auf dem Desktop gewollt — dort stehen alle vier nebeneinander und
     erzeugen den Rhythmus. Nebeneinander in einer Zweierreihe liest er sich
     als Fehler. */
  .hz-strip figure img { aspect-ratio: 3 / 4 !important; }
}
.hz-strip figure:nth-child(1) img { aspect-ratio: 3 / 4; }
.hz-strip figure:nth-child(2) img { aspect-ratio: 4 / 5; }
.hz-strip figure:nth-child(3) img { aspect-ratio: 3 / 4; }
.hz-strip figure:nth-child(4) img { aspect-ratio: 4 / 5; }
.hz-strip figure:nth-child(2) { align-self: end; }
.hz-strip figure:nth-child(4) { align-self: end; }
@media (max-width: 900px) { .hz-strip { grid-template-columns: 1fr 1fr; } }

/* --- Kontaktfläche --------------------------------------------------------
   Satte Markenfarbe als Schlusstakt, darunter sehr dunkel ein Fahrzeugmotiv.
   Die Beschriftung trägt hier Deep Blue: Weiß auf #268DEE erreicht nur 3,4:1
   und ist für Fließtext unzulässig. */

.hz-contact-block {
  position: relative;
  background: var(--hz-accent);
  color: #06121f;
  overflow: hidden;
  isolation: isolate;
}
.hz-contact-block__bg {
  position: absolute;
  inset: 0;
  /* Der constrained-Container gibt jedem Kind `max-width: 1320px` und
     `margin-inline: auto` — auch diesem absolut gesetzten Bild. Mit `inset: 0`
     wird daraus eine zentrierte Flaeche von 1320 px, und rings um das Motiv lag
     ein 60 px breiter Rahmen aus flachem Blau. Das Bild soll die ganze Flaeche
     decken, deshalb hier beides zurueckgenommen. */
  max-inline-size: none;
  margin-inline: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: .18;
  mix-blend-mode: multiply;
}
/* Auf dem Desktop deckt das Motiv die ganze Flaeche und das Fahrzeug ist im
   Blau erkennbar. Auf 390 px schneidet `cover` denselben Ausschnitt auf einen
   schmalen Mittelstreifen zusammen — im Screenshot blieb eine leere blaue
   Flaeche von rund 700 px Hoehe. Dort steht das Motiv deshalb als Band im
   unteren Drittel, wo unter den Kontaktdaten ohnehin Platz ist. */
@media (max-width: 781px) {
  .hz-contact-block__bg {
    inset-block-start: auto;
    block-size: 46%;
    opacity: .28;
    object-position: 50% 40%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%);
            mask-image: linear-gradient(180deg, transparent, #000 30%);
  }
}
.hz-contact-block :is(h2, p, dt, dd, a) { color: #06121f; }
.hz-contact-block h2 {
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  text-transform: uppercase;
  letter-spacing: -.032em;
  line-height: .98;
}
/* Ohne Deckkraftabsenkung. Die Abstufung trägt hier ohnehin die Typografie:
   12 px, 700, versal, weit gesperrt. Die 0,72 kamen aus der Zeit, als diese
   Fläche dunkel war; auf dem Blau drückten sie den Kontrast von 5,5 auf 3,68
   und damit unter die Schwelle. */
.hz-contact-block .hz-eyebrow { color: #06121f; }
.hz-tel {
  display: inline-block;
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.6vw, 4.2rem);
  letter-spacing: -.035em;
  line-height: 1;
  text-decoration: none;
  margin-block: .8rem 1.4rem;
  border-block-end: 3px solid rgba(6,18,31,.35);
}
.hz-tel:hover, .hz-tel:focus-visible { border-block-end-color: #06121f; }
.hz-contact-block .hz-contact-grid { border-block-start-color: rgba(6,18,31,.28); }
/* Dasselbe für die Beschriftungen des Rasters: 0,68 ergaben 3,43 zu 1. */
.hz-contact-block .hz-contact-grid dt { color: #06121f; }
/* Der Schalter stand mit `.hz-contact-block .wp-block-button__link` (0,2,0)
   gegen die allgemeine Regel `.wp-block-button:not(.is-style-outline)
   .wp-block-button__link` (0,3,0) weiter oben in dieser Datei — und verlor.
   Ergebnis im Screenshot: blauer Schalter auf blauer Flaeche, also gar kein
   sichtbarer Schalter, ausgerechnet beim wichtigsten Aufruf der Seite.
   Deshalb hier dieselbe Selektorform, damit die Reihenfolge entscheidet. */
.hz-contact-block .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: #06121f;
  color: #f2f5f8;
}
.hz-contact-block .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: #0e1116;
  color: #fff;
}

/* --- Bewertungen auf dunkler Fläche mit Bildanker ------------------------- */

.hz-quotes-anchor { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.hz-quotes-anchor img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 6px; aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .hz-quotes-anchor { grid-template-columns: 1fr; } .hz-quotes-anchor img { aspect-ratio: 16 / 10; } }

/* --- Bewegung ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hz-line { transition: none; }
}

/* --- Kennzahlenleiste unter der Bühne ------------------------------------
   Die Alt-Site trug an dieser Stelle eine Karte mit „20+ Jahre" und
   „3000+ Kunden". Beides ist unbelegt und bleibt draußen. Was hier steht, ist
   entweder auf den eigenen Fotos nachzählbar oder vom Auftraggeber bestätigt. */

.hz-facts {
  display: grid;
  /* Drei gleich breite Spalten liessen „Mo-Fr 09:00-17:00 Uhr" umbrechen.
     max-content gibt jeder Zelle genau ihre Breite; zusammen bleiben sie unter
     den 52 rem der Textspalte. */
  grid-template-columns: repeat(3, max-content);
  justify-content: start;
  margin-block-start: var(--wp--preset--spacing--50);
  border-block: 1px solid rgba(255,255,255,.16);
}
.hz-facts div {
  padding: .9rem 1.4rem;
  border-inline-start: 1px solid rgba(255,255,255,.16);
}
.hz-facts div:first-child { padding-inline-start: 0; border-inline-start: 0; }
.hz-facts b {
  display: block;
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.05;
  color: #fff;
}
.hz-facts span { font-size: .8125rem; color: #cfd9e4; }
/* Unter 600 px stehen drei Spalten nicht mehr nebeneinander, ohne dass
   „Kfz-Meisterbetrieb" umbricht. Dann untereinander mit Trennlinien statt
   Trennstrichen — die Leiste bleibt eine Leiste, wird nur hochkant. */
@media (max-width: 860px) {
  .hz-facts { grid-template-columns: 1fr; }
  .hz-facts div {
    padding: .7rem 0;
    border-inline-start: 0;
    border-block-start: 1px solid rgba(255,255,255,.12);
  }
  .hz-facts div:first-child { border-block-start: 0; }
  .hz-facts b { font-size: 1.1rem; }
}

/* --- Die eigene Halle -----------------------------------------------------
   Der unabhängige visuelle Reviewer hat den Entwurf mit 7 von 10 bewertet und
   als ersten Grund gegen eine höhere Note genannt: „kein einziges Bild aus
   diesem Betrieb". Das trifft zu — alle Automotive-Motive sind erzeugt.

   Diese Sektion zeigt ausschließlich die tatsächlichen Aufnahmen aus der Halle
   in Zirndorf. Sie sind technisch schwächer als die erzeugten Motive, und
   genau deshalb stehen sie hier: Sie sind die einzigen Bilder, die belegen,
   dass es diesen Betrieb gibt. Der Begleitsatz sagt das ausdrücklich. */

.hz-real { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--wp--preset--spacing--30); margin-block-start: var(--wp--preset--spacing--50); }
.hz-real__side { display: grid; gap: var(--wp--preset--spacing--30); }
.hz-real figure { margin: 0; position: relative; }
.hz-real img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 4px; display: block; }
.hz-real__main img { aspect-ratio: 16 / 11; }
.hz-real__side img { aspect-ratio: 16 / 9; }
.hz-real figcaption {
  position: absolute;
  inset-block-end: 0; inset-inline: 0;
  padding: 2.4rem 1.1rem .85rem;
  font-size: .8125rem;
  color: #dbe3ec;
  background: linear-gradient(180deg, rgba(7,9,12,0) 0%, rgba(7,9,12,.72) 45%, rgba(7,9,12,.94) 100%);
  border-end-start-radius: 4px; border-end-end-radius: 4px;
}
@media (max-width: 781px) { .hz-real { grid-template-columns: 1fr; } }

/* ==========================================================================
   RUNDE 3 — Leistungsseiten einzeln gestalten
   ==========================================================================

   Befund der Bilderprüfung: Die sechs Leistungsseiten hatten dasselbe
   Klassenhistogramm, dieselbe Abschnittsfolge und dieselbe Bühne — sechs
   Ausgaben eines Generators, unterschieden nur durch das Beitragsbild. Genau
   das nennt der Auftrag unter Punkt 29 als Fehler.

   Die Unterscheidung läuft über die Klasse `hz-page-<slug>` am `body`, die das
   Plugin setzt. Sie ist an den Slug gebunden, nicht an eine Beitrags-ID, und
   übersteht damit einen Neuaufbau der Instanz.

   Jede Bühne hat einen Grund, so auszusehen, wie sie aussieht — keine sechs
   beliebigen Varianten:
     Tuning        laut und hoch, das einzige emotionale Motiv der Seite
     Reparatur     harte schwarze Fläche neben dem Foto, Werkstatt statt Effekt
     Inspektion    Titel auf einem schwarzen Band, wie ein Prüfeintrag
     Klimaservice  kühl getönt, weil das Thema Kälte ist
     Reifen        Bild tief angeschnitten, damit das Rad im Bild bleibt
     Gutachten     heller Grund — anderes Geschäft, anderer Ton
   ------------------------------------------------------------------------ */

/* Gemeinsame Grundlage: Die Bühnen der Unterseiten waren mit 18 bis 25 rem zu
   niedrig, um zu tragen, und die Überschrift stand in gemischter Schreibung
   ohne Gewicht. */
.hz-stage--page.wp-block-cover { min-block-size: clamp(23rem, 52vh, 33rem); }
.hz-stage--page h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: .95;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.hz-stage--page .hz-lead { max-inline-size: 46ch; }

/* --- Tuning: das lauteste Motiv der Seite -------------------------------- */
.hz-page-tuning .hz-stage--page.wp-block-cover { min-block-size: clamp(28rem, 66vh, 42rem); }
.hz-page-tuning .hz-stage--page .wp-block-cover__image-background { object-position: 50% 45%; }
.hz-page-tuning .hz-stage--page h1 { font-size: clamp(2.8rem, 8vw, 6rem); }
/* Ein harter blauer Strich über der Zeile statt einer Beizeile: Die Bühne holt
   ihren Text aus Titel und Textauszug, ein zusätzliches Wort gäbe es dort nur
   als CSS-`content` — und generierter Text gehört nicht in die Gestaltung. */
.hz-page-tuning .hz-stage--page h1::before {
  content: "";
  display: block;
  inline-size: 4.5rem;
  block-size: 5px;
  margin-block-end: 1.4rem;
  background: var(--hz-accent);
}

/* --- Reparaturservice: der Balken ist weg --------------------------------
   Hier stand eine fast deckende schwarze Fläche über den linken 38 Prozent
   der Bildbühne — als Schreibfläche gedacht, in der Wirkung ein Balken, der
   das Foto halbiert. Der Auftraggeber hat genau das benannt.

   Ersatz ist kein Balken, sondern ein Verlauf, der links noch trägt und nach
   rechts wirklich aufmacht: Bei 52 Prozent liegt er schon unter der Hälfte,
   am rechten Rand ist das Foto praktisch frei. Die Überschrift steht mit
   ihrem Schatten auch über den helleren Stellen sicher.

   Der Schrägwinkel nimmt der Kante die Geradlinigkeit — eine senkrechte
   Verlaufsgrenze über die volle Höhe liest sich selbst dann noch als Kante,
   wenn sie weich ist. */
.hz-page-reparaturservice .hz-stage--page.wp-block-cover { align-items: center; }
.hz-page-reparaturservice .hz-stage--page.wp-block-cover::before {
  background:
    linear-gradient(104deg,
      rgba(7,9,12,.86) 0%, rgba(7,9,12,.72) 26%, rgba(7,9,12,.42) 52%,
      rgba(7,9,12,.16) 76%, rgba(7,9,12,.06) 100%),
    linear-gradient(180deg, rgba(7,9,12,.36) 0%, rgba(7,9,12,.14) 42%, rgba(7,9,12,.55) 100%);
}
/* Schmal bleibt es beim senkrechten Verlauf. Der steht bereits weiter unten
   im gemeinsamen Block für Reparaturservice und Inspektionen; hier stand
   kurzzeitig eine zweite Fassung, die auf der Quellreihenfolge verlor und
   nichts bewirkt hat. Gemessen bei 390 px: der gemeinsame Block gewinnt. */
.hz-page-reparaturservice .hz-stage--page .hz-stage__text { max-inline-size: 34rem; }

/* --- Inspektionen: Titel auf einem schwarzen Band ------------------------ */
.hz-page-inspektionen .hz-stage--page.wp-block-cover::before {
  background: linear-gradient(180deg, rgba(7,9,12,.28) 0%, rgba(7,9,12,.28) 52%, rgba(7,9,12,.94) 62%, #07090c 100%);
}
.hz-page-inspektionen .hz-stage--page h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.hz-page-inspektionen .hz-stage--page .hz-stage__text { max-inline-size: 52rem; }

/* --- Klimaservice: kühl getönt ------------------------------------------- */
.hz-page-klimaservice .hz-stage--page.wp-block-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,70,140,.42), rgba(8,26,52,.30));
  mix-blend-mode: color;
}

/* --- Reifenservice: Bild tief angeschnitten ------------------------------ */
.hz-page-reifenservice .hz-stage--page .wp-block-cover__image-background { object-position: 50% 76%; }
.hz-page-reifenservice .hz-stage--page h1 {
  border-block-start: 6px solid var(--hz-accent);
  padding-block-start: 1.3rem;
  display: inline-block;
}

/* --- Kfz-Gutachten: heller Grund, anderes Geschäft ----------------------- */
/* Die Gutachten laufen im Auftrag der DGD Direkt und haben mit Öl und Halle
   wenig zu tun. Deshalb als einzige Leistungsseite eine helle Bühne: Papier
   statt Werkstatt. Der Text steht dort dunkel, nicht hell. */
.hz-page-kfz-gutachten .hz-stage--page.wp-block-cover::before {
  background: linear-gradient(90deg,
    rgba(238,241,245,.97) 0%, rgba(238,241,245,.93) 44%, rgba(238,241,245,.55) 72%, rgba(238,241,245,.2) 100%);
}
.hz-page-kfz-gutachten .hz-stage--page .wp-block-cover__image-background { filter: grayscale(.55) contrast(.94); }
.hz-page-kfz-gutachten .hz-stage--page.wp-block-cover { align-items: center; }
.hz-page-kfz-gutachten .hz-stage--page :is(h1, p) { color: #0b0e12; text-shadow: none; }
.hz-page-kfz-gutachten .hz-stage--page .hz-lead { color: #3d4652; text-shadow: none; }
.hz-page-kfz-gutachten .hz-stage--page .hz-stage__text { max-inline-size: 36rem; }

@media (max-width: 781px) {
  /* Auf schmalen Viewports deckt jeder waagerechte Verlauf die ganze Breite ab
     und macht das Foto unsichtbar. Dort tragen überall die senkrechten. */
  .hz-page-reparaturservice .hz-stage--page.wp-block-cover::before,
  .hz-page-inspektionen .hz-stage--page.wp-block-cover::before {
    background: linear-gradient(180deg, rgba(7,9,12,.45) 0%, rgba(7,9,12,.42) 26%, rgba(7,9,12,.97) 88%);
  }
  .hz-page-kfz-gutachten .hz-stage--page.wp-block-cover::before {
    background: linear-gradient(180deg, rgba(238,241,245,.55) 0%, rgba(238,241,245,.72) 30%, rgba(238,241,245,.97) 78%);
  }
}

/* --- Kein Wortbruch in den Bühnenüberschriften ---------------------------
   Im Screenshot stand „REPARATURS | ERVICE". Ursache ist dieselbe wie auf der
   Startseite: `overflow-wrap: break-word` aus den allgemeinen Überschriften
   trifft auf ein versales Wort, das breiter ist als seine Spalte.

   Gemessen am gerenderten Bild belegt Archivo Bold versal rund 0,71 em je
   Zeichen. Daraus folgt für jede Seite eine Obergrenze, unterhalb derer das
   längste Wort in eine Zeile passt — erst dann darf `overflow-wrap: normal`
   stehen, ohne einen Überlauf zu riskieren:

     REPARATURSERVICE  16 Zeichen  11,4 em   Spalte 46 rem  ->  max 3,8 rem
     REIFENSERVICE     13 Zeichen   9,2 em   Spalte 44 rem  ->  max 4,4 rem
     KLIMASERVICE      12 Zeichen   8,5 em   Spalte 44 rem  ->  max 4,6 rem
     INSPEKTIONEN      12 Zeichen   8,5 em   Spalte 52 rem  ->  max 3,6 rem (gesetzt)
     KFZ-GUTACHTEN     bricht am Bindestrich, keine Grenze nötig
     TUNING             6 Zeichen   4,3 em   keine Grenze nötig

   Der untere Wert der clamp-Funktion ist jeweils so gewählt, dass das Wort auf
   390 px Viewportbreite (350 px nutzbar) ebenfalls in eine Zeile passt. */
.hz-stage--page h1 { overflow-wrap: normal; hyphens: none; }
/* „REPARATURSERVICE" ist mit 16 Zeichen das laengste Wort im Bestand und passt
   in keiner Groesse in eine Zeile, die zu den uebrigen Buehnen passt. Zwei
   Fassungen waren hier schon: erst 1,78 rem, dann 2,05 rem — beide loesten den
   Ueberlauf, indem sie die Buehne kleiner machten als die der Nachbarseiten.
   Damit war der Fehler weg und die Wirkung auch.

   Deutsch trennt. Das Wort ist ein Kompositum, `hyphens: auto` bricht es an der
   Fuge, und zweizeilig steht es genauso da wie „KFZ-/GUTACHTEN" nebenan. Die
   Schriftgroesse bleibt deshalb die gemeinsame Basis; erlaubt ist die Trennung
   nur auf dieser Seite, weil nur dieses eine Wort sie braucht. */
.hz-page-reparaturservice .hz-stage--page h1 {
  /* Nachtrag: `hyphens: auto` allein reicht nicht. Der Messbrowser bringt keine
     deutschen Trennmuster mit, das Wort bleibt ungebrochen und lief 25 px aus
     dem Viewport. Verlassen kann man sich darauf also nicht.
     Deshalb wieder eine eigene Untergrenze — aber nur die: Der obere Wert der
     clamp-Funktion ist derselbe wie auf den Nachbarseiten, auf dem Desktop
     stehen alle fuenf Buehnen in 73,6 px. Der Unterschied betrifft nur schmale
     Viewports und betraegt dort 33,4 gegen 35 bis 38 px. Die Trennung bleibt
     als Netz stehen, falls der Browser sie kann. */
  font-size: clamp(2.05rem, 6vw, 4.6rem);
  hyphens: auto;
  -webkit-hyphens: auto;
}
.hz-page-reparaturservice .hz-stage--page .hz-stage__text { max-inline-size: 46rem; }
.hz-page-reifenservice .hz-stage--page h1 { font-size: clamp(2.2rem, 7vw, 4.4rem); }
.hz-page-klimaservice .hz-stage--page h1 { font-size: clamp(2.35rem, 7vw, 4.6rem); }

/* Die Tönung lag als eigene Ebene über dem gesamten Bild und nahm ihm die
   Tiefe. Schwächer und nur im oberen Bereich, wo das Foto ohnehin hell ist. */
.hz-page-klimaservice .hz-stage--page.wp-block-cover::after {
  background: linear-gradient(180deg, rgba(20,80,160,.34) 0%, rgba(20,80,160,.10) 62%, transparent 100%);
}

/* --- Signaturabschnitt je Leistungsseite ---------------------------------
   Sechsmal dieselbe Abschnittsfolge macht sechs Seiten austauschbar. Statt
   sechs beliebiger Varianten bekommt jede Seite die Form, die zu ihrem Inhalt
   passt — die Auszeichnung bleibt dieselbe, nur die Darstellung unterscheidet
   sich. Wo nichts umgestellt wurde, steht bewusst nichts.
   ------------------------------------------------------------------------ */

/* Reparaturservice: hier stand `.hz-steps` — eine Aufzählung, deren Ziffern
   ein CSS-Zähler erzeugte. Die Begründung war, dass Schadensaufnahme,
   Kostenvoranschlag, Instandsetzung und Versicherung tatsächlich in dieser
   Folge ablaufen. Das stimmt weiterhin; der Auftraggeber empfindet die Ziffern
   trotzdem als konstruiert. Die Liste bleibt eine `ol`, sie zählt nur nicht
   mehr sichtbar mit — `.hz-marks` setzt einen Strich davor.

   Die Regel ist entfernt, nicht auskommentiert: Sie wird von keiner Seite mehr
   verwendet, und totes CSS bleibt sonst liegen, bis jemand es aus Versehen
   wieder anfasst. Wer eine sichtbar nummerierte Abfolge braucht, findet
   `.hz-steps-flow` im Karrierearchiv. */

/* Inspektionen: keine Reihenfolge, sondern eine Prüfliste. Zwei Spalten mit
   Haken statt einer langen Kolonne — so liest sich der Umfang wie ein Eintrag
   im Serviceheft und nicht wie ein weiterer Fließtext. */
.hz-page-inspektionen .hz-detail-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--wp--preset--spacing--60);
}
.hz-page-inspektionen .hz-detail-row {
  grid-template-columns: 1fr;
  gap: .3rem;
  padding-inline-start: 2rem;
  position: relative;
}
.hz-page-inspektionen .hz-detail-row::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--wp--preset--spacing--40) + .45em);
  inline-size: .75rem;
  block-size: .42rem;
  border-inline-start: 2px solid var(--hz-accent);
  border-block-end: 2px solid var(--hz-accent);
  transform: rotate(-45deg);
}
/* In zwei Spalten trägt die untere Kante jeder Zeile nicht mehr — die letzte
   Zeile der linken Spalte ist nicht die letzte der Liste. Deshalb hier oben
   statt unten, und die Regel für das letzte Element entfällt. */
.hz-page-inspektionen .hz-detail-row:last-child { border-block-end: 0; }
@media (max-width: 781px) {
  .hz-page-inspektionen .hz-detail-rows { grid-template-columns: 1fr; }
}

/* Klimaservice: die vier Punkte sind eine Prüfreihenfolge — erst Dichtheit,
   dann Funktion, dann Hygiene, dann Befund. Als durchgehende Linie mit
   Knotenpunkten, nicht als Ziffernliste: Der Ablauf ist gemeint, nicht ein
   Formular mit Schritten zum Abhaken. Ebenfalls an eine eigene Klasse
   gebunden, damit die Regionsliste derselben Seite unberührt bleibt — die ist
   keine Reihenfolge. */
.hz-flow.hz-marks { gap: 0; }
.hz-flow.hz-marks li {
  padding: 0 0 var(--wp--preset--spacing--40) 2.2rem;
}
.hz-flow.hz-marks li:last-child { padding-block-end: 0; }
.hz-flow.hz-marks li::before {
  inset-block-start: .45em;
  inline-size: .62rem;
  block-size: .62rem;
  border-radius: 50%;
  background: var(--hz-accent);
}
.hz-flow.hz-marks li::after {
  content: "";
  position: absolute;
  /* Die Linie muss durch die Mitte des Punktes laufen: halbe Punktbreite
     minus halbe Linienbreite. Mit `--hz-line` war sie auf dem dunklen Grund
     praktisch unsichtbar, die Reihenfolge war damit nicht ablesbar. */
  inset-inline-start: calc(.31rem - 1px);
  inset-block: 1.35em 0;
  inline-size: 2px;
  background: rgba(38, 141, 238, .38);
}
.hz-flow.hz-marks li:last-child::after { display: none; }

/* Tuning: Der wichtigste Absatz der Seite ist die Eintragungspflicht. Er stand
   als vierte Liste unter vielen. Jetzt als abgesetzte Fläche mit blauer Kante —
   das ist die eine Stelle, an der die Seite laut werden darf, ohne etwas zu
   versprechen.

   Bewusst eine eigene Klasse und nicht `.hz-page-tuning .hz-marks`: In der
   ersten Fassung war es seitenweit gesetzt und traf auch die Regionsliste
   darunter. Eine Betonung, die zweimal auf derselben Seite steht, betont
   nichts mehr. */
.hz-note.hz-marks {
  border-inline-start: 3px solid var(--hz-accent);
  padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
  background: linear-gradient(90deg, rgba(38,141,238,.09), transparent 60%);
}
.hz-note.hz-marks li::before { background: var(--hz-accent-soft); }

/* Kfz-Gutachten: heller Grund wie schon in der Bühne. Die Gutachten laufen über
   die DGD Direkt — anderes Geschäft, anderer Ton, und der Wechsel macht das
   auch ohne Erklärung sichtbar. */
.hz-page-kfz-gutachten .hz-detail-rows {
  background: #eef1f5;
  color: #0b0e12;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 0;
  border-radius: 4px;
}
.hz-page-kfz-gutachten .hz-detail-row { border-block-start-color: #cdd4dd; }
.hz-page-kfz-gutachten .hz-detail-row:last-child { border-block-end-color: #cdd4dd; }
.hz-page-kfz-gutachten .hz-detail-row__name { color: #0b0e12; }
.hz-page-kfz-gutachten .hz-detail-row__text { color: #454f5c; }

/* Reifenservice: zwei Spalten in Tabellenform. Der Reifenservice ist die
   Leistung, bei der Kundinnen und Kunden am ehesten wissen wollen, was
   enthalten ist — deshalb schmale Namensspalte, breite Textspalte und eine
   deutlich sichtbare Kopfkante statt gleichgewichtiger Zeilen. */
.hz-page-reifenservice .hz-detail-rows { border-block-start: 3px solid var(--hz-accent); }
.hz-page-reifenservice .hz-detail-row { grid-template-columns: minmax(9rem, 13rem) 1fr; }
.hz-page-reifenservice .hz-detail-row__name { font-size: 1rem; letter-spacing: .01em; }
@media (max-width: 781px) {
  /* Die schmale Namensspalte dieser Seite hat mehr Spezifitaet als die
     allgemeine Mobilregel und blieb deshalb zweispaltig stehen — mit
     sechszeiligen Umbruechen in der rechten Spalte. */
  .hz-page-reifenservice .hz-detail-row { grid-template-columns: 1fr; gap: .35rem; }
}

/* --- Mobilmenü -----------------------------------------------------------
   Der Kern liefert das Overlay als weiße Fläche mit rechtsbündigen Links in
   Fließtextgröße. Auf einer sonst durchgehend fast schwarzen Website ist das
   ein Fremdkörper — und der Auftrag verlangt unter Punkt 46 ausdrücklich eine
   eigenständig gestaltete mobile Fassung, nicht die Vorgabe des Bausteins.

   Wichtig für die Auswahl: Die Regeln hängen an
   `.wp-block-navigation__responsive-container`, nicht an `.is-menu-open`.
   Letztere Klasse setzt erst JavaScript beim Öffnen; sie steht nicht im
   ausgelieferten HTML, und WP Rocket entfernt beim Zusammenstreichen des CSS
   jede Regel, deren Selektor im Dokument nicht vorkommt. Eine Gestaltung, die
   an `.is-menu-open` hängt, käme also nie an.

   Der Kern gibt der geschlossenen Fassung `display: none`, deshalb ist die
   Grundklasse hier gefahrlos. Die Begrenzung auf 599 px ist die Schwelle, ab
   der der Kern das Overlay selbst wieder abschaltet. */

@media (max-width: 599px) {
  /* Der Kern setzt den weissen Grund mit
     `.wp-block-navigation:not(.has-background) .responsive-container.is-menu-open:not(.disable-default-overlay)`
     — fuenf Klassen. Ein kuerzerer Selektor verliert dagegen, und `.is-menu-open`
     darf hier aus dem oben genannten Grund nicht vorkommen. Deshalb dieselbe
     Form ohne diese eine Klasse: gleiche Spezifitaet, spaeter in der Reihenfolge. */
  .hz-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container:not(.disable-default-overlay) {
    background-color: #0b0e12;
    /* Die Textfarbe muss hier stehen, nicht am Verweis: Der Kern zwingt den
       Menuepunkten im geoeffneten Zustand `color: inherit !important` auf.
       Dagegen hilft keine Spezifitaet — nur die geerbte Farbe zu setzen. Im
       geschlossenen Zustand gilt eine andere Kernregel mit `!important`, die
       das ueberschreibt; das ist folgenlos, weil das Overlay dann
       `display: none` traegt. */
    color: #f2f5f8;
    padding: 0;
  }
  .hz-header .wp-block-navigation__responsive-container-content {
    inline-size: 100%;
    padding: 5.5rem var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  }
  .hz-header .wp-block-navigation__responsive-container .wp-block-navigation__container {
    inline-size: 100%;
    gap: 0;
    align-items: stretch;
  }
  .hz-header .wp-block-navigation__responsive-container .wp-block-navigation-item {
    inline-size: 100%;
    border-block-end: 1px solid #1b2029;
  }
  .hz-header .wp-block-navigation__responsive-container .wp-block-navigation-item:first-child {
    border-block-start: 1px solid #1b2029;
  }
  .hz-header .wp-block-navigation__responsive-container a {
    display: block;
    inline-size: 100%;
    padding-block: 1.05rem;
    font-family: var(--wp--preset--font-family--hz-display);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #f2f5f8;
  }
  .hz-header .wp-block-navigation__responsive-container a:hover,
  .hz-header .wp-block-navigation__responsive-container a:focus-visible {
    color: var(--hz-accent);
  }
  .hz-header .wp-block-navigation__responsive-container-close {
    color: #f2f5f8;
    inset-block-start: 1.6rem;
    inset-inline-end: 1.1rem;
  }
  /* Die Silhouette aus dem Zeichen als ruhiger Grund. Kein zweites Logo,
     sondern ein Ausschnitt, der unten aus dem Bild läuft. */
  .hz-header .wp-block-navigation__responsive-container::after {
    content: "";
    position: absolute;
    inset-inline: -18% auto;
    inset-block-end: -6%;
    inline-size: 150%;
    aspect-ratio: 361 / 74;
    background: url("assets/brand/hz-signet-mono.svg") no-repeat center / contain;
    opacity: .07;
    pointer-events: none;
  }
}

/* Kontaktzeile im Mobilmenü. Auf dem Desktop steht die Nummer in der
   Kopfleiste; dort wäre sie doppelt. */
.hz-navtel { display: none; }
@media (max-width: 599px) {
  .hz-navtel {
    display: block;
    margin-block-start: var(--wp--preset--spacing--50);
    /* Der Inhaltscontainer des Overlays ist ein Flexcontainer, der seine Kinder
       mittig ausrichtet, und er bringt den seitlichen Abstand bereits mit.
       Ohne `align-self` und volle Breite stuende die Kontaktzeile zentriert
       gegen eine linksbuendige Menueliste; ein eigener `padding-inline` waere
       zusaetzlich doppelt. */
    align-self: stretch;
    inline-size: 100%;
    text-align: start;
  }
  .hz-navtel span {
    display: block;
    font-family: var(--wp--preset--font-family--hz-display);
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hz-accent-soft);
  }
  .hz-navtel a {
    display: inline-block;
    margin-block-start: .35rem;
    font-family: var(--wp--preset--font-family--hz-display);
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: -.02em;
    color: #f2f5f8;
    text-decoration: none;
    border-block-end: 3px solid var(--hz-accent);
  }
}

/* --- Regionsband ---------------------------------------------------------
   Der Regionsabschnitt stand auf allen sechs Leistungsseiten in derselben Form:
   Beizeile, große Überschrift, drei Punkte. Sechsmal derselbe Baustein in
   derselben Größe ist genau das, was die drei unabhängigen Bewertungen als
   „eine Vorlage mit sechs Kosmetikvarianten" benannt haben.

   Der Inhalt bleibt vollständig — er trägt die lokale Substanz. Nur die Form
   wird zurückgenommen: aus einem Abschnitt in voller Höhe wird ein schmales
   Band, das die Punkte nebeneinander stellt statt untereinander. */

.hz-region .wp-block-heading {
  max-inline-size: 46ch;
  letter-spacing: -.01em;
}
.hz-region .hz-marks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  margin-block-start: var(--wp--preset--spacing--40);
}
.hz-region .hz-marks li { font-size: .9375rem; }
@media (max-width: 900px) {
  .hz-region .hz-marks { grid-template-columns: 1fr; gap: .7rem; }
}

/* --- Kurzzitate und Nachbarleistungen ------------------------------------
   Beide standen als Pillen mit `border-radius: 999px` auf der Seite — das
   Muster, das der Auftrag unter Punkt 16 ausdrücklich streichen will, und bei
   den Zitaten zusätzlich als Verweis mit `href="#"`, also als Link, der
   nirgendwo hinführt. Ein Zitat ist kein Link.

   Die zwei Kurzzitate stehen jetzt in derselben Form wie das Hauptzitat, nur
   kleiner. Die Nachbarleistungen sind eine Textzeile mit Trennpunkten. */

.hz-quotes-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--50);
  margin-block-start: var(--wp--preset--spacing--50);
}
.hz-quote--sm blockquote { font-size: 1.0625rem; line-height: 1.5; }
.hz-quote--sm figcaption { font-size: .8125rem; }
@media (max-width: 781px) {
  .hz-quotes-mini { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
}
.hz-quellenzeile {
  margin-block-start: var(--wp--preset--spacing--40);
  font-size: .8125rem;
  color: var(--hz-muted);
}

.hz-siblings a {
  padding: 0;
  border: 0;
  border-radius: 0;
  border-block-end: 1px solid transparent;
}
.hz-siblings a:hover,
.hz-siblings a:focus-visible {
  border-block-end-color: var(--hz-accent);
  color: var(--hz-accent);
}
.hz-siblings { gap: .35rem 1.1rem; align-items: baseline; }
/* Der Trennpunkt gehoert hinter den Eintrag, nicht vor den naechsten: Als
   `::before` des Folgeelements stand er beim Umbruch am Zeilenanfang. */
.hz-siblings li:not(:last-child)::after {
  content: "·";
  margin-inline-start: 1.1rem;
  color: var(--hz-dim);
}
.hz-siblings li { display: flex; align-items: baseline; }

/* Telefonnummer neben den Schaltflächen der Bühne. Die unabhängige Bildprüfung
   hat sie dort dreimal eingefordert: Wer auf der Startseite steht und anrufen
   will, soll die Nummer im ersten Bildschirm finden und nicht erst in der
   Kopfleiste suchen. Kein dritter Schalter — eine Zeile, die als Nummer
   gelesen wird. */
.hz-herotel {
  margin-block-start: var(--wp--preset--spacing--40);
  display: flex;
  align-items: baseline;
  gap: .9rem;
  flex-wrap: wrap;
}
.hz-herotel span {
  font-family: var(--wp--preset--font-family--hz-display);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hz-accent-soft);
}
.hz-herotel a {
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  letter-spacing: -.02em;
  color: #fff;
  text-decoration: none;
  border-block-end: 2px solid rgba(255,255,255,.3);
}
.hz-herotel a:hover, .hz-herotel a:focus-visible { border-block-end-color: var(--hz-accent); }
@media (max-width: 600px) { .hz-herotel { gap: .2rem 0; } .hz-herotel span { inline-size: 100%; } }

/* --- Credo -----------------------------------------------------------------
   Hier stand ein Text-Bild-Split mit Überschrift, Fließtext und vier
   Strich-Punkten — der letzte Baustein auf der Startseite, den die unabhängige
   Bildprüfung dreimal als Vorlagenware benannt hat. Die vier Punkte sind
   Substanz und bleiben; die Form ist zurückgenommen.

   Ohne Bild, ohne Überschrift, ohne Beizeile: ein Satz in Displaygröße als
   Haltung des Betriebs, darunter die vier Punkte in zwei Spalten. Das ist an
   dieser Stelle der einzige Abschnitt ohne Foto — zwischen der Halle darüber
   und der Leistungsliste darunter ist das die Atempause, die die Seite
   braucht. */

.hz-credo__satz {
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  max-inline-size: 30ch;
  color: var(--hz-muted);
  margin: 0;
}
.hz-credo__satz strong { color: var(--hz-text); font-weight: 700; }
.hz-credo__punkte {
  list-style: none;
  margin: var(--wp--preset--spacing--60) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
  border-block-start: 1px solid #1b2029;
  padding-block-start: var(--wp--preset--spacing--40);
}
.hz-credo__punkte li { color: var(--hz-muted); font-size: .9375rem; }
.hz-credo__punkte strong { color: var(--hz-text); font-weight: 600; }
@media (max-width: 781px) {
  .hz-credo__punkte { grid-template-columns: 1fr; gap: .9rem; }
}


/* =========================================================================
   BEWEGUNG — HZ Motion Language
   =========================================================================

   Die Bewegung dieser Seite ist aus dem Gegenstand abgeleitet, nicht aus dem
   Katalog gaengiger Weboberflaechen: Mechanik statt Effekt, Licht statt
   Leuchten. Konkret heisst das drei Dinge.

   Erstens die Kurven. Ein mechanisches Teil setzt sich unter Last in Bewegung
   und laeuft gefuehrt aus — es startet nicht mit voller Geschwindigkeit und
   federt am Ende nicht nach. Die Kurven hier sind deshalb asymmetrisch, und
   sie unterscheiden Kommen von Gehen: Was ins Bild kommt, darf spuerbar
   ankommen; was es verlaesst, zieht zuegig weg.

   Zweitens die Dauern. Sie liegen zwischen 90 und 700 ms. Alles darunter wirkt
   wie ein Sprung, alles darueber wie eine Vorfuehrung.

   Drittens das Licht. Es gibt keine farbigen Leuchtflecken. Wo etwas
   hervortritt, geschieht das ueber eine Lichtkante oder einen einmalig
   durchlaufenden Streifen — die Art, wie Licht ueber Lack und Metall laeuft.

   Die vollstaendige Herleitung steht in docs/hz-performance/MOTION-SYSTEM.md.
   ------------------------------------------------------------------------- */

:root {
  /* --- Dauern --- */
  --hz-dur-micro:   180ms;  /* Zustandswechsel ohne Weg: Farbe, Kante */
  --hz-dur-control: 220ms;  /* Schaltflaeche, Verweis, Pfeil */
  --hz-dur-icon:    380ms;  /* Zeichen mit mechanischem Weg */
  --hz-dur-header:  300ms;  /* Kopfbereich ein und aus */
  --hz-dur-reveal:  550ms;  /* Abschnitt tritt ein */
  --hz-dur-mask:    700ms;  /* Bild oeffnet sich — der seltene grosse Moment */
  --hz-dur-snap:     90ms;  /* Einrasten beim Druecken */

  /* --- Kurven ---
     Jede bildet eine mechanische Charakteristik ab, keine beliebige Aesthetik.
     Bewegung im Fahrzeug kommt fast nie aus einer symmetrischen Beschleunigung,
     sondern aus einer Feder, einem Daempfer, einer Sperre. */

  /* Zieht an, faengt weich ab — eine Tuer, die in die Anschlagdaempfung
     laeuft. Fuer alles, was ins Bild kommt. Der Wert ist nicht neu erfunden:
     Er steht bereits im Aufbau des Markenzeichens weiter oben. */
  --hz-ease-drive:    cubic-bezier(.22,.61,.36,1);
  /* Traeger Beginn, zuegiger Abgang — ein Bauteil, das unter Last wegzieht.
     Fuer alles, was das Bild verlaesst. Bewusst schneller wahrgenommen als der
     Weg herein: Ankommen darf man merken, Verschwinden nicht. */
  --hz-ease-retract:  cubic-bezier(.55,0,.85,.35);
  /* Symmetrisch, ohne Richtung. Fuer Zustaende, die genauso leicht hin wie
     zurueck wechseln. */
  --hz-ease-standard: cubic-bezier(.4,0,.2,1);
  /* Kurze harte Verzoegerung ohne Ueberschwingen — ein Relais, keine
     Gummitaste. */
  --hz-ease-snap:     cubic-bezier(.3,0,.15,1);

  /* --- Wege --- */
  --hz-dist-nudge:        .5rem;  /* Pfeil beim Ueberfahren */
  --hz-dist-reveal-up:     24px;  /* Text tritt von unten ein */
  --hz-dist-reveal-side:   32px;  /* Bild/Text-Wechsel tritt seitlich ein */
  --hz-dist-icon:           3px;  /* innerer Weg einer Icon-Bewegung */

  /* --- Staffelung ---
     Ab dem sechsten Geschwister wird nicht weiter verzoegert. Die
     Leistungsliste hat sechs Eintraege; ohne Deckel zoege sich ihr Eintritt
     sichtbar in die Laenge. */
  --hz-stagger-step: 70ms;
  --hz-stagger-cap:      5;

  /* Startwerte der gemessenen Kopfhoehen. Das Skript ueberschreibt sie, sobald
     es laeuft; bis dahin — und wenn es gar nicht laeuft — muss eine Sprungmarke
     trotzdem an der richtigen Stelle landen. */
  --hz-topbar-h: 36px;
  --hz-bar-h:    70px;
}

/* Sprungmarken duerfen nicht hinter der Kopfleiste landen. Das Polster bleibt
   auch dann gesetzt, wenn der Kopfbereich gerade ausgefahren ist: Bei einem
   Sprung faehrt er sofort wieder ein, und ein auf null gesenktes Polster
   haette das Ziel genau dahinter abgelegt. */
html { scroll-padding-block-start: calc(var(--hz-bar-h) + .75rem); }

/* --- Mitlaufender Kopfbereich --------------------------------------------

   Getragen wird die Klebewirkung vom aeusseren Element des Vorlagenteils.
   `.hz-header` selbst trug sie vorher, konnte sie aber nicht ausueben: Ein
   klebendes Element kommt nicht aus seinem Elternkasten heraus, und dieser
   Kasten ist nur so hoch wie Kontaktzeile und Kopfleiste zusammen. Gemessen
   auf der Startseite stand die Kopfleiste bei Scrollposition 1200 rund 1160 px
   oberhalb des Sichtfelds — es gab also gar keine mitlaufende Kopfzeile, und
   Navigation wie Anrufschaltflaeche waren waehrend des Lesens nicht
   erreichbar.

   Der Klebepunkt liegt um die Hoehe der Kontaktzeile im Negativen. Dadurch
   laeuft die Kontaktzeile beim Scrollen einmal heraus und die Kopfleiste
   bleibt danach oben stehen — ohne dass sich im Dokumentfluss etwas
   verschiebt, denn die Hoehe des Elements aendert sich nie.

   Bewegt wird ueber `inset-block-start`, ausdruecklich NICHT ueber `transform`.
   Ein Transform ungleich `none` macht das Element zum Bezugsrahmen fuer alle
   `position: fixed`-Nachfahren; das Overlay der Navigation liegt darin und
   wuerde sich auf die Masse der Kopfzeile legen statt den Viewport zu fuellen.
   Dieser Fehler ist hier schon einmal aufgetreten — siehe die Begruendung zum
   entfernten `backdrop-filter` weiter oben. Auch `translateY(0)` waere ein
   Transform ungleich `none` und damit derselbe Fehler; die Eigenschaft darf auf
   diesem Element gar nicht vorkommen.
   ------------------------------------------------------------------------- */

header.wp-block-template-part {
  position: sticky;
  inset-block-start: calc(-1 * var(--hz-topbar-h));
  z-index: 50;
  /* Herein mit der Antriebskurve. */
  transition: inset-block-start var(--hz-dur-header) var(--hz-ease-drive);
}

header.wp-block-template-part[data-hz-header="hidden"] {
  inset-block-start: calc(-1 * (var(--hz-topbar-h) + var(--hz-bar-h)));
  /* Hinaus mit der Rueckzugskurve. Die Angabe steht am Zielzustand, weil beim
     Uebergang die Regeln des Ziels gelten — so tragen Kommen und Gehen
     verschiedene Charakteristiken, ohne dass JavaScript umschalten muss. */
  transition: inset-block-start var(--hz-dur-header) var(--hz-ease-retract);
}

/* Die Kopfleiste trug bisher selbst `position: sticky`. Die Angabe ist jetzt
   nicht nur wirkungslos, sondern schaedlich: Sie wuerde die Leiste innerhalb
   des klebenden Vorlagenteils ein zweites Mal festhalten. */
.hz-header { position: static; }

/* Ganz oben liegt die Kopfleiste ueber dem Bild. Kein Kasten, sondern ein
   Schleier, der nach unten ausblendet — die Schrift bleibt lesbar, die
   Kopfzeile bleibt eine Ueberlagerung und wird nicht zur Leiste. */
header.wp-block-template-part[data-hz-header="top"] .hz-header,
header.wp-block-template-part:not([data-hz-header]) .hz-header {
  background: transparent;
  border-block-end-color: transparent;
}
header.wp-block-template-part[data-hz-header="top"],
header.wp-block-template-part:not([data-hz-header]) {
  background: linear-gradient(180deg, rgba(7,9,12,.78) 0%, rgba(7,9,12,.45) 62%, rgba(7,9,12,0) 100%);
}
header.wp-block-template-part[data-hz-header="top"] .hz-topbar,
header.wp-block-template-part:not([data-hz-header]) .hz-topbar {
  background: transparent;
  border-block-end-color: rgba(255,255,255,.10);
}

/* Sobald die Leiste steht, traegt sie einen eigenen Grund. Die Kante darunter
   ist eine Lichtkante, kein Schein: ein Pixel, in Markenblau angedeutet, wie
   die Reflexion an einer Blechkante. */
header.wp-block-template-part[data-hz-header="pinned"],
header.wp-block-template-part[data-hz-header="hidden"] { background: none; }

header.wp-block-template-part[data-hz-header="pinned"] .hz-header,
header.wp-block-template-part[data-hz-header="hidden"] .hz-header {
  background: rgba(10,13,17,.96);
  border-block-end-color: var(--hz-line);
  box-shadow: 0 1px 0 rgba(38,141,238,.14), 0 12px 28px -20px rgba(0,0,0,.9);
}

/* --- Navigation: die Linie faehrt ein ------------------------------------
   Keine Unterstreichung, die einfach da ist. Die Linie laeuft von links ein. */

.hz-header .wp-block-navigation a {
  position: relative;
  transition: color var(--hz-dur-micro) var(--hz-ease-standard);
}
.hz-header .wp-block-navigation a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -.4rem;
  block-size: 2px;
  background: var(--hz-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--hz-dur-control) var(--hz-ease-drive);
}
.hz-header .wp-block-navigation a:hover::after,
.hz-header .wp-block-navigation a:focus-visible::after { transform: scaleX(1); }

/* Der aktive Punkt traegt die Linie dauerhaft, aber gedaempft — er meldet den
   Ort, er wirbt nicht. */
.hz-header .wp-block-navigation .current-menu-item > a::after {
  transform: scaleX(1);
  background: var(--hz-line-strong);
}
.hz-header .wp-block-navigation .current-menu-item > a:hover::after {
  background: var(--hz-accent);
}

/* Im Mobilmenue ist der Unterstrich fehl am Platz: Dort stehen die Punkte
   untereinander, und eine Linie unter jedem waere ein Gitter. */
@media (max-width: 599px) {
  .hz-header .wp-block-navigation__responsive-container.is-menu-open a::after {
    content: none;
  }
}

/* --- Schaltflaechen ------------------------------------------------------

   Beim Ueberfahren setzt sich eine Lichtkante an die Oberkante. Beim Druecken
   senkt sich die Flaeche um einen Pixel — der Weg eines Schalters, der
   einrastet. Kein Vergroessern: Eine Schaltflaeche, die unter dem Zeiger
   waechst, ist eine Weboberflaeche, kein Bedienteil.
   ------------------------------------------------------------------------- */

.wp-block-button__link {
  position: relative;
  transition:
    background-color var(--hz-dur-control) var(--hz-ease-standard),
    border-color var(--hz-dur-control) var(--hz-ease-standard),
    color var(--hz-dur-control) var(--hz-ease-standard),
    translate var(--hz-dur-snap) var(--hz-ease-snap);
}
.wp-block-button__link::before {
  content: "";
  position: absolute;
  inset-inline: 12%;
  inset-block-start: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity: 0;
  transition: opacity var(--hz-dur-control) var(--hz-ease-standard);
  pointer-events: none;
}
.wp-block-button__link:hover::before,
.wp-block-button__link:focus-visible::before { opacity: 1; }

/* `translate` statt `transform`: Die Einzeleigenschaft laesst sich unabhaengig
   schalten und kollidiert nicht mit einem `transform`, das an anderer Stelle
   auf derselben Schaltflaeche stehen koennte. */
.wp-block-button__link:active { translate: 0 1px; }

/* --- Pfeile --------------------------------------------------------------
   Ein Pfeil, der auf das Ueberfahren reagiert, nimmt Fahrt auf. */

.hz-line__arrow,
.hz-arrow { transition: translate var(--hz-dur-control) var(--hz-ease-drive); }

.hz-line:hover .hz-line__arrow,
.hz-line:focus-visible .hz-line__arrow { translate: var(--hz-dist-nudge) 0; }

/* --- Reveals -------------------------------------------------------------

   Vier Typen, nicht mehr. Jeder weitere waere ein Sondereffekt, und Bewegung
   nutzt sich ab, sobald sie beliebig wird.

     up    Text tritt von unten ein.
     side  Bild/Text-Wechsel tritt aus der Richtung ein, in der er steht.
     mask  Ein beherrschendes Bild oeffnet sich unter einer schraegen Kante.
     line  Die technische Linie misst ihre Strecke einmal aus.

   Der Ausgangszustand haengt ausschliesslich an `[data-hz-reveal-state]`, und
   dieses Attribut setzt nur das Skript. Ohne JavaScript existiert der Zustand
   `armed` nicht — der Inhalt steht dann einfach da. Das ist keine Feinheit:
   Eine Regel, die Inhalt versteckt und auf ein Skript wartet, blendet ihn bei
   blockiertem oder verzoegertem JavaScript dauerhaft aus. Auf einer Instanz mit
   WP Rocket und dessen JavaScript-Verzoegerung ist das kein Randfall.
   ------------------------------------------------------------------------- */

[data-hz-reveal-state="armed"] { opacity: 0; }

[data-hz-reveal="up"][data-hz-reveal-state="armed"] {
  transform: translateY(var(--hz-dist-reveal-up));
}
[data-hz-reveal="side"][data-hz-reveal-state="armed"] {
  transform: translateX(calc(-1 * var(--hz-dist-reveal-side)));
}
[data-hz-reveal="side"][data-hz-from="right"][data-hz-reveal-state="armed"] {
  transform: translateX(var(--hz-dist-reveal-side));
}

/* Die Maske ist kein Ausblenden, sondern ein Oeffnen: Das Bild ist ganz da und
   wird freigegeben. Die Kante laeuft schraeg — abstrahiert von der Lichtlinie,
   die beim Umrunden eines Fahrzeugs ueber eine Karosseriesicke wandert, ebenso
   lesbar als aufgehendes Hallentor.

   BEWEGT WIRD EIN VORHANG, NICHT DAS BILD.

   Hier stand vorher ein `clip-path` auf der Figur selbst:

       clip-path: polygon(0 0, 0 0, -8% 100%, 0 100%);

   Das schneidet die Figur auf null Flaeche zusammen. Und eine Figur ohne
   Flaeche meldet dem IntersectionObserver nie eine Ueberschneidung — der
   Anteil bleibt bei null, die Schwelle von 0,12 wird nie erreicht, der
   Zustand springt nie auf `in`. Das Bild blieb zugeschnitten stehen, bis der
   Nachlese-Durchlauf es beim Weiterscrollen einholte, also erst nachdem man
   daran vorbei war. Genau das hat der Auftraggeber gesehen: „erscheint
   teilweise gar nicht", „teilweise nur seitlich", „Flaeche bleibt leer".

   Gemessen am 8. September 2026 auf der Startseite, Figur mittig im
   Sichtfeld: mit dem Zuschnitt meldet der Beobachter Anteil 0, ohne ihn
   Anteil 1. Derselbe Knoten, derselbe Moment.

   Dieselbe Falle steht drei Regeln weiter unten fuer den Typ `line`
   ausdruecklich beschrieben und ist dort geloest, indem ein Pseudoelement
   bewegt wird statt des Elements. Der Typ `mask` macht es jetzt genauso: Die
   Figur behaelt ihre volle Flaeche, davor liegt ein Vorhang, und der faehrt
   weg.

   Der Vorhang entsteht nur, wenn ueberhaupt ein Zustand gesetzt ist — also
   nur, wenn das Skript laeuft. Ohne JavaScript gibt es kein `::after`, keinen
   Vorhang und nichts, was das Bild verdecken koennte. */
[data-hz-reveal="mask"][data-hz-reveal-state] {
  position: relative;
  overflow: hidden;
}
[data-hz-reveal="mask"][data-hz-reveal-state]::after {
  content: "";
  position: absolute;
  /* Einen Tick ueber die Kanten hinaus: Ein Vorhang, der exakt buendig
     abschliesst, laesst beim Skalieren gebrochener Pixel eine Haarlinie des
     Bildes stehen. */
  inset: -1px;
  z-index: 2;
  pointer-events: none;
  background: var(--hz-mask-vorhang, var(--hz-ground));
  clip-path: polygon(0 0, 108% 0, 100% 100%, -8% 100%);
}
[data-hz-reveal="mask"][data-hz-reveal-state="armed"] { opacity: 1; }
[data-hz-reveal="mask"][data-hz-reveal-state="armed"] img { transform: scale(1.04); }

/* Die Linie skaliert nicht selbst, sondern ihr Innenleben.
   Der Grund ist gemessen: `scaleX(0)` macht das Element flaechenlos, und ein
   flaechenloses Element meldet dem IntersectionObserver nie eine
   Ueberschneidung — der Anteil bliebe bei null, die Schwelle von 0,12 wuerde
   nie erreicht. Die Linie waere nie gezeichnet worden. Der Rahmen behaelt
   deshalb seine Masse, bewegt wird das Pseudoelement darin. */
[data-hz-reveal="line"][data-hz-reveal-state="armed"] { opacity: 1; }
[data-hz-reveal="line"][data-hz-reveal-state="armed"]::before { transform: scaleX(0); }

[data-hz-reveal-state="in"] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--hz-dur-reveal) var(--hz-ease-drive),
    transform var(--hz-dur-reveal) var(--hz-ease-drive);
  /* Staffelung an einer ausdruecklich gesetzten Variablen, nicht an
     `nth-child`: Die Abschnitte werden redaktionell gepflegt, und eine
     eingeschobene Ueberschrift wuerde sonst die ganze Reihenfolge verschieben.
     Der Deckel haelt lange Listen kurz. */
  transition-delay: calc(var(--hz-stagger-step) * min(var(--hz-i, 0), var(--hz-stagger-cap)));
}

[data-hz-reveal="mask"][data-hz-reveal-state="in"]::after {
  translate: 106% 0;
  transition: translate var(--hz-dur-mask) var(--hz-ease-drive);
}
[data-hz-reveal="mask"][data-hz-reveal-state="in"] img {
  transform: none;
  transition: transform var(--hz-dur-mask) var(--hz-ease-drive);
}
[data-hz-reveal="line"][data-hz-reveal-state="in"]::before {
  transform: scaleX(1);
  transition: transform var(--hz-dur-reveal) var(--hz-ease-drive);
}

/* --- Technische Linie ----------------------------------------------------
   Ein Element, das eine Strecke ausmisst. Es steht an vier Stellen, nicht
   ueberall — sonst wird aus einem Zeichen ein Muster. Gezeichnet wird ueber
   `scaleX`, nicht ueber `width`: Letzteres loeste bei jedem Bild ein neues
   Layout aus. */

.hz-techline {
  display: block;
  block-size: 2px;
  inline-size: clamp(3rem, 8vw, 5.5rem);
  margin-block: 0 var(--wp--preset--spacing--40);
}
.hz-techline::before {
  content: "";
  display: block;
  block-size: 100%;
  inline-size: 100%;
  background: var(--hz-accent);
  transform-origin: left center;
}

/* --- Zeichensatz ---------------------------------------------------------

   Acht Strichzeichnungen aus der Fahrzeugtechnik. Die Zeichnung selbst steht
   in inc/icons.php; hier steht, was sich daran bewegt.

   Der Grundsatz ist wichtiger als jede einzelne Regel: Jedes Zeichen bewegt
   sich so, wie sich das abgebildete Bauteil bewegt. Die Felge dreht, die Feder
   staucht, der Sattel setzt an, die Nadel schlaegt aus. Ein einheitlicher
   Aufblende-Effekt fuer alle acht waere billiger zu pflegen und genau das,
   was diese Seite nicht sein soll — ein Zeichensatz, den man gegen jeden
   anderen austauschen koennte.

   Ausgeloest wird durch Ueberfahren und Fokus der umgebenden Zeile. Keine
   Dauerbewegung: Sechs sich drehende Zeichen nebeneinander waeren Unruhe, kein
   Charakter.

   `transform-box: view-box` durchgaengig, damit sich der Drehpunkt in den
   Koordinaten der Zeichnung angeben laesst. Mit `fill-box` bezoege er sich auf
   den Umriss des jeweiligen Teils — der Maulschluessel wuerde dann um seine
   eigene Mitte kippen statt um die Schraube, die er fasst.
   ------------------------------------------------------------------------- */

.hz-icon {
  /* Groesse und Ruhefarbe sind am gerenderten Bild nachgezogen. Bei 1,5 rem und
     var(--hz-dim) standen die Zeichen neben einem 2,4 rem grossen Versalnamen und
     waren als Zeichnung nicht mehr lesbar — sie wirkten wie Rauschen in der
     Zeile statt wie ein gesetztes Element. Zurueckhaltend sollen sie bleiben,
     unlesbar nicht. */
  inline-size: 1.75rem;
  block-size: 1.75rem;
  flex: none;
  color: #6b7789;
  transition: color var(--hz-dur-micro) var(--hz-ease-standard);
}
.hz-icon__move {
  transform-box: view-box;
  transition: transform var(--hz-dur-icon) var(--hz-ease-drive);
}

/* Das Zeichen nimmt die Akzentfarbe an, sobald seine Zeile angesprochen wird. */
.hz-line:hover .hz-icon,
.hz-line:focus-visible .hz-icon,
.hz-step:hover .hz-icon,
.hz-step:focus-within .hz-icon { color: var(--hz-accent); }

/* Rad — die Felge dreht ein Stueck weit. Nicht durch: Ein Rad, das sich
   endlos dreht, faehrt; hier steht das Fahrzeug auf der Buehne. */
.hz-icon--reifen .hz-icon__move { transform-origin: 12px 12px; }
.hz-line:hover .hz-icon--reifen .hz-icon__move,
.hz-line:focus-visible .hz-icon--reifen .hz-icon__move { transform: rotate(16deg); }

/* Diagnose — der Messbalken wandert einmal ueber die Kurve. Er bleibt dabei
   innerhalb des Gehaeuses; ein Balken, der aus dem Geraet laeuft, misst nichts. */
.hz-icon--diagnose .hz-icon__move {
  transition-duration: 520ms;
  transition-timing-function: var(--hz-ease-standard);
}
.hz-line:hover .hz-icon--diagnose .hz-icon__move,
.hz-line:focus-visible .hz-icon--diagnose .hz-icon__move { transform: translateX(12.4px); }

/* Fahrwerk — die Feder staucht sich gegen das untere Auflager. */
.hz-icon--fahrwerk .hz-icon__move { transform-origin: 12px 18.2px; }
.hz-line:hover .hz-icon--fahrwerk .hz-icon__move,
.hz-line:focus-visible .hz-icon--fahrwerk .hz-icon__move { transform: scaleY(.82); }

/* Bremse — der Sattel setzt an der Scheibe an. Die Scheibe selbst bleibt
   stehen: Eine drehende Bremsscheibe hiesse Fahrt, nicht Wartung. */
.hz-line:hover .hz-icon--bremse .hz-icon__move,
.hz-line:focus-visible .hz-icon--bremse .hz-icon__move { transform: translateX(-2.6px); }

/* Klima — eine Vierteldrehung des Luefterrads, nicht mehr. */
.hz-icon--klima .hz-icon__move { transform-origin: 15.3px 12px; }
.hz-line:hover .hz-icon--klima .hz-icon__move,
.hz-line:focus-visible .hz-icon--klima .hz-icon__move { transform: rotate(90deg); }

/* Reparatur — der Schluessel kippt um wenige Grad um die Schraube, die er
   fasst. Ein Maulschluessel dreht sich nicht durch, er setzt neu an. */
.hz-icon--reparatur .hz-icon__move { transform-origin: 12px 12px; }
.hz-line:hover .hz-icon--reparatur .hz-icon__move,
.hz-line:focus-visible .hz-icon--reparatur .hz-icon__move { transform: rotate(-9deg); }

/* Gutachten — die Lupe wandert ueber die Zeilen. */
.hz-line:hover .hz-icon--gutachten .hz-icon__move,
.hz-line:focus-visible .hz-icon--gutachten .hz-icon__move { transform: translate(-3.6px, 1.4px); }

/* Leistung — die Nadel schlaegt aus. Das einzige Zeichen, dessen Ruhelage
   nicht die Ausgangslage ist: Sie faehrt beim Eintritt ins Bild einmal auf
   ihren Wert und bleibt dort. Ein Instrument, dessen Zeiger nach dem Ablesen
   zurueckfaellt, waere kaputt. */
/* Die Ruhelage IST der Ausschlag — nicht umgekehrt.
   Zuerst stand es andersherum: Die Nadel lag auf null und drehte erst, wenn
   ein Vorfahr den Zustand `in` trug. Auf der Tuningseite steht das Zeichen
   aber in der Signaturzeile, die selbst kein Reveal-Ziel ist — dort zeigte
   das Instrument dauerhaft null. Genau der Fehler, den der Kommentar zur
   Zeichnung als kaputtes Instrument beschreibt.
   Jetzt zeigt die Nadel ihren Wert, wo immer sie steht, und faehrt nur dann
   von null herauf, wenn sie tatsaechlich in einen Abschnitt eingebettet ist,
   der noch auf seinen Eintritt wartet. */
.hz-icon--performance .hz-icon__move {
  transform-origin: 12px 16.8px;
  transition-duration: 620ms;
  transform: rotate(66deg);
}
[data-hz-reveal-state="armed"] .hz-icon--performance .hz-icon__move {
  transform: rotate(0deg);
}

/* --- Schwerpunktflaeche Tuning, Neufassung -------------------------------

   Bis hierher war das ein `core/cover`: ein Bild, ein Verlauf davor, Text
   darauf. Fuer den staerksten Moment der Seite ist das der falsche Baustein —
   er kennt genau eine Bildebene. Gebraucht werden drei, die sich ueberlagern:
   das Signet als technische Zeichnung im Grund, das Fahrzeug rechts
   angeschnitten, und der Text links auf freier Flaeche.

   Die Klasse `.hz-signature` gab es im Stylesheet bereits, im Inhalt wurde sie
   nie verwendet — sie beschrieb ein Zweispaltenraster, das die geforderte
   Bildgroesse gar nicht tragen konnte. Ihr Grund und ihre Rahmen bleiben, das
   Raster wird ersetzt.

   Das Fahrzeug ist kein Freisteller. Es wird ueber eine Verlaufsmaske nach
   links und unten ausgeblendet — ein harter Fotorand haette an dieser Stelle
   sofort den Aufkleber-Eindruck erzeugt.
   ------------------------------------------------------------------------- */

.hz-signature {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #07090c;
  border-block: 1px solid #14181e;
  padding-block: clamp(4.5rem, 11vw, 9rem);
}

.hz-signature__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Schleier ueber der Bildseite. Die Verlaufsmaske am Bild allein reichte nicht:
   Die Beschreibungszeilen laufen weiter nach rechts als die Ueberschrift und
   lagen dadurch auf der Felge. Der Schleier senkt die Bildhelligkeit genau
   dort, wo Text steht, und laesst die rechte Haelfte unberuehrt. */
.hz-signature__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,9,12,.92) 0%, rgba(7,9,12,.78) 38%, rgba(7,9,12,.18) 62%, transparent 78%);
}

/* Das Signet als technische Zeichnung, nicht als Logo: gross, rechts
   angeschnitten, so zurueckhaltend, dass es beim ersten Blick als Struktur
   und nicht als Marke gelesen wird. Als Maske statt als Bild, damit sich die
   Form einfaerben laesst — die Datei traegt im Original einen Verlauf, den ein
   `<img>` nicht ohne Verfaelschung umfaerben koennte. */
/* Das Signet als Pseudoelement, nicht als eigenes Element im Inhalt.
   Zwei Gruende. Erstens ist es reine Grafik — ein leeres `<span>` dafuer im
   Seiteninhalt waere Auszeichnung ohne Aussage. Zweitens laeuft es
   absichtlich ueber den Rand hinaus und wird von der Flaeche beschnitten; die
   Ueberlaufpruefung meldet ein solches Element zu Recht, weil dort sonst
   abgeschnittener und damit unerreichbarer Inhalt durchrutschen wuerde. Als
   Pseudoelement steht es ausserhalb dieser Pruefung, und zwar zu Recht: Es ist
   kein Inhalt. Das Wasserzeichen der Buehne weiter oben ist aus demselben
   Grund ebenfalls ein Pseudoelement. */
.hz-signature__stage::before {
  content: "";
  position: absolute;
  /* Mittig auf der Bildseite, nicht an der Oberkante: Dort schnitt die
     Abschnittskante die Silhouette mitten durch, und was uebrig blieb, las sich
     als versehentliche blaue Welle statt als Zeichnung. */
  inset-block-start: 50%;
  inset-inline-end: -18%;
  inline-size: 78%;
  aspect-ratio: 361.3567 / 133.3578;
  transform: translateY(-50%);
  background: var(--hz-accent);
  -webkit-mask: url("assets/brand/hz-signet-mono.svg") no-repeat center / contain;
          mask: url("assets/brand/hz-signet-mono.svg") no-repeat center / contain;
  opacity: .09;
}


.hz-signature__vehicle {
  position: absolute;
  /* Ueber die volle Hoehe der Flaeche statt unten angesetzt. Unten angesetzt
     sass das Fahrzeug in der Ecke und war als Bildebene nicht mehr zu erkennen;
     ueber die volle Hoehe traegt die rechte Seite die Komposition. */
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(62%, 62rem);
  block-size: 100%;
  object-fit: cover;
  object-position: 58% 50%;
  /* Nur waagerecht ausblenden. Ein zweiter Verlauf nach unten haette
     `mask-composite` gebraucht, dessen Schreibweisen sich zwischen den Engines
     unterscheiden — fuer den gewonnenen Effekt zu teuer. */
  -webkit-mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 26%, #000 60%);
          mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 26%, #000 60%);
  opacity: .95;
}


/* Die Textspalte soll links neben dem Fahrzeug stehen. Das umgebende Layout
   ist `constrained` und zentriert seine Kinder — und zwar mit
   `margin-left: auto !important`. Dagegen hilft keine Spezifitaet; ein
   `!important` dagegenzusetzen waere ein Kampf gegen das Layoutsystem, den die
   naechste Kernaktualisierung wieder aufmacht.
   Deshalb andersherum: Der Behaelter bleibt so breit und so zentriert, wie das
   Layout ihn haben will, und die Begrenzung sitzt an seinen Kindern. Sie sind
   Blockelemente und stehen damit von sich aus links. */
.hz-signature .hz-signature__text,
.hz-signature .hz-signature__cta {
  position: relative;
  z-index: 1;
}
.hz-signature .hz-signature__text > * { max-inline-size: 37rem; }

.hz-signature__title {
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin-block: 0 var(--wp--preset--spacing--40);
}

/* Nummerierte Aufzaehlung: Hier ist die Reihenfolge echt — erst wird die
   Steuerung angepasst, dann Fahrwerk und Bremsen darauf abgestimmt, und die
   Abnahme steht am Ende. Ohne diese Folge waeren die Nummern Dekoration. */
.hz-signature__marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--wp--preset--spacing--30);
  counter-reset: none;
}
/* Ohne Ziffernspalte. Die drei Punkte — Steuergerät, Fahrwerk, Eintragung —
   sind keine Reihenfolge, sondern drei Themen nebeneinander. Eine Nummer
   davor behauptet einen Ablauf, den es nicht gibt; der Auftraggeber hat genau
   diese Art von Nummerierung als konstruiert bezeichnet. Das Zeichen vor dem
   Text trägt die Gliederung jetzt allein. */
.hz-signature__marks li {
  display: block;
  padding-block: var(--wp--preset--spacing--20);
  border-block-start: 1px solid #171c24;
}
.hz-signature__mark {
  color: var(--hz-muted);
  font-size: .9375rem;
  line-height: 1.6;
}
.hz-signature__mark strong { color: var(--hz-text); font-weight: 600; }
/* Das Zeichen laeuft in der Zeile mit, nicht darueber. */
.hz-signature__mark .hz-icon {
  display: inline-block;
  vertical-align: -.42em;
  margin-inline-end: .5rem;
}
.hz-signature__marks li:hover .hz-icon,
.hz-signature__marks li:focus-within .hz-icon { color: var(--hz-accent); }

/* Anschriebszeile wie in einem Werkstattprotokoll: eine Linie, eine Zeile.
   Kein Rahmen mit Eckklammern, keine Balkenanzeige — das kippte sofort ins
   Spielerische. */
.hz-signature__spec {
  margin-block: var(--wp--preset--spacing--50) 0;
  padding-block-start: .6rem;
  border-block-start: 1px solid #1b2029;
  font-family: var(--wp--preset--font-family--hz-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hz-dim);
}

/* Auf schmalen Viewports traegt die Bildebene nicht mehr: Das Fahrzeug laege
   hinter dem Text und machte ihn unlesbar. Dort wandert es nach oben, der Text
   steht darunter auf freier Flaeche. */
@media (max-width: 900px) {
  .hz-signature { padding-block-start: min(58vw, 22rem); }
  .hz-signature__stage::after {
    background: linear-gradient(180deg, transparent 0%, rgba(7,9,12,.55) 62%, rgba(7,9,12,.95) 100%);
  }
  .hz-signature__vehicle {
    inset-block: 0 auto;
    inset-inline-end: 0;
    inline-size: 100%;
    block-size: min(56vw, 21rem);
    object-position: 58% 46%;
    -webkit-mask: linear-gradient(180deg, #000 46%, transparent 100%);
            mask: linear-gradient(180deg, #000 46%, transparent 100%);
  }
  .hz-signature__stage::before { inline-size: 138%; inset-block-start: 30%; inset-inline-end: -30%; opacity: .07; }
  .hz-signature .hz-signature__text > * { max-inline-size: none; }
}

/* Das Fahrzeug faehrt ueber den Scrollbereich rund 30 px in die Komposition.
   Bewusst nur dort, wo der Browser die Scroll-Zeitachse in CSS kennt: Ein
   eigener Ersatzweg in JavaScript waere ein dauerhaft laufender Rechenweg fuer
   einen Effekt, den man kaum benennen kann, wenn er fehlt. Fehlt die
   Unterstuetzung, steht das Bild — und niemand vermisst etwas. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
    .hz-signature__vehicle {
      animation: hz-signature-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    /* Nur nach innen. Der Anfangswert lag bei +26 px und schob das Bild
       ueber die rechte Kante seines Kastens hinaus. Seit die Flaeche
       `overflow: hidden` traegt, faellt das nicht mehr als Seitenueberlauf
       auf, sondern als abgeschnittener Inhalt — `render-audit.py` meldete
       genau das: rechte Kante 1446 bei 1440 px Viewport. Derselbe Weg von
       40 px, nur vollstaendig innerhalb des Kastens. */
    @keyframes hz-signature-drift {
      from { translate: 0 0; }
      to   { translate: -40px 0; }
    }
  }
}

/* --- Buehne: der Einstieg ------------------------------------------------

   Die Buehne soll wie ein Standbild wirken, das sich gerade beruhigt — eine
   Kamerafahrt, die zum Stehen kommt. Nicht wie eine Webanimation.

   Drei Bewegungen, alle einmalig:
     1. Das Bild laeuft aus 1,7 % Ueberformat auf sein Mass. Mehr waere ein
        Zoom, weniger waere nicht wahrnehmbar.
     2. Der Text tritt gestaffelt ein, in der Reihenfolge, in der man ihn
        liest.
     3. Die Kennzahlenleiste kommt zuletzt.

   Die Staffelung haengt hier ausnahmsweise an `nth-child` und nicht an einer
   gesetzten Variablen. Der Grund ist der Unterschied zu den redaktionellen
   Abschnitten: Die Buehne ist von Hand gebaut und hat eine feste Folge von
   fuenf Elementen. Verschiebt jemand darin etwas, ist das eine Aenderung am
   Entwurf, keine redaktionelle Pflege.

   Bewusst ohne JavaScript: Der Einstieg soll mit dem ersten Bild laufen, nicht
   erst, wenn ein Skript im Fussbereich geladen hat. Die Regeln stehen deshalb
   in `@media (prefers-reduced-motion: no-preference)` — ohne Skript sichtbar,
   ohne Bewegungswunsch sofort da.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hz-stage--auto .wp-block-cover__image-background {
    animation: hz-stage-settle 1600ms var(--hz-ease-drive) both;
  }
  @keyframes hz-stage-settle {
    from { transform: scale(1.017); }
    to   { transform: scale(1); }
  }

  .hz-stage--auto .hz-stage__text > * {
    animation: hz-stage-in 480ms var(--hz-ease-drive) both;
  }
  .hz-stage--auto .hz-stage__text > *:nth-child(1) { animation-delay:  60ms; }
  .hz-stage--auto .hz-stage__text > *:nth-child(2) { animation-delay: 130ms; }
  .hz-stage--auto .hz-stage__text > *:nth-child(3) { animation-delay: 210ms; }
  .hz-stage--auto .hz-stage__text > *:nth-child(4) { animation-delay: 290ms; }
  .hz-stage--auto .hz-stage__text > *:nth-child(5) { animation-delay: 350ms; }
  .hz-stage--auto .hz-stage__text > *:nth-child(6) { animation-delay: 410ms; }
  @keyframes hz-stage-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Die Anschriebszeile brach auf schmalen Viewports nicht um und lief rechts aus
   dem Bild — von „ABGASANLAGE" war nichts mehr zu sehen. Die Sperrung ist dort
   enger und der Umbruch erlaubt. */
@media (max-width: 600px) {
  .hz-signature__spec {
    letter-spacing: .12em;
    font-size: .6875rem;
    line-height: 1.9;
  }
}

/* =========================================================================
   KARRIERE
   =========================================================================

   Vorher: Archiv und Einzelstelle trugen dieselbe Buehne mit demselben Foto,
   die Ortsangaben standen als drei gleich grosse Textbloecke ohne Fassung, und
   der Fliesstext war eine Folge aus sechs Ueberschriften und drei
   Aufzaehlungen mit neun, sieben und sechs Punkten. Optisch war das von einem
   automatisch erzeugten Stellenanzeigen-Feed nicht zu unterscheiden.

   Die Chip-Optik der Ortsangaben ist dabei kein neuer Einfall: Die Regeln
   dafuer standen bereits im Stylesheet, griffen aber nirgends, weil kein
   Markup die Klasse trug. Sie werden hier auf die tatsaechliche Ausgabe des
   Kurzbefehls umgestellt statt daneben ein zweites Muster zu erfinden.
   ------------------------------------------------------------------------- */

.hz-job-hero .hz-split.wp-block-columns { align-items: center; }
.hz-job-hero .hz-lead { margin-block-start: var(--wp--preset--spacing--30); }
.hz-job-hero .hz-eyebrow a { color: inherit; text-decoration: none; }
.hz-job-hero .hz-eyebrow a:hover { color: var(--hz-text); }

.hz-job-hero__bild {
  margin: 0;
  border-radius: var(--hz-radius-lg);
  overflow: hidden;
}
.hz-job-hero__bild img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Ortsangaben als Chips. Der Kurzbefehl des Karrieremoduls gibt
   `<div class="dg-factory-shortcode"><p>…</p></div>` aus — die Fassung muss
   deshalb am Absatz darin haengen, nicht am Container. */
.hz-job-meta { gap: .5rem .6rem; margin-block-start: var(--wp--preset--spacing--40); }
.hz-job-meta .dg-factory-shortcode { margin: 0; }
.hz-job-meta .dg-factory-shortcode p {
  margin: 0;
  /* Gemessen standen die Marken bei 8 px zur Oberkante ihres Kastens — unter
     dem Mindestmass der Stufe „eng". Der Wert kommt jetzt aus dem Massystem
     am Dateiende, damit Archiv und Stellenseite dieselbe Polsterung tragen. */
  padding: var(--hz-pad-eng) calc(var(--hz-pad-eng) * 1.4);
  line-height: 1;
  border: 1px solid var(--hz-line-strong);
  border-radius: 2px;
  background: rgba(255,255,255,.02);
  color: var(--hz-muted);
  font-family: var(--wp--preset--font-family--hz-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Arbeitsablauf -------------------------------------------------------
   Der Weg eines Fahrzeugs durch den Betrieb, nicht ein Tagesablauf: Uhrzeiten
   waeren erfunden, die vier Schritte stehen so in der Stellenbeschreibung.
   Deshalb sind die Nummern hier auch berechtigt — es ist eine echte Folge. */

.hz-steps-flow {
  list-style: none;
  margin: var(--wp--preset--spacing--60) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-block-start: 1px solid var(--hz-line);
}
.hz-step {
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) 0;
  padding-inline-end: var(--wp--preset--spacing--50);
  border-inline-start: 1px solid var(--hz-line);
  padding-inline-start: var(--wp--preset--spacing--40);
  position: relative;
}
.hz-step:first-child { border-inline-start: 0; padding-inline-start: 0; }

/* Die Linie oben laeuft beim Eintritt einmal durch — dieselbe Bewegung wie bei
   der technischen Linie, hier als Kante des Ablaufs. */
.hz-step__icon { display: block; color: #6b7789; margin-block-end: var(--wp--preset--spacing--30); }
.hz-step__icon .hz-icon { inline-size: 2rem; block-size: 2rem; }
.hz-step:hover .hz-icon,
.hz-step:focus-within .hz-icon { color: var(--hz-accent); }

/* Hier stand `.hz-step__no`. Die vier Schritte im Karrierearchiv trugen
   `01` bis `04`; die Reihenfolge steht bereits in der `ol` und in der
   Ueberschrift „Vier Schritte, ein Fahrzeug". Der Auftraggeber empfindet
   sichtbare Ordnungszahlen als konstruiert, und diese hier waren der letzte
   Rest davon auf der Website. */
.hz-step__name {
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--hz-text);
  margin: 0 0 .5rem;
}
.hz-step__text { color: var(--hz-muted); font-size: .9375rem; margin: 0; max-inline-size: 30ch; }

@media (max-width: 900px) {
  .hz-steps-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hz-step:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .hz-step:nth-child(n+3) { border-block-start: 1px solid var(--hz-line); }
}
@media (max-width: 600px) {
  .hz-steps-flow { grid-template-columns: 1fr; }
  .hz-step { border-inline-start: 0; padding-inline-start: 0; }
  .hz-step:nth-child(n+2) { border-block-start: 1px solid var(--hz-line); }
  .hz-step__text { max-inline-size: none; }
}

/* --- Stellenzeile im Archiv ----------------------------------------------
   Eine Stelle wird als eine Stelle gezeigt. Vorher standen dort eine
   Titelzeile und eine Zeile Anrisstext in einer randlosen Reihe — bei genau
   einer offenen Stelle sah der Abschnitt aus wie eine leere Tabelle. */

.hz-jobs .hz-job-row {
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius);
  padding: var(--wp--preset--spacing--50);
  background:
    linear-gradient(180deg, rgba(38,141,238,.05) 0%, transparent 42%),
    var(--hz-elevated);
  transition: border-color var(--hz-dur-micro) var(--hz-ease-standard);
}
.hz-jobs .hz-job-row + .hz-job-row { margin-block-start: var(--wp--preset--spacing--40); }
.hz-jobs .hz-job-row:hover,
.hz-jobs .hz-job-row:focus-within { border-color: var(--hz-line-strong); }

.hz-jobs .wp-block-post-title { margin-block: 0 0; }
.hz-jobs .wp-block-post-title a { text-decoration: none; color: var(--hz-text); }
.hz-jobs .wp-block-post-title a:hover { color: var(--hz-accent-hi); }
.hz-jobs .wp-block-post-excerpt { margin-block-start: var(--wp--preset--spacing--30); }
.hz-jobs .wp-block-post-excerpt p { max-inline-size: 68ch; }
.hz-jobs .hz-job-meta { margin-block-start: var(--wp--preset--spacing--30); }

/* --- Abschluss der Stelle ------------------------------------------------
   Grosse dunkle Flaeche, die Nummer traegt sie. Bewusst nicht der
   Kontaktbaustein, der unter jeder anderen Unterseite steht. */

.hz-job-close {
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(38,141,238,.12) 0%, transparent 58%),
    #07090c;
  border-block-start: 1px solid var(--hz-line);
}
.hz-job-close__inner { max-inline-size: 46rem; }
.hz-job-close__titel {
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 0 0 var(--wp--preset--spacing--30);
}
.hz-job-close__text { color: var(--hz-muted); font-size: 1.0625rem; margin: 0; }

/* Die Nummer ist der eigentliche Aufruf. Sie steht deshalb gross und als
   Verweis, nicht als Schaltflaeche unter zwei anderen. */
.hz-job-close__tel { margin: var(--wp--preset--spacing--50) 0 0; }
.hz-job-close__tel a {
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  letter-spacing: -.02em;
  color: var(--hz-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
/* Der Pfeil steht als eigenes Element mit `aria-hidden`, nicht als Inhalt
   eines Pseudoelements. Der Unterschied ist keine Formsache: Was in
   `content` steht, lesen gaengige Screenreader mit vor — hinter der
   Telefonnummer haette dann noch „Pfeil nach rechts" gestanden. Ein
   Pseudoelement laesst sich nicht mit `aria-hidden` versehen; ein Span schon.
   Dasselbe Muster traegt bereits der Pfeil der Leistungszeilen. */
.hz-job-close__tel {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  flex-wrap: wrap;
}
.hz-job-close__tel .hz-arrow {
  font-size: 1.6rem;
  color: var(--hz-accent);
  line-height: 1;
}
.hz-job-close__tel a:hover { color: var(--hz-accent-hi); }
.hz-job-close__tel:hover .hz-arrow,
.hz-job-close__tel:focus-within .hz-arrow { translate: var(--hz-dist-nudge) 0; }

.hz-job-close__zeit {
  margin: .6rem 0 0;
  color: var(--hz-muted);
  font-size: .875rem;
}
.hz-job-close__zeit .dg-factory-shortcode,
.hz-job-close__zeit .dg-factory-shortcode p { display: inline; margin: 0; }

/* --- Fliesstext der Stelle -----------------------------------------------
   Der Beitragskoerper war eine Folge aus sechs Ueberschriften und drei
   Aufzaehlungen mit neun, sieben und sechs Punkten — ohne ein einziges Bild.
   Diese Regeln geben ihm die Gliederung, die vorher fehlte. */

.hz-job-bild {
  margin: var(--wp--preset--spacing--60) 0;
  border-radius: var(--hz-radius-lg);
  overflow: hidden;
}
.hz-job-bild img { display: block; inline-size: 100%; block-size: auto; }
.hz-job-bild figcaption {
  margin-block-start: 0;
  padding: .7rem 1.1rem 1rem;
  color: var(--hz-muted);
  font-size: .875rem;
}
/* Das Innenmass ist nicht Geschmack, sondern die Folge der Ersatzflaeche.

   `.hz-job-bild` traegt `--hz-surface`, damit vor dem Laden kein Loch im
   Layout steht. Die Flaeche endet aber nicht am Bild, sie reicht bis unter die
   Bildunterschrift — und die stand ohne Innenmass an zwei Waenden zugleich,
   links und unten auf 0 px. Auf einem getoenten Kasten liest sich das als
   Fehler, nicht als Gestaltung.

   Die uebrigen getoenten Bildkaesten machen es laengst so: `.hz-real__main`
   polstert seine Bildunterschrift mit 17,6 px. Hier fehlte es als einzigem —
   am 10.09.2026 auf allen `main figure` mit Bildunterschrift nachgezaehlt. */

/* Aufgaben und Anforderungen in zwei Spalten. Sieben Punkte untereinander sind
   eine Liste; sieben Punkte nebeneinander sind ein Ueberblick. */
.hz-marks--zwei {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem var(--wp--preset--spacing--50);
}
@media (max-width: 781px) {
  .hz-marks--zwei { grid-template-columns: 1fr; }
}

/* --- Leistungen des Arbeitgebers -----------------------------------------
   Neun Punkte untereinander lesen sich wie eine Anspruchsliste. Gruppiert
   lesen sie sich wie vier Zusagen. Bewusst kein viergeteiltes Kachelraster:
   Die Gruppen tragen ihre Ueberschrift und eine Haarlinie, sonst nichts. */

.hz-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
  margin-block: var(--wp--preset--spacing--50) 0;
}
.hz-benefit {
  border-block-start: 1px solid var(--hz-line);
  padding-block-start: var(--wp--preset--spacing--40);
}
.hz-benefit__titel {
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--hz-text);
  margin: 0 0 var(--wp--preset--spacing--30);
}
.hz-benefit__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.hz-benefit__liste li {
  position: relative;
  padding-inline-start: 1.4rem;
  color: var(--hz-muted);
  font-size: .9375rem;
  line-height: 1.6;
}
.hz-benefit__liste li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  inline-size: .6rem;
  block-size: 2px;
  background: var(--hz-accent);
}
@media (max-width: 781px) {
  .hz-benefits { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
}

/* Die breiten Bausteine im Beitragskoerper stehen in einem `core/html`-Block.
   Der Kern vergibt `alignwide` nur an Bloecke, die die Ausrichtung als Attribut
   fuehren — freies Markup bekommt sie deshalb hier ueberhaupt erst.

   Die Breite selbst steht nicht mehr an dieser Stelle, sondern im Massabschnitt
   am Dateiende: `inline-size: 100%` hat sie an die Lesespalte gebunden, und
   genau deshalb blieben die zweispaltigen Raster der Stelle zwei sehr enge
   Saeulen, obwohl sie `alignwide` tragen. */

/* --- Signaturzeile der Leistungsseiten -----------------------------------

   Die sechs Leistungsseiten teilen sich denselben Aufbau: Leistungszeilen,
   Fragen und Antworten, ein Zitat. Genau deshalb brauchen sie eine Stelle, an
   der sie sich unterscheiden — und zwar eine, die aus dem Gegenstand kommt und
   nicht aus einer beliebig anderen Animation. Das ist diese Zeile: das Zeichen
   der jeweiligen Leistung, eine Linie, die beim Eintritt ihre Strecke ausmisst,
   und die Benennung.

   Bewusst genau eine Zeile je Seite. Dasselbe Zeichen an jeder Leistungszeile
   waere ein Muster, kein Zeichen. */

.hz-servicemark {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-block: var(--wp--preset--spacing--50) 0;
  font-family: var(--wp--preset--font-family--hz-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hz-muted);
}
.hz-servicemark .hz-icon { color: var(--hz-accent); }
.hz-servicemark .hz-techline {
  margin-block: 0;
  inline-size: clamp(2rem, 6vw, 4rem);
  flex: none;
}
/* Das Zeichen der Signaturzeile reagiert auf das Ueberfahren der Zeile selbst —
   sie ist kein Verweis, also gibt es keine andere Flaeche, die es ausloest. */
.hz-servicemark:hover .hz-icon--reifen .hz-icon__move      { transform: rotate(16deg); }
.hz-servicemark:hover .hz-icon--diagnose .hz-icon__move    { transform: translateX(12.4px); }
.hz-servicemark:hover .hz-icon--klima .hz-icon__move       { transform: rotate(90deg); }
.hz-servicemark:hover .hz-icon--reparatur .hz-icon__move   { transform: rotate(-9deg); }
.hz-servicemark:hover .hz-icon--gutachten .hz-icon__move   { transform: translate(-3.6px, 1.4px); }
.hz-servicemark:hover .hz-icon--performance .hz-icon__move { transform: rotate(66deg); }

/* Die Leistungszeilen bekommen beim Ueberfahren eine Kante statt einer
   Flaeche: Es sind keine Schaltflaechen, sie fuehren nirgendwohin. Die Kante
   meldet nur, welche Zeile gerade gelesen wird. */
.hz-detail-row {
  position: relative;
  transition: color var(--hz-dur-micro) var(--hz-ease-standard);
}
.hz-detail-row::before {
  content: "";
  position: absolute;
  inset-block: 0 auto;
  inset-inline-start: 0;
  block-size: 1px;
  inline-size: 100%;
  background: var(--hz-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--hz-dur-control) var(--hz-ease-line, var(--hz-ease-drive));
}
.hz-detail-row:hover::before { transform: scaleX(1); }

/* Bilder auf den Leistungsseiten oeffnen sich wie die uebrigen. Der Beschnitt
   muss dafuer am Rahmen sitzen, nicht am Bild — sonst laeuft die schraege
   Kante gegen die abgerundeten Ecken. */
.wp-block-image.hz-r-mask { overflow: hidden; border-radius: var(--hz-radius-lg); }
.wp-block-image.hz-r-mask img { border-radius: 0; }

/* --- Trefferflaechen ------------------------------------------------------

   Sechs Bedienelemente lagen unter 44 px, darunter der Menueschalter mit
   24 x 24 px — der einzige Zugang zur Navigation auf dem Telefon — und die
   Telefonnummer der Kontaktzeile mit 18 px Hoehe. Beides sind keine
   Nebensaechlichkeiten: Die Nummer ist die zentrale Handlungsaufforderung
   eines Werkstattbetriebs.

   Vergroessert wird ausschliesslich das Polster, nicht die Schrift oder das
   Zeichen. Die Zeile soll gleich aussehen und sich nur besser treffen lassen.
   ------------------------------------------------------------------------- */

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 10px;
  margin: -10px;
}

.hz-topbar a {
  display: inline-block;
  padding-block: .8rem;
  margin-block: -.8rem;
}

.hz-header-call a { padding-block: .58rem; }

/* Die Zeilen im geoeffneten Mobilmenue.
   Zwei Dinge sind hier zu beachten, beide weiter oben im Mobilmenue-Abschnitt
   schon begruendet. Erstens gewinnt die Kernregel
   `.responsive-container.is-menu-open:where(…) .navigation-item__content
   { padding: 0 }` mit drei Klassen gegen einen kuerzeren Selektor — gemessen:
   Die Zeile blieb bei 28 px, obwohl das Polster im Stylesheet stand. Zweitens
   darf `.is-menu-open` im Selektor nicht vorkommen, weil die Klasse erst
   JavaScript setzt und WP Rocket beim Zusammenstreichen jede Regel entfernt,
   deren Selektor im ausgelieferten HTML fehlt.
   Deshalb dieselbe Form ohne diese eine Klasse, mit einer Klasse mehr. Im
   geschlossenen Zustand traegt das Overlay `display: none`; die Regel ist dort
   folgenlos. */
@media (max-width: 599px) {
  .hz-header .wp-block-navigation__responsive-container:not(.disable-default-overlay)
    .wp-block-navigation-item__content {
    padding-block: .55rem;
  }
}

/* Die grosse Telefonschaltflaeche der Kontaktflaeche traegt ihre Groesse aus
   der Schrift. Ein Mindestmass statt zusaetzlicher Innenabstaende laesst die
   optische Zeile unveraendert. */
.hz-tel {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}


/* =========================================================================
   EIN MASSSYSTEM FÜR ALLE VORLAGEN

   Gemessen am 06.09.2026 auf der ausgelieferten Seite, bei 1440 px, je
   Abschnitt die Innenbreite und die linke Kante:

     Kopfbereich, Fußbereich, jede Sektion der Start-,
     Leistungs-, Kontakt- und Karriereseiten ........ 1320 px ab x = 60
     Beitragskörper /chip-tuning-…/ .................  780 px ab x = 330
     Stellenkörper /karriere/kfz-mechatroniker/ .....  780 px ab x = 330
     Kontaktfläche der Startseite ................... 1356 px ab x =  24
     eine Tuning-Sektion ............................ 1354 px ab x =  43

   Die beiden Artikelkörper sind der Grund, warum Beitrag und Stelle „unfertig"
   wirken: Ihre Überschrift steht im Kopfbereich bei x = 60, ihr Text beginnt
   270 px weiter rechts, und der Fußbereich steht wieder bei 60. Drei Achsen auf
   einer Seite, ohne gestalterischen Grund.

   Hier wird deshalb kein zweites System aufgemacht, sondern das vorhandene
   benannt: 1320 px ist der Wert, den `theme.json` als `wideSize` führt und den
   40 Abschnitte bereits benutzen. Die Lesebreite ist mit 46 rem dieselbe, die
   die Bildbühne für ihren Textblock verwendet — Titel im Kopf und Text im
   Körper stehen damit über derselben Strecke.
   ========================================================================= */

:root {
  /* Standardcontainer und Lesebreite kommen aus `theme.json` und werden hier
     nur benannt. Zwei Zahlen an zwei Orten waren der Ausgangszustand: Das
     Stylesheet fuehrte 46 rem als Lesebreite, `theme.json` 780 px — beide für
     dasselbe, mit 44 px Unterschied. Jetzt ist `theme.json` die Quelle
     (contentSize 46rem, wideSize 1320px); ändert sie sich, folgt das
     Stylesheet ohne Zutun. Die Ersatzwerte greifen nur, falls die
     Layout-Variablen einmal fehlen. */
  --hz-container: var(--wp--style--global--wide-size, 1320px);
  --hz-reading:   var(--wp--style--global--content-size, 46rem);

  /* Seitenabstand. Entspricht dem Wurzelpolster aus theme.json; steht hier
     zusätzlich als Name, damit keine Vorlage eigene Werte erfindet. */
  --hz-gutter: var(--wp--preset--spacing--40);

  /* Innenabstand gerahmter Bausteine, drei Stufen.
     eng    — Marken, Kennzeichnungen, kleine Bedienelemente
     normal — Karten, Fragenlisten, Formulare, Hinweisflächen
     weit   — große Flächen, Aufrufe, Panels über die volle Breite */
  --hz-pad-eng:    0.75rem;
  --hz-pad-normal: 1.5rem;
  --hz-pad-weit:   2rem;
}

@media (max-width: 599px) {
  :root {
    --hz-pad-normal: 1.25rem;
    --hz-pad-weit:   1.5rem;
  }
}

/* --- Artikelkörper -------------------------------------------------------

   Der Abschnitt trägt außen den Standardcontainer wie jeder andere Abschnitt
   der Seite. Innen bekommt der Fließtext seine Lesebreite — linksbündig auf
   derselben Achse, auf der Kopfbereich, Überschrift und Fußbereich stehen.

   Ausdrücklich linksbündig und nicht mittig: Eine mittige Lesespalte in einem
   1320 px breiten Container beginnt bei x = 352 und reißt genau die Achse
   wieder auf, um die es hier geht. Die Breite bleibt dieselbe, der Text steht
   nur dort, wo die Überschrift darüber schon steht.

   Breite Bausteine — Bilder, Fragenlisten, Aufrufe, die Raster der Stelle —
   nutzen den vollen Container. Sie sind der Grund, warum rechts neben der
   Lesespalte keine tote Fläche entsteht.

   `alignfull` wird hier bewusst auf denselben Container gezogen. Innerhalb
   eines gepolsterten Abschnitts kann es ohnehin nicht randlos laufen; ohne
   diese Regel bliebe es bei der alten Wirkung, in der ein `alignfull`-Block
   die Breite des Beitragskörpers annahm und als eigener Kasten in der Fläche
   stand. Die Regel für echte randlose Bühnen steht weiter oben und betrifft
   Abschnitte der Vorlage, nicht Blöcke im Beitrag. */

/* `!important` ist hier nicht Bequemlichkeit, sondern die einzige Moeglichkeit:
   Der constrained-Container von WordPress setzt jedem Kind
   `margin-left: auto !important; margin-right: auto !important`. Ohne
   Gegenwehr stehen Ueberschriften und Listen mittig in ihrer Lesespalte und
   damit bei x = 352, waehrend Einleitung, Fragenliste und Aufruf bei x = 60
   beginnen — gemessen genau der Achsenbruch, den diese Phase beseitigen soll.
   Dieselbe Begruendung steht weiter oben bei der Fragenliste; hier gilt sie
   fuer den ganzen Beitragskoerper. */
.hz-article .wp-block-post-content > * {
  max-inline-size: var(--hz-reading);
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

.hz-article .wp-block-post-content > :is(.alignwide, .alignfull, .hz-wide) {
  max-inline-size: none;
  inline-size: auto;
}

/* Im Panel ist die Fragenliste ein Raster; die Automatik-Raender des
   constrained-Layouts wuerden jede Zeile darin auf ihre Textbreite schrumpfen
   und mittig setzen — gemessen 339 px in einem 1254 px breiten Kasten. */
.hz-article-panel .hz-faq > * { margin-inline: 0 !important; }

/* Ersetzt die frühere Regel, die `alignwide` im Artikel auf `inline-size: 100%`
   der Lesespalte gesetzt hat — das war der Grund, warum die zweispaltigen
   Raster der Stelle zwei sehr schmale Säulen blieben, obwohl sie `alignwide`
   tragen. */
.hz-article .alignwide {
  max-inline-size: var(--hz-container);
  inline-size: auto;
  margin-inline: 0;
}

.hz-article .wp-block-post-content > .hz-lead {
  max-inline-size: var(--hz-reading);
}

/* --- Beitragstypografie --------------------------------------------------
   Der Artikel soll nicht wie rohe Ausgabe wirken. Der Rhythmus kommt aus dem
   Verhältnis der Abstände: viel Luft vor einer Zwischenüberschrift, wenig
   danach, damit Überschrift und zugehöriger Absatz als Einheit lesbar sind. */

.hz-article .wp-block-post-content > :is(h2, h3) { margin-block-start: 2.4em; }
.hz-article .wp-block-post-content > h2 + *,
.hz-article .wp-block-post-content > h3 + * { margin-block-start: 0; }
.hz-article .wp-block-post-content > :is(ul, ol) { margin-block-end: 1.6em; }
.hz-article .wp-block-post-content > figure { margin-block: 2.6em; }
.hz-article .wp-block-post-content figcaption {
  margin-block-start: .8rem;
  font-size: .8125rem;
  color: var(--hz-dim);
}
.hz-article .wp-block-post-content > blockquote {
  margin-block: 2.4em;
  padding-inline-start: var(--hz-pad-normal);
  border-inline-start: 3px solid var(--hz-accent);
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--hz-text);
}
.hz-article .wp-block-post-content a:not(.wp-element-button) {
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}

/* --- Gerahmte Bausteine im Artikel ---------------------------------------
   Fragenliste und Abschlussaufruf sind die beiden Stellen, an denen der
   Artikel die volle Containerbreite nutzt. Beide sind Kästen und tragen
   deshalb das Polster der Stufe „weit". */

.hz-article-panel {
  padding: var(--hz-pad-weit);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-lg);
  background:
    linear-gradient(180deg, rgba(38,141,238,.05) 0%, transparent 40%),
    var(--hz-surface);
}
.hz-article-panel > :first-child { margin-block-start: 0; }
.hz-article-panel > :last-child { margin-block-end: 0; }
.hz-article-panel .hz-faq { max-inline-size: none; margin-inline: 0; }
.hz-article-panel .hz-faq details:first-of-type { border-block-start: 0; padding-block-start: 0; }

.hz-article-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hz-pad-weit);
  align-items: center;
  justify-content: space-between;
  padding: var(--hz-pad-weit);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-lg);
  background:
    radial-gradient(80% 140% at 10% 0%, rgba(38,141,238,.12) 0%, transparent 60%),
    var(--hz-elevated);
}
.hz-article-cta__text { flex: 1 1 22rem; }
.hz-article-cta__titel {
  margin: 0 0 .5rem;
  font-family: var(--wp--preset--font-family--hz-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.hz-article-cta__text p { margin: 0; color: var(--hz-muted); max-inline-size: 52ch; }
.hz-article-cta .wp-block-buttons { margin: 0; }

/* --- Beitragskopf: Standfirst --------------------------------------------
   Der Übergang von der Bildbühne in den Text war bisher ein Sprung: großer
   Titel über dem Foto, dann sofort Fließtext. Die Zeile darunter nennt
   Rubrik und Datum auf der Achse des Containers und bindet beides zusammen. */

.hz-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: baseline;
  margin-block-end: var(--wp--preset--spacing--50);
  padding-block-end: var(--wp--preset--spacing--30);
  border-block-end: 1px solid var(--hz-line);
  font-size: .8125rem;
  color: var(--hz-dim);
}
.hz-article__meta .wp-block-post-date,
.hz-article__meta p { margin: 0; font-size: inherit; color: inherit; }
.hz-article__meta a { color: var(--hz-muted); text-decoration: none; }
.hz-article__meta a:hover { color: var(--hz-accent); }

/* =========================================================================
   TREFFERFLÄCHEN VON KARTEN

   Gemessen am 06.09.2026 auf /karriere/ bei 1440 px: Die Stellenkarte ist
   1320 × 226 px groß, anklickbar sind davon 500 × 35 px — 5,8 % der Fläche,
   die als eine Einheit gestaltet ist. Genau der vom Auftraggeber gemeldete
   Befund. Die Blogkarte lag bei 56,7 %, verteilt auf drei getrennte Links
   (Bild, Titel, „Beitrag lesen"), die alle dasselbe Ziel haben — für die
   Tastatur drei Stationen und für Screenreader drei Ansagen für einen Beitrag.

   Umgesetzt über ein Pseudoelement am vorhandenen Titellink. Damit bleibt es
   bei genau einem `<a>` je Karte: keine verschachtelten Links, ein Tabstopp,
   eine Ansage, und der Linktext ist die Überschrift und damit aussagekräftig.
   Der Zeigefinger stellt sich von selbst ein, weil die Fläche zum Link gehört.

   Der Preis dieser Bauform, offen benannt: Die Fläche liegt über dem Inhalt,
   deshalb lässt sich Text in der Karte nicht mehr mit der Maus markieren. Das
   ist die Eigenschaft, die die ganze Karte klickbar macht, und nicht zu
   umgehen — eine Fläche hinter dem Inhalt wird von dessen eigenem Hintergrund
   verdeckt und nimmt den Klick gar nicht erst an. Weitere Links in einer Karte
   müssen deshalb ausdrücklich höher gelegt werden; die Regel dafür steht
   direkt unter der Trefferfläche.
   ========================================================================= */

.hz-jobs .hz-job-row,
.hz-post-card {
  position: relative;
  isolation: isolate;
}

.hz-jobs .hz-job-row .wp-block-post-title a::after,
.hz-post-card .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* Ein zweiter Link in einer Karte bliebe sonst unerreichbar unter der Fläche.
   Aktuell trägt keine Karte einen; die Regel steht hier, damit der nächste
   Baustein nicht still unbedienbar wird. */
.hz-jobs .hz-job-row a:not(.wp-block-post-title a),
.hz-post-card a:not(.wp-block-post-title a) {
  position: relative;
  z-index: 2;
}

/* Der Fokus muss die Karte zeigen, nicht nur die Überschriftenzeile. Ohne
   diese Regel sitzt der Ring an der Textzeile, während die ganze Fläche als
   Ziel wirkt — mit Tastatur ist dann nicht erkennbar, was gerade aktiv ist. */
.hz-jobs .hz-job-row:has(a:focus-visible),
.hz-post-card:has(a:focus-visible) {
  outline: 2px solid var(--hz-accent);
  outline-offset: 3px;
  border-radius: var(--hz-radius);
}
.hz-jobs .hz-job-row:has(a:focus-visible) .wp-block-post-title a,
.hz-post-card:has(a:focus-visible) .wp-block-post-title a { outline: none; }

/* Ältere Browser ohne `:has()` behalten den Ring an der Überschrift — sichtbar
   bleibt der Fokus in jedem Fall. Zusätzlich reagiert die Karte selbst. */
.hz-jobs .hz-job-row:focus-within { border-color: var(--hz-accent); }

.hz-jobs .hz-job-row:hover .wp-block-post-title a,
.hz-post-card:hover .wp-block-post-title a { color: var(--hz-accent-hi); }

/* Der Hinweis, dass die Karte irgendwohin führt. Bisher stand er als eigener
   Link im Markup; als Zeichnung am Kasten spart er den dritten Tabstopp, ohne
   dass die Karte stummer wird. */
.hz-post-card::after {
  content: "Beitrag lesen →";
  margin-block-start: auto;
  padding-block-start: .9rem;
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hz-accent);
  transition: color var(--hz-dur-micro) var(--hz-ease-standard);
}
.hz-post-card:hover::after { color: var(--hz-accent-hi); }

@media (prefers-reduced-motion: reduce) {
  .hz-post-card::after { transition: none; }
}

/* --- Stellenkarte im Archiv ----------------------------------------------
   Was eine Karte mindestens sagen soll: welche Stelle, wo, in welchem Umfang.
   Ort und Beschäftigungsart standen bisher nur auf der Stellenseite; im Archiv
   blieb eine Überschrift mit zwei Zeilen Anriss. Die Werte kommen über
   Blockbindungen aus den Feldern der jeweiligen Stelle — leere Felder ergeben
   einen leeren Absatz, der hier verschwindet, damit keine leere Marke steht. */

.hz-job-row__meta {
  gap: .45rem .5rem;
  margin-block-end: var(--wp--preset--spacing--30);
}
.hz-job-row__meta:empty { display: none; }

.hz-job-chip {
  margin: 0;
  padding: var(--hz-pad-eng) calc(var(--hz-pad-eng) * 1.4);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--hz-accent-soft);
  background: rgba(38,141,238,.12);
  border: 1px solid rgba(38,141,238,.22);
  border-radius: 2px;
}
.hz-job-chip:empty { display: none; }

.hz-jobs .hz-job-row { padding: var(--hz-pad-weit); }
.hz-jobs .hz-job-row .wp-block-post-excerpt { margin-block-start: var(--wp--preset--spacing--30); }

/* Die Marken der Stellenseite tragen dieselbe Innenpolsterung wie die des
   Archivs. Gemessen standen sie vorher bei 8 px zur Oberkante ihres eigenen
   Kastens — unter dem Mindestmaß der Stufe „eng". */
.hz-job-meta__item {
  padding: var(--hz-pad-eng) calc(var(--hz-pad-eng) * 1.4);
  line-height: 1;
}

/* --- Nachtrag zur Achse ---------------------------------------------------
   Gemessen am 06.09.2026 auf der Stellenseite bei 1440 px: Der Abschlussblock
   steht mit 736 px bei x = 352 — mittig —, seine eigenen Schaltflächen daneben
   bei x = 60. Zwei Kanten in einem Baustein. Ursache ist dieselbe wie überall
   auf dieser Seite: eigene Maximalbreite plus die Automatik-Ränder des
   constrained-Containers. Deshalb dieselbe Behandlung wie bei Fragenliste,
   Zitat und Einleitung. */
.hz-job-close__inner {
  --hz-spalte: 1320px;
  margin-inline-start: max(0px, (100% - var(--hz-spalte)) / 2) !important;
  margin-inline-end: auto !important;
}

/* Die Karte im Raster muss die Höhe ihrer Zeile annehmen, sonst hat der
   Abschluss keinen freien Platz, den `margin-block-start: auto` aufnehmen
   könnte — gemessen standen die Hinweise „Beitrag lesen" dreier Karten auf
   drei Höhen. Das Rasterelement ist das `li`, nicht die Karte. */
.hz-postgrid .wp-block-post-template > li { display: grid; }
.hz-post-card { block-size: 100%; }

/* Frage und Zeichen sollen zusammengehören. Über die volle Containerbreite
   liegen zwischen „Muss Chiptuning eingetragen werden?" und dem Pluszeichen
   1250 px; die Trennlinie darf so breit sein, die Zeile nicht. */
.hz-article-panel .hz-faq summary { max-inline-size: 64rem; }

/* --- Kastenmodell für eigenes Markup -------------------------------------

   Gemessen am 06.09.2026 auf sechs Leistungsseiten bei 1440 px: Die
   Kundenstimme steht 1354 px breit ab x = 43, auf /kfz-gutachten/ zusätzlich
   die Leistungszeilen mit 1384 px ab x = 28 — beide mit `max-width: 1320px`.
   Ein Element kann nicht breiter sein als sein Höchstmaß, es sei denn, das
   Höchstmaß meint nur den Inhalt.

   Genau das ist hier der Fall. Der Blockeditor setzt `box-sizing: border-box`
   auf seine eigenen Bausteine; freies Markup in `core/html` — und daraus
   bestehen Kundenstimme, Leistungszeilen, Fragenliste und die Raster der
   Stelle — bekommt es nicht. Jedes Innenmaß und jeder Rand addieren sich dort
   auf die Breite: 2 px Linie plus 32 px Innenmaß ergeben die gemessenen 34 px
   Überstand.

   `:where()` hat die Spezifität null. Die Regel kann deshalb nichts
   überschreiben, was ein Baustein für sich selbst festlegt, und `box-sizing`
   vererbt nicht — betroffen sind nur die Elemente, die die Marke tragen. */

:where([class^="hz-"], [class*=" hz-"]) { box-sizing: border-box; }

/* =========================================================================
   ZWEI BEFUNDE AUS DER ABSCHLIESSENDEN SICHTPRÜFUNG (07.09.2026)
   ========================================================================= */

/* --- Das Zeichen rückte nur die erste Zeile ein --------------------------

   Gemessen auf der Startseite, Schwerpunktfläche Tuning: Die erste Zeile jeder
   Signaturzeile beginnt bei x = 150, ihre Folgezeilen bei x = 114. Der Grund
   ist das Zeichen: Es steht als `inline-block` am Anfang des Textes, schiebt
   die erste Zeile um seine Breite nach rechts, und der Umbruch fällt hinter ihm
   wieder zurück. Das liest sich wie ein Fehler, weil es einer ist — ein
   negativer hängender Einzug, den niemand gesetzt hat.

   Der hängende Einzug stellt es gerade: Das Polster schiebt den ganzen Block um
   Zeichenbreite plus Abstand nach rechts, der negative Erstzeileneinzug holt
   die erste Zeile um denselben Betrag zurück. Das Zeichen sitzt damit im
   Ausrückbereich, und alle Zeilen beginnen auf derselben Kante. */

.hz-signature__mark {
  --hz-zeichen: 2.25rem;              /* Zeichenbreite plus Abstand, gemessen 36 px */
  display: block;
  padding-inline-start: var(--hz-zeichen);
  text-indent: calc(var(--hz-zeichen) * -1);
}
.hz-signature__mark .hz-icon { margin-inline-end: .5rem; }

/* --- Die Telefonnummer stand 36 px links neben der Achse ------------------

   Gemessen auf der Startseite bei 1440 px: Die Überschrift der Kontaktfläche
   beginnt bei x = 60, die Nummer darunter bei x = 24.

   Die Ursache ist ein Gleichstand in der Kaskade, und sie betrifft mehr als
   diese eine Stelle. WordPress gibt für einen `constrained`-Container die Regel
   `.wp-container-…>:where(:not(.alignleft):not(.alignright):not(.alignfull))
   { margin-left: auto !important }` aus — Spezifität (0,1,0), weil `:where()`
   nichts beiträgt. Die Ausrichtungsregel dieses Stylesheets trägt mit `.hz-tel`
   genau dieselbe Spezifität und ebenfalls `!important`. Bei Gleichstand
   entscheidet die Reihenfolge, und das Inline-CSS des Kerns steht später im
   Dokument als das Stylesheet des Themes. Der Kern gewinnt.

   Aufgefallen ist das nie, weil beide Regeln fast überall dasselbe Ergebnis
   liefern: Steht das Element in einem 1320 px breiten Container, ergibt die
   Rechnung des Themes null und `auto` ebenfalls. Erst hier, wo die Nummer
   direktes Kind eines randlosen Abschnitts mit 1392 px Innenbreite ist, gehen
   die beiden auseinander — und weil eine Zeile im Zeilenfluss (`inline-flex`)
   mit `auto` nichts anfangen kann, blieb der Rand bei null.

   Eine Klasse mehr im Selektor entscheidet den Gleichstand. Bewusst eng auf
   diesen Baustein: Die allgemeine Regel bleibt, wie sie ist, weil sie überall
   sonst zum selben Ergebnis führt und eine breitere Änderung an dieser Stelle
   mehr verschieben würde, als die Sichtprüfung belegen kann. */

.hz-section .hz-tel {
  margin-inline-start: max(0px, (100% - var(--hz-spalte, 1320px)) / 2) !important;
}

/* =========================================================================
   LADEZUSTAND VON BILDERN

   Der Auftraggeber berichtet: „Bereich wirkt leer, einige Sekunden später
   erscheint das Bild."

   Gemessen am 07.09.2026 auf gedrosselter Verbindung (700 kbit, 300 ms
   Latenz), beim langsamen Durchscrollen der Startseite: An drei von vierzehn
   Scrollpositionen war von den Elementen im Sichtfeld kein einziges sichtbar.
   Die Ursache ist ausdrücklich **nicht** das Reveal-System — kein einziges
   Element hing im Zustand `armed` fest. Es waren durchweg Bilder, die noch
   nicht angekommen waren.

   Zwei Dinge folgen daraus.

   Erstens: Ein Bildrahmen ohne Fläche zeigt vor dem Laden den Seitengrund,
   und das liest sich als Fehler. Gemessen trugen alle Rahmen
   `background-color: rgba(0, 0, 0, 0)`. Jetzt tragen sie die Fläche der
   Marke. Damit steht dort während des Ladens ein Feld, das aussieht, als
   gehöre es dahin — und nicht ein Loch.

   Zweitens: Die Fläche verschwindet nicht wieder. Sie liegt hinter dem Bild,
   und ein Bild mit `object-fit: cover` deckt sie vollständig ab. Sichtbar ist
   sie nur, solange nichts davor liegt.

   Das ist keine Kaschierung eines Ladefehlers. Eine langsame Verbindung
   bleibt langsam; was sich ändern lässt, ist, ob der Zwischenzustand wie ein
   Zustand aussieht oder wie ein Defekt.
   ========================================================================= */

.hz-real__main,
.hz-real figure,
.hz-strip figure,
.hz-job-hero__bild,
.hz-job-bild,
.hz-post-card .wp-block-post-featured-image,
.hz-split figure,
.hz-signature__bild,
.hz-signature__stage,
.hz-quotes-anchor > img,
main .wp-block-image,
main figure.wp-block-image {
  background-color: var(--hz-surface);
}

/* Hier stand `.hz-contact-block` in der Liste. Das war falsch, und es hat den
   Fehler verursacht, den der Auftraggeber als „letzte CTA-Section hat zu wenig
   Kontrast" gemeldet hat.

   Die Kontaktfläche ist blau (`--hz-accent`) und trägt darauf beinahe
   schwarze Schrift (#06121f) — eine bewusste Umkehrung, die gut liest. Sie
   kam nur deshalb in diese Liste, weil sie ein Hintergrundbild hat. Das Bild
   liegt aber bei 18 Prozent Deckkraft über dem Blau und ist Dekoration; es
   braucht keine Ersatzfläche, während es lädt. Das Blau IST die Fläche.

   Die Regel überschrieb das Blau mit `--hz-surface`, also rgb(22,26,33).
   Gemessen stand danach rgb(6,18,31) auf rgb(22,26,33): Kontrast 1,0 zu 1 für
   die Überschrift, 1,06 für die Beizeile, 1,08 für die Telefonnummer. Nicht
   zu wenig Kontrast, sondern gar keiner.

   Die Ersatzfläche für das Hintergrundbild selbst steht weiter unten an
   `.hz-contact-block__bg`, wo sie hingehört. */
.hz-contact-block__bg { background-color: var(--hz-accent); }

/* Auf der hellen Fläche wäre der dunkle Grund ein Fremdkörper. */
.hz-section--light figure,
.wp-block-group.is-style-hz-section-light figure {
  background-color: var(--hz-light-line);
}

/* Ein Bild, das seinen Rahmen füllt, deckt die Fläche ab. Ohne diese Zeile
   bliebe bei `object-fit: contain` ein Rand der Fläche stehen. */
.hz-real__main img,
.hz-strip figure img,
.hz-job-hero__bild img,
.hz-job-bild img { display: block; }

/* =========================================================================
   RÜCKMELDUNG DES AUFTRAGGEBERS: ZEICHEN UND ORDNUNGSZAHLEN
   ========================================================================= */

/* --- Die Ordnungszahlen sind weg -----------------------------------------
   Der Auftraggeber wollte die Nummerierung der sechs Bereiche nicht. Sie ist
   aus dem Markup entfernt; hier fällt die Spalte weg, die sie getragen hat.
   Ohne diese Zeile bliebe eine 2,9 rem breite Lücke zwischen Zeichen und
   Name stehen — sichtbar als schiefe Kante über sechs Zeilen. */

.hz-line {
  grid-template-columns: 1.75rem minmax(9rem, calc(8.8 * clamp(1.5rem, 3.2vw, 2.4rem))) 1fr 2rem;
}
.hz-line__name { grid-column: 2; }
.hz-line__text { grid-column: 3; }
.hz-line__arrow { grid-column: 4; }

@media (max-width: 781px) {
  .hz-line { grid-template-columns: 1.75rem 1fr 2rem; }
  .hz-line__name { grid-column: 2; grid-row: 1; }
  .hz-line__arrow { grid-column: 3; grid-row: 1; }
  .hz-line__text { grid-column: 2 / -1; grid-row: 2; }
}

/* --- Das Zeichen reagiert deutlicher --------------------------------------

   Bisher wechselte beim Überfahren nur die Farbe, dazu bewegte sich das
   Innenleben des jeweiligen Zeichens — ein Rad drehte sich, ein Messwert
   wanderte. Das ist fein gearbeitet und war zu leise: Der Auftraggeber hat
   den Zustandswechsel als vorhanden, aber zu zurückhaltend beschrieben.

   Jetzt wächst das Zeichen zusätzlich um 14 Prozent und hebt sich einen Pixel.
   `scale` und `translate` als Einzeleigenschaften, nicht als `transform` —
   sonst kollidierten sie mit den `transform`-Regeln, die das Innenleben der
   Zeichen bewegen, und eine der beiden Bewegungen fiele aus.

   Der Pfeil geht von 0,5 auf 0,75 rem. Mehr wäre kein Hinweis mehr, sondern
   ein Sprung. */

.hz-line__icon,
.hz-step__icon,
.hz-servicemark .hz-icon,
.hz-detail-row .hz-icon {
  transition:
    scale var(--hz-dur-control) var(--hz-ease-drive),
    translate var(--hz-dur-control) var(--hz-ease-drive);
}

.hz-line:hover .hz-line__icon,
.hz-line:focus-visible .hz-line__icon {
  scale: 1.14;
  translate: 0 -1px;
}

.hz-line:hover .hz-line__arrow,
.hz-line:focus-visible .hz-line__arrow { translate: .75rem 0; }

/* --- Die Zeichen treten mit ein ------------------------------------------
   Die sechs Zeilen treten bereits versetzt ein; das Zeichen kam dabei fertig
   an. Jetzt wächst es innerhalb derselben Bewegung von 82 auf 100 Prozent —
   nicht als zweite Animation, sondern als Teil derselben. Der Zustand hängt
   an `[data-hz-reveal-state]`, also am Skript: Ohne JavaScript gibt es kein
   `armed`, und das Zeichen steht schlicht da. */

[data-hz-reveal-state="armed"] .hz-line__icon,
[data-hz-reveal-state="armed"] .hz-step__icon {
  scale: .82;
  opacity: .55;
}
[data-hz-reveal-state="in"] .hz-line__icon,
[data-hz-reveal-state="in"] .hz-step__icon {
  scale: 1;
  opacity: 1;
  transition:
    scale var(--hz-dur-reveal) var(--hz-ease-drive),
    opacity var(--hz-dur-reveal) var(--hz-ease-drive);
  transition-delay: calc(var(--hz-stagger-step) * min(var(--hz-i, 0), var(--hz-stagger-cap)));
}

@media (prefers-reduced-motion: reduce) {
  .hz-line__icon,
  .hz-step__icon,
  .hz-servicemark .hz-icon,
  .hz-detail-row .hz-icon { transition: none; }
  .hz-line:hover .hz-line__icon,
  .hz-line:focus-visible .hz-line__icon { scale: 1; translate: 0 0; }
  .hz-line:hover .hz-line__arrow,
  .hz-line:focus-visible .hz-line__arrow { translate: 0 0; }
  [data-hz-reveal-state="armed"] .hz-line__icon,
  [data-hz-reveal-state="armed"] .hz-step__icon { scale: 1; opacity: 1; }
}

/* --- Der Bilderstreifen trägt jetzt keine Überschrift mehr ----------------
   „Werkstatt, nicht Showroom" ist weg. Die Aussage kommt aus den vier
   Aufnahmen. Ohne Überschrift stand der Streifen allerdings mit dem Polster
   einer Textsektion da, also mit einer Lücke, in der vorher etwas stand. */

.hz-strip { margin-block-start: 0; }

/* =========================================================================
   RANDLOSE FLÄCHEN — EIN SYSTEM STATT EINZELFÄLLE

   Der Auftraggeber: „Das Hintergrundbild wird an den Seiten abgeschnitten
   beziehungsweise endet innerhalb des Contentcontainers."

   Gemessen am 07.09.2026 bei 1440 px: Das Hintergrundbild der Kontaktfläche
   steht 1320 px breit ab x = 60, in einem Abschnitt, der 1440 px breit ab
   x = 0 läuft. Links und rechts bleiben 60 px flaches Blau stehen. Bei
   1920 px sind es je 300 px.

   Das Bemerkenswerte daran: Genau diese Regel steht seit Monaten im
   Stylesheet, mit `max-inline-size: none; margin-inline: 0; inline-size: 100%`
   und einem Kommentar, der das Problem beschreibt. Sie hat nie gewirkt.

   Der Grund ist derselbe Gleichstand in der Kaskade, der schon die
   Telefonnummer 36 px verschoben hat: WordPress gibt für einen
   `constrained`-Container
   `.wp-container-…>:where(:not(.alignleft):not(.alignright):not(.alignfull))
   { max-width: 1320px; margin-left: auto !important; margin-right: auto !important }`
   aus. `:where()` trägt nichts zur Spezifität bei, der Selektor liegt also bei
   (0,1,0) — genauso hoch wie `.hz-contact-block__bg`. Bei Gleichstand
   entscheidet die Reihenfolge, und das Inline-CSS des Kerns steht später im
   Dokument. Für die Ränder kommt hinzu, dass der Kern `!important` setzt und
   die Themeregel nicht.

   Deshalb hier keine weitere Einzelreparatur, sondern ein benanntes Muster.
   Zwei Klassen im Selektor schlagen die eine des Kerns, `!important` schlägt
   sein `!important`, und `hz-bleed` sagt, was gemeint ist.

   Anwenden nur dort, wo eine Fläche wirklich bis an den Rand laufen soll —
   Hintergrundbilder, Bildbühnen, Farbflächen. Nicht auf Inhalte: Der Text
   bleibt im Standardcontainer, und genau diese Trennung ist der Punkt.

       randlose Fläche
           └── 1320 px Inhalt
   ========================================================================= */

.hz-section .hz-bleed,
.hz-section .hz-contact-block__bg,
.hz-section .hz-signature__stage,
.hz-contact-block .hz-contact-block__bg,
.hz-signature .hz-signature__stage {
  max-inline-size: none !important;
  inline-size: 100% !important;
  margin-inline: 0 !important;
}

/* Der Rahmen, in dem eine randlose Fläche liegt, muss den Überstand halten.
   Ohne `overflow: hidden` schiebt ein Bild mit `object-fit: cover` bei
   schmalen Fenstern eine waagerechte Bildlaufleiste heraus. */
.hz-contact-block,
.hz-signature { overflow: hidden; }

/* --- WhatsApp als zweiter Weg --------------------------------------------
   Der Auftraggeber wollte neben der Nummer einen WhatsApp-Weg. Es ist ein
   Link auf `wa.me` und sonst nichts: kein eingebettetes Skript, kein Widget,
   keine Einwilligungsfrage für eine Schaltfläche.

   In der Kopfzeile steht er als zurückhaltende Zeile neben „Anrufen", in der
   Bildbühne als eigener Weg unter der Nummer. Beide Male mit dem Grünton der
   Marke WhatsApp als schmaler Kante — genug, um ihn zu erkennen, zu wenig,
   um die blaue Markenwelt zu stören. */

.hz-wa {
  --hz-wa: #25d366;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  color: var(--hz-text);
  transition: color var(--hz-dur-micro) var(--hz-ease-standard);
}
.hz-wa::before {
  content: "";
  inline-size: .55rem;
  block-size: .55rem;
  border-radius: 50%;
  background: var(--hz-wa);
  flex: none;
}
.hz-wa:hover,
.hz-wa:focus-visible { color: var(--hz-wa); }

.hz-header-wa { margin: 0; }
.hz-header-wa a { padding-block: .58rem; }

/* Unter 600 px teilen sich „Anrufen" und das Menü die Breite. Ein dritter
   Punkt macht beide schlechter erreichbar; der Weg steht dort in der Bühne. */
@media (max-width: 599px) {
  .hz-header-wa { display: none; }
}

/* In der Bühne steht der Weg unter der Nummer, mit eigener Zeile und einer
   Trefferfläche, die den Finger nicht sucht. */
.hz-herotel__wa {
  display: block;
  margin-block-start: .55rem;
}
.hz-herotel__wa .hz-wa {
  min-block-size: 44px;
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .01em;
  color: #e7edf4;
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}

@media (prefers-reduced-motion: reduce) {
  .hz-wa { transition: none; }
}

/* =========================================================================
   UNTERMENÜ „LEISTUNGEN"

   Der Auftraggeber wollte die sechs Leistungsseiten direkt aus dem Kopfbereich
   erreichbar haben. Umgesetzt mit `core/navigation-submenu`, nicht mit einer
   eigenen Konstruktion: Der Kern bringt die Tastaturbedienung, `aria-expanded`,
   das Schließen mit Escape und beim Verlassen des Fokus bereits mit. Eine
   selbstgebaute Klappliste müsste das alles nachbauen und würde es schlechter
   tun.

   Der Punkt „Leistungen" bleibt dabei ein Ziel: Er führt weiter auf die
   Übersicht, die Liste darunter direkt auf die sechs Seiten. Ein Menüpunkt,
   der nur noch aufklappt, verliert einen Weg.
   ========================================================================= */

/* Der Selektor ist absichtlich so lang.

   Der Kern gibt für das Untermenü aus:

       .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container
       { background-color: #fff; color: #000; }

   Das sind drei Klassen — `:not()` zählt sein Argument mit. Die frühere
   Fassung dieser Regel stand mit zwei Klassen dagegen und verlor. Die Folge
   war eine weiße Fläche mit dem gedämpften Grau des Themes darauf: gemessener
   Kontrast 2,11 zu 1, verlangt sind 4,5. Genau das hat der Auftraggeber
   gesehen — „teilweise wird Text praktisch unsichtbar".

   Dieselbe Art von Gleichstand hat dieses Projekt schon einmal getroffen, bei
   den Containerbreiten. Deshalb hier nicht `!important`, sondern der Weg, der
   dort auch funktioniert hat: den Selektor über den des Kerns heben und
   dazuschreiben, gegen welche Regel er antritt. */
.hz-header nav.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
  min-inline-size: 15rem;
  padding: .5rem;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-lg);
  background:
    linear-gradient(180deg, rgba(38,141,238,.06) 0%, transparent 46%),
    var(--hz-elevated);
  box-shadow: var(--hz-shadow);
  color: var(--hz-text);
}

.hz-header nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: .55rem .8rem;
  border-radius: var(--hz-radius);
  color: var(--hz-muted);
  font-size: .9375rem;
  text-decoration: none;
  transition:
    color var(--hz-dur-micro) var(--hz-ease-standard),
    background-color var(--hz-dur-micro) var(--hz-ease-standard);
}
.hz-header nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.hz-header nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  /* Der Hover trägt nicht nur eine Tönung, sondern auch eine hellere Schrift.
     Eine Tönung allein hätte den Zustand bei 12 Prozent Deckkraft kaum
     sichtbar gemacht. */
  color: var(--hz-text);
  background-color: rgba(38,141,238,.18);
}

/* Die aktuelle Seite bleibt erkennbar, auch im Untermenü. */
.hz-header nav.wp-block-navigation .wp-block-navigation__submenu-container
  .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: var(--hz-text);
  background-color: rgba(38,141,238,.10);
}

/* Die Bewegung beim Öffnen. 180 ms, dieselbe Kurve wie überall — lang genug,
   dass die Liste nicht erscheint, kurz genug, dass niemand darauf wartet.
   Bewegt werden nur `opacity` und `translate`; die Sichtbarkeit schaltet der
   Kern, und `visibility` lässt sich nicht sinnvoll interpolieren. */
.hz-header .has-child > .wp-block-navigation__submenu-container {
  opacity: 0;
  translate: 0 -.35rem;
  transition:
    opacity var(--hz-dur-control) var(--hz-ease-drive),
    translate var(--hz-dur-control) var(--hz-ease-drive);
}
/* Ausdrücklich dieselben Bedingungen, unter denen der Kern die Liste
   sichtbar schaltet — und ausdrücklich nicht `:focus-within`.

   Gemessen: Mit `:focus-within` lief beim Tabben auf „Leistungen" die
   Deckkraft auf 1, während der Kern `visibility: hidden` hielt. Sichtbar wurde
   dadurch nichts, aber die Zustände liefen auseinander. Der Kern öffnet bei
   `open-on-hover-click` bewusst nicht auf Fokus des Links, sondern über den
   eigenen Schalter daneben; der trägt `aria-expanded` und ist mit der Tastatur
   erreichbar. Wer die Sichtbarkeit besitzt, bestimmt auch, wann animiert
   wird. */
.hz-header .has-child:hover > .wp-block-navigation__submenu-container,
.hz-header .has-child > .wp-block-navigation__submenu-container:hover,
.hz-header .has-child:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"])
  > .wp-block-navigation__submenu-container,
.hz-header .has-child [aria-expanded="true"] + .wp-block-navigation__submenu-container {
  opacity: 1;
  translate: 0 0;
}

/* Der Pfeil am Elternpunkt dreht sich, wenn die Liste offen ist. */
.hz-header .wp-block-navigation-submenu__toggle svg {
  transition: rotate var(--hz-dur-control) var(--hz-ease-drive);
}
.hz-header .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg { rotate: 180deg; }

/* Im Mobilmenü klappt die Liste im Fluss auf. Dort ist die Fläche des
   Aufklappmenüs fehl am Platz: Sie läge als Kasten in einem Kasten. */
@media (max-width: 599px) {
  /* `nav.wp-block-navigation:not(.has-background)` steht auch hier, und zwar
     zwingend.

     Die Regel für die Desktopfläche musste über die Kernregel gehoben werden
     und liegt seitdem bei (0,4,1). Diese hier stand mit (0,3,0) dagegen und
     gewann nur noch teilweise: Grund und Rahmen kamen von hier, Schatten und
     Innenmaß blieben vom Desktop stehen. Gemessen bei 390 px: durchsichtig,
     ohne Rahmen, aber mit Schlagschatten und 32 px seitlichem Polster. Ein
     halber Kasten.

     Der Fall stammt aus dem Codex-Review und war im Screenshot leicht zu
     übersehen, weil die Fläche ohne Grund ohnehin unauffällig wirkt. */
  .hz-header nav.wp-block-navigation:not(.has-background)
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container,
  .hz-header nav.wp-block-navigation
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
    padding: 0 0 0 1rem;
    border: 0;
    border-inline-start: 1px solid var(--hz-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    min-inline-size: 0;
    opacity: 1;
    translate: 0 0;
  }
  .hz-header nav.wp-block-navigation .wp-block-navigation__responsive-container
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding-block: .55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hz-header .has-child > .wp-block-navigation__submenu-container,
  .hz-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
  .hz-header .wp-block-navigation-submenu__toggle svg { transition: none; }
  .hz-header .has-child > .wp-block-navigation__submenu-container { translate: 0 0; }
}

/* =========================================================================
   AKZENT-PANEL — AUS EINEM EINZELFALL EIN MUSTER

   Der Auftraggeber hat den Baustein „Rechtliches: Eintragungspflicht beachten"
   auf der Tuningseite ausdrücklich als gelungen benannt: linke Akzentlinie,
   Verlauf nach rechts auslaufend, Inhalt daneben.

   Bisher steckte diese Gestaltung in `.hz-note.hz-marks` und damit an einer
   Aufzählung fest — sie ließ sich nur dort verwenden, wo eine Liste stand.
   Hier steht dieselbe Idee als eigenständiges Muster: Es nimmt Überschrift,
   Fließtext, Listen und Schaltflächen auf.

   Bewusst sparsam einzusetzen. Ein Panel hebt etwas hervor; drei Panels
   untereinander heben nichts mehr hervor, sie werden zur Tapete. Ein bis zwei
   je Seite, und nur dort, wo es wirklich etwas Wichtiges zu sagen gibt:
   Hinweise mit Folgen, technische Abläufe, Fragen zu Versicherung und
   Abnahme.
   ========================================================================= */

.hz-accent-panel {
  border-inline-start: 3px solid var(--hz-accent);
  padding: var(--hz-pad-weit) var(--hz-pad-weit) var(--hz-pad-weit) var(--hz-pad-normal);
  background: linear-gradient(90deg, rgba(38,141,238,.10), transparent 62%);
  margin-block: var(--wp--preset--spacing--50);
}
.hz-accent-panel > :first-child { margin-block-start: 0; }
.hz-accent-panel > :last-child { margin-block-end: 0; }

.hz-accent-panel :is(h2, h3, h4) {
  font-family: var(--wp--preset--font-family--hz-display);
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin-block: 0 .6rem;
}
.hz-accent-panel p { color: var(--hz-muted); max-inline-size: 70ch; }
.hz-accent-panel .hz-marks { margin-block-start: var(--wp--preset--spacing--30); }
.hz-accent-panel .hz-marks li::before { background: var(--hz-accent-soft); }

/* Auf der hellen Fläche der Gutachtenseite trägt der Verlauf nicht — dort
   liegt der Akzent als Linie auf hellem Grund, ohne Schleier. */
.hz-section--light .hz-accent-panel,
.wp-block-group.is-style-hz-section-light .hz-accent-panel {
  background: linear-gradient(90deg, rgba(2,42,117,.07), transparent 62%);
}
.hz-section--light .hz-accent-panel p { color: #454f5c; }

@media (max-width: 599px) {
  .hz-accent-panel {
    padding-inline: var(--hz-pad-normal) var(--hz-pad-normal);
  }
}

/* --- Handlungsaufruf in der Bildbühne -------------------------------------
   Auf mehreren Leistungsseiten fehlte im Kopf ein klarer nächster Schritt.
   Die Gruppe hält primären und sekundären Weg nebeneinander, ohne dass beide
   gleich laut werden: Der zweite ist ein Verweis, keine zweite Schaltfläche. */

.hz-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.4rem;
  margin-block-start: var(--wp--preset--spacing--40);
}
.hz-hero-cta .hz-wa,
.hz-hero-cta > p {
  margin: 0;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  color: #e7edf4;
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.hz-hero-cta a:not(.wp-element-button) {
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 600;
  font-size: .9375rem;
  color: inherit;
  text-decoration: none;
}
.hz-hero-cta a:not(.wp-element-button):hover { color: var(--hz-accent-soft); }

/* =========================================================================
   DAS SIGNET ALS WASSERZEICHEN IN DER BILDBÜHNE

   Auf den Leistungsseiten trägt der Kopf bisher nur Foto, Titel und Vorspann.
   Das Zeichen der Werkstatt taucht erst wieder im Fußbereich auf. Hier steht
   es groß und sehr leise im Kopf — rechts, hinter dem Text, in der dunklen
   Zone des Verlaufs.

   Umgesetzt als Maske, nicht als Bild: So nimmt das Zeichen die Farbe aus der
   Regel und lässt sich hell oder in Akzentfarbe halten, ohne eine zweite
   Datei. Die Maske liegt auf einem Pseudoelement des inneren Containers, weil
   `::before` (Verlauf) und `::after` (Klimaservice-Tönung) der Bühne selbst
   schon belegt sind.

   Zurückhaltend, aber nicht unsichtbar: 9 Prozent Deckkraft. Der erste Anlauf
   stand bei 5 Prozent — im Screenshot der Inspektionsseite war davon über dem
   unruhigen Foto nichts mehr zu erkennen. Ein Wasserzeichen, das niemand
   bemerkt, ist keine Zurückhaltung, sondern eine tote Regel.

   Es soll auffallen, dass da etwas ist, nicht was da steht.

   Es steht nicht auf Seiten mit hellem Kopf und nicht auf schmalen Viewports —
   dort ist die Bühne so knapp, dass ein zweites Element im Bild nur stört.
   ========================================================================= */

.hz-stage--page .wp-block-cover__inner-container { position: relative; }

@media (min-width: 900px) {
  .hz-stage--page .wp-block-cover__inner-container::after {
    content: "";
    position: absolute;
    z-index: -1;
    /* Nur der obere Anker. Werden beide Kanten gesetzt, rechnet der Browser
       die Höhe aus ihnen und `aspect-ratio` bleibt wirkungslos — gemessen:
       374 px breit, 0 px hoch. */
    inset-block-start: 50%;
    inset-inline-end: clamp(1rem, 4vw, 4rem);
    inline-size: clamp(14rem, 26vw, 26rem);
    aspect-ratio: 361 / 133;
    translate: 0 -50%;
    pointer-events: none;

    background-color: #ffffff;
    opacity: .09;

    -webkit-mask-image: url("assets/brand/hz-signet-mono.svg");
    mask-image: url("assets/brand/hz-signet-mono.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
  }

  /* Der Gutachten-Kopf ist hell getönt; Weiß auf Hell ist dort nichts. */
  .hz-page-kfz-gutachten .hz-stage--page .wp-block-cover__inner-container::after {
    background-color: #0b0e12;
    opacity: .07;
  }

  /* Auf der Tuningseite darf es etwas deutlicher sein und die Akzentfarbe
     tragen — das ist die Seite, die auffallen soll. */
  .hz-page-tuning .hz-stage--page .wp-block-cover__inner-container::after {
    background-color: var(--hz-accent);
    opacity: .11;
    inline-size: clamp(18rem, 32vw, 32rem);
  }
}

/* Wo das Maskieren nicht geht, steht schlicht nichts. Ein Ersatzbild wäre
   sichtbarer als das Wasserzeichen selbst. */
@supports not ((mask-image: url("x.svg")) or (-webkit-mask-image: url("x.svg"))) {
  .hz-stage--page .wp-block-cover__inner-container::after { display: none; }
}

/* =========================================================================
   UNTERMENÜ SCHMAL: AUFKLAPPEN STATT DAUERLISTE

   Der Kernblock zeigt im Overlay jedes Untermenü offen und blendet seinen
   Umschalter aus. Sieben Leistungsverweise stehen dadurch fest im Menü und
   drücken Kontakt und Karriere nach unten.

   Der eigene Schalter kommt aus hz-motion.js. Er ist nur da, wenn das Skript
   läuft — ohne Skript bleibt die Liste offen, was der Kern ohnehin tut.
   Deshalb hängt die Zuklapp-Regel am Attribut `data-hz-sub`, das nur das
   Skript setzt: Kein Skript, kein zugeklapptes Menü, kein verlorener Inhalt.
   ========================================================================= */

.hz-subtoggle { display: none; }

@media (max-width: 599px) {
  .hz-header .wp-block-navigation__responsive-container.is-menu-open .hz-subtoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    min-block-size: 44px;
    margin-inline-start: .25rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: rotate var(--hz-dur-control) var(--hz-ease-drive),
                background-color var(--hz-dur-micro) var(--hz-ease-drive);
  }
  .hz-header .wp-block-navigation__responsive-container.is-menu-open
    .hz-subtoggle[aria-expanded="true"] { rotate: 180deg; }
  .hz-header .wp-block-navigation__responsive-container.is-menu-open
    .hz-subtoggle:focus-visible {
    outline: 2px solid var(--hz-accent);
    outline-offset: 2px;
  }

  /* Der Eintrag mit Untermenü wird zur Zeile: Verweis links, Schalter rechts,
     Fläche darunter über die volle Breite. */
  .wp-block-navigation__responsive-container.is-menu-open
    li.has-child[data-hz-sub] { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .wp-block-navigation__responsive-container.is-menu-open
    li.has-child[data-hz-sub] > .wp-block-navigation__submenu-container {
    grid-column: 1 / -1;
  }

  /* Zu heißt zu. `display: none` statt Höhe null, damit kein Rest von
     Innenabstand als Fuge stehen bleibt. */
  .wp-block-navigation__responsive-container.is-menu-open
    li.has-child[data-hz-sub="zu"] > .wp-block-navigation__submenu-container {
    display: none;
  }

  /* Aufklappen bekommt Bewegung, Zuklappen nicht: Eine Fläche, die sich beim
     Schließen erst noch verabschiedet, fühlt sich zäh an. */
  .wp-block-navigation__responsive-container.is-menu-open
    li.has-child[data-hz-sub="auf"] > .wp-block-navigation__submenu-container {
    animation: hz-sub-auf var(--hz-dur-control) var(--hz-ease-drive) both;
  }
}

@keyframes hz-sub-auf {
  from { opacity: 0; translate: 0 -.4rem; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hz-subtoggle { transition: none !important; }
  .wp-block-navigation__responsive-container.is-menu-open
    li.has-child[data-hz-sub="auf"] > .wp-block-navigation__submenu-container {
    animation: none !important;
  }
}

/* =========================================================================
   ANFAHRTSKARTE MIT EINWILLIGUNG

   Der Kasten hat zwei Zustände. Zu: ein Platzhalter mit Erklärung, einem
   Knopf und einem Ausweichverweis. Auf: die Karte, der Platzhalter weg.

   Der Platzhalter ist kein grauer Kasten mit „Inhalt blockiert". Wer hier
   steht, sucht die Anschrift — also steht die Erklärung so da, dass man
   auch ohne Klick weiterkommt.
   ========================================================================= */

.hz-consent-embed {
  position: relative;
  margin-block: var(--wp--preset--spacing--40);
  border: 1px solid var(--hz-line);
  border-radius: 4px;
  background: var(--hz-surface);
  overflow: hidden;
}
.hz-consent-embed[data-hz-consent-ratio="16:9"] { aspect-ratio: 16 / 9; }
.hz-consent-embed[data-hz-consent-ratio="4:3"]  { aspect-ratio: 4 / 3; }

.hz-consent-embed__platzhalter {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background:
    linear-gradient(180deg, rgba(10,13,17,.55), rgba(10,13,17,.86)),
    repeating-linear-gradient(45deg, #11161e 0 12px, #131922 12px 24px);
}
.hz-consent-embed__hint {
  margin: 0;
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--hz-text);
  max-inline-size: 46ch;
}
.hz-consent-embed__was {
  margin: 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--hz-muted);
  max-inline-size: 58ch;
}
.hz-consent-embed__knopf { margin: .25rem 0 0; }
.hz-consent-embed__laden { cursor: pointer; border: 0; }
.hz-consent-embed__aus { margin: 0; font-size: .8125rem; }
.hz-consent-embed__aus a { color: var(--hz-accent-soft); }

.hz-consent-embed__frame {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}
.hz-consent-embed[data-hz-consent="auf"] .hz-consent-embed__platzhalter { display: none; }

/* Der Knopf kommt mit `hidden` aus dem Server und wird erst vom Skript
   sichtbar. Ohne JavaScript trägt der Ausweichverweis allein — ein Knopf,
   der nichts tut, ist schlimmer als keiner. */

@media (max-width: 599px) {
  .hz-consent-embed[data-hz-consent-ratio="16:9"] { aspect-ratio: 4 / 5; }
}

/* --- Karriereabschnitt der Startseite --------------------------------------
   Die Stellen kommen aus dem Verzeichnis, nicht aus dem Seitentext. Bei genau
   einer Stelle trägt die Überschrift den Titel und den Verweis; ab zwei kommt
   die Liste dazu. Beide Fälle brauchen wenig: Es soll nach Aushang aussehen,
   nicht nach Stellenbörse. */

.hz-karriere-teaser__liste {
  list-style: none;
  margin: var(--wp--preset--spacing--40) 0 0;
  padding: 0;
  border-block-start: 1px solid var(--hz-line);
}
.hz-karriere-teaser__liste li { border-block-end: 1px solid var(--hz-line); }
.hz-karriere-teaser__liste a {
  display: block;
  padding-block: .8rem;
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 600;
  color: var(--hz-text);
  text-decoration: none;
  transition: color var(--hz-dur-micro) var(--hz-ease-drive),
              padding-inline-start var(--hz-dur-control) var(--hz-ease-drive);
}
.hz-karriere-teaser__liste a:hover,
.hz-karriere-teaser__liste a:focus-visible {
  color: var(--hz-accent);
  padding-inline-start: .4rem;
}
.hz-karriere-teaser__leer { color: var(--hz-muted); }

/* Die Überschrift ist bei einer einzelnen Stelle selbst der Verweis. Der
   Unterstrich bleibt weg — die Schaltfläche darunter ist der eigentliche Weg,
   die Überschrift nur die zweite Gelegenheit. */
h2 > a[href*="/karriere/"] { color: inherit; text-decoration: none; }
h2 > a[href*="/karriere/"]:hover { color: var(--hz-accent); }

/* Der Anfahrtsverweis auf der Kontaktseite. */
.hz-route-line { margin-block-start: var(--wp--preset--spacing--40); }

/* --- Bewerbungsformular auf der Stellenseite (single-karriere.html) ------
   Ergänzt .hz-job-close (siehe dort, Zeile ~3434) um den Formular-Block.
   Eigener Bezeichner statt einer weiteren allgemeinen .wpforms-Regel, damit
   das nur diese eine Einbindung betrifft. */
.hz-job-close__formular {
  padding-block-start: var(--wp--preset--spacing--60);
  border-block-start: 1px solid var(--hz-line);
}
.hz-job-close__formular-titel {
  /* Gleiche Sprache wie .hz-job-close__titel darüber (Zeile ~3441), nur
     zurückhaltender - Ebene 3 statt der großen Werbebotschaft. */
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--hz-text);
  margin: 0 0 var(--wp--preset--spacing--40);
}

/* --- Initiativbewerbung ohne offene Stelle --------------------------------
   Hinweistext, der [wpforms] auf /karriere/initiativbewerbung/ ersetzt,
   solange regular_jobs = 0 ist (inc/initiativbewerbung.php,
   suppress_form_shortcode()). Bewusst dieselbe Optik wie .hz-job-close__text
   (Zeile ~3449), damit kein neuer visueller Ton entsteht, nur für einen
   Übergangszustand, der selten sichtbar sein sollte. */
.hz-initiative-inaktiv {
  color: var(--hz-muted);
  font-size: 1.0625rem;
  max-inline-size: 40rem;
}

/* =========================================================================
   TUNING: DIE SEITE, DIE AUFFALLEN SOLL

   Der Auftraggeber will Tuning als visuellen Höhepunkt. Bisher lief die Seite
   im selben Takt wie die fünf anderen Leistungsseiten: Bühne, Text neben Bild,
   Tabelle, Text neben Bild, Fragen. Kein Bild größer als eine halbe Spalte.

   Dazugekommen sind zwei Dinge, beide sparsam: ein vollflächiger Bildmoment
   und ein Dreier aus Detailaufnahmen. Kein Scroll-Jacking, keine gekaperte
   Scrollachse — die Bewegung besteht aus Einblendungen beim Eintritt ins Bild
   und läuft mit dem Scrollen, nicht gegen es.
   ========================================================================= */

/* Der Vollbildmoment der Tuningseite ist höher als der auf dem
   Reparaturservice. Nicht aus Willkür: Auf dieser Seite ist das Bild das
   Argument, dort illustriert es einen Ablauf. */
.hz-full--tuning.wp-block-cover { min-block-size: clamp(34rem, 86vh, 52rem); }
.hz-full--tuning .wp-block-cover__image-background { object-position: 50% 58%; }
/* Schmal beschneidet die Fläche das Bild von beiden Seiten. Bei mittiger
   Ausrichtung blieb vom Fahrzeug die Motorhaube und ein Vorderrad übrig;
   weiter links steht der Wagen im Bild. */
@media (max-width: 781px) {
  .hz-full--tuning .wp-block-cover__image-background { object-position: 40% 52%; }
}
.hz-full--tuning h2 { max-inline-size: 20ch; }
.hz-full--tuning .hz-lead { max-inline-size: 44ch; }

/* --- Drei Detailaufnahmen nebeneinander ----------------------------------
   Kein Karten-Raster: keine Rahmen, keine Kästen, kein Schatten. Bild,
   darunter eine Zeile. Was den Rhythmus trägt, ist der Bildinhalt. */

.hz-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
  margin-block-start: var(--wp--preset--spacing--50);
}
.hz-trio figure { margin: 0; }
.hz-trio img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  background-color: var(--hz-surface);
}
.hz-trio figcaption {
  margin-block-start: .9rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--hz-muted);
}
.hz-trio figcaption strong {
  display: block;
  font-family: var(--wp--preset--font-family--hz-display);
  font-weight: 700;
  color: var(--hz-text);
}

/* Das mittlere Bild steht etwas tiefer. Drei gleich hohe Bilder nebeneinander
   lesen sich als Tabelle; ein Versatz macht daraus eine Reihe. Nur auf dem
   Desktop — schmal stehen sie untereinander, dort wäre der Versatz sinnlos. */
@media (min-width: 900px) {
  .hz-trio figure:nth-child(2) { margin-block-start: var(--wp--preset--spacing--50); }
}

@media (max-width: 899px) {
  .hz-trio { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--30); }
  .hz-trio figure:nth-child(3) { grid-column: 1 / -1; }
  .hz-trio figure:nth-child(3) img { aspect-ratio: 16 / 9; }
}
@media (max-width: 599px) {
  .hz-trio { grid-template-columns: 1fr; }
  .hz-trio figure:nth-child(3) img { aspect-ratio: 4 / 3; }
}

/* =========================================================================
   RANDLOSE FLÄCHEN STOSSEN ANEINANDER

   Der Auftraggeber nennt drei Stellen: einen kleinen schwarzen Balken zwischen
   der Bildbühne und dem folgenden Abschnitt, einen vor dem Fußbereich, und
   einen grauen auf der Stellenseite.

   Es sind nicht drei Fehler, sondern einer. Gemessen auf /reparaturservice/:

     Bühne endet bei      598
     Inhalt beginnt bei   618
     dazwischen           20 px `margin-block-start` auf `.entry-content`

     letzter Abschnitt zu Fußbereich   24 px `margin-block-start` auf <footer>
     zwischen zwei randlosen Abschnitten   24 px, dieselbe Herkunft

   Das ist der Blockabstand von WordPress. Er ist zwischen Absätzen richtig und
   zwischen randlosen Flächen falsch: Jede dieser Flächen bringt ihr eigenes
   Innenmaß mit, und der Abstand dazwischen zeigt nichts als den Grund des
   Dokuments — eine andere Dunkelheit als die Flächen darüber und darunter.
   Genau das liest sich als Balken.

   Deshalb kein negativer Außenabstand an einzelnen Stellen. Der Abstand wird
   dort auf null gesetzt, wo zwei Flächen einander berühren sollen, und bleibt
   überall sonst unverändert — im Fließtext der Stellenseite trägt er weiterhin
   37, 20, 45 und 77 Pixel zwischen den Absätzen, und das soll er auch.
   ========================================================================= */

/* Bühne und Inhalt. Der Inhaltsbereich folgt in jeder Vorlage direkt auf die
   Bildbühne; ein Abstand dazwischen ist nie gewollt. */
.wp-site-blocks main > .entry-content { margin-block-start: 0; }

/* Zwei randlose Flächen hintereinander. Die Bedingung steht am Nachbarn, nicht
   an einer Seitenklasse: Wer künftig einen Abschnitt einschiebt, bekommt das
   richtige Verhalten, ohne es zu wissen. */
.wp-site-blocks .entry-content > .alignfull + .alignfull,
.wp-site-blocks main > .alignfull + .alignfull { margin-block-start: 0; }

/* Der Fußbereich schließt an. Seine obere Linie ist gewollt und bleibt; sie
   soll aber die Kante des Fußbereichs sein und nicht eine Linie, die zwischen
   zwei verschiedenen Dunkelheiten schwebt. */
.wp-site-blocks > footer { margin-block-start: 0; }

/* =========================================================================
   ABSCHLUSSFLÄCHE VOR DEM FUSSBEREICH

   Der Auftraggeber nennt die Fläche „Kfz-Gutachten anfragen" als gelungen und
   will sie als Vorlage für die übrigen. Sie ist baulich nichts Besonderes —
   sechs von sieben Leistungsseiten benutzen dieselbe Abschnittsform. Was er
   beschreibt, ist die Wirkung, die er sich dort wünscht: linke Akzentlinie,
   Verlauf, klare Überschrift, sauberer Kontrast, ein eindeutiger nächster
   Schritt.

   Genau das bekommt die Form jetzt, und zwar alle sieben gleich. Die Linie ist
   dieselbe Sprache wie im Akzent-Panel, das er ebenfalls ausdrücklich mag.

   Zwei Namen, eine Regel: `.hz-closing` steht bereits im Markup aller sieben
   Seiten, `.hz-prefooter-cta` ist der sprechende Name für alles, was künftig
   dazukommt. Wer den zweiten setzt, bekommt dieselbe Form, ohne den ersten zu
   kennen.
   ========================================================================= */

.hz-closing,
.hz-prefooter-cta {
  position: relative;
  /* Der Verlauf läuft schräg und endet früh. Über die volle Breite gezogen
     würde er die Fläche einfärben statt sie zu betonen. */
  background-image: linear-gradient(101deg, rgba(38,141,238,.11) 0%, transparent 52%);
}

/* Die Linie steht an der Inhaltsachse, nicht am Bildschirmrand. Bei 1320 px
   Containerbreite ist das `50% − 660px`; wird das Fenster schmaler als der
   Container, übernimmt das Wurzelpolster. `max()` entscheidet das ohne
   Medienabfrage. */
.hz-closing::before,
.hz-prefooter-cta::before {
  content: "";
  position: absolute;
  inset-block: var(--wp--preset--spacing--70);
  inset-inline-start: max(var(--wp--preset--spacing--40), calc(50% - 660px));
  inline-size: 3px;
  background: var(--hz-accent);
  pointer-events: none;
}

/* Der Inhalt rückt von der Linie ab, sonst klebt die Überschrift daran. Alle
   Kinder gleich, auch die Verweisliste am Fuß: Der erste Anlauf nahm sie aus,
   und im Screenshot stand sie dann als einzige an der Linie, während alles
   darüber eingerückt war. Das liest sich als Versehen.

   Randlose Kinder sind ausgenommen. Ein `alignfull` innerhalb der
   Abschlussfläche soll über die volle Breite laufen; ein einseitiges
   Innenmaß daran wäre genau die Art von Kante, die dieser Durchgang
   loswerden soll. Heute gibt es kein solches Kind, aber die Regel gilt für
   alles, was künftig dazukommt. */
.hz-closing > *:not(.alignfull),
.hz-prefooter-cta > *:not(.alignfull) {
  /* `box-sizing` steht hier nicht aus Gewohnheit.

     Ueberschrift und Absatz rechnen in diesem Baum `content-box`: Ihr
     `max-inline-size` von 1320 px gilt fuer den Inhalt, das Innenmass kommt
     obendrauf. Ohne diese Zeile werden genau diese beiden Kinder 1344 px breit
     und beginnen bei x = 48, waehrend Schaltflaechen und Verweisliste bei
     x = 60 stehen — zwei Achsen in einem Abschnitt, auf sieben Seiten.
     Gemessen am 10.09.2026 mit template-check: 16 Befunde, alle aus dieser
     einen Zeile. */
  box-sizing: border-box;
  padding-inline-start: var(--wp--preset--spacing--40);
}

/* Schmal wird die Linie zur Kante des Textblocks und rückt näher heran. */
@media (max-width: 599px) {
  .hz-closing::before,
  .hz-prefooter-cta::before { inset-block: var(--wp--preset--spacing--50); }
  .hz-closing > *:not(.alignfull),
  .hz-prefooter-cta > *:not(.alignfull) {
    padding-inline-start: var(--wp--preset--spacing--30);
  }
}