/*
Theme Name:   Auto-Sattlerei Bruhn
Theme URI:    https://autosattlerei-hamburg.de/
Description:  Child-Theme für Themify Ultra. Gestaltung der Auto-Sattlerei Bruhn in Hamburg: Schwarz, Gelbgold, Weiß und Grauschattierungen, Steppnaht als durchgehendes Motiv. Schriften liegen lokal im Theme, es wird nichts von Google nachgeladen.
Author:       con|ZENTRIERT
Template:     themify-ultra
Version:      1.0.0
Text Domain:  autosattlerei
*/

/* ==========================================================================
   INHALT
   1  Farben, Schriften, Maße
   2  Themify-Variablen überschreiben
   3  Grundlagen
   4  Kopfzeile und Navigation
   5  Fußzeile
   6  Themify-Builder: Module, Buttons, Überschriften
   7  Eigene Bausteine (Präfix bru-)
   8  Bewertungen (con|ZENTRIERT Reviews)
   9  Rücksichtnahme: Bewegung, Fokus, Druck
   ========================================================================== */


/* ==========================================================================
   1  Farben, Schriften, Maße
   ========================================================================== */

:root {
  /* Grundtöne, minimal warm gezogen, damit sie neben dem Gold nicht kalt kippen */
  --bru-ink:      #0c0b09;
  --bru-ink-2:    #141210;
  --bru-carbon:   #1d1a16;
  --bru-graphite: #2b2722;
  --bru-steel:    #6d675d;
  --bru-ash:      #a6a096;
  --bru-fog:      #ddd9d1;
  --bru-paper:    #f5f3ee;
  --bru-white:    #ffffff;
  --bru-body:     #4b453d;

  /* Gelbgold: hell für dunkle Flächen, tief für Text auf hellem Grund */
  --bru-gold:        #c9a227;
  --bru-gold-bright: #e8ca6a;
  --bru-gold-deep:   #6f5610;

  --bru-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --bru-text:    "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --bru-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --bru-ease: cubic-bezier(.22,.61,.36,1);
}


/* ==========================================================================
   2  Themify-Variablen überschreiben

   Themify schreibt seine Variablen in ein <style id="tf-sv-root-vars"> im
   Kopfbereich, also NACH diesem Stylesheet. Bei gleicher Spezifität gewänne
   deshalb Themify. Der doppelte :root hebt die Spezifität um eine Stufe an
   und dreht das um, ohne dass irgendwo !important nötig wird.
   ========================================================================== */

:root:root {
  --theme_rounded:       0px;
  --theme_rounded_sm:    0px;
  --theme_input_rounded: 0px;
  --theme_btn_rounded:   0px;
}


/* ==========================================================================
   3  Grundlagen
   ========================================================================== */

/* Grundgröße 18 statt 16 Pixel. Alle rem-Angaben im Stylesheet hängen daran
   und wachsen mit. Die Kundschaft einer Sattlerei ist im Schnitt nicht jung,
   und kleine Schrift kostet Anfragen, bevor sie jemandem auffällt. */
html { font-size: 112.5%; }

body {
  overflow-x: clip;
  background: var(--bru-ink);
  color: var(--bru-ash);
  font-family: var(--bru-text);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bru-display);
  color: var(--bru-white);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.025em; font-stretch: 82%; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.1rem; }

a { color: var(--bru-gold); text-decoration: none; }
a:hover { color: var(--bru-gold-bright); }

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

/* Abschnittsfarben laufen bis an den Fensterrand.

   Themify hält Builder-Zeilen auf Inhaltsbreite. Ein farbiger Abschnitt sähe
   dadurch aus wie ein Kasten mitten auf der Seite. Der Schlagschatten legt
   dieselbe Farbe seitlich weiter, clip-path lässt ihn nur dort austreten und
   schneidet ihn oben und unten ab. Das kostet im Gegensatz zu 100vw-Breiten
   keine zusätzliche Scrollleiste und lässt das Layout unangetastet. */
.bru-paper, .bru-ink-2, .bru-cta {
  box-shadow: 0 0 0 100vmax var(--bru-band-bg, transparent);
  clip-path: inset(0 -100vmax);
}

/* Helle Abschnitte. Im Builder als CSS-Klasse der Zeile vergeben. */
.bru-paper {
  --bru-band-bg: var(--bru-paper);
  background: var(--bru-paper);
  color: var(--bru-body);
}
.bru-paper h1, .bru-paper h2, .bru-paper h3,
.bru-paper h4, .bru-paper h5, .bru-paper h6 { color: var(--bru-ink); }
.bru-paper a { color: var(--bru-gold-deep); }
.bru-paper a:hover { color: var(--bru-ink); }

.bru-ink-2 { --bru-band-bg: var(--bru-ink-2); background: var(--bru-ink-2); }

/* Fließtext bekommt Zeilen, die man noch am Stück lesen kann */
.bru-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  max-width: 62ch;
}


/* ==========================================================================
   4  Kopfzeile und Navigation
   ========================================================================== */

#headerwrap {
  background: rgba(12,11,9,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bru-graphite);
}

/* Themify stellt Logoblock und Menüblock beide an den oberen Rand. Weil der
   Logoblock höher ist als die Menüzeile, sitzt die Navigation dadurch oben
   statt auf einer Linie mit dem Logo. Ein Flex-Container über beide legt sie
   auf dieselbe Mittelachse. */
