/* Self-hosted Archivo — variable font, Achsen wght 100–900 und wdth 62–125.
   Die wdth-Achse ist zwingend: 'Archivo Expanded' ist keine eigene Datei, sondern
   dieselbe Variable auf der 125%-Breiteninstanz. Beim Aktualisieren der woff2
   immer mit `family=Archivo:wdth,wght@62..125,100..900` ziehen — die reine
   wght-Variante hat keine Breitenachse und lässt alle Headlines normal breit
   rendern. */
/* latin-ext subset */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/static/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin subset */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/static/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Archivo Expanded — Display-Familie: dieselben Dateien, per Einzelwert-Deskriptor
   fest auf wdth 125% instanziiert. Alle drei Subsets, damit Umlaute und
   latin-ext-Zeichen in Headlines ebenfalls breit rendern. */
@font-face {
  font-family: 'Archivo Expanded';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 125%;
  font-display: swap;
  src: url('/static/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Expanded';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 125%;
  font-display: swap;
  src: url('/static/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   Caravan Service Westmünsterland — Redesign
   Warmes Sand/Creme · Dunkelblau · Gold · kräftige Grotesque
   ========================================================================= */

:root {
  /* Brand */
  --navy:       #16233f;
  --navy-2:     #0f1a30;
  --navy-soft:  #21345a;
  --gold:       #c9a227;   /* tweakable */
  --gold-deep:  #a07f17;
  /* Textfähiges Gold. --gold liegt auf Cream bei 2.08:1, --gold-deep bei 3.25:1 —
     beide reißen AA für normalen Text. --gold-text schafft >=4.7:1 auf allen drei
     hellen Gründen (cream 5.19 · cream-2 4.71 · paper 5.66). Regel: kleine Labels
     und Fließtext auf hellem Grund nutzen --gold-text, Dekor und Text auf Navy
     weiter --gold / --gold-deep. */
  --gold-text:  #7a5f10;

  /* Status- und Kanalfarben. Waren zuvor als Tailwind-artige Hexwerte direkt
     in den Regeln verstreut — die einzigen Farben der Seite ausserhalb der
     Palette. Hier auf Cream abgestimmt und auf Kontrast geprueft.
     --wa war als #1faf54 mit weisser Schrift bei 2.87:1 und riss AA klar;
     #127f3c schafft 5.09:1 und bleibt als WhatsApp-Gruen erkennbar. */
  --wa:       #127f3c;
  --wa-deep:  #0d6b30;
  --ok:       #2b5530;   /* 7.33:1 auf --ok-bg, 8.59:1 mit weisser Schrift */
  --ok-bg:    #e6f0e2;
  --ok-line:  #b8d2b2;
  --err:      #8a2b1e;   /* 7.23:1 auf --err-bg */
  --err-bg:   #f9e8e2;
  --err-line: #e4b8aa;

  /* Warm neutrals */
  --cream:   #f4eddf;
  --cream-2: #ece2cf;
  --sand:    #e3d6bd;
  --paper:   #fbf7ee;
  --ink:     #1b2333;
  --ink-2:   #5d5747;
  --line:    rgba(22, 35, 63, .14);
  --line-2:  rgba(22, 35, 63, .08);

  /* Type */
  --display-font: "Archivo Expanded", "Archivo", system-ui, sans-serif; /* tweakable */
  --body-font: "Archivo", system-ui, -apple-system, sans-serif;

  /* Lucide "phone" als Maske — für Elemente, die webhull rendert und in die
     sich kein <i data-lucide> einschleusen lässt (Header-Telefonnummer). */
  --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");

  /* Bruecke zu webhull. webhull rendert Seitenhuelle, Skip-Link und
     Consent-Dialog aus seinem eigenen Stylesheet (webhull.css, vor dieser
     Datei geladen) und faerbt sie ueber genau diese Variablennamen. Ohne sie
     faellt es auf sein dunkles Default-Theme zurueck — der Consent-Dialog
     stand deshalb in Anthrazit mit cyanfarbenem Button mitten auf der
     Cream-Seite. Die Namen gibt webhull vor, nicht wir.

     --bg und --fg heissen im Button-Block weiter unten absichtlich genauso.
     Dort sind sie lokal auf .btn gesetzt und ueberschreiben diese Werte
     innerhalb eines Buttons, ohne sie hier zu stoeren. */
  --bg:         var(--cream);
  --bg-card:    var(--paper);
  --fg:         var(--ink);
  --fg-muted:   var(--ink-2);
  --primary:    var(--navy);
  --border:     var(--line);
  --radius-btn: var(--radius);

  --nav-h: 77px;
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 6px;
  --shadow: 0 18px 40px -22px rgba(15, 26, 48, .45);
  --shadow-sm: 0 8px 20px -14px rgba(15, 26, 48, .4);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body-font);
  color: var(--ink);
  background: var(--cream);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display-font);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section rhythm */
section { position: relative; }
.section-pad { padding-block: clamp(64px, 9vw, 132px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--gold);
}

.lede { font-size: clamp(18px, 2.1vw, 22px); color: var(--ink-2); line-height: 1.5; }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  --bg: var(--navy);
  --fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .01em;
  padding: 15px 26px;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--bg);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
  /* Ein Button darf seinen Container nie sprengen. "Unsere Bewertungen auf
     Google Maps ansehen" war mit nowrap 453px breit und schob auf einem
     412px-Viewport das gesamte Dokument auf 474px. Sichtbar wurde das nicht am
     Button selbst — den schnitt body{overflow-x:hidden} ab — sondern an jedem
     position:fixed-Element: die Aktionsleiste spannte auf die 474px und ihr
     WhatsApp-Button stand halb ausserhalb des Bildschirms. */
  max-width: 100%;
}
@media (max-width: 560px) {
  .btn { white-space: normal; }
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn svg { width: 19px; height: 19px; }

.btn--gold { --bg: var(--gold); --fg: var(--navy); }
.btn--gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }

