/*
Theme Name:   Car Service Bindlach
Theme URI:    https://carservice-bindlach.de
Description:  GeneratePress-Child-Theme für carservice-bindlach.de – Design-System (Farben, Typografie, Klassen), lokale Fonts, Schema.
Template:     generatepress
Version:      2.8.5
Text Domain:  carservice-bindlach
*/

/* ==========================================================================
   1. Design-Tokens (identisch mit den GeneratePress Global Colors, werden bei Theme-Aktivierung angelegt)
   ========================================================================== */
:root {
  --black:      #0A0A0B;
  --anthrazit:  #17181B;
  --grau:       #2A2C31;
  --gold:       #C9A24A;
  --gold-dark:  #9E7B2E;
  --rot:        #9B1B2E;
  --rot-hover:  #B8243A;
  --weiss:      #F4F1EA;
  --muted:      #A9A69E;

  --font-head:  'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
  --font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --container:  1280px;
  --section-y:  128px;          /* Luft zwischen zwei Abschnitten (16.09.2026 von 96 px erhöht) */
  --section-y-mobile: 80px;
  --fluss:       1.75rem;       /* Standardabstand zwischen zwei Blöcken untereinander */
  --fluss-gross: 5rem;          /* Abstand vor einer neuen Zwischenüberschrift (20.09.2026 von 3,5 rem erhöht) */
  --radius:     6px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}
/* Auf dem Handy ist der Bildschirm kurz: gleicher Rhythmus, nur kleiner */
@media (max-width: 768px) {
  :root { --fluss: 1.5rem; --fluss-gross: 3.25rem; }
}

/* ==========================================================================
   2. Basis
   ========================================================================== */
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--weiss);
  font-family: var(--font-body);
  font-size: 1.0625rem;         /* 17 px */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) { body { font-size: 1.125rem; } } /* 18 px Desktop */

p, li { color: var(--muted); }
strong { color: var(--weiss); font-weight: 600; }
a { color: var(--gold); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--weiss); }

h1, h2, h3, h4, .gb-headline {
  font-family: var(--font-head);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  color: var(--weiss);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.8rem, 7vw, 6.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: 1.4rem; letter-spacing: .04em; }
h1 em, h2 em, .akzent { font-style: normal; color: var(--gold); }

/* Goldene Linie über jeder H2 (2 px × 60 px) */
h2::before, .gold-line::before {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  margin-bottom: 1rem;
}
h2.no-line::before { display: none; }
.text-center h2::before { margin-inline: auto; }

::selection { background: var(--gold); color: var(--black); }

/* Tastaturbedienung: sichtbarer Fokusring auf dunklem Grund. Nur :focus-visible, damit
   Mausklicks keinen Rahmen hinterlassen. Ohne das ist die Seite mit Tab nicht bedienbar. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.btn-primary:focus-visible, .btn-secondary:focus-visible,
.wp-block-button__link:focus-visible { outline-offset: 4px; }
/* Sprungmarke „Zum Inhalt springen" (liefert GeneratePress): erst beim Fokussieren sichtbar.
   :focus zusätzlich, weil GeneratePress die Marke per .screen-reader-text wegklippt. */
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  width: auto; height: auto; clip: auto;
  background: var(--rot); color: var(--weiss);
  padding: .75em 1.25em; border-radius: var(--radius);
}

/* ==========================================================================
   3. Klassen (im Block-Editor unter Erweitert > Zusätzliche CSS-Klassen eintragen)
   ========================================================================== */
.section-dark      { background: var(--black); }
.section-anthrazit { background: var(--anthrazit); }
.section-dark, .section-anthrazit {
  padding-block: var(--section-y-mobile);
}
@media (min-width: 768px) {
  .section-dark, .section-anthrazit { padding-block: var(--section-y); }
}
.trenner { border: 0; border-top: 1px solid var(--grau); margin: 0; }

/* Buttons – Rot ist die einzige Buttonfarbe, Gold nie als Buttonfläche */
.btn-primary,
.gb-button.btn-primary,
.wp-block-button.btn-primary .wp-block-button__link,
.button.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  background: var(--rot);
  color: var(--weiss) !important;
  font-family: var(--font-head);
  font-size: 1.25rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .85em 1.9em;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(155, 27, 46, .25);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--rot-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(184, 36, 58, .35);
}
.btn-secondary,
.gb-button.btn-secondary,
.wp-block-button.btn-secondary .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  background: transparent;
  color: var(--weiss) !important;
  font-family: var(--font-head);
  font-size: 1.25rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .85em 1.9em;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.btn-secondary:hover { background: var(--gold); color: var(--black) !important; }

/* Druckgefühl: kurz eindrücken, damit ein Klick sofort quittiert wird */
.btn-primary:active, .btn-secondary:active, .wp-block-button__link:active { transform: scale(.97); }

/* Service-Card (Leistungs-Grid Startseite) */
.card-service {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 440px;          /* Textkasten sitzt unten; darüber muss genug Foto sichtbar bleiben */
  background: var(--anthrazit);
  border: 1px solid var(--grau);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.card-service img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .6s var(--ease);
}
/* Das Foto steckt in einer figure (Bild-Block). Die darf keinen Platz einnehmen,
   sonst schiebt sie den Kartentext nach unten. */
.card-service .wp-block-image,
.card-service figure { position: static; margin: 0; line-height: 0; }
/* Der Bild-Block hängt als erstes Kind im Fluss und würde den Text nach oben aufs helle Foto
   drücken. Er wird deshalb aus dem Fluss genommen, damit der Text wieder unten im dunklen
   Teil des Verlaufs sitzt (justify-content: flex-end der Card greift dann wieder). */
.card-service > .wp-block-image { display: contents; }

/* Video (selbst gehostet, kein YouTube – sonst bräuchte es einen Consent-Klick) */
.wp-block-video { margin: 0; }
.wp-block-video video {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  background: var(--anthrazit);          /* bis das Poster da ist, kein weißes Aufblitzen */
}
.wp-block-video figcaption { color: var(--muted); font-size: .95rem; margin-top: .75rem; }

/* Galerie „Über uns“: gleiche Kantenrundung wie die Cards, Abstände aus dem Core-Block.
   Alle Kacheln auf 3:2 zwingen – die Vorlagen sind teils 3:2, teils hochkant, dadurch standen
   die Reihen vorher versetzt und es klafften Lücken. object-fit schneidet mittig zu. */
.werkstatt-galerie img {
  border-radius: var(--radius);
  width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  display: block;
}
.werkstatt-galerie figure { margin: 0; }
.inhalt-bild img { border-radius: var(--radius); }
.card-service::after {            /* Foto-Overlay: unten dunkel für den Text, oben bleibt das Foto sichtbar */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,10,11,.94) 0%, rgba(10,10,11,.82) 38%, rgba(10,10,11,.45) 70%, rgba(10,10,11,.15) 100%);
  z-index: -1;
}
.card-service:hover { transform: translateY(-4px); border-color: var(--gold); }
.card-service:hover img { transform: scale(1.04); }
/* Der Block-Editor legt den Karteninhalt in einen inner-container. Der füllte die ganze Karte
   und drückte den Text nach oben ins helle Foto. Er wird deshalb nach unten geschoben. */
.card-service > .wp-block-group__inner-container {
  margin-top: auto;
  padding: 1.5rem;
  background: linear-gradient(0deg, rgba(10, 10, 11, .92) 55%, rgba(10, 10, 11, 0) 100%);
}
.card-service .card-body { padding: 0; }
.card-service h3 {
  margin-bottom: .25em;
  text-shadow: 0 1px 3px rgba(10, 10, 11, .7);
  /* „Unfallinstandsetzung“ passt in vier Spalten nicht in eine Zeile und wurde hart mitten im
     Wort gebrochen. Mit Silbentrennung (das html-Element trägt lang="de-DE") bricht es sauber. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
/* Auf dem Foto braucht der Text mehr Kontrast als das sonst übliche Grau */
.card-service p {
  font-size: .95rem; margin: 0; color: #D9D6CF;
  text-shadow: 0 1px 3px rgba(10, 10, 11, .8);
  hyphens: auto; -webkit-hyphens: auto;   /* sonst bricht „Versicherungsschaden“ mitten im Wort */
}
.card-service .card-link { color: var(--gold); font-weight: 600; }
.card-service .card-link::after { content: ""; position: absolute; inset: 0; } /* ganze Card klickbar */
/* Das Effekt-Bundle legt den Startzustand der gestaffelten Karten zweimal an. Die zweite
   Animation endet deshalb dort, wo die erste begann: Die Karten bleiben nach dem Einblenden
   40 px zu tief stehen und schieben sich über das, was darunter kommt – auf der Startseite war
   „Alle Beiträge im Ratgeber" halb verdeckt und in der oberen Hälfte nicht klickbar (gemessen
   12.10.2026). Das Einblenden bleibt, nur das Verschieben nehmen wir heraus.
   shortcut: behebt die Folge, nicht die Ursache im Bundle (assets/effekte/effekte.js, Funktion
   Yc) – beim nächsten Bundle-Update dort nachsehen und diese zwei Zeilen wieder entfernen. */
.card-service { transform: none !important; }
.card-service:hover { transform: translateY(-6px) !important; }

/* Hero-Overlay: unten kräftig abdunkeln, oben das Foto zeigen.
   Das Hallenfoto ist hell (weiße Wand, Neonlicht); mit dem alten Verlauf deckte der Textbereich
   nur rund 84 % – die goldene Zeile stand praktisch auf blankem Beton (gemessen 16.09.2026). */
.hero-overlay { position: relative; isolation: isolate; }
.hero-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,10,11,.88) 0%, rgba(10,10,11,.76) 45%, rgba(10,10,11,.25) 100%);
  z-index: -1;
}
/* Zusätzlich Schatten statt noch mehr Abdunklung – so bleibt das Foto erkennbar */
.hero-overlay h1,
.hero-overlay p { text-shadow: 0 2px 10px rgba(10, 10, 11, .85), 0 1px 3px rgba(10, 10, 11, .9); }
/* Die kleine goldene Zeile ist der schwächste Kontrast im Hero: kleine Schrift, warmes Gold,
   und sie sitzt in der Bildmitte, wo der Verlauf am dünnsten ist. Sie bekommt einen eigenen Schatten. */
.hero-overlay .text-gold { text-shadow: 0 2px 14px rgba(10, 10, 11, .98), 0 1px 4px rgba(10, 10, 11, 1); }
/* 12,8 px Gold auf einem hellen Foto bleibt auch mit Schatten grenzwertig. Mehr Abdunklung würde
   das Bild ruinieren, also lieber die Schrift vergrößern – das hilft der Lesbarkeit unmittelbar. */
.hero-overlay .uppercase { font-size: .95rem; letter-spacing: .06em; }
/* Auf schmalen Bildschirmen passt die Zeile sonst nicht mehr in eine Zeile und „1999" bleibt
   als Waise allein stehen. Etwas kleiner und enger, dazu ausgeglichener Umbruch als Rückfall. */
@media (max-width: 560px) {
  .hero-overlay .uppercase { font-size: .85rem; letter-spacing: .03em; text-wrap: balance; }
}