@media (min-width: 901px) {
  #header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  #header > #header-bar { flex: 0 0 auto; }
  #header > #mobile-menu { flex: 1 1 auto; width: auto; min-width: 0; }
  #main-nav-wrap { justify-content: flex-end; }
}

/* Das Logo ist bei Themify als Text hinterlegt. Statt ihn zu ersetzen, wird
   er versteckt und das Logo als Maske darübergelegt: So bleibt der Name für
   Screenreader und Suchmaschinen erhalten, und die Farbe lässt sich frei
   wählen, weil die Bilddatei nur die Form vorgibt. */
#site-logo a {
  display: block;
  width: 190px;
  max-width: 62vw;
  aspect-ratio: 500 / 227;
  background-color: var(--bru-white);
  -webkit-mask: var(--bru-logo) left center/contain no-repeat;
          mask: var(--bru-logo) left center/contain no-repeat;
  transition: background-color .2s var(--bru-ease);
}
#site-logo a:hover { background-color: var(--bru-gold-bright); }
#site-logo a span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Liegt doch eine Bilddatei als Logo vor, gilt stattdessen das hier. */
#site-logo img,
#site-logo a img { max-height: 70px; width: auto; }
#site-logo:has(img) a {
  width: auto;
  aspect-ratio: auto;
  background: none;
  -webkit-mask: none;
          mask: none;
}
#site-logo:has(img) a span { position: static; width: auto; height: auto; clip-path: none; }

#main-nav > li > a {
  font-family: var(--bru-display);
  font-weight: 600;
  font-stretch: 92%;
  font-size: .92rem;
  color: var(--bru-fog);
  letter-spacing: .01em;
}
#main-nav > li > a:hover,
#main-nav > li.current_page_item > a,
#main-nav > li.current-menu-item > a { color: var(--bru-gold-bright); }

/* Aktiver Punkt bekommt eine Naht statt eines Balkens */
#main-nav > li.current_page_item > a::after,
#main-nav > li.current-menu-item > a::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 3px;
  background-image: repeating-linear-gradient(90deg, var(--bru-gold) 0 6px, transparent 6px 11px);
}

/* Aufklappmenü

   Themify setzt den Hintergrund über "#main-nav li > .sub-menu" auf Weiß.
   Dieser Selektor zählt ein Element mehr als ein schlichtes
   "#main-nav .sub-menu" und gewinnt deshalb, egal in welcher Reihenfolge die
   Dateien geladen werden. Das Ergebnis war heller Text auf weißem Grund, also
   praktisch unlesbar. Mit dem Elementnamen "ul" liegt die Regel hier eine
   Stufe darüber. */
#main-nav li > ul.sub-menu {
  background: var(--bru-carbon);
  border: 1px solid var(--bru-graphite);
  border-radius: 0;
  box-shadow: 0 22px 44px rgba(0,0,0,.5);
  padding: 6px;
}
#main-nav li > ul.sub-menu a {
  font-family: var(--bru-text);
  font-size: .92rem;
  color: var(--bru-fog);
  padding: 11px 16px;
}
#main-nav li > ul.sub-menu a:hover,
#main-nav li > ul.sub-menu a:focus-visible {
  background: var(--bru-graphite);
  color: var(--bru-gold-bright);
}
/* Der aufgeklappte Punkt bleibt als solcher erkennbar */
#main-nav li > ul.sub-menu .current_page_item > a,
#main-nav li > ul.sub-menu .current-menu-item > a { color: var(--bru-gold); }

/* Letzter Menüpunkt ist die Schaltfläche. Im Menü als CSS-Klasse
   "bru-nav-cta" hinterlegt, damit er sich dort pflegen lässt. */
#main-nav > li.bru-nav-cta > a {
  background: var(--bru-gold);
  color: var(--bru-ink);
  padding: 11px 20px;
  margin-left: 14px;
  font-weight: 700;
  transition: background-color .18s var(--bru-ease);
}
#main-nav > li.bru-nav-cta > a:hover { background: var(--bru-gold-bright); color: var(--bru-ink); }
#main-nav > li.bru-nav-cta > a::after { display: none; }
@media (max-width: 900px) {
  #main-nav > li.bru-nav-cta > a { margin-left: 0; display: inline-block; }
}

/* Menüschalter auf schmalen Geräten */
#menu-icon .menu-icon-inner,
#menu-icon .menu-icon-inner::before,
#menu-icon .menu-icon-inner::after { background-color: var(--bru-fog); }


/* ==========================================================================
   5  Fußzeile
   ========================================================================== */

#footerwrap {
  background: var(--bru-ink);
  border-top: 1px solid var(--bru-graphite);
  color: var(--bru-steel);
}
#footerwrap a { color: var(--bru-steel); }
#footerwrap a:hover { color: var(--bru-gold-bright); }
#footerwrap .widgettitle,
#footerwrap .widget-title {
  font-family: var(--bru-mono);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bru-gold);
  font-weight: 500;
}
#footerwrap .footer-text { font-family: var(--bru-mono); font-size: .78rem; letter-spacing: .06em; }

/* Themify zentriert die Fußspalten im Design "footer-block". Der Entwurf
   setzt sie linksbündig, damit die vier Spalten eine Kante bilden. */
#footerwrap .footer-widgets,
#footerwrap .footer-widgets .widget,
#footerwrap .footer-widgets .widgettitle,
#footerwrap .footer-widgets .widget-title { text-align: left; }
#footerwrap .footer-widgets .widget { margin-bottom: 0; }