.btn--ghost {
  --bg: transparent; --fg: var(--navy);
  border-color: rgba(22,35,63,.30);
}
.btn--ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.btn--ghost-light {
  --bg: transparent; --fg: #fff;
  border-color: rgba(255,255,255,.45);
}
.btn--ghost-light:hover { background: #fff; color: var(--navy); border-color: #fff; }

.btn--wa { --bg: var(--wa); --fg: #fff; border-color: var(--wa); }
.btn--wa:hover { background: var(--wa-deep); border-color: var(--wa-deep); }

/* Icon-only WhatsApp-Button (Actionbar): das offizielle Logo ist fest gruen
   (kein currentColor), auf gruenem Grund wuerde es verschwinden — deshalb
   heller Grund statt --wa. Muss nach .btn--wa stehen, um dessen --bg/--fg
   per Kaskade zu ueberschreiben (beide Klassen stehen gemeinsam am Element). */
.btn--wa-icon { --bg: var(--paper); --fg: var(--wa); }
.btn--wa-icon:hover { background: var(--cream-2); }

.btn--lg { padding: 17px 30px; font-size: 17px; }

.brand-text { line-height: 1; }
.brand-text b {
  display: block;
  font-family: var(--display-font);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .01em;
  color: var(--navy);
}
.brand-text span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-top: 3px;
}

/* Mobile menu */

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; }
.hero-grid {
  display: grid;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 104px);
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 22px;
}
.hero-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.hero h1 {
  font-size: clamp(40px, 7.4vw, 78px);
  line-height: .98;
  letter-spacing: -0.02em;
  /* Die Zeilenumbrüche sind bewusst per <br> gesetzt — hyphens:auto (globale
     Regel) griff dort zusätzlich ein und trennte "Men-schen"/"le-ben" mitten
     im Wort, sobald eine Zeile knapp nicht passte. Für diese Headline ist
     das nie erwünscht. */
  hyphens: none;
}
.hero h1 .accent { color: var(--gold-deep); } /* 3.25:1 auf Cream — AA large */
.hero-sub {
  margin-top: 24px;
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 30ch;
}
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero-media { position: relative; }
.hero-badge-float {
  position: absolute;
  left: -14px; bottom: -14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
}
.hero-badge-float .stars { color: var(--gold); font-size: 15px; letter-spacing: 1px; }
.hero-badge-float b { font-family: var(--display-font); font-size: 20px; color: var(--navy); display: block; }
.hero-badge-float small { color: var(--ink-2); font-size: 12.5px; }


/* subtle background texture for hero */
.hero-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(201,162,39,.12), transparent 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(22,35,63,.06), transparent 60%);
}


/* =========================================================================
   Trust bar
   ========================================================================= */
.trust {
  background: var(--navy);
  color: rgba(255,255,255,.9);
  border-top: 3px solid var(--gold);
}
.trust .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 30px;
  padding-block: 22px;
}
.trust-item {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 14.5px; letter-spacing: .01em;
}
.trust-item svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }
.trust-item .stars { color: var(--gold); letter-spacing: 1px; }
/* Unter 880px bricht die Leiste um und die 1px-Trenner blieben als Reste an
   den Zeilenenden stehen. Dort ausblenden, der Zeilenabstand trennt genug. */
.trust-sep { width: 1px; height: 22px; background: rgba(255,255,255,.18); }
@media (max-width: 879.98px) { .trust-sep { display: none; } }

/* =========================================================================
   Werkstatt (Hauptblock)
   ========================================================================= */
.werkstatt { background: var(--cream); }
.werkstatt-head { max-width: 760px; }
/* .werkstatt-head steht sowohl auf /werkstatt (h1, eigene Seite) als auch als
   Teaser-Section auf der Startseite (h2, dort ist der Hero-h1 schon vergeben) —
   Selektor deckt beide Heading-Level ab. */
.werkstatt-head h1, .werkstatt-head h2 { font-size: clamp(32px, 4.6vw, 56px); margin-top: 18px; }
.werkstatt-head .lede { margin-top: 22px; }

.service-grid {
  margin-top: clamp(40px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Alle Kacheln gleich hoch, nicht nur die einer Zeile. Ohne dies waechst
     jede Zeile auf ihren eigenen Inhalt, und die zweite Zeile faellt gegen die
     erste sichtbar ab. Bei Flip-Kacheln faellt das doppelt auf, weil die
     Vorderseite ohnehin schon auf die laengere Rueckseite gedehnt ist. */
  grid-auto-rows: 1fr;
  gap: 16px;
}
/* Flip-Kacheln: vorne der Hauptbegriff, hinten die Leistungen. Beide Seiten
   liegen in derselben Grid-Zelle, damit die Kachel auf die hoehere von beiden
   waechst und beim Drehen nicht springt. Umgeschlagen wird per Klick oder
   Tastendruck auf den flaechigen .service-card-toggle — bewusst nicht per Hover,
   weil Hover und aufgeklappter Zustand sich sonst gegenseitig aufheben und weil
   Touchgeraete gar keinen Hover kennen. Ohne JavaScript bleibt der Text im DOM
   und damit fuer Suchmaschinen und Screenreader lesbar. */
.service-card {
  position: relative;
  perspective: 1200px;
}
.service-card-inner {
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.service-card:has(.service-card-toggle[aria-expanded="true"]) .service-card-inner {
  transform: rotateY(180deg);
}
.service-card-face {
  grid-area: 1 / 1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px 24px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}
.service-card:hover .service-card-face { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.service-card-back.service-card-face:hover { border-color: var(--gold); }
.service-card-front { justify-content: center; }
.service-card-back {
  transform: rotateY(180deg);
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  justify-content: center;
}
.service-card-back .service-card-backtitle {
  font-family: var(--display-font);
  font-size: 17px;
  color: var(--gold);
  letter-spacing: .01em;
}
.service-card-back p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.86); }
.service-card .ico {
  width: 50px; height: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy);
  color: var(--gold);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.service-card .ico svg { width: 26px; height: 26px; }
.service-card h2 { font-size: 19px; font-weight: 800; letter-spacing: 0; }
.service-card-hint {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-deep);
}
.service-card-hint::after { content: " →"; }
/* Flaechiger Umschalter ueber der Kachel. Der Rahmen bleibt sichtbar, weil der
   Fokusring sonst hinter der drehenden Flaeche verschwindet. */
.service-card-toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius);
}
.service-card-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .service-card-inner { transition: none; }
}