/* Monogramm-Muster (SVG aus assets/pattern.svg, 6–8 % Deckkraft) */
.pattern-bg { position: relative; isolation: isolate; }
.pattern-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("assets/pattern.svg");
  background-size: 220px 220px;
  opacity: .07;
  z-index: -1;
  pointer-events: none;
}

/* Abschnitts-Hintergrundbilder – seit 04.10.2026 ausschließlich eigene Aufnahmen aus der Halle
   in Bindlach (vorher Symbolbilder aus den Canva-PDFs). Die Dateien sind beim Aufbereiten auf
   dieselbe Dunkelheit gebracht; das Overlay macht Text trotzdem sicher lesbar – dieselbe Lektion
   wie beim Hero. Kein background-attachment: fixed (ruckelt auf dem Handy). */
.bg-bild {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bg-bild::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, .88) 0%, rgba(10, 10, 11, .78) 50%, rgba(10, 10, 11, .88) 100%);
  z-index: -1;
}
.bg-halle-hebebuehnen   { background-image: url("/wp-content/uploads/werkstatt/bg-halle-hebebuehnen-1600.webp"); }   /* Warum wir */
.bg-service-am-fahrzeug { background-image: url("/wp-content/uploads/werkstatt/bg-service-am-fahrzeug-1600.webp"); } /* Bewertungen */
.bg-motorraum           { background-image: url("/wp-content/uploads/werkstatt/bg-motorraum-1600.webp"); }           /* Schluss-CTA */
.bg-werkbank            { background-image: url("/wp-content/uploads/werkstatt/bg-werkbank-1600.webp"); }            /* Inhaber-Abschnitt */
/* Beim Schluss-CTA darf mehr Bild durchkommen: wenig Text, große Schrift, kräftige Buttons.
   Bei 0.78 war vom Motiv praktisch nichts mehr zu sehen. */
.bg-motorraum::before {
  background: linear-gradient(180deg, rgba(10, 10, 11, .85) 0%, rgba(10, 10, 11, .62) 50%, rgba(10, 10, 11, .85) 100%);
}
@media (max-width: 768px) {   /* kleinere Datei fürs Handy */
  .bg-halle-hebebuehnen   { background-image: url("/wp-content/uploads/werkstatt/bg-halle-hebebuehnen-900.webp"); }
  .bg-service-am-fahrzeug { background-image: url("/wp-content/uploads/werkstatt/bg-service-am-fahrzeug-900.webp"); }
  .bg-motorraum           { background-image: url("/wp-content/uploads/werkstatt/bg-motorraum-900.webp"); }
  .bg-werkbank            { background-image: url("/wp-content/uploads/werkstatt/bg-werkbank-900.webp"); }
}

/* Trust-Leiste */
/* margin-inline: auto, weil GeneratePress jeder Liste einen linken Einzug gibt (gemessen
   12.10.2026: 51 px links, 30 px rechts) – die Leiste stand dadurch sichtbar rechts aus der
   Mitte, auf dem Handy am deutlichsten. */
.trust-bar { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: center; margin-inline: auto; }
.trust-bar > * { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .95rem; }
.trust-bar svg, .trust-bar i { color: var(--gold); }

/* Bewertungen */
.review-card { background: var(--anthrazit); border: 1px solid var(--grau); border-radius: var(--radius); padding: 1.75rem; }
.review-card .stars { color: var(--gold); letter-spacing: .1em; margin-bottom: .75rem; }
.review-card cite { display: block; margin-top: 1rem; font-style: normal; color: var(--weiss); font-weight: 600; }
.review-card cite small { display: block; color: var(--muted); font-weight: 400; }
/* Dritte Karte im Bewertungsraster: die Gesamtnote. Steht dort, damit die Reihe voll ist,
   ohne eine Rezension zu erfinden - es gibt nur zwei freigegebene Zitate. */
.review-score { display: grid; align-content: center; text-align: center; }
.review-score .stars { margin-bottom: .5rem; }
.review-score h3 { font-size: 3.4rem; line-height: 1; color: var(--gold); margin-bottom: .1rem; }
.review-score p:nth-of-type(2) { color: var(--weiss); margin-bottom: .75rem; }
.review-score p:last-child { color: var(--muted); font-size: .95rem; }

/* Ablaufschritte „So läuft's ab“: die Ziffer steht im Kreis statt im Fließtext.
   Dadurch sieht man auf einen Blick, dass es drei Schritte nacheinander sind. */
.entry-content h3.schritt { display: flex; align-items: center; gap: .85rem; }
.entry-content h3.schritt .nr {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 2.1em; height: 2.1em;
  font-size: .78em; line-height: 1;
  color: var(--gold);
  border: 1px solid var(--gold-dark);
  border-radius: 999px;
  background: rgba(201, 162, 74, .09);
}
.entry-content h3.schritt + p { margin-top: .85rem; }

/* FAQ (Details-Block des Editors)
   Eigene Zeile mit Rahmen statt einer durchlaufenden Liste: Vorher klebten die Fragen
   aneinander und man sah nicht, dass sie einzeln aufklappen. Der Pfeil rechts ersetzt das
   Browser-Dreieck – er zeigt, dass hier etwas passiert, und dreht sich beim Öffnen. */
.wp-block-details {
  border: 1px solid var(--grau);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .022);
  padding: 1.35rem 1.5rem;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.wp-block-details:hover { border-color: #3B3D44; background: rgba(255, 255, 255, .045); }
.wp-block-details[open] { border-color: var(--gold-dark); background: rgba(255, 255, 255, .045); }

.wp-block-details summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  font-family: var(--font-head); font-size: 1.3rem; letter-spacing: .04em; color: var(--weiss);
  transition: color .18s var(--ease);
}
.wp-block-details summary::-webkit-details-marker { display: none; }   /* Safari */
.wp-block-details summary:hover, .wp-block-details[open] summary { color: var(--gold); }

/* Pfeil aus zwei Rahmenkanten – kein Bild, keine Schrift, dreht beim Aufklappen */
.wp-block-details summary::after {
  content: ""; flex: 0 0 auto;
  width: .45em; height: .45em;
  margin-right: .2em;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: translateY(-.12em) rotate(45deg);
  transition: transform .2s var(--ease);
}
.wp-block-details[open] summary::after { transform: translateY(.08em) rotate(225deg); }

.wp-block-details p { margin-top: 1rem; max-width: 62ch; }

@media (max-width: 560px) {
  /* Auf dem Handy bleiben von 375 px nach Rändern und Innenabstand nur noch gut 260 px
     für die Frage. Kleinere Schrift und schmalerer Innenabstand sparen Zeilenumbrüche. */
  .wp-block-details { padding: 1.15rem 1.15rem; }
  .wp-block-details summary { font-size: 1.12rem; gap: .9rem; }
  .entry-content .wp-block-details + .wp-block-details { margin-top: .6rem; }
}

/* ==========================================================================
   4. Header (GeneratePress): oben transparent, beim Scrollen fest und dunkel
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled { background: rgba(10,10,11,.92); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--grau); }
.site-header .inside-header { padding-block: .75rem; }
.site-header .site-logo img { max-height: 64px; width: auto; }
.main-navigation, .main-navigation .main-nav ul li a { background: transparent; }
.main-navigation .main-nav ul li a { font-family: var(--font-head); font-size: 1.15rem; letter-spacing: .06em; color: var(--weiss); padding-inline: 16px; }
.main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li.current-menu-item > a, .main-navigation .main-nav ul li.current-menu-ancestor > a { color: var(--gold); }
.main-navigation .main-nav ul ul { background: var(--anthrazit); border: 1px solid var(--grau); }
.main-navigation .main-nav ul ul li a { font-family: var(--font-body); font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.main-navigation .main-nav ul ul li a:hover { color: var(--weiss); background: var(--grau); }
.main-navigation .menu-toggle, .main-navigation .menu-toggle:hover { color: var(--weiss); background: transparent; }
/* Menüpunkt "Termin anfragen" als Button: im Menü die CSS-Klasse menu-cta vergeben */
.main-navigation .main-nav ul li.menu-cta > a {
  background: var(--rot); color: var(--weiss); border-radius: var(--radius);
  padding: .55em 1.2em; line-height: 1.2; margin-left: 12px; align-self: center;
}
.main-navigation .main-nav ul li.menu-cta > a:hover { background: var(--rot-hover); color: var(--weiss); }
/* Startseite: Hero direkt unter den transparenten Header schieben */
.home .site-content, .home-sprache .site-content { margin-top: 0; }   /* auch /en/ – für WordPress eine normale Seite */
/* Mobiler Header: eine Zeile statt drei Stockwerke.
   GeneratePress stapelt sonst Logo, zweizeiligen Titel und Menü-Knopf untereinander (gemessen 180 px,
   ein Fünftel des Bildschirms). Hier: Logo + Titel links, Knopf rechts, Menü klappt darunter auf. */
@media (max-width: 768px) {
  .site-header .inside-header {
    position: relative;                 /* Anker für das aufgeklappte Menü */
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: nowrap; gap: .75rem; padding-block: .5rem;
  }
  .site-header .site-branding-container { flex: 1 1 auto; min-width: 0; align-items: center; gap: .6rem; }
  .site-header .site-logo { margin: 0; }
  .site-header .site-logo img { max-height: 40px; }
  .site-header .main-title {
    font-size: 1.15rem; line-height: 1.1; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* lieber abschneiden als umbrechen */
  }
  /* Nav darf keine eigene Zeile beanspruchen und kein Positions-Anker sein */
  .site-header .main-navigation,
  .site-header .inside-navigation { position: static; flex: 0 0 auto; width: auto; float: none; }
  .main-navigation .menu-toggle { padding: .5em .25em; line-height: 1; height: auto; }
  /* Aufgeklapptes Menü hängt unter dem Header, über dem Inhalt */
  .site-header .main-navigation .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(10, 10, 11, .97);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--grau);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .45);
  }
  .site-header .main-navigation .main-nav > ul > li > a { padding: .9em 20px; }
  .main-navigation .main-nav ul li.menu-cta > a { margin: .5em 20px .75em; display: inline-flex; }
}

/* Sprungziele wie /kontakt/#termin nicht unter dem festen Header verstecken (gemessen: 148 px Desktop, 72 px mobil) */
.entry-content [id] { scroll-margin-top: 170px; }
@media (max-width: 768px) { .entry-content [id] { scroll-margin-top: 96px; } }

/* ==========================================================================
   5. Reveal beim Scrollen – nur CSS-Transition, JS setzt .is-visible (siehe assets/reveal.js)
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   6. Formular (Fluent Forms)
   ========================================================================== */