/* Logo in der Fußzeile, in Gold */
.bru-foot-logo {
  display: block;
  width: 208px;
  max-width: 100%;
  aspect-ratio: 500 / 227;
  background-color: var(--bru-gold);
  -webkit-mask: var(--bru-logo) left center/contain no-repeat;
          mask: var(--bru-logo) left center/contain no-repeat;
  margin-bottom: 14px;
  transition: background-color .2s var(--bru-ease);
}
.bru-foot-logo:hover { background-color: var(--bru-gold-bright); }

.bru-foot-liste { list-style: none; margin: 0; padding: 0; }
.bru-foot-liste li { margin-bottom: 8px; }
.bru-foot-liste a { font-size: .9rem; }

#footerwrap .widget p { font-size: .9rem; line-height: 1.6; margin-bottom: 12px; }
#footerwrap .conzrev-builder { margin-top: 16px; }


/* ==========================================================================
   6  Themify-Builder: Module, Buttons, Überschriften
   ========================================================================== */

/* Modultitel bekommen dieselbe Behandlung wie freie Überschriften */
.module-title { font-family: var(--bru-display); font-stretch: 88%; }

/* Buttons: kantig, keine Rundung, Gold als Hauptfarbe */
.ui.builder_button,
.module-buttons .ui,
input[type="submit"],
button[type="submit"] {
  font-family: var(--bru-display);
  font-weight: 700;
  font-stretch: 92%;
  font-size: .95rem;
  letter-spacing: .02em;
  border-radius: 0;
  border: 1px solid transparent;
  padding: 14px 26px;
  transition: background-color .18s var(--bru-ease), color .18s var(--bru-ease), border-color .18s var(--bru-ease);
}

.bru-btn-gold.ui.builder_button,
.bru-btn-gold .ui,
input[type="submit"],
button[type="submit"] {
  background: var(--bru-gold);
  color: var(--bru-ink);
}
.bru-btn-gold.ui.builder_button:hover,
.bru-btn-gold .ui:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--bru-gold-bright);
  color: var(--bru-ink);
}

.bru-btn-ghost.ui.builder_button,
.bru-btn-ghost .ui {
  background: transparent;
  color: var(--bru-white);
  border-color: var(--bru-graphite);
}
.bru-btn-ghost.ui.builder_button:hover,
.bru-btn-ghost .ui:hover { border-color: var(--bru-gold); color: var(--bru-gold-bright); }

.bru-paper .bru-btn-ghost.ui.builder_button,
.bru-paper .bru-btn-ghost .ui { border-color: var(--bru-fog); color: var(--bru-ink); }
.bru-paper .bru-btn-ghost.ui.builder_button:hover,
.bru-paper .bru-btn-ghost .ui:hover { border-color: var(--bru-gold-deep); color: var(--bru-gold-deep); }

/* Formularfelder */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="date"], input[type="time"], input[type="number"],
select, textarea {
  font-family: var(--bru-text);
  font-size: .96rem;
  padding: 12px 14px;
  border: 1px solid var(--bru-fog);
  border-radius: 0;
  background: var(--bru-white);
  color: var(--bru-ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--bru-gold-deep);
  box-shadow: 0 0 0 3px rgba(201,162,39,.18);
}


/* ==========================================================================
   7  Eigene Bausteine

   Diese Klassen werden im Themify Builder im Feld "CSS-Klasse" der Zeile
   oder des Moduls eingetragen. Sie sind der gestalterische Kern der Seite.
   ========================================================================== */

/* -- Steppnaht: das wiederkehrende Motiv ---------------------------------- */
.bru-seam {
  display: block;
  height: 7px;
  width: 100%;
  max-width: 240px;
  background-image:
    repeating-linear-gradient(90deg, var(--bru-gold) 0 12px, transparent 12px 23px),
    repeating-linear-gradient(90deg, var(--bru-gold) 0 12px, transparent 12px 23px);
  background-size: 100% 2px, 100% 2px;
  background-position: 0 0, 11px 5px;
  background-repeat: repeat-x;
  opacity: .6;
}

/* -- Kicker: kleine Kennzeichnung über einer Überschrift ------------------ */
.bru-kicker,
.bru-kicker p {
  font-family: var(--bru-mono);
  font-size: .80rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bru-gold);
  font-weight: 500;
  margin: 0;
}
.bru-paper .bru-kicker,
.bru-paper .bru-kicker p { color: var(--bru-gold-deep); }