.werkstatt-cta {
  margin-top: clamp(36px, 5vw, 52px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 28px;
  background: var(--navy);
  border-radius: var(--radius);
  color: #fff;
}
.werkstatt-cta .txt { flex: 1 1 260px; }
.werkstatt-cta .txt b { font-family: var(--display-font); font-size: 22px; display: block; }
.werkstatt-cta .txt span { color: rgba(255,255,255,.72); font-size: 15px; }

/* =========================================================================
   Value props
   ========================================================================= */
.values { background: var(--cream-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.values-grid {
  margin-top: clamp(36px, 4vw, 52px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.value-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 30px 26px 32px;
  position: relative;
}
.value-card .vnum {
  font-family: var(--display-font);
  font-size: 13px; font-weight: 800; letter-spacing: .14em;
  color: var(--gold-text);
}
.value-card .ico {
  width: 52px; height: 52px; margin: 16px 0 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--gold); border-radius: 50%;
}
.value-card .ico svg { width: 26px; height: 26px; }
.value-card h3 { font-size: 23px; }
.value-card p { margin-top: 12px; color: var(--ink-2); font-size: 15.5px; }
.value-card .tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.value-card .tags span {
  font-size: 12.5px; font-weight: 700; color: var(--navy);
  background: var(--sand); padding: 5px 10px; border-radius: 100px;
}

/* =========================================================================
   Über uns
   ========================================================================= */
.about { background: var(--cream); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 5vw, 64px);
  align-items: center;
}
.about-media { position: relative; }
.about-text h1 { font-size: clamp(30px, 4.4vw, 50px); margin-top: 16px; }
.about-text p { margin-top: 18px; color: var(--ink-2); font-size: 16.5px; }
.about-text p .hl { color: var(--navy); font-weight: 700; }
.about-stats { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 30px; }
.about-stats .stat b { font-family: var(--display-font); font-size: 34px; color: var(--gold-deep); display: block; line-height: 1; }
.about-stats .stat span { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }

/* =========================================================================
   Bewertungen
   ========================================================================= */
.reviews { background: var(--navy); color: #fff; }
.reviews-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.reviews-head h2 { color: #fff; font-size: clamp(30px, 4.2vw, 50px); }
.reviews-head .eyebrow { color: var(--gold); }
.reviews-head .eyebrow::before { background: var(--gold); }
.reviews-score { text-align: right; }
.reviews-score .num { font-family: var(--display-font); font-size: 42px; color: var(--gold); line-height: 1; }
.reviews-score .stars { color: var(--gold); font-size: 18px; letter-spacing: 2px; }
.reviews-score small { display: block; color: rgba(255,255,255,.65); font-size: 13px; margin-top: 4px; }
.reviews-grid {
  margin-top: clamp(34px, 4vw, 50px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.review-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.review-card .stars { color: var(--gold); letter-spacing: 2px; font-size: 16px; }
.review-card p { margin-top: 14px; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.92); }
.review-card .who { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.review-card .who .av {
  width: 42px; height: 42px; border-radius: 50%; background: var(--gold); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--display-font); font-weight: 800;
}
.review-card .who b { font-size: 15px; }
.review-card .who small { display: block; color: rgba(255,255,255,.55); font-size: 12.5px; }
.reviews-foot { margin-top: 30px; }

/* =========================================================================
   Kontakt
   ========================================================================= */
.contact { background: var(--cream); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
}
.contact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
}
.contact-card h1 { font-size: clamp(28px, 4vw, 46px); margin-top: 14px; }
.contact-mail-box {
  margin-top: 26px;
  background: var(--navy);
  border-radius: var(--radius);
  padding: 24px;
  color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.contact-mail-box .ico { width: 48px; height: 48px; border-radius: 50%; background:var(--paper); color: var(--navy); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-mail-box .ico svg { width: 24px; height: 24px; }
.contact-mail-box .t { flex: 1 1 180px; }
.contact-mail-box .t b { font-family: var(--display-font); font-size: 19px; display: block; }
.contact-mail-box .t span { color: rgba(255,255,255,.72); font-size: 14px; }

/* Terminhinweis direkt unter dem Hauptkanal: ohne Anruf kein Termin. */
.contact-note {
  margin-top: 14px;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--gold);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: rgba(201,162,39,.08);
  font-size: 14.5px;
  line-height: 1.5;
}
.contact-note svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold-deep); margin-top: 1px; }
.contact-note b { color: var(--navy); }

.contact-list { margin-top: 26px; display: flex; flex-direction: column; gap: 2px; }
.contact-row { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.contact-row:last-child { border-bottom: none; }
.contact-row .ico {
  width: 42px; height: 42px; border-radius: var(--radius); background: var(--sand); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-row .ico svg { width: 21px; height: 21px; }
.contact-row .c b { display: block; font-family: var(--display-font); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.contact-row .c .big { font-size: 19px; font-weight: 700; color: var(--navy); margin-top: 3px; line-height: 1.3; }
.contact-row .c .big.link:hover { color: var(--gold-deep); }
.contact-row .c .muted { font-size: 14.5px; color: var(--ink-2); }

.hours-table { margin-top: 6px; width: 100%; border-collapse: collapse; }
.hours-table td { padding: 7px 0; font-size: 15px; border-bottom: 1px dashed var(--line); }
.hours-table td:last-child { text-align: right; font-weight: 700; color: var(--navy); }
.hours-table tr:last-child td { border-bottom: none; }
.hours-table .closed td:last-child { color: var(--ink-2); font-weight: 600; }

.map-ph { min-height: 280px; height: 100%; }
.map-ph .map-link { display: block; position: relative; height: 100%; min-height: 280px; border-radius: var(--radius); overflow: hidden; text-decoration: none; }
.map-ph .map-link img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block; }
.map-static {
  width: 100%; height: 100%; min-height: 280px;
  background: var(--cream-2);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.map-dots { position: absolute; inset: 0; }
.map-pin-center {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.map-pin-center i { color: var(--gold); width: 36px; height: 36px; }
.map-pin-center span { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.5; }
.map-ph .map-overlay {
  position: absolute; bottom: 16px; right: 16px;
  background: var(--navy); color: #fff;
  padding: 8px 14px; border-radius: 6px;
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  transition: background .15s ease;
}
.map-ph .map-link:hover .map-overlay { background: var(--navy-soft); }
.map-ph .map-overlay i { width: 14px; height: 14px; }
   Footer
   ========================================================================= */
.footer-about { margin-top: 18px; font-size: 14.5px; line-height: 1.6; max-width: 38ch; }
.footer-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 13px; color: rgba(255,255,255,.5);
}
.footer-bottom a:hover { color: var(--gold); }

/* Floating WhatsApp */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--wa);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -8px rgba(31,175,84,.7);
  transition: transform .18s ease;
}
.wa-fab:hover { transform: scale(1.06); }

/* Offizielles WhatsApp-Logo: fest gruenes PNG statt currentColor-SVG,
   deshalb per img statt .ico-svg eingebunden (Groesse je Kontext per
   width/height-Attribut am <img>, siehe .wa-fab / .btn--wa-icon / .contact-mail-box .ico). */
.wa-icon-img { display: block; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (min-width: 600px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .values-grid { grid-template-columns: repeat(3, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
  .about-grid { grid-template-columns: .95fr 1.05fr; }
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1.15fr .85fr; }
}
@media (min-width: 1024px) {
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Reveal on scroll */
/* Ohne JS bleibt alles sichtbar. home.js setzt .js-reveal synchron auf <html>,
   bevor gezeichnet wird — erst dann greift die Einblendung. */
.reveal { opacity: 1; }
.js-reveal .reveal { opacity: 0; transition: opacity .6s ease; }
.js-reveal .reveal.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .reveal, .js-reveal .reveal { opacity: 1 !important; transition: none !important; } }

/* Global focus ring */
:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   Header & Footer — von webhull gerendert
   Diese Klassen kommen aus der webhull-Binary, nicht aus content/. Verifiziert
   gegen den echten Render von webhull 1.4.0:

     <nav class="nav">                  <- der komplette Header, sticky
       <div class="nav-container">      <- macht das Flex-Layout
         <a class="logo"><picture><img class="logo-img"></picture>
            <span class="logo-text">Caravan Service Westmünsterland</span></a>
         <button class="mobile-menu-toggle">
         <ul class="nav-links"><li><a>…   <- aus pages.yaml navigation.header,
              seit dem Multipage-Umbau echte Routen statt Anchor-Links
              plus <li><button class="theme-toggle">  <- unten ausgeblendet
     <footer class="footer"><div class="container">
       <div class="footer-content"><div class="footer-section">…
       <div class="footer-bottom">

   Ein zweiter, handgeschriebener Satz Header-/Footer-Klassen (.site-header,
   .header-inner, .brand, .burger, .header-cta, .footer-grid, .footer-col …)
   stand hier lange parallel daneben und wurde entfernt: webhull gibt keine
   davon jemals aus. Wichtig war das nicht nur der Sauberkeit wegen — die alte
   Regel `.nav { display: none }` war für die Linkliste des Referenzdesigns
   gedacht und traf bei webhull den GESAMTEN Header, der dadurch unter 880px
   unsichtbar war (und mit ihm der Burger, also das ganze Mobile-Menü).
   ========================================================================== */

/* Header */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251,247,238,.88);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-2);
  padding: 0;
}
.nav-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 76px;
}

/* Logo */
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; }
.logo-img { height: 46px; width: auto; display: block; }
/* webhull gibt den Markennamen als einen Textknoten in .logo-text aus — die
   zweizeilige Marke des Designs (.brand-text b + span) lässt sich daraus nicht
   bauen. Stattdessen Display-Schnitt mit Umbruch nach „Caravan Service". */
.logo-text {
  display: block;
  font-family: var(--display-font);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--navy);
  max-width: 17ch;
  text-wrap: balance;
}
.logo-text b, .logo-text strong {
  display: block; font-family: var(--display-font); font-weight: 800;
  font-size: 17px; letter-spacing: .01em; color: var(--navy);
}
.logo-text span {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-text); margin-top: 3px;
}