/* Terminanfrage [csb_terminformular]: Präfix .csb-terminformular schlägt die hellen Fluent-Forms-Standardstyles */
.csb-terminformular { max-width: 720px; }
.csb-terminformular .fluentform .ff-el-input--label label { color: var(--weiss); font-weight: 600; }
.csb-terminformular .fluentform .ff-el-is-required.asterisk-right label::after { color: var(--gold); }
.csb-terminformular .fluentform .ff-el-form-control {   /* nur Text-, Auswahl- und Datumsfelder – Checkbox/Radio bleiben nativ */
  background: var(--anthrazit);
  border: 1px solid var(--grau);
  color: var(--weiss);
  border-radius: var(--radius);
  padding: .9em 1em;
}
.csb-terminformular .fluentform .ff-el-form-control::placeholder { color: #85827B; opacity: 1; }
.csb-terminformular .fluentform .ff-el-form-control:focus {
  background: var(--anthrazit); color: var(--weiss);
  border-color: var(--gold); outline: 0; box-shadow: 0 0 0 3px rgba(201, 162, 74, .25);
}
.csb-terminformular .fluentform .ff-el-help-message { color: var(--muted); font-size: .9rem; font-style: normal; margin-top: .35rem; }
.csb-terminformular .fluentform .ff-el-form-check-label,
.csb-terminformular .fluentform .ff_t_c { color: var(--muted); }
.csb-terminformular .fluentform .ff_t_c { padding-left: .75em; }   /* Label ist table-row: Abstand Checkbox ↔ Text */
.csb-terminformular .fluentform input[type="checkbox"],
.csb-terminformular .fluentform input[type="radio"] { accent-color: var(--gold); width: 1.15em; height: 1.15em; }
.csb-terminformular .fluentform .ff-el-is-error .ff-el-form-control { border-color: #E06C7A; }
.csb-terminformular .fluentform .text-danger { color: #F08A96; font-size: .9rem; }
.fluentform .ff-btn-submit,
.csb-terminformular .fluentform .ff-btn-submit {   /* Präfix nötig: .ff-default .ff_btn_style setzt sonst 16 px und 8 px 20 px */
  background: var(--rot) !important; color: var(--weiss) !important; line-height: 1.2;
  font-family: var(--font-head); font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .85em 1.9em; border: 0; border-radius: var(--radius);
}
.fluentform .ff-btn-submit:hover { background: var(--rot-hover) !important; }
.csb-terminformular .ff-message-success {
  background: var(--anthrazit); border: 1px solid var(--gold); border-radius: var(--radius);
  box-shadow: none; padding: 1.5rem; color: var(--weiss);
}
.csb-terminformular .ff-message-success p { color: var(--weiss); margin: 0; }
.form-hinweis { font-size: .9rem; }
.csb-terminformular-fallback { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ==========================================================================
   7. Footer (GeneratePress)
   ========================================================================== */
.site-footer, .footer-widgets, .site-info { background: var(--anthrazit); color: var(--muted); }
.site-footer { border-top: 1px solid var(--grau); }
.site-footer p, .site-footer li, .site-footer a, .site-info a { color: var(--muted); }
.site-footer a:hover, .site-info a:hover { color: var(--gold); }
.footer-widgets .widget-title { font-family: var(--font-head); color: var(--weiss); letter-spacing: .06em; }
.footer-menu { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; list-style: none; margin: 0 0 1rem; padding: 0; }
.site-info { text-align: center; font-size: .9rem; }
.nap { font-style: normal; line-height: 1.7; }
.oeffnungszeiten { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1.5rem; }
.oeffnungszeiten dt { color: var(--weiss); }
.oeffnungszeiten dd { margin: 0; }

/* Inhalt: dunkler Hintergrund auch für den Content-Bereich von GeneratePress */
.site-content, .content-area, .inside-article, .separate-containers .inside-article, .one-container .container { background: transparent; }
/* --- Vertikaler Rhythmus -------------------------------------------------
   Ein Abstand für alle Blöcke, mehr Luft vor Zwischenüberschriften. Gilt auch
   innerhalb von Gruppen, Spalten und im Hero, weil der Editor den Inhalt dort
   in einen inner-container legt. Ausnahmen (Cards, Trust-Leiste, Galerie)
   stehen direkt darunter. */
.entry-content > * + *,
.entry-content .wp-block-group > * + *,
.entry-content .wp-block-group__inner-container > * + *,
.entry-content .wp-block-column > * + * { margin-top: var(--fluss); }

.entry-content > * + h2,
.entry-content .wp-block-group > * + h2,
.entry-content .wp-block-group__inner-container > * + h2 { margin-top: var(--fluss-gross); }
.entry-content > * + h3,
.entry-content .wp-block-group__inner-container > * + h3,
.entry-content .wp-block-column > * + h3 { margin-top: calc(var(--fluss) * 1.4); }

/* Aufzählungen: Zeilen dürfen atmen, ohne wie einzelne Absätze zu wirken */
.entry-content li + li { margin-top: .5rem; }

/* FAQ: jede Frage ist eine eigene Zeile und braucht sichtbaren Abstand zur nächsten */
.entry-content .wp-block-details + .wp-block-details { margin-top: .7rem; }

/* Spalten und Galerie: horizontaler Abstand passend zum vertikalen */
.entry-content .wp-block-columns { gap: 2rem; }
.werkstatt-galerie { gap: 1.25rem; }

/* Vollbreite Abschnitte stoßen direkt aneinander – ihre Luft steckt im padding-block.
   Sonst steht zwischen dunklem und anthrazitfarbenem Abschnitt ein sichtbarer Streifen. */
.entry-content > .alignfull + .alignfull { margin-top: 0; }

/* Ausnahmen: hier ist Enge gewollt */
.entry-content .card-service > .wp-block-group__inner-container { margin-top: auto; }
.entry-content .card-service .wp-block-group__inner-container > * + * { margin-top: 0; }
.entry-content .card-service p + p { margin-top: .6rem; }
.entry-content .trust-bar > li + li { margin-top: 0; }
.entry-content .review-card > * + * { margin-top: 0; }
/* Hero: großer Titel, darunter reicht ein knapperer Abstand */
.hero-overlay .wp-block-cover__inner-container > * + * { margin-top: 1.25rem; }
.hero-overlay h1 { margin-bottom: .25em; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }

/* Statisches Karten-Bild bis zum Consent */
.karte-placeholder { position: relative; border: 1px solid var(--grau); border-radius: var(--radius); overflow: hidden; }
.karte-placeholder img { display: block; width: 100%; filter: grayscale(1) brightness(.6); }
.karte-placeholder .karte-hinweis { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1rem; }

/* Terminvergabe im Footer: steht über den Spalten, weil die Termin-Abschnitte auf den
   Leistungsseiten entfallen sind (17.09.2026). Text links, Knöpfe rechts, mobil untereinander. */
.csb-termin {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--grau);
  margin-bottom: 2.5rem;
}
.csb-termin-text { flex: 1 1 320px; }
.csb-termin-text h3 { font-size: 1.9rem; margin-bottom: .4rem; }
.csb-termin-text p { margin: 0; max-width: 46ch; }
.csb-termin-aktionen { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 768px) {
  .csb-termin { padding-bottom: 2rem; margin-bottom: 2rem; }
  .csb-termin-aktionen { width: 100%; }
  .csb-termin-aktionen > * { flex: 1 1 100%; justify-content: center; }
}

/* Footer-Spalten aus dem Theme */
/* Footer mit dem Wandlogo der Werkstatt. Stapel von hinten nach vorn: Foto (Hintergrund des
   Elements), Abdunklung (::after, z-index -2), Monogramm-Muster (::before von .pattern-bg,
   z-index -1), Inhalt. Das Wandlogo läuft auf keiner Seite als Seitenhintergrund – so doppelt
   sich nichts, und unten steht das Zeichen, das auch in der Halle an der Wand hängt. */
.csb-footer {
  padding-block: 80px 56px;
  border-top: 1px solid var(--grau);
  background-image: url("/wp-content/uploads/werkstatt/bg-logo-wand-1600.webp");
  background-size: cover;
  background-position: center;
}
.csb-footer::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, .92) 0%, rgba(10, 10, 11, .80) 40%, rgba(23, 24, 27, .95) 100%);
  z-index: -2;
}
@media (max-width: 768px) {
  .csb-footer { background-image: url("/wp-content/uploads/werkstatt/bg-logo-wand-900.webp"); }
}
.csb-footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
/* GeneratePress hängt an jeden .grid-container Clearfix-Pseudoelemente. In Grid und Flex
   zählen die als eigene Zelle – dadurch blieb die erste Footer-Spalte leer und alles rutschte
   eine Position weiter (Altfehler, gefunden 17.09.2026). */
.csb-footer-grid::before, .csb-footer-grid::after,
.csb-termin::before, .csb-termin::after { content: none; }
.csb-footer h3 { margin-bottom: .75rem; }
.csb-footer .btn-primary { font-size: 1.05rem; }
.csb-socials a { margin-right: 1rem; }
@media (max-width: 768px) { .csb-footer-grid { grid-template-columns: 1fr; gap: 2rem; } }
.site-footer { border-top: 0; }
/* Site-Title in Bebas, falls noch kein Logo hochgeladen ist */
.main-title a { font-family: var(--font-head); letter-spacing: .04em; color: var(--weiss); }

/* ==========================================================================
   Struktur statt Flächenschwarz: dezenter Hintergrund hinter jeder Seite.
   Die Startseite deckt ihn mit ihren eigenen Abschnitten ab, auf den Unterseiten
   (flache Blockfolge ohne Abschnittsfarbe) sorgt er für Tiefe. Als fixiertes
   Pseudo-Element statt background-attachment: fixed – das ruckelt auf dem Handy.
   ========================================================================== */
body::before {
  content: "";
  position: fixed; inset: 0;
  /* Bewusst die 1200er Fassung: Das Bild liegt mit opacity .16 hinter allem und wird auf jeder
     Seite geladen, die kein eigenes Motiv hat. 1600 px wären hier 39 kB Luft (gemessen 06.10.2026). */
  background-image: url("/wp-content/uploads/werkstatt/bg-schrauben-1200.webp");
  background-size: cover;
  background-position: center;
  opacity: .16;
  z-index: -3;
  pointer-events: none;
}
@media (max-width: 768px) {
  body::before { background-image: url("/wp-content/uploads/werkstatt/bg-schrauben-640.webp"); }
}
/* Jede Seite bekommt ihr eigenes Motiv, thematisch passend – in allen drei Sprachen dasselbe
   Motiv, deshalb stehen die englischen und russischen Slugs in derselben Regel. Alle Bilder sind
   beim Aufbereiten auf dieselbe Dunkelheit gebracht (fotos_aufbereiten.py, 'ziel_helligkeit'),
   damit keine Seite heller wirkt als die andere. Neues Bild? Datei anlegen, hier eine Zeile
   ergänzen – der body-Klassenname kommt aus dem Slug (functions.php). */