/* -- Kennzahlenreihe ------------------------------------------------------ */
.bru-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--bru-graphite);
}
.bru-facts > * { padding: 20px 0 4px; }
.bru-facts b {
  display: block;
  font-family: var(--bru-display);
  font-size: 1.6rem;
  font-weight: 700;
  font-stretch: 84%;
  color: var(--bru-white);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.bru-facts b em { font-style: normal; color: var(--bru-gold); }
.bru-facts span {
  font-family: var(--bru-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bru-steel);
}

/* -- Abschnitte und Abstände ---------------------------------------------- */
/* Im Builder als CSS-Klasse der Zeile. bru-band gibt Luft nach oben und
   unten, die beiden Varianten nehmen eine Seite weg, wenn mehrere Zeilen
   zusammen einen Abschnitt bilden. */
.bru-band        { padding-block: clamp(56px, 8vw, 104px); }
.bru-band-tight  { padding-block: clamp(56px, 8vw, 104px) 28px; }
.bru-band-bottom { padding-block: 0 clamp(56px, 8vw, 104px); }

/* -- Werkstattauftrag-Raster ----------------------------------------------

   Das prägende Element des Entwurfs: links eine schmale Spalte, die nur die
   Kennzeichnung trägt, rechts der Inhalt. Alle Inhalte eines Text-Moduls
   liegen als Geschwister in .tb_text_wrap, deshalb genügt ein Grid darauf.
   Der erste Kicker wandert nach links, alles Weitere nach rechts.
   Unter 1040px fällt das Raster auf eine Spalte zurück. */
@media (min-width: 1040px) {
  .bru-ledger .tb_text_wrap {
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
  }
  .bru-ledger .tb_text_wrap > * { grid-column: 2; }
  .bru-ledger .tb_text_wrap > .bru-kicker:first-child {
    grid-column: 1;
    grid-row: 1;
    margin-top: .35em;
    /* Die Kennzeichnung benennt den ganzen Abschnitt und steht allein in
       ihrer Spalte. Sie darf deshalb größer sein als die Kategoriezeilen
       unten in den Kacheln. */
    font-size: .95rem;
    letter-spacing: .18em;
  }
  /* Naht unter der Kennzeichnung, wie im Entwurf */
  .bru-ledger .tb_text_wrap > .bru-kicker:first-child::after {
    content: "";
    display: block;
    height: 7px;
    width: 92px;
    margin-top: 14px;
    background-image:
      repeating-linear-gradient(90deg, currentColor 0 12px, transparent 12px 23px),
      repeating-linear-gradient(90deg, currentColor 0 12px, transparent 12px 23px);
    background-size: 100% 2px, 100% 2px;
    background-position: 0 0, 11px 5px;
    background-repeat: repeat-x;
    opacity: .6;
  }
}

/* -- Hero ----------------------------------------------------------------- */
.bru-hero .col2-1:first-child { align-self: center; }
.bru-hero h1 { margin: .2em 0 .35em; }
.bru-hero h1 em { font-style: normal; color: var(--bru-gold); }
.bru-hero .bru-seam { margin-bottom: 24px; }

/* Materialkarte im Hero */
.bru-swatch { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--bru-graphite); }
.bru-swatch img { display: block; width: 100%; height: auto; }
.bru-swatch figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(12,11,9,.88);
  border-top: 1px solid var(--bru-graphite);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bru-swatch figcaption b {
  font-family: var(--bru-display);
  font-weight: 700;
  font-stretch: 88%;
  color: var(--bru-white);
  font-size: 1rem;
}
.bru-swatch figcaption span {
  font-family: var(--bru-mono);
  font-size: .80rem;
  letter-spacing: .06em;
  color: var(--bru-gold);
}

/* -- Materialproben -------------------------------------------------------

   Die Flächen sind gezeichnet, nicht fotografiert: Farbe und Struktur genügen,
   um Leder von Verdeckstoff und Persenning zu unterscheiden. Sobald es eigene
   Aufnahmen der Muster gibt, treten sie an diese Stelle. */
.bru-materials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (min-width: 640px) { .bru-materials { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bru-mat { display: flex; flex-direction: column; gap: 10px; }
.bru-mat-face {
  aspect-ratio: 5 / 4;
  border: 1px solid var(--bru-fog);
  position: relative;
  overflow: hidden;
}
/* feine Narbung über allen Mustern */
.bru-mat-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23m)' opacity='0.42'/%3E%3C/svg%3E");
  opacity: .13;
  mix-blend-mode: multiply;
}
.bru-mat b {
  font-family: var(--bru-display);
  font-weight: 700;
  font-stretch: 88%;
  color: var(--bru-ink);
  font-size: .98rem;
}
.bru-mat span {
  font-family: var(--bru-mono);
  font-size: .80rem;
  color: var(--bru-steel);
  line-height: 1.5;
}