/* Nav links (webhull renders as <ul class="nav-links"><li><a>…) */
.nav-links {
  display: none;
  list-style: none;
  align-items: center; gap: clamp(18px, 1.8vw, 28px); margin: 0; padding: 0;
}
.nav-links li { white-space: nowrap; }
.nav-links a {
  font-weight: 600; font-size: 15px; color: var(--ink);
  position: relative; padding-block: 6px;
  transition: color .15s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--gold);
  transition: width .2s ease;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a:hover::after { width: 100%; }

/* Header-CTA aus dem Design (.header-phone + .btn--gold). webhull hat keinen
   CTA-Slot, deshalb stehen beide als Nav-Einträge in pages.yaml und werden hier
   über ihre href erkannt. Seit dem Multipage-Umbau zeigt der CTA auf
   /kontakt#termin (Sprungmarke der Formular-Section auf der Kontaktseite) statt
   auf die frühere Homepage-Anchor /#termin. */
.nav-links a[href^="tel:"]::after,
.nav-links a[href="/kontakt#termin"]::after { content: none; }

.nav-links a[href^="tel:"] {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; color: var(--navy);
}
.nav-links a[href^="tel:"]::before {
  content: "";
  width: 17px; height: 17px; flex-shrink: 0;
  background-color: var(--gold-deep);
  -webkit-mask: var(--icon-phone) center / contain no-repeat;
  mask: var(--icon-phone) center / contain no-repeat;
}

.nav-links a[href="/kontakt#termin"] {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body-font); font-weight: 700; font-size: 15px;
  letter-spacing: .01em; white-space: nowrap;
  padding: 13px 22px;
  border-radius: var(--radius);
  background: var(--gold); color: var(--navy);
  border: 2px solid var(--gold);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.nav-links a[href="/kontakt#termin"]:hover {
  background: var(--gold-deep); border-color: var(--gold-deep); color: #fff;
  transform: translateY(-2px); box-shadow: var(--shadow-sm);
}

/* Hide dark-mode toggle — no dark mode.
   Das <li> muss mit weg, sonst bleibt eine Lücke am Ende der Nav-Leiste. */
.theme-toggle { display: none !important; }
.nav-links li:has(> .theme-toggle) { display: none; }

/* Burger button */
/* webhull rendert den Burger als DREI LEERE <span>, nicht als Icon — ohne
   eigene Regeln fuer die Spans ist der Button ein leerer weisser Kasten, und
   genau so stand er live. Gegen webhull 1.8.1 geprueft:
   <button class="mobile-menu-toggle"><span></span> <span></span> <span></span></button> */
.mobile-menu-toggle {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  width: 46px; height: 46px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer; color: var(--navy);
  transition: background .15s ease, border-color .15s ease;
}
.mobile-menu-toggle:hover { background: var(--cream-2); border-color: var(--sand); }
.mobile-menu-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
/* Aufgeklappt wird aus dem Burger ein Kreuz. Die Mitte verschwindet, die
   aeusseren Balken wandern in die Mitte und drehen sich. */
.mobile-menu-toggle.active span:nth-child(1),
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2),
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3),
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiles Menue: webhulls eigenes. menu.js schaltet .nav-links.active und
   .mobile-menu-toggle.active und haelt aria-expanded nach. Das eigene Overlay
   (#mobileMenu) lag frueher daneben, wurde von einem zweiten Listener
   geschaltet und passte nicht zur Breite des Headers — ersatzlos entfernt. */
.nav-container { position: relative; }
/* Vollflaechig unter dem Header. Der Header bleibt stehen und liegt mit
   z-index 60 darueber, damit der Burger zum Schliessen erreichbar bleibt.
   --nav-h haelt die Hoehe an einer Stelle; die Leiste ist 77px hoch. */
.nav-links.active {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  position: fixed;
  inset: var(--nav-h) 0 0;
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background: var(--navy);
  background-image: linear-gradient(160deg, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-2) 100%);
  overflow-y: auto;
  z-index: 55;
}
.nav-links.active li { white-space: normal; }
.nav-links.active a {
  display: flex;
  padding: 14px 0;
  font-family: var(--display-font);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
}
.nav-links.active a:hover { color: var(--gold); }
/* Der Unterstrich-Effekt der Desktop-Leiste ergibt im Panel keinen Sinn. */
.nav-links.active a::after { content: none; }
/* Telefon und Termin setzen sich vom Linkblock ab und rutschen ans Ende. */
.nav-links.active li:has(> a[href^="tel:"]) { margin-top: auto; padding-top: 24px; }
.nav-links.active a[href^="tel:"] {
  font-size: 20px;
  color: var(--gold);
}
.nav-links.active a[href^="tel:"]::before { background: var(--gold); }
.nav-links.active a[href="/kontakt#termin"] {
  justify-content: center;
  margin-top: 14px;
  font-size: 17px;
  padding: 16px 22px;
  color: var(--navy);
}
/* Hintergrund nicht mitscrollen lassen, solange das Menue offen ist.
   Ohne JavaScript — webhulls menu.js setzt keine Klasse am <body>. */