body.seite-kfz-reparatur::before,
body.seite-car-repair::before,
body.seite-remont-avto::before { background-image: url("/wp-content/uploads/werkstatt/bg-hebebuehne-1600.webp"); }
body.seite-inspektion-tuev::before,
body.seite-inspection-tuv::before,
body.seite-to-i-tuv::before { background-image: url("/wp-content/uploads/werkstatt/bg-oelwechsel-1600.webp"); }
body.seite-reifenservice-einlagerung::before,
body.seite-tyre-service-storage::before,
body.seite-shiny-i-hranenie::before { background-image: url("/wp-content/uploads/werkstatt/bg-reifenlager-1600.webp"); }
body.seite-klimaservice::before,
body.seite-air-conditioning-service::before,
body.seite-konditsioner::before { background-image: url("/wp-content/uploads/werkstatt/bg-werkbank-1600.webp"); }
body.seite-fahrzeugdiagnose-elektrik::before,
body.seite-diagnostics-electrics::before,
body.seite-diagnostika-elektrika::before { background-image: url("/wp-content/uploads/werkstatt/bg-elektrik-innenraum-1600.webp"); }
body.seite-motorradwerkstatt::before,
body.seite-motorcycle-workshop::before,
body.seite-motomasterskaya::before { background-image: url("/wp-content/uploads/werkstatt/bg-motorrad-ktm-1600.webp"); }
body.seite-unfallinstandsetzung-smart-repair::before,
body.seite-accident-repair::before,
body.seite-kuzovnoy-remont::before { background-image: url("/wp-content/uploads/werkstatt/bg-unfall-zerlegt-1600.webp"); }
body.seite-tuning::before,
body.seite-tuning-window-tinting::before,
body.seite-tyuning-tonirovka::before { background-image: url("/wp-content/uploads/werkstatt/bg-supermoto-1600.webp"); }
body.seite-ueber-uns::before,
body.seite-about-us::before,
body.seite-o-nas::before { background-image: url("/wp-content/uploads/werkstatt/bg-halle-rossner-1600.webp"); }
body.seite-kontakt::before,
body.seite-contact::before,
body.seite-kontakty::before { background-image: url("/wp-content/uploads/werkstatt/bg-clipse-wand-1600.webp"); }
body.seite-ratgeber::before,
body.csb-ratgeber::before { background-image: url("/wp-content/uploads/werkstatt/bg-halle-motorraeder-1600.webp"); }
/* Stellenanzeige: die Halle mit den Hebebühnen – das ist der Arbeitsplatz, um den es geht. */
body.seite-jobs::before { background-image: url("/wp-content/uploads/werkstatt/bg-halle-hebebuehnen-1600.webp"); }
@media (max-width: 768px) {
  body.seite-kfz-reparatur::before,
  body.seite-car-repair::before,
  body.seite-remont-avto::before { background-image: url("/wp-content/uploads/werkstatt/bg-hebebuehne-900.webp"); }
  body.seite-inspektion-tuev::before,
  body.seite-inspection-tuv::before,
  body.seite-to-i-tuv::before { background-image: url("/wp-content/uploads/werkstatt/bg-oelwechsel-900.webp"); }
  body.seite-reifenservice-einlagerung::before,
  body.seite-tyre-service-storage::before,
  body.seite-shiny-i-hranenie::before { background-image: url("/wp-content/uploads/werkstatt/bg-reifenlager-900.webp"); }
  body.seite-klimaservice::before,
  body.seite-air-conditioning-service::before,
  body.seite-konditsioner::before { background-image: url("/wp-content/uploads/werkstatt/bg-werkbank-900.webp"); }
  body.seite-fahrzeugdiagnose-elektrik::before,
  body.seite-diagnostics-electrics::before,
  body.seite-diagnostika-elektrika::before { background-image: url("/wp-content/uploads/werkstatt/bg-elektrik-innenraum-900.webp"); }
  body.seite-motorradwerkstatt::before,
  body.seite-motorcycle-workshop::before,
  body.seite-motomasterskaya::before { background-image: url("/wp-content/uploads/werkstatt/bg-motorrad-ktm-900.webp"); }
  body.seite-unfallinstandsetzung-smart-repair::before,
  body.seite-accident-repair::before,
  body.seite-kuzovnoy-remont::before { background-image: url("/wp-content/uploads/werkstatt/bg-unfall-zerlegt-900.webp"); }
  body.seite-tuning::before,
  body.seite-tuning-window-tinting::before,
  body.seite-tyuning-tonirovka::before { background-image: url("/wp-content/uploads/werkstatt/bg-supermoto-900.webp"); }
  body.seite-ueber-uns::before,
  body.seite-about-us::before,
  body.seite-o-nas::before { background-image: url("/wp-content/uploads/werkstatt/bg-halle-rossner-900.webp"); }
  body.seite-kontakt::before,
  body.seite-contact::before,
  body.seite-kontakty::before { background-image: url("/wp-content/uploads/werkstatt/bg-clipse-wand-900.webp"); }
  body.seite-ratgeber::before,
  body.csb-ratgeber::before { background-image: url("/wp-content/uploads/werkstatt/bg-halle-motorraeder-900.webp"); }
  body.seite-jobs::before { background-image: url("/wp-content/uploads/werkstatt/bg-halle-hebebuehnen-900.webp"); }
}

/* --- Inhaber-Abschnitt (Startseite) und Porträt im Text --------------------------
   Das Foto von Alexander ist freigestellt (transparentes WebP, werkzeuge/portrait_aufbereiten.py).
   Deshalb bekommt es keinen Rahmen und keinen Kasten – nur einen Schlagschatten, damit die
   Figur auf dem dunklen Grund steht und nicht schwebt. Höhe ist gedeckelt: Hochformat in voller
   Breite würde auf dem Handy den halben Bildschirm fressen. */
/* Alexander im Hero: rechte Hälfte, unten bündig, gespiegelt (zeigt nach links in die Seite).
   Der Hero-Text steht links unten – auf breiten Schirmen ist rechts Platz frei. Unter 1100 px
   ausgeblendet: dort braucht die Überschrift die volle Breite, und weiter unten auf der Seite
   steht er ohnehin noch einmal. */
.hero-figur { display: none; }
@media (min-width: 1100px) {
  .hero-overlay .wp-block-cover__inner-container { padding-right: 30%; }
  /* Bezugsrahmen ist der innere Container des Covers (WordPress setzt ihn auf position:
     relative), nicht der Hero selbst – deshalb eine Höhe in svh statt in Prozent. Das
     Seitenverhältnis muss mit, sonst fällt die Breite eines absolut gesetzten <figure>
     auf 0 zusammen (genau das ist im ersten Anlauf passiert). */
  .hero-figur {
    display: block; position: absolute; right: 3%; bottom: 0; margin: 0;
    height: min(74svh, 740px); aspect-ratio: 464 / 1325; width: auto;
    background: url("/wp-content/uploads/werkstatt/alexander-weigel-hero-500.webp")
                bottom center / contain no-repeat;
    filter: drop-shadow(0 30px 45px rgba(0, 0, 0, .7));
    z-index: 1; pointer-events: none;
  }
}

.inhaber-spalten { align-items: center; }
.inhaber-bild { position: relative; }
/* Warmer Lichtkreis hinter der Figur: Alexander trägt Schwarz, der Abschnitt ist dunkel –
   ohne diesen Schein verschwindet er im Hintergrund (gemessen am 10.10.2026, erster Versuch
   ohne Schein war faktisch unsichtbar). */
.inhaber-bild::before {
  content: ""; position: absolute; left: 50%; top: 6%; transform: translateX(-50%);
  width: 86%; height: 88%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212, 167, 71, .26), rgba(212, 167, 71, 0) 72%);
  z-index: 0; pointer-events: none;
}
.inhaber-bild img {
  position: relative; z-index: 1;
  display: block; margin-inline: auto;
  max-height: 480px; width: auto;
  filter: drop-shadow(0 28px 38px rgba(0, 0, 0, .65));
}
.inhaber-section h2 { margin-top: 0; }
@media (max-width: 900px) {
  .inhaber-spalten { flex-wrap: wrap; }
  .inhaber-bild img { max-height: 300px; }
}
/* Porträt im Fließtext (jedes einzelne Hochformat-Bild): auf dem Desktop neben dem Text,
   auf dem Handy normal im Fluss. Überschriften beginnen immer unter dem Bild. */
.portrait-bild img { border-radius: var(--radius); }
@media (min-width: 900px) {
  .entry-content > .portrait-bild { float: right; max-width: 300px; margin: .25rem 0 1.5rem 2.25rem; }
  .entry-content h2, .entry-content h3 { clear: both; }
  /* Auf der Kontaktseite steht neben dem Porträt eine Liste. Listen laufen sonst mit ihren
     Aufzählungszeichen unter das Bild – ein eigener Formatierungskontext hält sie daneben. */
  .seite-kontakt .entry-content ul,
  .seite-contact .entry-content ul,
  .seite-kontakty .entry-content ul { overflow: hidden; }
}

/* Team: zwei Porträts nebeneinander, gleich groß, auch auf dem Handy. Untereinander stünden
   Alexander und Tamara einen halben Bildschirm auseinander und wären kein Team mehr. */
.entry-content .team-portraits {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  max-width: 580px; margin-inline: auto;
}
.entry-content .team-portraits .wp-block-image { width: auto !important; flex: none; margin: 0; }
.team-portraits img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius); display: block;
}

/* ==========================================================================
   8. Utilities
   ========================================================================== */
.text-gold  { color: var(--gold) !important; }
.text-muted { color: var(--muted) !important; }
.uppercase  { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   9. Premium-Pass (22.09.2026, Theme 2.0.0) – „teurer aussehen“
   Steht bewusst am Ende und überschreibt gezielt Regeln aus den Abschnitten 2–7.
   Prinzip: weniger Lärm, mehr Luft, feinere Linien, eine Bewegungssprache
   (assets/effekte-init.js + assets/effekte/ aus der Website-Fabrik).
   ========================================================================== */
:root {
  --radius: 10px;
  --gold-hell: #E4C46A;
  --linie: rgba(244, 241, 234, .09);          /* feine Trennlinien statt hartem Grau */
  --gold-linie: rgba(201, 162, 74, .28);
  --header-hoehe: 84px;
}
html.lenis { scroll-behavior: auto; }         /* Lenis übernimmt das weiche Scrollen */

/* --- Header: EINE Zeile, Glas beim Scrollen ------------------------------------ */
.site-header .inside-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
  gap: 1.5rem; padding-block: .6rem;
  min-height: 0;
}
.site-header .site-branding-container { display: flex; align-items: center; gap: .85rem; flex: 0 0 auto; }
.site-header .site-logo img { max-height: 52px; }
.site-header .main-title { font-size: 1.35rem; letter-spacing: .05em; margin: 0; }
.site-header .main-title a { transition: color .2s var(--ease); }
.site-header .main-navigation { float: none; flex: 0 0 auto; }
.main-navigation .main-nav ul li a { font-size: 1.05rem; letter-spacing: .08em; padding-inline: 13px; line-height: 48px; }
.main-navigation .main-nav ul li.current-menu-item > a, .main-navigation .main-nav ul li.current-menu-ancestor > a, .main-navigation .main-nav ul li[class*="current-menu"] > a { background: transparent; }
.main-navigation .main-nav ul li.menu-cta > a {
  padding: .6em 1.25em; font-size: 1rem; letter-spacing: .08em;
  box-shadow: 0 6px 18px rgba(155, 27, 46, .28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
}
.main-navigation .main-nav ul li.menu-cta > a:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(184, 36, 58, .38); }
/* Aktiver Punkt: schmale goldene Unterlinie statt nur Farbwechsel */
.main-navigation .main-nav > ul > li > a { position: relative; }
.main-navigation .main-nav > ul > li:not(.menu-cta) > a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 8px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.main-navigation .main-nav > ul > li:not(.menu-cta):hover > a::after,
.main-navigation .main-nav > ul > li.current-menu-item:not(.menu-cta) > a::after,
.main-navigation .main-nav > ul > li.current-menu-ancestor:not(.menu-cta) > a::after { transform: scaleX(1); }
.site-header.is-scrolled { background: rgba(10, 10, 11, .78); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 var(--linie); }
.site-header.is-scrolled .inside-header { padding-block: .5rem; min-height: 68px; }
.site-header.is-scrolled .site-logo img { max-height: 42px; }
.site-header .inside-header, .site-header .site-logo img { transition: padding .3s var(--ease), min-height .3s var(--ease), max-height .3s var(--ease); }
/* Dropdown mit Glas und Luft */
.main-navigation .main-nav ul ul { background: rgba(23, 24, 27, .96); backdrop-filter: blur(14px); border: 1px solid var(--linie); border-radius: var(--radius); padding: .4rem; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .7); }
.main-navigation .main-nav ul ul li a { border-radius: 6px; padding: .7em 1em; line-height: 1.3; }
.entry-content [id] { scroll-margin-top: 100px; }
@media (max-width: 768px) {
  .site-header .inside-header { min-height: 0; padding-block: .5rem; }
  .site-header .main-title { font-size: 1.1rem; }
  .main-navigation .main-nav ul li a { line-height: 1.3; }
  .main-navigation .main-nav > ul > li > a::after { display: none; }
  .entry-content [id] { scroll-margin-top: 90px; }
}