.bru-m-nappa  { background: linear-gradient(145deg, #2a2621, #0f0e0c); }
.bru-m-alcan  { background: linear-gradient(145deg, #4a4741, #2a2823); }
.bru-m-sonnen {
  background: #1b1a18;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
}
.bru-m-sunbr {
  background: #e7e3d8;
  background-image: repeating-linear-gradient(90deg, #26221d 0 9px, transparent 9px 26px);
}
.bru-m-vinyl { background: linear-gradient(145deg, #d8cdb6, #b6a98f); }
.bru-m-karo {
  background: #3a352e;
  background-image:
    repeating-linear-gradient(0deg,  rgba(201,162,39,.5) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(201,162,39,.5) 0 1px, transparent 1px 14px);
}

/* -- Schaltflächen als Textlinks ------------------------------------------ */
.bru-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.bru-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--bru-display);
  font-weight: 700;
  font-stretch: 92%;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .18s var(--bru-ease), color .18s var(--bru-ease), border-color .18s var(--bru-ease);
}
.bru-btn-gold { background: var(--bru-gold); color: var(--bru-ink); }
.bru-btn-gold:hover { background: var(--bru-gold-bright); color: var(--bru-ink); }
.bru-btn-ghost { border-color: var(--bru-graphite); color: var(--bru-white); }
.bru-btn-ghost:hover { border-color: var(--bru-gold); color: var(--bru-gold-bright); }
.bru-paper .bru-btn-ghost { border-color: var(--bru-fog); color: var(--bru-ink); }
.bru-paper .bru-btn-ghost:hover { border-color: var(--bru-gold-deep); color: var(--bru-gold-deep); }
.bru-btn-ink { background: var(--bru-ink); color: var(--bru-white); }
.bru-btn-ink:hover { background: var(--bru-carbon); color: var(--bru-gold-bright); }
.bru-btn-outline-ink { border-color: rgba(12,11,9,.4); color: var(--bru-ink); }
.bru-btn-outline-ink:hover { border-color: var(--bru-ink); background: rgba(12,11,9,.06); }

/* -- Aufruf zum Kontakt, goldenes Band ------------------------------------ */
.bru-cta { --bru-band-bg: var(--bru-gold); background: var(--bru-gold); color: #3c2f0a; }
.bru-cta h1, .bru-cta h2, .bru-cta h3 { color: var(--bru-ink); }
.bru-cta .bru-kicker { color: #4c3a06; }
.bru-cta p { color: #3c2f0a; max-width: 54ch; }
.bru-cta .col2-1 { align-self: center; }
.bru-cta .bru-btn-row { margin-top: 0; }

/* -- Bildstreifen --------------------------------------------------------- */
.bru-shot { margin: 30px 0 0; }
.bru-shot img { display: block; width: 100%; height: auto; }
.bru-shot figcaption { margin-top: 9px; font-size: .87rem; color: var(--bru-steel); }
.bru-shot figcaption b { color: var(--bru-white); font-weight: 600; }
.bru-paper .bru-shot figcaption b { color: var(--bru-ink); }

/* -- Bildplatz ------------------------------------------------------------

   Steht, wo noch kein Foto vorliegt, und nennt das gebrauchte Format. So
   sieht der Betrieb auf einen Blick, welche Aufnahmen fehlen. Fällt weg,
   sobald das Bild eingesetzt ist. */
.bru-platz {
  aspect-ratio: 4 / 3;
  border: 1px dashed #4a453d;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #211d19, #0e0d0b);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
}
.bru-paper .bru-platz {
  border-color: #c3bdb1;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.028) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #eceae3, #dedbd3);
}
.bru-platz span {
  font-family: var(--bru-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bru-steel);
  line-height: 1.7;
}
.bru-platz-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 30px;
}
.bru-platz-reihe figure { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.bru-platz-reihe figcaption { font-size: .87rem; color: var(--bru-steel); }
.bru-platz-reihe figcaption b { color: var(--bru-white); font-weight: 600; }
.bru-paper .bru-platz-reihe figcaption b { color: var(--bru-ink); }

/* -- Zusammenfassung der Bewertungen rechts neben der Überschrift --------- */
.bru-summary-right { display: flex; align-items: flex-end; justify-content: flex-end; }

/* -- Kacheln bilden ein durchgehendes Gitter ------------------------------

   Themify hält zwischen Builder-Spalten einen Zwischenraum von 3,2 Prozent,
   gesteuert über die Variable --gutter. Die Einstellung "none" im Builder
   greift dabei nicht zuverlässig, deshalb wird die Variable hier direkt auf
   null gesetzt. Der dreistufige Selektor liegt über Themifys eigenem und
   kommt ohne !important aus.

   Die Spalten stoßen damit aneinander, und der negative Rand lässt die
   Rahmen benachbarter Kacheln aufeinanderfallen: zwischen zwei Kacheln steht
   dann eine Linie statt zweier direkt nebeneinander. */
.module_row.bru-tiles .row_inner,
.module_row.bru-steps .row_inner { --gutter: 0px; column-gap: 0; }

.bru-tiles .module_column, .bru-steps .module_column { margin-right: -1px; margin-bottom: -1px; }
.bru-tiles .col3-1, .bru-steps .col3-1 { margin-bottom: -1px; }
.bru-tiles .module, .bru-steps .module,
.bru-tiles .tb_text_wrap, .bru-steps .tb_text_wrap { height: 100%; margin-bottom: 0; }
.bru-tiles .themify_builder_col_inner,
.bru-steps .themify_builder_col_inner { height: 100%; }
.bru-step { border: 1px solid var(--bru-graphite); }

/* -- Kachelreihe: Leistungen, Vorzüge ------------------------------------- */
.bru-tiles .row_inner,
.bru-tiles {
  --bru-tile-line: var(--bru-graphite);
}
.bru-tile {
  background: var(--bru-ink);
  padding: 30px 26px 26px;
  position: relative;
  border: 1px solid var(--bru-graphite);
  transition: background-color .2s var(--bru-ease);
  height: 100%;
}
.bru-tile:hover { background: var(--bru-carbon); }
.bru-paper .bru-tile { background: var(--bru-paper); border-color: var(--bru-fog); }
.bru-paper .bru-tile:hover { background: var(--bru-white); }
.bru-tile h3 { margin-top: 0; }
.bru-tile p { font-size: .94rem; line-height: 1.6; }

/* Naht, die beim Überfahren aufläuft */
.bru-tile::after {
  content: "";
  position: absolute;
  left: 26px; right: 26px; bottom: 0;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--bru-gold) 0 7px, transparent 7px 13px);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--bru-ease);
}
.bru-tile:hover::after { transform: scaleX(1); }

/* -- Ablaufschritte ------------------------------------------------------- */
.bru-step { background: var(--bru-ink-2); padding: 26px 22px 28px; height: 100%; }
.bru-step .bru-step-nr {
  display: block;
  font-family: var(--bru-mono);
  font-size: .80rem;
  letter-spacing: .18em;
  color: var(--bru-gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.bru-step h3 { font-size: 1.08rem; }
.bru-step p { font-size: .9rem; line-height: 1.6; color: var(--bru-steel); }

/* -- Leitspruch ----------------------------------------------------------- */
.bru-creed { position: relative; }
/* Lederaufnahme und Abdunklung liegen auf zwei Lagen, die seitlich über die
   Zeile hinausreichen. Ein Schlagschatten wie bei den Farbflächen ginge hier
   nicht, der trägt kein Bild. */
.bru-creed::before,
.bru-creed::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -100vmax; right: -100vmax;
  pointer-events: none;
}
.bru-creed::before {
  background: #171512 var(--bru-creed-bg) center/cover no-repeat;
  border-block: 1px solid var(--bru-graphite);
}
/* Abdunkeln, damit der Satz auf dem Leder sicher lesbar bleibt */
.bru-creed::after {
  background: linear-gradient(100deg, rgba(12,11,9,.9) 0 42%, rgba(12,11,9,.55));
}
.bru-creed > * { position: relative; z-index: 1; }
.bru-creed .bru-creed-text {
  font-family: var(--bru-display);
  font-weight: 800;
  font-stretch: 82%;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--bru-white);
  margin: 0;
}
.bru-creed .bru-creed-text em { font-style: normal; color: var(--bru-gold); }
.bru-creed .bru-creed-sub {
  font-family: var(--bru-mono);
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--bru-ash);
  line-height: 1.8;
  max-width: 46ch;
}

/* -- Häkchenliste --------------------------------------------------------- */
.bru-checks ul,
ul.bru-checks { list-style: none; margin: 0; padding: 0; }
.bru-checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bru-graphite);
  font-size: .97rem;
}
.bru-paper .bru-checks li { border-color: var(--bru-fog); }
.bru-checks li::before {
  content: "";
  width: 12px; height: 12px;
  margin-top: 7px;
  border: 1px solid var(--bru-gold);
  background-image: linear-gradient(135deg, transparent 46%, var(--bru-gold) 46% 54%, transparent 54%);
}

/* -- Materialtabelle ------------------------------------------------------ */
.bru-spec table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bru-spec th {
  text-align: left;
  font-family: var(--bru-mono);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bru-gold-deep);
  font-weight: 500;
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--bru-fog);
}
.bru-spec td {
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--bru-fog);
  vertical-align: top;
  color: var(--bru-body);
}
.bru-spec td:first-child {
  font-family: var(--bru-display);
  font-weight: 700;
  font-stretch: 88%;
  color: var(--bru-ink);
  white-space: nowrap;
}
.bru-spec td:last-child { font-family: var(--bru-mono); font-size: .84rem; color: var(--bru-steel); }