body:has(.nav-links.active) { overflow: hidden; }

/* WICHTIG: backdrop-filter auf .nav macht den Header zum Bezugsrahmen fuer
   position:fixed-Nachfahren. Das Panel haengt als .nav-links darin und bezog
   sein inset deshalb auf die 76px hohe Leiste statt auf den Viewport — es war
   56px hoch statt bildschirmfuellend. Solange das Menue offen ist, faellt der
   Filter weg; der Header wird dafuer deckend statt halbtransparent. */
body:has(.nav-links.active) .nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--paper);
}
/* Aktionsleiste und WhatsApp-Knopf liegen sonst ueber dem offenen Menue und
   verdecken den Termin-Button. Beide wiederholen ohnehin nur, was im Menue
   schon steht. */
body:has(.nav-links.active) .action-bar,
body:has(.nav-links.active) .wa-fab { display: none; }

/* Breakpoints for nav */
@media (min-width: 880px) {
  .nav-links,
  .nav-links.active { display: flex; }
  .nav-links.active {
    position: static; inset: auto; flex-direction: row; gap: clamp(18px, 1.8vw, 28px);
    padding: 0; background: none; background-image: none; overflow: visible;
  }
  .nav-links.active a { font-family: var(--body-font); font-size: 15px; font-weight: 600; color: var(--ink); padding-block: 6px; }
  .nav-links.active li:has(> a[href^="tel:"]) { margin-top: 0; padding-top: 0; }
  body:has(.nav-links.active) { overflow: visible; }
  .mobile-menu-toggle { display: none !important; }
  /* Zwischen 880px und 1240px reicht die Breite nur für die fünf Textlinks —
     Telefon und Gold-Button würden die Leiste sprengen. */
  .nav-links li:has(> a[href^="tel:"]),
  .nav-links li:has(> a[href="/kontakt#termin"]) { display: none; }
}
@media (min-width: 1240px) {
  .nav-links li:has(> a[href^="tel:"]),
  .nav-links li:has(> a[href="/kontakt#termin"]) { display: block; }
}

/* Footer — webhull rendert .footer > .container > .footer-content mit einer
   .footer-section je Gruppe aus navigation.footer (erste Section = Logo +
   footerTagline). Mapping auf das dreispaltige Footer-Layout des Designs. */
.footer {
  background: var(--navy-2);
  color: rgba(255,255,255,.7);
  padding-block: clamp(48px,6vw,76px) 30px;
  border-top: none;
}
.footer a { color: rgba(255,255,255,.7); }
.footer a:hover { color: var(--gold); }

.footer .container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.footer-content { display: grid; grid-template-columns: 1fr; gap: 36px; }

/* Erste Spalte: Logo + Tagline (entspricht .footer-brand / .footer-about).
   webhull rendert im Footer dasselbe <img> wie im Header (ein einziger
   globaler site.logoPath in pages.yaml) — für ein abweichendes Footer-Logo
   gibt es keinen zweiten Slot. Deshalb bleibt das echte <img alt="..."> für
   Screenreader erhalten (opacity:0, nicht display:none — bleibt so im
   A11y-Baum), wird aber visuell durch das Wortmarken-Logo per
   Hintergrundbild ersetzt. */
.footer-section .logo {
  position: relative;
  display: block;
  width: 210px; height: 52px;
}
.footer-section .logo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
}
.footer-section .logo::after {
  content: "";
  position: absolute; inset: 0;
  background: url('/static/img/logo-footer.png?v=c4d8f385') no-repeat left center / contain;
}
.footer-section > p { margin-top: 18px; font-size: 14.5px; line-height: 1.6; max-width: 38ch; }

/* Link-Spalten (entspricht .footer-col) */
.footer-section h3 {
  color: #fff;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer-section ul {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.footer-section ul a { font-size: 14.5px; }

.footer .footer-bottom p { font-size: 13px; color: rgba(255,255,255,.5); }

@media (min-width: 600px) {
  .footer-content { grid-template-columns: 1.4fr 1fr 1fr auto; }
}

/* Legal pages */
.legal-page { max-width: 760px; margin-inline: auto; padding: clamp(48px,6vw,80px) var(--gutter) clamp(80px,10vw,140px); }
.legal-page h1 { font-size: clamp(28px,3.5vw,42px); margin-bottom: 32px; }
.legal-page h2 { font-size: 22px; margin-top: 36px; margin-bottom: 12px; }
.legal-page p  { margin-bottom: 16px; color: var(--ink-2); line-height: 1.7; }
.legal-page a  { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.legal-page a:hover { color: var(--gold-deep); }

/* Contact form (webhull /api/contact) */
#contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-field-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--navy); }
.form-input, .form-textarea {
  font-family: var(--body-font); font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 13px 16px; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* Kein outline:none mehr — der globale :focus-visible-Ring bleibt erhalten und
   wird hier nur ergänzt. Alpha von .15 auf .35 angehoben, damit der Ring auf
   --paper überhaupt sichtbar ist. */
.form-input:focus-visible, .form-textarea:focus-visible, select.form-input:focus-visible {
  border-color: var(--gold-text); box-shadow: 0 0 0 3px rgba(122, 95, 16, .35);
}
.form-textarea { min-height: 130px; resize: vertical; }
.form-honeypot { display: none !important; }
#contact-submit {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body-font); font-weight: 700; font-size: 17px;
  padding: 17px 30px; border-radius: var(--radius);
  background: var(--gold); color: var(--navy); border: 2px solid var(--gold);
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
#contact-submit:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
#contact-submit svg { width: 19px; height: 19px; }
.form-message { padding: 14px 18px; border-radius: var(--radius); font-size: 15px; font-weight: 600; }
.form-success { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); }
.form-error   { background: var(--err-bg); color: var(--err); border: 1px solid var(--err-line); }

/* Contact form section wrapper */
.contact-form-section { background: var(--cream-2); border-top: 1px solid var(--line-2); }
.contact-form-section .wrap { max-width: 720px; }

/* Map embed */

/* ==========================================================================
   Icon-Sprite
   21 Lucide-Icons liegen inline in home.html statt als 402-KB-Bundle.
   Rendert ohne JavaScript.
   ========================================================================== */
.icon-sprite { display: none; }
.ico-svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Nur für Screenreader */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Ankersprünge landeten unter dem 76px-Sticky-Header */
[id] { scroll-margin-top: 92px; }

/* Lange deutsche Komposita ("Dachschäden & Wassereinbrüche") brechen sonst
   aus dem Raster und werden von body{overflow-x:hidden} stumm abgeschnitten. */
h1, h2, h3, .lede, .service-card p, .value-card p, .offer-list li { hyphens: auto; }

/* ==========================================================================
   Touch-Targets auf 44px
   ========================================================================== */
.nav a, .nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
.contact-row .c .big.link { display: inline-flex; align-items: center; min-height: 44px; }

/* ==========================================================================
   Sticky Aktionsleiste (nur mobil)
   Die Telefonnummer lag bisher zwei Taps tief im Burger-Menü, während
   WhatsApp permanent sichtbar war. Hier ist Anrufen die primäre Aktion.
   ========================================================================== */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 247, 238, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -22px rgba(15, 26, 48, .5);
}
.action-bar .btn { flex: 1; justify-content: center; padding-inline: 14px; }
.action-bar .btn--wa { flex: 0 0 auto; }
.action-bar-status {
  position: absolute; top: -25px; left: 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--navy); color: #fff;
}
.action-bar-status[data-open="true"]  { background: var(--ok); }
.action-bar-status[data-open="false"] { background: var(--navy); }
.action-bar-status:empty { display: none; }