/* --- Hero: Kino statt Halle ----------------------------------------------------- */
.hero-overlay { min-height: min(92svh, 960px) !important; display: flex; align-items: flex-end; padding-bottom: clamp(3rem, 8vh, 6rem); }
.hero-overlay .wp-block-cover__background { background-color: #0a0a0b !important; opacity: .55 !important; }
.hero-overlay::after {
  background:
    radial-gradient(130% 100% at 15% 100%, rgba(10, 10, 11, .97) 0%, rgba(10, 10, 11, .7) 45%, rgba(10, 10, 11, .15) 100%),
    linear-gradient(0deg, rgba(10, 10, 11, 1) 0%, rgba(10, 10, 11, .6) 35%, rgba(10, 10, 11, .15) 70%, rgba(10, 10, 11, .35) 100%);
}
/* leichte Vignette an den Rändern, wie ein Objektiv */
.hero-overlay::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; box-shadow: inset 0 0 160px 40px rgba(10, 10, 11, .75); }
.hero-overlay .hero-img { transform-origin: 60% 45%; animation: csb-kenburns 22s cubic-bezier(.2, .6, .2, 1) both; filter: saturate(.85) contrast(1.05); }
@keyframes csb-kenburns { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.hero-overlay .wp-block-cover__inner-container { display: flex; flex-direction: column; align-items: flex-start; max-width: var(--container); width: 100%; }
.hero-overlay .text-center { text-align: left; }
.hero-overlay h1 { font-size: clamp(2.9rem, 6.2vw, 5.6rem); line-height: .96; letter-spacing: .015em; max-width: 24ch; margin-bottom: 0; text-wrap: balance; }
/* Gold-Verlauf im Titelwort. SplitText legt das Wort in ein eigenes div MIT transform – background-clip: text
   auf dem em greift dann nicht mehr (eigene Compositing-Ebene, Wort wäre unsichtbar). Deshalb liegt der Verlauf
   zusätzlich auf jedem Kind des em. */
.hero-overlay h1 em, .hero-overlay h1 em > * { background: linear-gradient(115deg, var(--gold-hell) 0%, var(--gold) 45%, var(--gold-dark) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.hero-overlay h1 em { filter: drop-shadow(0 2px 8px rgba(10, 10, 11, .8)); }
/* Die goldene Zeile wird zur Überzeile mit feiner Linie – erst Kicker, dann Titel */
.hero-overlay .uppercase.text-gold { order: -1; display: flex; align-items: center; gap: .9rem; font-size: .82rem; letter-spacing: .22em; margin: 0 0 1.25rem; font-weight: 600; }
.hero-overlay .uppercase.text-gold::before { content: ""; width: 44px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); flex: 0 0 auto; }
.hero-overlay .wp-block-cover__inner-container > p:not(.uppercase) { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.7; color: #D9D6CF; max-width: 56ch; margin-top: 1.5rem; }
.hero-overlay .wp-block-buttons { justify-content: flex-start; gap: .9rem; margin-top: 2rem; }
@media (max-width: 768px) {
  .hero-overlay { min-height: min(88svh, 760px) !important; padding-bottom: 2.5rem; }
  .hero-overlay h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .hero-overlay .wp-block-buttons { width: 100%; }
  .hero-overlay .wp-block-buttons .wp-block-button { width: 100%; }
  .hero-overlay .wp-block-button__link { width: 100%; justify-content: center; }
}

/* --- Knöpfe: feinere Kanten, Glanzkante, Pfeil ---------------------------------- */
.btn-primary, .gb-button.btn-primary, .wp-block-button.btn-primary .wp-block-button__link, .button.btn-primary,
.btn-secondary, .gb-button.btn-secondary, .wp-block-button.btn-secondary .wp-block-button__link {
  font-size: 1.12rem; letter-spacing: .1em; padding: .95em 2em; border-radius: 8px;
}
.btn-primary, .gb-button.btn-primary, .wp-block-button.btn-primary .wp-block-button__link, .button.btn-primary {
  background: linear-gradient(180deg, #A81F33 0%, var(--rot) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 28px -8px rgba(155, 27, 46, .55);
}
.btn-primary:hover, .btn-primary:focus-visible { background: linear-gradient(180deg, #B8243A 0%, #A01C30 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 16px 36px -10px rgba(184, 36, 58, .6); }
.btn-secondary, .gb-button.btn-secondary, .wp-block-button.btn-secondary .wp-block-button__link { border-color: var(--gold-linie); background: rgba(10, 10, 11, .35); backdrop-filter: blur(6px); }
.btn-secondary:hover { border-color: var(--gold); background: rgba(201, 162, 74, .12); color: var(--gold-hell) !important; }
.wp-block-button__link { transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }

/* --- Trust-Leiste: feines Band mit goldenen Punkten ------------------------------ */
.trust-section { padding-block: 1.15rem !important; border-block: 1px solid var(--gold-linie); background: rgba(10, 10, 11, .55); backdrop-filter: blur(8px); }
.trust-bar { gap: .6rem 0; }
.trust-bar > li { font-family: var(--font-body); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: #C8C4BA; font-weight: 500; padding-inline: 1.4rem; }
.trust-bar > li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); margin-right: 1.4rem; opacity: .8; }
@media (max-width: 768px) { .trust-bar > li { padding-inline: .8rem; font-size: .72rem; letter-spacing: .12em; } .trust-bar > li + li::before { margin-right: .8rem; } }

/* --- Überschriften: ruhiger, edler ----------------------------------------------- */
h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: .03em; text-wrap: balance; max-width: 26ch; }
h2::before, .gold-line::before { width: 72px; height: 1px; background: linear-gradient(90deg, var(--gold), var(--gold-linie)); margin-bottom: 1.25rem; }
.text-center h2 { margin-inline: auto; }
h3 { letter-spacing: .06em; }
p, li { color: #B8B4AA; }                           /* eine Spur heller als vorher – bessere Lesbarkeit auf Fotos */
.entry-content > p, .entry-content .wp-block-group__inner-container > p { max-width: 68ch; }
/* Unterseiten: H1 kleiner, mit Linie, erster Absatz als Vorspann */
.entry-content > h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: .98; max-width: 20ch; text-wrap: balance; }
.entry-content > h1::before { content: ""; display: block; width: 72px; height: 1px; background: linear-gradient(90deg, var(--gold), var(--gold-linie)); margin-bottom: 1.25rem; }
.entry-content > h1 + p { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.65; color: #D9D6CF; font-weight: 400; max-width: 60ch; }
.entry-content > h1 + p::first-letter { color: var(--gold-hell); }
.entry-content li::marker { color: var(--gold); }
strong { color: var(--weiss); font-weight: 600; letter-spacing: .005em; }

/* --- Leistungs-Cards: nummeriert, Foto ruhig, Farbe erst beim Berühren ------------ */
.section-dark { counter-reset: karte; }
.card-service { border-color: var(--linie); border-radius: 14px; box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset; transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.card-service img { filter: saturate(.55) contrast(1.05) brightness(.9); transition: transform .9s var(--ease), filter .6s var(--ease); }
.card-service:hover { transform: translateY(-6px); border-color: var(--gold-linie); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(201, 162, 74, .12); }
.card-service:hover img { transform: scale(1.06); filter: saturate(1) contrast(1.05) brightness(1); }
.card-service::before {
  counter-increment: karte; content: counter(karte, decimal-leading-zero);
  position: absolute; top: 1.1rem; left: 1.25rem; z-index: 1;
  font-family: var(--font-head); font-size: 1rem; letter-spacing: .12em; color: var(--gold);
  padding-bottom: .25rem; border-bottom: 1px solid var(--gold-linie);
}
.card-service > .wp-block-group__inner-container { padding: 1.6rem 1.5rem 1.5rem; background: linear-gradient(0deg, rgba(10, 10, 11, .96) 45%, rgba(10, 10, 11, .55) 80%, rgba(10, 10, 11, 0) 100%); }
.card-service h3 { font-size: 1.45rem; }
.card-service .card-link { display: inline-flex; align-items: center; gap: .45em; font-family: var(--font-body); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--gold-hell); }
.card-service .card-link::before { content: "→"; font-size: 1.05em; transition: transform .3s var(--ease); }
.card-service:hover .card-link::before { transform: translateX(4px); }

/* --- Bewertungen: Zitat mit großem Anführungszeichen, Note in Gold --------------- */
.review-card { position: relative; border-color: var(--linie); border-radius: 14px; background: rgba(23, 24, 27, .7); backdrop-filter: blur(10px); padding: 2rem 1.9rem 1.75rem; overflow: hidden; }
.wp-block-quote.review-card { border-left: 0; }
.wp-block-quote.review-card::before { content: "\201E"; position: absolute; top: -.35em; right: .35em; font-family: Georgia, 'Times New Roman', serif; font-size: 7rem; line-height: 1; color: var(--gold); opacity: .14; pointer-events: none; }
.review-card .stars { font-size: 1.05rem; letter-spacing: .14em; text-shadow: 0 0 14px rgba(201, 162, 74, .45); }
.review-card p { color: #D9D6CF; font-size: 1.02rem; line-height: 1.65; }
.review-card cite { font-size: .95rem; }
.review-score { background: linear-gradient(160deg, rgba(201, 162, 74, .1), rgba(23, 24, 27, .7) 60%); border-color: var(--gold-linie); }
.review-score h3 { font-size: 4.2rem; background: linear-gradient(115deg, var(--gold-hell), var(--gold) 55%, var(--gold-dark)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- FAQ + Ablauf ---------------------------------------------------------------- */
.wp-block-details { border-color: var(--linie); border-radius: 12px; background: rgba(255, 255, 255, .025); padding: 1.35rem 1.6rem; }
.wp-block-details:hover { border-color: rgba(244, 241, 234, .18); }
.wp-block-details[open] { border-color: var(--gold-linie); background: rgba(201, 162, 74, .05); }
.wp-block-details summary { font-size: 1.22rem; letter-spacing: .05em; }
.entry-content h3.schritt .nr { border-color: var(--gold-linie); background: linear-gradient(160deg, rgba(201, 162, 74, .16), rgba(201, 162, 74, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }

/* --- Abschnitte mit Foto: ruhiger, mit feinem Rahmenlicht ------------------------- */
.bg-bild::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-shadow: inset 0 1px 0 var(--gold-linie), inset 0 -1px 0 var(--gold-linie); }
.bg-bild::before { background: linear-gradient(180deg, rgba(10, 10, 11, .9) 0%, rgba(10, 10, 11, .72) 50%, rgba(10, 10, 11, .9) 100%); }
.bg-motorraum::before { background: radial-gradient(80% 70% at 50% 50%, rgba(10, 10, 11, .55) 0%, rgba(10, 10, 11, .9) 100%); }
.trenner { border-top-color: var(--linie); }
body::before { opacity: .12; }

/* --- Formular ---------------------------------------------------------------------- */
.csb-terminformular .fluentform .ff-el-form-control { background: rgba(23, 24, 27, .8); border-color: var(--linie); border-radius: 8px; }
.csb-terminformular .fluentform .ff-el-form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201, 162, 74, .18); }
.fluentform .ff-btn-submit, .csb-terminformular .fluentform .ff-btn-submit { font-size: 1.12rem; letter-spacing: .1em; border-radius: 8px; padding: .95em 2em; }

/* --- Footer: Termin-Band als Glaskarte, feinere Linien ---------------------------- */
.csb-termin { border: 1px solid var(--gold-linie); border-radius: 16px; background: rgba(10, 10, 11, .55); backdrop-filter: blur(12px); padding: 2.25rem 2.5rem; margin-bottom: 3.5rem; }
.csb-termin-text h3 { font-size: 2.1rem; }
.csb-footer { border-top-color: var(--linie); padding-block: 88px 56px; }
.csb-footer-grid { gap: 3rem; }
.csb-footer h3 { font-size: 1.15rem; letter-spacing: .12em; color: var(--gold); margin-bottom: 1rem; }
.csb-footer h3::after { content: ""; display: block; width: 28px; height: 1px; background: var(--gold-linie); margin-top: .6rem; }
.site-info { border-top: 1px solid var(--linie); padding-top: 1.5rem; font-size: .85rem; letter-spacing: .02em; }
.footer-menu a { letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; }
@media (max-width: 768px) { .csb-termin { padding: 1.75rem 1.4rem; } }

/* --- Bewegung nur, wenn erwünscht ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-overlay .hero-img { animation: none; transform: none; }
}

/* Der Block-Editor hängt die Klasse btn-primary/btn-secondary an die HÜLLE (.wp-block-button) UND
   der Link darin bekommt die Stile über .wp-block-button.btn-* .wp-block-button__link. Seit dem
   Premium-Pass (Verlauf, Glanzkante, Glas) war die Hülle als zweiter Rahmen sichtbar – sie wird neutralisiert. */
.wp-block-button.btn-primary, .wp-block-button.btn-secondary {
  display: inline-block; background: none; border: 0; padding: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; font-size: inherit;
}
.wp-block-button.btn-primary:hover, .wp-block-button.btn-secondary:hover { transform: none; background: none; box-shadow: none; }
.wp-block-button__link { white-space: nowrap; }
@media (max-width: 768px) {
  .hero-overlay .wp-block-button__link, .btn-primary, .btn-secondary { font-size: 1rem; letter-spacing: .08em; padding: .9em 1.4em; }
}

/* Stapelreihenfolge im Hero (Cover-Block, isolation: isolate): Foto z 0, Dim-Span z 1, Text z 1.
   Ein ::after mit z -1 lag deshalb HINTER dem Foto und dunkelte nichts ab (Altfehler, gefunden 22.09.2026).
   Mit z 0 liegt es als letztes Kind über dem Foto, aber unter dem Text. Dim dafür wieder zurückgenommen. */
.hero-overlay::before, .hero-overlay::after { z-index: 0; }
.hero-overlay .wp-block-cover__background { opacity: .3 !important; }
/* Der Text-Container des Cover-Blocks hat hier KEINEN eigenen z-index (anders als in der WP-Doku) –
   er muss über die Overlay-Pseudos (z 0) gehoben werden, sonst liegt der Verlauf auf der Schrift. */
.hero-overlay .wp-block-cover__inner-container { position: relative; z-index: 2; }


/* ==========================================================================
   10. Ausrichtung: links ist der Standard, zentriert ist die Ausnahme
   --------------------------------------------------------------------------
   Beim Premium-Pass am 22.09.2026 ist die Grundregel für `.text-center` verloren gegangen.
   Seitdem stand auch der Schluss-CTA linksbündig, obwohl er als Fokuspunkt in die Mitte gehört.
   Zentriert wird nur, was man ERFASST statt liest: ein Abschlussblock, eine Kennzahl, eine
   Metazeile. Fließtext, Listen, Karten, FAQ und Formulare bleiben links – zentrierter Lesetext
   zwingt das Auge, bei jeder Zeile den Anfang neu zu suchen.
   ========================================================================== */
.text-center { text-align: center; }
.text-center h2, .text-center h3 { margin-inline: auto; }
.text-center h2::before { margin-inline: auto; }

/* Zentrierter Text bleibt kurz – ab drei Zeilen kippt die Lesbarkeit */
.entry-content .text-center p, .entry-content p.text-center { max-width: 52ch; margin-inline: auto; text-wrap: balance; }

/* Schluss-CTA: Überschrift, Satz und Knöpfe mittig als ruhiger Abschluss der Seite */
.cta-final .wp-block-buttons { justify-content: center; }
.cta-final .wp-block-group__inner-container { display: flex; flex-direction: column; align-items: center; }
.cta-final .wp-block-group__inner-container > * { width: 100%; }

/* FAQ auf Lesebreite statt volle Containerbreite: bei einer kurzen Frage standen Text und
   Pfeil sonst über 1.100 px auseinander und die Zeile wirkte zerrissen. Gleiche Breite wie der
   Fließtext darüber (`.entry-content > p` = 68ch), etwas großzügiger wegen des Innenabstands. */
.entry-content > .wp-block-details { max-width: 76ch; }

/* Karten in einer Reihe enden auf gleicher Höhe. Die Notenkarte hat mehr Inhalt als die
   beiden Zitate – ohne height 100 % stand sie einzeln heraus und die Reihe wirkte schief. */
.entry-content .wp-block-columns { align-items: stretch; }
.entry-content .wp-block-column > .review-card { height: 100%; }

/* „Alle Bewertungen ansehen“ sah aus wie Fließtext – jetzt dieselbe Versal-Zeile mit Pfeil
   wie die Links auf den Leistungs-Cards, damit man sieht, dass es weitergeht. */
.link-mehr a {
  font-family: var(--font-head); font-size: .95rem; letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .55rem;
}
.link-mehr a::after { content: "\2192"; transition: transform .2s var(--ease); }
.link-mehr a:hover::after { transform: translateX(4px); }

/* Der Hero bleibt bewusst linksbündig, auch wenn die Blöcke die Klasse tragen (Regel steht
   weiter oben in Abschnitt 9) – hier nur noch die Knopfreihe nachziehen. */
.hero-overlay .text-center p, .hero-overlay p.text-center { max-width: 56ch; margin-inline: 0; text-align: left; }


/* ==========================================================================
   11. Zweisprachigkeit: Sprachumschalter und Hinweiskasten
   --------------------------------------------------------------------------
   Der Umschalter steht zweimal im Markup und schließt sich per Media Query gegenseitig aus:
   am Desktop als letzter Punkt im Hauptmenü, am Handy in der Kopfzeile links vom Menü-Knopf.
   Hinter dem Hamburger wäre er genau für die Besucher versteckt, die ihn brauchen.
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  /* Systemschrift für den Vorlese-Text: Im Sprachumschalter steht unsichtbar „Русский", und
     allein dafür lud jede deutsche Seite die kyrillische Schriftdatei nach (6,8 kB, gemessen
     12.10.2026). Gesehen wird der Text nie, vorgelesen wird er unabhängig von der Schrift. */
  font-family: sans-serif;
}

.csb-sprachwahl {
  display: inline-flex; align-items: center;
  border: 1px solid var(--linie); border-radius: 999px;
  padding: 3px; background: rgba(244, 241, 234, .04);
  font-family: var(--font-head); font-size: .85rem; letter-spacing: .1em; line-height: 1;
}
.csb-sprachwahl > a,
.csb-sprachwahl > span {
  display: inline-block; padding: .5em .75em; border-radius: 999px;
  color: var(--muted); text-decoration: none;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.csb-sprachwahl > a:hover,
.csb-sprachwahl > a:focus-visible { color: var(--weiss); background: rgba(244, 241, 234, .08); }
.csb-sprachwahl > .ist-aktiv { color: var(--gold); background: rgba(201, 162, 74, .14); }

/* Im Menü: GeneratePress gibt jedem `li a` 48 px Zeilenhöhe und 13 px Innenabstand – das würde
   die beiden Kürzel auseinanderreißen. Deshalb hier gezielt zurücknehmen. */
.main-navigation .main-nav ul li.csb-sprach-item { display: flex; align-items: center; margin-left: 14px; }
.main-navigation .main-nav ul li.csb-sprach-item a {
  padding: .5em .75em; line-height: 1; font-size: .85rem; letter-spacing: .1em; color: var(--muted);
}
.main-navigation .main-nav ul li.csb-sprach-item a:hover { color: var(--weiss); }
.csb-sprachwahl--mobil { display: none; }

@media (max-width: 768px) {
  .csb-sprachwahl--menue, .main-navigation .main-nav ul li.csb-sprach-item { display: none; }
  /* Kopfzeile: Umschalter und Menü-Knopf in einer Reihe. .main-nav hängt absolut darunter
     (siehe Abschnitt 4) und stört die Reihe nicht. */
  .site-header .inside-navigation { display: flex; align-items: center; gap: .5rem; }
  .csb-sprachwahl--mobil { display: inline-flex; font-size: .78rem; padding: 2px; }
  .csb-sprachwahl--mobil > a, .csb-sprachwahl--mobil > span { padding: .45em .6em; }
}

/* Hinweiskasten im Fließtext (Impressum-Entwurf, rechtliche Anmerkungen). Vorher lief so eine
   Zeile als Zitat durch und stand mit fünf Sternen als Kundenbewertung auf dem Impressum. */
.entry-content p.hinweis-box {
  border-left: 3px solid var(--gold); background: rgba(201, 162, 74, .07);
  padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .95rem; color: var(--muted); max-width: 68ch;
}
.entry-content p.hinweis-box strong { color: var(--weiss); }

/* Enger Bereich zwischen Handy-Menü (bis 768 px) und breitem Desktop: Logo, Titel, sechs
   Menüpunkte, roter Knopf und Umschalter passen dort nicht nebeneinander. Gemessen am 25.09.2026:
   Die Kopfzeile war schon vor dem Umschalter 48 px zu breit und die ganze Seite ließ sich seitlich
   schieben – mit dem Umschalter waren es 123 px. Deshalb tritt hier der Schriftzug zurück, das
   Wappen bleibt und verlinkt weiter auf die Startseite. */
@media (min-width: 769px) and (max-width: 1180px) {
  .site-header .main-title { display: none; }
  .site-header .inside-header { gap: .75rem; }
  .main-navigation .main-nav ul li a { padding-inline: 9px; font-size: 1rem; }
  .main-navigation .main-nav ul li.menu-cta > a { padding: .55em .95em; margin-left: 8px; }
  .main-navigation .main-nav ul li.csb-sprach-item { margin-left: 8px; }
  /* Seit der dritten Sprache (01.10.2026) stehen drei Kürzel im Umschalter statt zwei. Die
     Obergrenze ist deshalb von 1080 auf 1180 px gewandert und der Umschalter wird hier kleiner –
     sonst schiebt er den roten Knopf aus der Kopfzeile. */
  .main-navigation .main-nav ul li.csb-sprach-item a,
  .csb-sprachwahl--menue > span { padding: .45em .55em; font-size: .78rem; letter-spacing: .06em; }
  .csb-sprachwahl--menue { padding: 2px; }
}


/* ==========================================================================
   12. Farb-Pass (01.10.2026, Theme 2.4.0) – kräftig, aber nur zwei Farben
   --------------------------------------------------------------------------
   Erste Fassung am Vormittag hatte fünf Signalfarben (Orange, Gelb, Cyan, Grün, Violett) und
   jede Karte in einer anderen. Rückmeldung: „kräftiger aber weniger unterschiedliche Farben, das muss
   professionell high end mit einer klaren Linie sein." Richtig – bunt und hochwertig sind zwei
   verschiedene Richtungen. Deshalb jetzt:

   ZWEI FARBEN, und jede hat genau eine Aufgabe:
     ROT  = Handlung und Standort. Primärknöpfe, Menü-Knopf, aktiver Menüpunkt, aktive Sprache,
            das Band über der Kopfzeile, das Licht hinter den Abschnitten.
     GOLD = Auszeichnung und Gliederung. Überschriften-Balken, betonte Wörter, Kartennummern,
            „Mehr erfahren", Trust-Kacheln, Sterne, Ablaufziffern, Aufzählungspunkte, Links.
   Schwarz und Anthrazit bleiben der Grund. Sonst nichts.

   „Kräftiger" heißt gesättigter und größer, nicht bunter: Rot von #9B1B2E über #D21E38 auf
   #E01435, Gold von #C9A24A auf #D4A747, Linien von 1 px auf 3 px, Fotos nicht mehr entsättigt.
   Weiß auf #E01435 ergibt 4,9:1 und auf der hellsten Verlaufsstufe #F0213F noch 4,2:1 – beides
   lesbar. Deshalb geht der Knopfverlauf auch nur von Dunkelrot nach Rot und nirgends ins Orange.

   Regel, die bleibt: Eine Farbfläche trägt nie Fließtext.
   ========================================================================== */
:root {
  --rot:        #E01435;              /* war #9B1B2E (wirkte fast braun), dann #D21E38 */
  --rot-hover:  #F0213F;
  --rot-tief:   #9E0C22;              /* nur für Verläufe und Schatten */
  --gold:       #D4A747;              /* war #C9A24A */
  --gold-hell:  #F0CE7E;
  --gold-dark:  #9E7B2E;
  --gold-linie: rgba(212, 167, 71, .42);
  --linie:      rgba(244, 241, 234, .10);

  /* Zwei Verläufe, mehr nicht. Rot für Flächen, auf denen Schrift steht; Gold für Flächen
     ohne Schrift und für Schrift, die selbst aus dem Verlauf besteht. */
  --grad-rot:  linear-gradient(100deg, var(--rot-tief) 0%, var(--rot) 52%, var(--rot-hover) 100%);
  --grad-gold: linear-gradient(115deg, var(--gold-hell) 0%, var(--gold) 55%, var(--gold-dark) 100%);
}

/* --- Rotes Band über dem ganzen Dokument: drei Pixel Marke, auf jeder Seite -------
   Ohne Bewegung. Eine wandernde Leiste zieht den Blick dauerhaft von der Seite weg. */
.site-header::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 101;
  background: var(--grad-rot);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--linie), 0 14px 34px -20px rgba(224, 20, 53, .55); }

/* --- Abschnitte: ein einziges, warmes Licht hinter dem Inhalt ---------------------
   Dieselbe Farbe in jedem Abschnitt – das ist der „durchgehende Faden". Direkt in background,
   nicht über ein ::before: die Pseudo-Elemente sind bei .bg-bild und .pattern-bg schon belegt. */
.section-dark:not(.bg-bild) {
  background:
    radial-gradient(62% 48% at 6% 0%, rgba(224, 20, 53, .16) 0%, rgba(224, 20, 53, 0) 72%),
    var(--black);
}
.section-anthrazit:not(.bg-bild) {
  background:
    radial-gradient(60% 50% at 96% 0%, rgba(224, 20, 53, .14) 0%, rgba(224, 20, 53, 0) 72%),
    var(--anthrazit);
}

/* --- Überschriften: aus der Haarlinie wird ein goldener Balken -------------------- */
h2::before, .gold-line::before, .entry-content > h1::before {
  width: 88px; height: 3px; border-radius: 999px;
  background: var(--grad-gold);
  box-shadow: 0 0 20px rgba(212, 167, 71, .45);
  margin-bottom: 1.15rem;
}
/* Betonte Wörter laufen im Goldverlauf – überall gleich, auch im Hero. */
h1 em, h2 em, h3 em, .akzent,
.hero-overlay h1 em, .hero-overlay h1 em > * {
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-overlay h1 em { filter: drop-shadow(0 2px 12px rgba(10, 10, 11, .9)); }

/* --- Hero: ein roter Lichtschein unten links, sonst nichts ------------------------
   Deckkraft bewusst niedrig: der Text darüber muss seinen Kontrast behalten
   (dieselbe Lektion wie am 16.09.2026, als die goldene Zeile auf blankem Beton stand). */
.hero-overlay::after {
  background:
    radial-gradient(64% 50% at 8% 100%, rgba(224, 20, 53, .32) 0%, rgba(224, 20, 53, 0) 62%),
    radial-gradient(130% 100% at 15% 100%, rgba(10, 10, 11, .96) 0%, rgba(10, 10, 11, .7) 45%, rgba(10, 10, 11, .15) 100%),
    linear-gradient(0deg, rgba(10, 10, 11, 1) 0%, rgba(10, 10, 11, .6) 35%, rgba(10, 10, 11, .15) 70%, rgba(10, 10, 11, .35) 100%);
}
.hero-overlay .hero-img { filter: saturate(1.05) contrast(1.08); }   /* war entsättigt (.85) */
/* Überzeile als goldene Kachel */
.hero-overlay .uppercase.text-gold {
  color: var(--gold-hell) !important;
  padding: .55em 1.1em .5em; border-radius: 999px;
  border: 1px solid var(--gold-linie);
  background: rgba(212, 167, 71, .1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  align-self: flex-start;
}
.hero-overlay .uppercase.text-gold::before { width: 26px; background: var(--grad-gold); }

/* --- Knöpfe: roter Verlauf, der beim Berühren durchläuft -------------------------- */
.btn-primary, .gb-button.btn-primary, .wp-block-button.btn-primary .wp-block-button__link, .button.btn-primary,
.main-navigation .main-nav ul li.menu-cta > a,
.fluentform .ff-btn-submit, .csb-terminformular .fluentform .ff-btn-submit {
  background: var(--grad-rot);
  background-size: 200% 100%; background-position: 0% 50%;
  border: 0; color: var(--weiss) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 30px -8px rgba(224, 20, 53, .6);
  transition: background-position .5s var(--ease), box-shadow .3s var(--ease), transform .25s var(--ease);
}
.btn-primary:hover, .btn-primary:focus-visible,
.wp-block-button.btn-primary .wp-block-button__link:hover,
.main-navigation .main-nav ul li.menu-cta > a:hover,
.fluentform .ff-btn-submit:hover {
  background: var(--grad-rot); background-size: 200% 100%; background-position: 100% 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 18px 44px -10px rgba(224, 20, 53, .7);
  transform: translateY(-2px);
}
.btn-secondary, .gb-button.btn-secondary, .wp-block-button.btn-secondary .wp-block-button__link {
  border-color: var(--gold-linie); background: rgba(212, 167, 71, .07);
}
.btn-secondary:hover, .wp-block-button.btn-secondary .wp-block-button__link:hover {
  border-color: var(--gold); background: rgba(212, 167, 71, .16); color: var(--gold-hell) !important;
}

/* --- Trust-Leiste: vier gleiche goldene Kacheln ----------------------------------- */
.trust-section {
  border-block: 0 !important;
  background: linear-gradient(90deg, rgba(224, 20, 53, .1) 0%, rgba(10, 10, 11, .72) 55%, rgba(212, 167, 71, .08) 100%);
  position: relative;
}
.trust-section::before, .trust-section::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--grad-gold); opacity: .5;
}
.trust-section::before { top: 0; }
.trust-section::after  { bottom: 0; }
.trust-bar { gap: .55rem .7rem; }
.trust-bar > li {
  padding: .5em 1.05em; border-radius: 999px;
  border: 1px solid var(--gold-linie);
  background: rgba(212, 167, 71, .09);
  color: var(--gold-hell); font-weight: 600; letter-spacing: .12em;
}
.trust-bar > li + li::before { display: none; }                    /* der goldene Punkt entfällt */

/* --- Leistungs-Karten: alle gleich, Gold führt durch den Inhalt ------------------- */
.card-service {
  box-shadow: inset 0 3px 0 var(--gold), 0 1px 0 rgba(255, 255, 255, .03) inset;
  border-color: rgba(212, 167, 71, .2);
}
.card-service img { filter: saturate(1) contrast(1.06) brightness(.92); }   /* war saturate(.55) */
.card-service:hover img { filter: saturate(1.2) contrast(1.08) brightness(1.02); }
.card-service:hover {
  border-color: var(--gold);
  box-shadow: inset 0 3px 0 var(--gold), 0 30px 60px -30px rgba(0, 0, 0, .85),
              0 18px 50px -26px rgba(212, 167, 71, .55);
}
.card-service::before {                 /* die Nummer: gefüllte goldene Kachel, schwarze Schrift */
  color: var(--black);
  background: var(--grad-gold);
  padding: .3rem .55rem .25rem; border-radius: 6px; border-bottom: 0;
  box-shadow: 0 6px 18px -6px rgba(212, 167, 71, .7);
}
.card-service .card-link { color: var(--gold-hell); }
.card-service:hover h3 { color: var(--gold-hell); transition: color .3s var(--ease); }

/* --- Bewertungen ------------------------------------------------------------------ */
.review-card .stars { color: var(--gold); text-shadow: 0 0 18px rgba(212, 167, 71, .55); }
.wp-block-quote.review-card::before { color: var(--gold); opacity: .18; }
.review-card { border-color: rgba(212, 167, 71, .16); }
.review-score {
  background: linear-gradient(160deg, rgba(212, 167, 71, .14), rgba(23, 24, 27, .78) 65%);
  border-color: var(--gold-linie);
}
.review-score h3 { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- FAQ: goldene Kante, offen deutlich kräftiger --------------------------------- */
.wp-block-details { border-left: 3px solid rgba(212, 167, 71, .3); }
.wp-block-details:hover { border-color: rgba(212, 167, 71, .45); border-left-color: var(--gold); }
.wp-block-details[open] {
  border-color: var(--gold-linie); border-left-color: var(--gold);
  background: rgba(212, 167, 71, .07);
}
.wp-block-details summary:hover, .wp-block-details[open] summary { color: var(--gold-hell); }
.wp-block-details summary::after { border-color: var(--gold); }

/* --- Ablaufschritte: gefüllte goldene Ziffer -------------------------------------- */
.entry-content h3.schritt .nr {
  color: var(--black); border-color: transparent;
  background: var(--grad-gold);
  box-shadow: 0 8px 20px -8px rgba(212, 167, 71, .7);
}

/* --- Fließtext --------------------------------------------------------------------- */
.entry-content li::marker { color: var(--gold); }
.entry-content > h1 + p::first-letter { color: var(--gold-hell); }
.entry-content p a:not(.btn-primary):not(.btn-secondary):not(.wp-block-button__link),
.entry-content li a { color: var(--gold-hell); text-decoration: underline; text-decoration-color: var(--gold-linie); text-underline-offset: .18em; }
.entry-content p a:hover, .entry-content li a:hover { color: var(--weiss); text-decoration-color: var(--gold); }
.entry-content p.hinweis-box { border-left-color: var(--gold); background: rgba(212, 167, 71, .08); }

/* --- Navigation: Standort in Rot --------------------------------------------------- */
.main-navigation .main-nav > ul > li:not(.menu-cta) > a::after { height: 2px; background: var(--grad-rot); }
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a { color: var(--weiss); }

/* --- Sprachumschalter: aktive Sprache ist ein Standort, also rot ------------------- */
.csb-sprachwahl { border-color: var(--linie); background: rgba(244, 241, 234, .04); }
.csb-sprachwahl > .ist-aktiv {
  color: var(--weiss); background: var(--grad-rot); font-weight: 600;
  box-shadow: 0 4px 14px -6px rgba(224, 20, 53, .9);
}
.csb-sprachwahl > a:hover, .csb-sprachwahl > a:focus-visible { color: var(--weiss); background: rgba(244, 241, 234, .08); }

/* --- Formular ---------------------------------------------------------------------- */
.csb-terminformular .fluentform .ff-el-form-control:focus {
  border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212, 167, 71, .2);
}

/* --- Footer ------------------------------------------------------------------------ */
.csb-footer { border-top: 3px solid transparent; border-image: var(--grad-rot) 1; }
.csb-footer h3 { color: var(--gold-hell); }
.csb-footer h3::after { width: 42px; height: 2px; border-radius: 999px; background: var(--grad-gold); }
.csb-termin { border-color: var(--gold-linie); box-shadow: 0 24px 60px -34px rgba(224, 20, 53, .5); }
.csb-socials a { color: var(--gold-hell); }
.csb-socials a:hover { color: var(--weiss); }

/* --- Bildergalerie: festes Raster statt Flex-Resten --------------------------------
   Der Galerie-Block von WordPress ist ein Flex-Container; die letzte Reihe zieht sich auf die
   volle Breite, wenn sie nicht voll ist. Bei drei Bildern (Unfallinstandsetzung) standen deshalb
   zwei nebeneinander und das dritte allein über die ganze Breite – sah aus wie ein Versehen, und
   das 800er Bild wurde dabei auf 929 px gezogen (gemessen 04.10.2026).
   auto-fit mit 260 px Mindestbreite ergibt: zwei Bilder = zwei Spalten, drei = drei, sechs =
   zwei Reihen à drei, Handy = eine Spalte. Ohne Sonderfälle je Anzahl. */
.entry-content .werkstatt-galerie {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.entry-content .werkstatt-galerie .wp-block-image { width: auto !important; flex: none; margin: 0; }

/* --- Bildabschnitte: weniger Nebel, mehr Bild ------------------------------------- */
.bg-bild::before { background: linear-gradient(180deg, rgba(10, 10, 11, .88) 0%, rgba(10, 10, 11, .62) 50%, rgba(10, 10, 11, .88) 100%); }
.bg-bild::after { box-shadow: inset 0 2px 0 var(--gold-linie), inset 0 -2px 0 var(--gold-linie); }
.bg-motorraum::before { background: radial-gradient(80% 70% at 50% 50%, rgba(10, 10, 11, .42) 0%, rgba(10, 10, 11, .88) 100%); }

/* --- Vollbreite Abschnitte: Bildlaufleiste herausrechnen --------------------------
   `alignfull` rechnet mit 100vw, und 100vw zählt die Breite einer platzbelegenden Bildlaufleiste
   mit. Alle Abschnitte dieser Seite sind alignfull, also war jeder davon 15 px breiter als der
   sichtbare Bereich und die ganze Seite ließ sich 8 px seitlich schieben (gemessen 01.10.2026 bei
   1009 px Fensterbreite, in jedem Browser mit klassischer Leiste). --sb setzt functions.php per
   JavaScript auf die gemessene Leistenbreite; ohne JavaScript bleibt sie 0px und es rechnet wie
   bisher. Erst dadurch darf die Leiste unten überhaupt eingefärbt werden: Eine eingefärbte Leiste
   schaltet den Browser von der schwebenden auf die platzbelegende Leiste um. */
:root { --sb: 0px; }
.alignfull,
.no-sidebar .entry-content .alignfull {
  width: auto; max-width: none;
  margin-left:  calc(50% - 50vw + var(--sb) / 2);
  margin-right: calc(50% - 50vw + var(--sb) / 2);
}

/* --- Bildlaufleiste ------------------------------------------------------------- */
html { scrollbar-color: var(--rot) var(--anthrazit); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--anthrazit); }
::-webkit-scrollbar-thumb { background: var(--grad-rot); border-radius: 999px; }

/* --- Kopfzeile auf dem Handy mit drei Sprachen ------------------------------------
   Gemessen 01.10.2026 bei 375 px: Wappen + Schriftzug (136 px) + Umschalter (98 px statt 65 px
   mit zwei Sprachen) + Menü-Knopf (72 px) = 92 px zu breit, der Menü-Knopf stand komplett
   außerhalb des Bildschirms. Zwei Stellschrauben: Der Schriftzug konnte gar nicht schrumpfen,
   weil ein Flex-Element ohne `min-width: 0` nie unter seine Inhaltsbreite geht – die Ellipse aus
   Abschnitt 4 lief deshalb ins Leere. Und unter 560 px tritt der Schriftzug ganz zurück, genau
   wie im engen Desktop-Bereich; das Wappen verlinkt weiterhin auf die Startseite. */
@media (max-width: 768px) {
  .site-header .main-title { min-width: 0; }
  .csb-sprachwahl--mobil { font-size: .72rem; }
  .csb-sprachwahl--mobil > a, .csb-sprachwahl--mobil > span { padding: .4em .5em; }
}
@media (max-width: 560px) {
  .site-header .main-title { display: none; }
}

/* ==========================================================================
   13. Ratgeber (Blog), 04.10.2026
   Beiträge liegen unter /ratgeber/<slug>/, die Übersicht ist eine normale Seite.
   Optisch ist bewusst nichts Neues erfunden: Die Karten der Übersicht sind dieselben
   Cards wie die Leistungen auf der Startseite, der Beitrag ist eine Inhaltsseite mit
   derselben Typografie. Zwei Farben, gleiche Dinge sehen gleich aus.
   ========================================================================== */

/* --- Karten der Übersicht --------------------------------------------------------
   Drei statt vier Spalten: Ein Ratgeber-Titel ist länger als „Klimaservice“. */
.card-ratgeber { min-height: 400px; }
/* Keine Kartennummer: Bei den acht Leistungen ist die Ziffer eine Ordnung, bei Beiträgen wäre
   sie eine Rangfolge, die es nicht gibt. (Technisch käme sie hier ohnehin durcheinander – der
   Zähler lebt pro Spalte, jede Karte stünde auf „01".) */
.card-ratgeber::before { content: none; }
.card-ratgeber h3 { font-size: 1.25rem; line-height: 1.25; }
.card-ratgeber h3 a { color: inherit; text-decoration: none; }
.card-ratgeber h3 a:hover { color: var(--gold-hell); }
.card-ratgeber p { font-size: .92rem; }
/* Die Motive sind teils 3:2, teils 4:3 – im Raster werden alle gleich zugeschnitten. */
.ratgeber-bild img { aspect-ratio: 3 / 2; object-fit: cover; }

/* --- Einzelner Beitrag -----------------------------------------------------------
   Der Titel steht als H1 im Inhalt (wie auf allen Seiten), das Theme blendet seinen
   eigenen aus. Übrig bleibt das Datum – bei einem Ratgeber eine Information, keine
   Zierde: Leser und Suchmaschine sehen, wie aktuell die Zahlen sind. */
.single-post .entry-meta {
  font-family: var(--font-body);
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.single-post .entry-meta a { color: var(--muted); text-decoration: none; }
.single-post .entry-meta a:hover { color: var(--gold); }
.single-post .entry-header { margin-bottom: 0; }
/* Fließtext eines Beitrags darf etwas schmaler laufen als eine Leistungsseite:
   knapp 70 Zeichen je Zeile liest sich am angenehmsten. */
.single-post .entry-content > :not(.alignfull):not(.wp-block-buttons):not(.wp-block-columns):not(.aufmacher-bild) {
  max-width: 44rem;
}
.single-post .entry-content .wp-block-details { max-width: 44rem; }
/* Aufmacher: das Titelbild läuft über die volle Inhaltsbreite, nicht über die Textbreite –
   es ist der Einstieg in den Beitrag, kein Bild im Fließtext. Gebaut von
   werkzeuge/ratgeber_bilder.py (Duotone + Schlagzeile), Klasse kommt aus md2blocks.py. */
.single-post .entry-content > .aufmacher-bild { margin: 0 0 2.25rem; }
.aufmacher-bild img { width: 100%; }

/* --- Archiv (Kategorie „Ratgeber“) -----------------------------------------------
   Einstieg ist die Seite /ratgeber/. Das Archiv bleibt trotzdem erreichbar und soll
   nicht nach unfertigem Theme aussehen. */
.archive .site-main > article,
.blog .site-main > article {
  background: var(--anthrazit);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.archive .entry-title a, .blog .entry-title a { color: var(--weiss); text-decoration: none; }
.archive .entry-title a:hover, .blog .entry-title a:hover { color: var(--gold); }