/* -- Hinweiskasten -------------------------------------------------------- */
.bru-callout {
  background: var(--bru-carbon);
  border: 1px solid var(--bru-graphite);
  padding: 22px 24px;
}
.bru-callout p { font-size: .93rem; color: var(--bru-ash); }

/* -- Bildunterschrift in der Galerie -------------------------------------- */
.bru-shots .gallery-caption,
.bru-shots figcaption { font-size: .87rem; color: var(--bru-steel); }
.bru-shots b { color: var(--bru-white); font-weight: 600; }
.bru-paper .bru-shots b { color: var(--bru-ink); }


/* -- Kopfbereich einer Unterseite ----------------------------------------- */
.bru-seitenkopf h1 { margin: .15em 0 .4em; }
.bru-seitenkopf .bru-seam { margin-bottom: 22px; }

/* -- Verlinkte Kachel (Leistungsübersicht) -------------------------------- */
a.bru-tile-link { display: block; text-decoration: none; }
a.bru-tile-link h3 { color: var(--bru-ink); }
a.bru-tile-link p { color: var(--bru-body); }
a.bru-tile-link:hover h3 { color: var(--bru-gold-deep); }

/* -- Typische Fälle ------------------------------------------------------- */
.bru-case {
  border-left: 2px solid var(--bru-gold);
  padding: 4px 0 4px 20px;
  margin: 22px 0;
}
.bru-case b {
  display: block;
  font-family: var(--bru-display);
  font-stretch: 88%;
  font-size: 1.05rem;
  color: var(--bru-white);
  margin-bottom: 5px;
}
.bru-paper .bru-case b { color: var(--bru-ink); }
.bru-case p { font-size: .92rem; color: var(--bru-steel); margin: 0; }
.bru-callout .bru-dauer { margin-top: 10px; }

/* -- Querverweise --------------------------------------------------------- */
.bru-crosslinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--bru-graphite);
  border: 1px solid var(--bru-graphite);
  margin-top: 18px;
}
.bru-crosslinks a {
  background: var(--bru-ink);
  padding: 20px 22px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--bru-display);
  font-weight: 700;
  font-stretch: 88%;
  color: var(--bru-white);
  transition: background-color .18s var(--bru-ease);
}
.bru-crosslinks a:hover { background: var(--bru-carbon); color: var(--bru-gold-bright); }
.bru-crosslinks small {
  font-family: var(--bru-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--bru-steel);
  font-weight: 400;
}