@media (min-width: 880px) {
  .action-bar { display: none; }
}
@media (max-width: 879.98px) {
  /* Platz für die Leiste, damit sie den Footer nicht überdeckt */
  body { padding-bottom: 78px; }
  /* Der grüne FAB ist redundant, sobald die Leiste WhatsApp trägt */
  .wa-fab { display: none; }
}

/* ==========================================================================
   Hero: Vertrauens-Panel
   Die Seite kommt auf Kundenwunsch ohne Fotos aus. Das Panel ist deshalb kein
   Platzhalter, sondern der Inhalt dieser Stelle: die Zertifizierungen tragen
   sie. Kein Foto-Slot, der noch zu fuellen waere.
   ========================================================================== */
.trust-panel {
  min-height: 320px;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: clamp(26px, 4vw, 44px);
  background: var(--navy);
  background-image: linear-gradient(160deg, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-2) 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.trust-panel-label {
  font-family: var(--display-font);
  font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.trust-panel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.trust-panel-list li {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--display-font);
  font-size: clamp(17px, 2.2vw, 22px); font-weight: 700;
  color: #fff;
}
.trust-panel-list .ico-svg { width: 22px; height: 22px; color: var(--gold); }
.trust-panel-foot {
  margin: 0; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 14.5px; line-height: 1.55;
  color: rgba(255, 255, 255, .78);
}

/* ==========================================================================
   Über uns: Zitat-Panel
   Wie im Hero: kein Ersatz fuer ein fehlendes Foto, sondern die Gestaltung
   dieser Stelle.
   ========================================================================== */
.about-quote {
  margin: 0;
  padding: clamp(28px, 4vw, 46px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.about-quote blockquote {
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(22px, 3vw, 34px); font-weight: 700; line-height: 1.22;
  letter-spacing: -.02em; color: var(--ink);
  text-wrap: balance;
}
.about-quote blockquote::before { content: "„"; color: var(--gold-text); }
.about-quote blockquote::after  { content: "“"; color: var(--gold-text); }
.about-quote figcaption {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line-2);
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text);
}

/* ==========================================================================
   Vermietung / Verkauf
   ========================================================================== */
.offer { background: var(--cream); }
.offer--alt { background: var(--cream-2); }
.offer-grid { display: grid; gap: clamp(30px, 5vw, 60px); align-items: start; }
.offer h1 { margin-top: 18px; }
.offer-lede { font-size: clamp(17px, 2vw, 20px); color: var(--ink-2); line-height: 1.6; margin-top: 18px; }
.offer-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.offer-list li {
  display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start;
  font-size: 16px; line-height: 1.55; color: var(--ink-2);
}
.offer-list li b { color: var(--ink); }
.offer-list .ico-svg { width: 22px; height: 22px; color: var(--gold-text); margin-top: 2px; }
.offer-cta {
  padding: clamp(26px, 4vw, 40px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.offer-cta h2 {
  margin: 0; font-family: var(--display-font);
  font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: -.02em;
}
.offer-cta p { margin: 14px 0 26px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.offer-cta .btn { width: 100%; justify-content: center; }
.offer-tel {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 18px; min-height: 44px;
  font-size: 15px; font-weight: 700;
}
.offer-tel .ico-svg { width: 17px; height: 17px; }

@media (min-width: 880px) {
  .offer-grid { grid-template-columns: 1.35fr 1fr; gap: clamp(40px, 5vw, 80px); }
  .offer-grid--rev > .offer-text { order: 2; }
  .offer-grid--rev > .offer-cta  { order: 1; }
}

/* ==========================================================================
   Formular: Hilfsklassen, Feldfehler, Zustände
   ========================================================================== */
.form-intro { max-width: 680px; }
.form-intro h2 { margin-top: 16px; }
.form-intro .lede { margin-top: 18px; }
.werkstatt-head--narrow { max-width: 680px; }
.h2--lg { font-size: clamp(30px, 4.4vw, 50px); margin-top: 18px; }
.c--wide { flex: 1; }
.brand-strong { color: #fff; }

/* =========================================================================
   Multipage-Umbau: neue Layout-Utilities
   ========================================================================= */

/* Startseite: .value-card wird zum Teaser-Link auf /werkstatt, /vermietung,
   /verkauf. Als direktes Kind von .values-grid (display:grid) wird das <a>
   automatisch blockifiziert (CSS Display Level 3); display:block hier ist
   defensiv, kein Verlass auf das Spec-Detail. */
a.value-card {
  display: block;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
a.value-card:hover, a.value-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--gold);
}
.value-card .more {
  display: inline-block;
  margin-top: 16px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--gold-text);
}

/* Vermietung: Fahrzeugbestand, server-seitig vom rentandtravel-Plugin
   gerendert und per "<!-- plugin: fleet -->" injiziert (siehe
   site/plugins/rentandtravel/fleet.tmpl.html für die Markup-Struktur).
   Jede Karte ist ein <button>, der die Detail-Dialog (Galerie + alle
   Daten) öffnet — komplett aus bereits geladenen Daten, kein Nachladen. */
.fleet-grid {
  margin-top: 40px;
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .fleet-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
.fleet-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.fleet-card:hover, .fleet-card:has(.fleet-card-link:focus-visible) { box-shadow: var(--shadow); }
.fleet-card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease;
}
.fleet-card-link:hover { transform: translateY(-3px); }
.fleet-card-link:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -2px; }
.fleet-card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--cream-2); }
.fleet-card-body { padding: 20px clamp(18px, 2.5vw, 24px) 24px; display: flex; flex-direction: column; flex: 1; }
.fleet-card-labels { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.fleet-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.fleet-card-title { display: block; font-family: var(--display-font); font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.fleet-card-group { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }
.fleet-card-specs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.fleet-card-specs > * { display: block; }
.fleet-card-specs > *::before { content: "· "; color: var(--gold-text); font-weight: 700; }
.fleet-card-features { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px; color: var(--ink-2); }
.fleet-card-features li { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; }
.fleet-card-intro { display: block; margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.fleet-card-price { display: block; margin-top: auto; padding-top: 16px; font-family: var(--display-font); font-size: 17px; font-weight: 700; color: var(--gold-deep); }
.fleet-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--gold-text);
}
.fleet-card-cta::after { content: "→"; transition: transform .15s ease; }
.fleet-card-link:hover .fleet-card-cta::after, .fleet-card-link:focus-visible .fleet-card-cta::after { transform: translateX(3px); }
.fleet-empty {
  grid-column: 1 / -1;
  padding: clamp(28px, 4vw, 40px) 24px;
  border: 2px dashed var(--sand);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-2);
  text-align: center;
  font-size: 15px;
}

/* Vermietung: Detail-Dialog (Galerie + alle Daten), natives <dialog>. */
.fleet-dialog {
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  width: min(920px, 94vw);
  max-width: 94vw;
  max-height: 90vh;
  background: transparent;
  overscroll-behavior: contain;
}
.fleet-dialog::backdrop { background: rgba(15, 26, 48, .72); }
.fleet-dialog-inner {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: 90vh;
  overflow-y: auto;
}
.fleet-dialog-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .92); color: var(--navy);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.fleet-dialog-gallery { background: var(--cream-2); }
.fleet-dialog-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.fleet-dialog-thumbs { display: flex; gap: 8px; padding: 12px; overflow-x: auto; }
.fleet-dialog-thumbs[hidden] { display: none; }
.fleet-dialog-thumb {
  flex: 0 0 56px; width: 56px; height: 44px; padding: 0; margin: 0;
  border: 2px solid transparent; border-radius: 4px; overflow: hidden; cursor: pointer; background: none;
}
.fleet-dialog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fleet-dialog-thumb.is-active { border-color: var(--gold); }
/* Icon-Sprite selbst nie rendern — nur die <use>-Referenzen. */
.fleet-icon-sprite { display: none; }

/* Linke Spalte: Bild, Identität, Preis, CTA. */
.fleet-dialog-main { padding: 0 0 clamp(18px, 2.5vw, 26px); display: flex; flex-direction: column; }
.fleet-dialog-main > *:not(.fleet-dialog-gallery) { margin-inline: clamp(18px, 2.5vw, 26px); }
.fleet-dialog-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-top: 18px;
}
.fleet-dialog-head h3 {
  font-family: var(--display-font); font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 700; letter-spacing: -.015em; margin: 0; color: var(--ink); line-height: 1.15;
}
.fleet-dialog-group { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.fleet-dialog-head .fleet-card-labels { margin: 2px 0 0; flex: 0 0 auto; }
.fleet-dialog-price {
  margin: 16px 0 0; font-family: var(--display-font);
  font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; color: var(--gold-deep);
}
.fleet-dialog-main .fleet-card-intro { margin-top: 12px; }
.fleet-dialog-main .fleet-card-intro[hidden] { display: none; }

/* Rechte Spalte: Fakten, scanbarstes zuerst. */
.fleet-dialog-side { padding: clamp(18px, 2.5vw, 26px); }

/* Stat-Streifen: Icon + Wert + Label. Bewusst nicht icon-only — ein Icon
   allein hat keinen zugänglichen Namen und muss erst dekodiert werden.
   Der Wert bleibt das visuell dominante Element, damit der Streifen
   trotzdem auf einen Blick lesbar ist. */
.fleet-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px;
}
.fleet-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.fleet-stat-icon {
  flex: 0 0 auto; width: 22px; height: 22px;
  fill: none; stroke: var(--gold-text); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.fleet-stat-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.fleet-stat-value { font-family: var(--display-font); font-size: 17px; font-weight: 700; color: var(--ink); }
.fleet-stat-label { font-size: 11.5px; color: var(--ink-2); }
.fleet-dialog-subhead {
  margin: 18px 0 8px;
  font-family: var(--display-font);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-2);
}
.fleet-dialog-subhead[hidden] { display: none; }
.fleet-dialog-tech {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 0;
  font-size: 14px;
}
.fleet-dialog-tech dt { color: var(--ink-2); }
.fleet-dialog-tech dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }

/* Verfügbarkeits-Mini-Kalender im Detail-Dialog. Rein informativ — die
   Buchung mit Datumsauswahl bleibt bei rent and travel ("Jetzt buchen"). */
.fleet-cal[hidden] { display: none; }
.fleet-cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.fleet-cal-month { font-family: var(--display-font); font-weight: 700; font-size: 15px; color: var(--ink); }
/* Kein Kreis mehr, nur der Pfeil — aber die Trefferfläche bleibt 44x44
   (WCAG 2.5.8 Target Size). Der Pfeil selbst ist deutlich größer als
   vorher, ohne dass der Button optisch aufträgt. */