/* -- Betriebsdaten als Liste ---------------------------------------------- */
.bru-info > div {
  display: grid;
  grid-template-columns: minmax(0,110px) minmax(0,1fr);
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bru-fog);
  font-size: .95rem;
}
.bru-info > div > span:first-child {
  font-family: var(--bru-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bru-steel);
  padding-top: 3px;
}

/* -- Karte, erst auf Klick ------------------------------------------------ */
.bru-map {
  margin-top: 30px;
  aspect-ratio: 16 / 10;
  border: 1px dashed #c3bdb1;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.035) 0 1px, transparent 1px 34px),
    #eceae3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bru-map-hinweis { max-width: 42ch; text-align: center; }
.bru-map-hinweis p { font-size: .88rem; color: var(--bru-body); margin: 8px 0 16px; }
.bru-map-hinweis .bru-kicker { margin-bottom: 4px; }
.bru-map-alt { margin: 14px 0 0; font-size: .8rem; }
.bru-map.is-geladen { padding: 0; border-style: solid; border-color: var(--bru-fog); display: block; }
.bru-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* -- Kontaktformular ------------------------------------------------------ */
.bru-formular h2 { margin-bottom: 18px; }

/* -- Rechtstexte ---------------------------------------------------------- */
.bru-legal { max-width: 72ch; }
.bru-legal h3 {
  font-size: 1.16rem;
  margin: 34px 0 10px;
}
.bru-legal h3:first-of-type { margin-top: 0; }
.bru-legal p, .bru-legal li { font-size: .94rem; line-height: 1.72; }
.bru-legal ul { margin: 0; padding-left: 20px; }
.bru-legal li { margin-bottom: 7px; }

/* Hinweis auf den Entwurfsstand, fällt vor dem Livegang weg */
.bru-hinweis {
  background: #efe9d8;
  border-left: 2px solid var(--bru-gold);
  padding: 16px 20px;
  margin-bottom: 34px;
}
.bru-hinweis p { font-size: .84rem; line-height: 1.7; margin: 6px 0 0; color: #5a5145; }
.bru-hinweis .bru-kicker { margin: 0; }

/* -- Portfolio-Raster ----------------------------------------------------- */
.bru-portfolio .post-title a { font-family: var(--bru-display); font-stretch: 88%; color: var(--bru-ink); }
.bru-portfolio .post-title a:hover { color: var(--bru-gold-deep); }
.bru-portfolio .post-image img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   8  Bewertungen

   Eingebunden über das Themify-Builder-Modul "con|ZENTRIERT Reviews".
   Das Modul legt .conzrev-builder.conzrev-builder-{reviews|summary|badge}
   um die Shortcode-Ausgabe; daran hängen alle Regeln. Dadurch sind sie
   zweistufig und schlagen das plugin-eigene reviews.css unabhängig von der
   Ladereihenfolge.

   Wird der Shortcode ausnahmsweise direkt gesetzt, etwa in einem
   Text-Widget, genügt ein umschließendes
   <div class="conzrev-builder conzrev-builder-badge">.

   Modifier .is-dark für Bewertungen auf dunklem Grund; im Builder ins Feld
   "CSS-Klasse" eintragen.
   ========================================================================== */

.conzrev-builder .conzrev-track { gap: 16px; }

/* -- Sterne -- */
.conzrev-builder .conzrev-stars { letter-spacing: 2px; line-height: 1; white-space: nowrap; }
.conzrev-builder .conzrev-star-full,
.conzrev-builder .conzrev-star-half { color: var(--bru-gold-deep); }
.conzrev-builder .conzrev-star-empty { color: #c5bfb2; }

/* -- Zusammenfassung -- */
.conzrev-builder .conzrev-summary {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--bru-fog);
  background: var(--bru-white);
  padding: 16px 22px;
}
.conzrev-builder .conzrev-summary-value {
  font-family: var(--bru-display);
  font-size: 2.6rem;
  font-weight: 800;
  font-stretch: 84%;
  color: var(--bru-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.conzrev-builder .conzrev-summary .conzrev-stars { font-size: 1.15rem; }
.conzrev-builder .conzrev-summary-count {
  font-family: var(--bru-mono);
  font-size: .80rem;
  letter-spacing: .08em;
  color: var(--bru-steel);
}

/* -- Karten -- */
.conzrev-builder .conzrev-card {
  background: var(--bru-white);
  border: 1px solid var(--bru-fog);
  border-radius: 0;
  box-shadow: none;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.conzrev-builder .conzrev-card-head { display: flex; align-items: center; gap: 12px; }
.conzrev-builder .conzrev-avatar,
.conzrev-builder .conzrev-avatar-fallback {
  width: 38px; height: 38px;
  border-radius: 0;
  flex: 0 0 auto;
  background: var(--bru-ink);
  color: var(--bru-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bru-display);
  font-weight: 700;
  font-size: 1.05rem;
  font-stretch: 88%;
}
.conzrev-builder .conzrev-meta { display: flex; flex-direction: column; gap: 4px; }
.conzrev-builder .conzrev-author {
  font-family: var(--bru-display);
  font-weight: 700;
  font-stretch: 88%;
  font-size: 1rem;
  color: var(--bru-ink);
}
.conzrev-builder .conzrev-card .conzrev-stars { font-size: .86rem; }
.conzrev-builder .conzrev-title {
  font-family: var(--bru-display);
  font-size: 1.05rem;
  font-stretch: 88%;
  color: var(--bru-ink);
  margin: 0;
}
.conzrev-builder .conzrev-body {
  font-size: .93rem;
  line-height: 1.66;
  color: var(--bru-body);
  margin: 0;
}
.conzrev-builder .conzrev-response {
  border: 0;
  border-left: 2px solid var(--bru-gold);
  background: #ece7db;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.conzrev-builder .conzrev-response-label {
  font-family: var(--bru-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bru-gold-deep);
  font-weight: 500;
  margin: 0;
}
.conzrev-builder .conzrev-response-body {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--bru-body);
  margin: 0;
}
.conzrev-builder .conzrev-card-foot {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--bru-fog);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--bru-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--bru-steel);
}
.conzrev-builder .conzrev-source { color: var(--bru-gold-deep); }

/* -- Badge -- */
.conzrev-builder .conzrev-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--bru-fog);
  background: var(--bru-white);
  padding: 10px 14px;
  font-family: var(--bru-mono);
  font-size: .80rem;
  letter-spacing: .06em;
  color: var(--bru-steel);
}
.conzrev-builder .conzrev-badge-platform { color: var(--bru-gold-deep); font-weight: 500; }
.conzrev-builder .conzrev-badge-value { color: var(--bru-ink); font-weight: 600; }