.fleet-cal-nav-btn {
  width: 44px; height: 44px; margin: -8px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--ink-2); cursor: pointer;
}
.fleet-cal-nav-btn svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 2.25;
  stroke-linecap: round; stroke-linejoin: round;
}
.fleet-cal-nav-btn:hover:not(:disabled) { color: var(--gold-deep); }
.fleet-cal-nav-btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -6px; border-radius: 6px; }
.fleet-cal-nav-btn:disabled { opacity: .25; cursor: default; }
.fleet-cal-weekdays, .fleet-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center;
}
.fleet-cal-weekdays { margin-bottom: 4px; font-size: 11px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; }
.fleet-cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; font-size: 12.5px; color: var(--ink);
}
.fleet-cal-day--blank { visibility: hidden; }
.fleet-cal-day--available { background: #dcecdd; color: #1d5c2c; }
.fleet-cal-day--no-pickup, .fleet-cal-day--no-return {
  background: repeating-linear-gradient(45deg, #f4e6c8, #f4e6c8 4px, #ece0bd 4px, #ece0bd 8px);
  color: var(--ink-2);
}
.fleet-cal-day--no-pickup.fleet-cal-day--no-return { background: #e3e3e3; color: var(--ink-2); }
.fleet-cal-day--unavailable { background: transparent; color: var(--ink-2); opacity: .4; text-decoration: line-through; }
.fleet-cal-legend {
  display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; font-size: 11.5px; color: var(--ink-2);
}
.fleet-cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.fleet-cal-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.fleet-cal-swatch--available { background: #dcecdd; }
.fleet-cal-swatch--no-pickup {
  background: repeating-linear-gradient(45deg, #f4e6c8, #f4e6c8 3px, #ece0bd 3px, #ece0bd 6px);
}
.fleet-cal-swatch--no-return { background: #e3e3e3; }
.fleet-cal-swatch--unavailable { background: transparent; border: 1px solid var(--line); }

/* align-self statt width:100% — mit width:100% plus margin-inline (siehe
   .fleet-dialog-main oben) würde der Button seitlich überlaufen und die
   ganze Spalte horizontal scrollbar machen. */
.fleet-dialog-main .btn { align-self: stretch; justify-content: center; margin-top: 18px; }
.fleet-dialog-main, .fleet-dialog-side { overflow-x: hidden; }

@media (min-width: 760px) {
  /* Zweispaltig: links Bild + Identität + Preis + CTA, rechts die Fakten.
     Jede Spalte scrollt für sich, .fleet-dialog-inner selbst nicht — sonst
     würde CSS Grids Standard-Stretch die Bildspalte auf die Höhe der (viel
     längeren) Faktenspalte ziehen und das Foto extrem beschneiden. */
  .fleet-dialog-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
    max-height: 90vh;
    overflow: hidden;
  }
  .fleet-dialog-main,
  .fleet-dialog-side { max-height: 90vh; overflow-y: auto; }
  .fleet-dialog-side { border-left: 1px solid var(--line); }
}
@media (max-width: 599px) {
  .fleet-dialog { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .fleet-dialog-inner { max-height: 100vh; border-radius: 0; }
}

.form-label .req { color: var(--gold-text); }
.form-label .opt { font-weight: 500; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.form-row { display: grid; gap: 0; }
@media (min-width: 600px) {
  .form-row { grid-template-columns: 1fr 1fr; gap: 0 20px; }
}

.field-error {
  display: block; min-height: 0;
  margin-top: 7px; font-size: 13.5px; font-weight: 600; line-height: 1.4;
  color: var(--err);
}
.field-error:empty { display: none; }
.form-input[aria-invalid="true"], .form-textarea[aria-invalid="true"] {
  border-color: var(--err);
}
.form-input[aria-invalid="true"]:focus, .form-textarea[aria-invalid="true"]:focus {
  border-color: var(--err); box-shadow: 0 0 0 3px rgba(138, 43, 30, .28);
}

.form-privacy {
  margin: 6px 0 26px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
}
.form-privacy .req-note { display: block; margin-top: 6px; }

#contact-submit[disabled] {
  opacity: .6; cursor: progress; transform: none; box-shadow: none;
}

select.form-input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.form-input--date { min-height: 50px; }

/* =========================================================================
   webhull-eigene Komponenten
   Alles hier Gestylte rendert webhull, nicht diese Seite. Die Farben kommen
   ueber die Bruecken-Variablen in :root; was Variablen nicht loesen koennen,
   steht hier.
   ========================================================================= */

/* Der Skip-Link ist das erste fokussierbare Element und muss bis zum Fokus
   unsichtbar bleiben. Die Regel steht auch in webhull.css — hier noch einmal,
   weil ein fehlendes oder veraltetes webhull.css ihn sonst sichtbar ueber den
   Header legt. Genau das war live zu sehen, als nur diese Datei frisch geladen
   wurde und webhull.css aus einem alten Cache kam. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--paper);
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 16px;
  top: 16px;
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Formathinweis unter einem Feld. Steht vor der Eingabe da, waehrend die
   .field-error-Zeile erst nach einer falschen Eingabe fuellt. */
.form-hint { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-2); }

.consent-title { font-family: var(--display-font); font-size: 22px; }

/* webhull hellt die Sekundaerbuttons beim Hover mit Weiss auf — auf dem
   hellen Dialog bleibt das unsichtbar. Auf Cream abgedunkelt. */
.consent-btn-reject:hover,
.consent-btn-save:hover { background: var(--cream-2); border-color: var(--navy); }

.consent-btn { font-family: var(--body-font); }
.consent-dialog { box-shadow: var(--shadow); }

/* =========================================================================
   DCHV-Siegel
   Die Vorlagen sind Druckschilder auf weissem Grund. Statt das Weiss
   freizustellen — was an den weichen Kanten Raender hinterlaesst — sitzt
   jedes Siegel in einer weissen Kachel. Das funktioniert auf Cream wie auf
   Navy und liest sich als das, was es ist: ein Siegel.
   ========================================================================= */
.seal {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  line-height: 0;
  transition: transform .15s ease, box-shadow .2s ease;
}
.seal:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.seal img { width: 150px; height: auto; }
.seal--onDark { border-color: rgba(255,255,255,.22); }

/* Startseite: im Trust-Panel unter der Zertifikatsliste. Das Panel hatte dafuer
   seine feste aspect-ratio abzugeben — mit dem Siegel traegt es echten Inhalt
   und muss mitwachsen. */
.trust-panel .seal { align-self: flex-start; margin-top: 4px; }

/* Werkstatt: rechts neben dem Einleitungstext, sobald Platz ist.

   Das :has(.seal) ist keine Feinheit, sondern Pflicht. .werkstatt-head steht
   auch als Teaser-Section auf der Startseite, dort ohne Siegel und mit h2 statt
   h1. Ohne die Bedingung griff das Raster auch dort: die Spalte "seal" blieb
   leer, das h2 wurde mangels passender grid-area automatisch hineingesetzt und
   Eyebrow und Lede quetschten sich in eine schmale Spalte daneben.

   Aus demselben Grund deckt die Titel-Regel h1 UND h2 ab. */
.werkstatt-head .seal { margin-top: 26px; }
@media (min-width: 880px) {
  .werkstatt-head:has(.seal) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "eyebrow seal" "title seal" "lede seal";
    column-gap: 40px;
    align-items: start;
    max-width: none;
  }
  .werkstatt-head:has(.seal) .eyebrow { grid-area: eyebrow; }
  .werkstatt-head:has(.seal) h1,
  .werkstatt-head:has(.seal) h2 { grid-area: title; }
  .werkstatt-head:has(.seal) .lede { grid-area: lede; max-width: 760px; }
  .werkstatt-head:has(.seal) .seal { grid-area: seal; margin-top: 0; align-self: center; }
}

/* Footer: das Mitglieds-Siegel haengt am echten Verbandslink. Das Bild kommt
   per ::before dazu, der Linktext bleibt darunter stehen und lesbar. */
.footer-section a[href="https://dchv.de"] {
  display: inline-block;
  max-width: 190px;
}
.footer-section a[href="https://dchv.de"]::before {
  content: "";
  display: block;
  width: 150px;
  height: 125px;
  margin-bottom: 10px;
  background: #fff url("/static/img/dchv-mitglied.png?v=7e84b48c") center / 122px auto no-repeat;
  border-radius: var(--radius);
}