/* -- Auf dunklem Grund -- */
.conzrev-builder.is-dark .conzrev-star-full,
.conzrev-builder.is-dark .conzrev-star-half { color: var(--bru-gold); }
.conzrev-builder.is-dark .conzrev-star-empty { color: var(--bru-graphite); }
.conzrev-builder.is-dark .conzrev-card {
  background: var(--bru-carbon);
  border-color: var(--bru-graphite);
}
.conzrev-builder.is-dark .conzrev-avatar,
.conzrev-builder.is-dark .conzrev-avatar-fallback { background: var(--bru-gold); color: var(--bru-ink); }
.conzrev-builder.is-dark .conzrev-author,
.conzrev-builder.is-dark .conzrev-title,
.conzrev-builder.is-dark .conzrev-summary-value,
.conzrev-builder.is-dark .conzrev-badge-value { color: var(--bru-white); }
.conzrev-builder.is-dark .conzrev-body,
.conzrev-builder.is-dark .conzrev-response-body { color: var(--bru-ash); }
.conzrev-builder.is-dark .conzrev-response { background: #231f1a; }
.conzrev-builder.is-dark .conzrev-response-label,
.conzrev-builder.is-dark .conzrev-source,
.conzrev-builder.is-dark .conzrev-badge-platform { color: var(--bru-gold); }
.conzrev-builder.is-dark .conzrev-card-foot { border-top-color: var(--bru-graphite); }
.conzrev-builder.is-dark .conzrev-summary,
.conzrev-builder.is-dark .conzrev-badge {
  background: transparent;
  border-color: var(--bru-graphite);
  color: var(--bru-steel);
}


/* ==========================================================================
   8b  Schmale Bildschirme

   Themify legt Builder-Zeilen als Raster mit benannten Spalten an und lässt
   sie auch auf dem Handy nebeneinander stehen. Bei zwei Spalten bleiben dann
   163 Pixel je Spalte übrig, in denen jedes zweite Wort umbricht. Hier wird
   das Raster unterhalb von 680 Pixeln auf eine Spalte gezwungen.

   Das !important ist nötig, weil Themify die Rasterangaben selbst erzeugt und
   spezifischer setzt; ohne käme die Regel nicht durch.
   ========================================================================== */

@media (max-width: 680px) {
  .themify_builder_content .row_inner,
  .themify_builder_content .module_subrow {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .themify_builder_content .module_column {
    grid-column: 1 / -1 !important;
    /* Ohne das landen alle Spalten in derselben Rasterzeile und liegen
       übereinander statt untereinander. */
    grid-row: auto !important;
  }
  /* Ohne Zwischenraum stapeln die Kacheln sonst mit doppelten Linien */
  .bru-tiles .module_column,
  .bru-steps .module_column { margin-right: 0; }

  .bru-band, .bru-band-tight, .bru-band-bottom { padding-block: clamp(40px, 9vw, 64px); }
  .bru-band-tight { padding-bottom: 20px; }
  .bru-band-bottom { padding-top: 0; }

  /* Materialkarte im Hero unter den Text statt daneben */
  .bru-hero .bru-swatch { margin-top: 28px; }
  .bru-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kopfzeile auf dem Handy: kleineres Logo, damit der Inhalt früher beginnt */
@media (max-width: 900px) {
  #site-logo a { width: 150px; }
}

/* Die Seitenbeschreibung lautet "Meister-Betrieb seit 1961" und steht damit
   genau das, was im Logo schon eingezeichnet ist. Zweimal dieselbe Aussage
   unter- einander macht den Kopf unruhig, zumal die Zeile breiter läuft als
   das Logo darüber. Sie entfällt deshalb in der Anzeige; im Quelltext und für
   Suchmaschinen bleibt sie erhalten, weil WordPress sie ohnehin im
   Seitentitel führt. */
#site-description,
.site-description { display: none; }


/* ==========================================================================
   9  Rücksichtnahme
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--bru-gold-bright);
  outline-offset: 3px;
}

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

@media print {
  body { background: #fff; color: #000; }
  #headerwrap, #footerwrap, .bru-seam { display: none; }
}