/* ============================================================
   Monschein Anhänger — Design-System Richtung C „Frisch & Freundlich"
   Farben: Blau #2A63B8 / Dunkel #1C4787 / Grün #3E9E5C / BG #F6FAFD
   Schrift: Mulish (variable, self-hosted) · 8-px-Raster
   ============================================================ */

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fallback mit an Mulish angeglichenen Metriken — hält den Wechsel praktisch sprungfrei.
   font-display: swap statt optional: bei einem Hard-Reload (Cache-Bypass) blieb die Seite
   sonst dauerhaft auf dem Arial-Fallback hängen, was besonders im Menü „kaputt" wirkte. */
@font-face {
  font-family: 'Mulish-Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  font-weight: 100 600;
  size-adjust: 100.2%;
  ascent-override: 100.4%;
  descent-override: 28.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Mulish-Fallback';
  src: local('Arial Bold'), local('Arial'), local('Helvetica Bold'), local('Liberation Sans Bold');
  font-weight: 601 1000;
  size-adjust: 97.5%;
  ascent-override: 103.0%;
  descent-override: 28.8%;
  line-gap-override: 0%;
}

:root {
  --blau: #2A63B8;
  --blau-dunkel: #1C4787;
  --navy: #10243F;
  --gruen: #3E9E5C;          /* Akzent für Icons/Flächen (grafisch, ≥3:1) */
  --gruen-btn: #2E7D48;      /* Buttonfläche mit weißem Text — 5,1:1 gegen Weiß (WCAG AA) */
  --gruen-dunkel: #256B3C;   /* Hover */
  --gruen-hell: #E7F5EC;
  --bg: #F6FAFD;
  --text: #22303C;
  --text-2: #4A5866;
  --linie: #DDE7F0;
  --weiss: #fff;
  --radius: 18px;
  --radius-klein: 12px;
  --schatten: 0 6px 24px rgba(28, 71, 135, .10);
  --schatten-gross: 0 10px 34px rgba(28, 71, 135, .16);
  --wrap: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Mulish', 'Mulish-Fallback', system-ui, sans-serif;
  font-size: 17px; line-height: 1.7;
  color: var(--text); background: var(--weiss);
}
img, picture, svg { display: block; max-width: 100%; }
picture img { width: 100%; height: auto; }
a { color: var(--blau); }
ul, ol { padding-left: 1.2em; }

h1, h2, h3, .h3 { font-weight: 800; color: var(--blau-dunkel); line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(30px, 4.4vw, 40px); }
h2 { font-size: clamp(24px, 3.4vw, 30px); line-height: 1.2; }
h3, .h3 { font-size: 21px; line-height: 1.3; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-schmal { max-width: 860px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fokus & A11y */
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 200;
  background: var(--blau-dunkel); color: #fff; padding: 10px 18px; border-radius: 99px;
}
.skip-link:focus { left: 8px; }
/* Der Nach-oben-Knopf gibt den Fokus an den Seitenrumpf zurück — dort ist kein Rahmen
   erwünscht, der Rumpf ist ohnehin kein regulär ansteuerbares Bedienelement. */
body:focus { outline: none; }
/* Sprungziel des Sprunglinks: ohne tabindex=-1 wandert der Fokus nicht wirklich mit,
   der Sprung bliebe für die Tastatur wirkungslos. Rahmen ist hier nicht erwünscht. */
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Einblenden beim Scrollen — die Klasse setzt erst das Skript, daher bleibt alles
   sichtbar, wenn JavaScript fehlt oder reduzierte Bewegung gewünscht ist. */
.einblenden {
  opacity: 0;
  transform: translateY(22px);
  /* Die Deckkraft erreicht bewusst deutlich früher ihren Endwert als die Bewegung:
     So steht der volle Textkontrast nach 0,25 s, während das Einschweben weich bleibt. */
  transition: opacity .25s ease-out, transform .55s cubic-bezier(.22,.61,.36,1);
}
/* Versatz für nebeneinanderliegende Elemente (Klassen statt Inline-Stil wegen CSP) */
.einblenden.verzug-1 { transition-delay: 70ms; }
.einblenden.verzug-2 { transition-delay: 140ms; }
.einblenden.verzug-3 { transition-delay: 210ms; }
.einblenden.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .einblenden { opacity: 1 !important; transform: none !important; }
}

/* ---------- Buttons ----------
   Sanfte Elevation beim Zeigen (federnde Kurve), Druck-Gefühl beim Klick,
   Glanz-Lauf nur auf den gefüllten Varianten, sichtbarer Fokusring für Tastatur. */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 15.5px; line-height: 1;
  padding: 15px 28px; border-radius: 999px; text-decoration: none;
  border: 0; cursor: pointer; font-family: inherit;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .25s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn:focus-visible { outline: 3px solid rgba(42, 99, 184, .5); outline-offset: 3px; }
.btn .ic { flex-shrink: 0; transition: transform .22s ease; }
.btn:hover .ic { transform: scale(1.15); }
/* Glanz-Lauf: schmaler Lichtstreifen wandert einmal über den Button */
.btn-gruen::after, .btn-blau::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.32) 50%, transparent 62%);
  transform: translateX(-130%);
}
.btn-gruen:hover::after, .btn-blau:hover::after { transform: translateX(130%); transition: transform .65s ease; }
.btn-gruen { background: var(--gruen-btn); color: #fff; box-shadow: 0 4px 14px rgba(46, 125, 72, .32); }
.btn-gruen:hover { background: var(--gruen-dunkel); box-shadow: 0 9px 24px rgba(46, 125, 72, .42); }
.btn-blau { background: var(--blau); color: #fff; box-shadow: 0 4px 14px rgba(42, 99, 184, .28); }
.btn-blau:hover { background: var(--blau-dunkel); box-shadow: 0 9px 24px rgba(42, 99, 184, .38); }
.btn-blau-umriss { border: 2px solid var(--blau); color: var(--blau); background: var(--weiss); padding: 13px 26px; }
.btn-blau-umriss:hover { background: #EAF1FA; border-color: var(--blau-dunkel); color: var(--blau-dunkel); box-shadow: 0 6px 18px rgba(42, 99, 184, .18); }
.btn-hell { background: #fff; color: var(--blau-dunkel); box-shadow: var(--schatten); }
.btn-hell:hover { box-shadow: 0 10px 26px rgba(6, 18, 38, .28); }
.btn-umriss-hell { border: 2px solid rgba(255,255,255,.75); color: #fff; background: transparent; padding: 13px 26px; }
.btn-umriss-hell:hover { border-color: #fff; background: rgba(255,255,255,.14); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn .ic { transition: none; }
  .btn:hover, .btn:active { transform: none; }
  .btn:hover .ic { transform: none; }
  .btn-gruen::after, .btn-blau::after { display: none; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
/* Kopfzeile auf derselben Breite wie der Inhalt: Logo und Telefon-Button stehen damit exakt
   über der linken bzw. rechten Kante des Seiteninhalts. Der Platz dafür kommt aus schmaleren
   Abständen der Menüpunkte (siehe .hauptnav) — gemessener Bedarf 1120 px bei 1152 px
   verfügbarer Innenbreite. Unter 1300 px übernimmt ohnehin das Klappmenü. */
.site-header .wrap { max-width: var(--wrap); }
.header-innen { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 122px; }
.logo { display: block; flex-shrink: 0; }
/* Logo 2026: Bildmarke + Schriftzug in einer Datei — höher als die alte Marke,
   daher fast die volle Kopfzeilenhöhe nutzen, damit der Schriftzug lesbar bleibt. */
.logo-bild { height: 108px; width: auto; }
@media (max-width: 1300px) { .logo-bild { height: 90px; } }
@media (max-width: 420px) { .logo-bild { height: 72px; } }
.hauptnav { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hauptnav > ul { display: flex; list-style: none; padding: 0; gap: 0; margin: 0; }
.hauptnav > ul > li { position: relative; }
.hauptnav a:not(.btn):not(.untermenue-alle) {
  display: block; padding: 9px 8px 11px; white-space: nowrap; position: relative;
  color: var(--text); text-decoration: none; font-weight: 700; font-size: 16px;
}
/* Unterstrich wächst beim Überfahren aus der Mitte — ruhiger als eine Farbfläche */
.hauptnav > ul > li > a::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 3px;
  border-radius: 3px; background: var(--gruen); transform: scaleX(0); transform-origin: center;
  transition: transform .18s ease;
}
.hauptnav > ul > li > a:hover { color: var(--blau-dunkel); }
.hauptnav > ul > li > a:hover::after { transform: scaleX(1); }
.hauptnav > ul > li > a[aria-current="page"] { color: var(--blau-dunkel); }
.hauptnav > ul > li > a[aria-current="page"]::after { transform: scaleX(1); background: var(--blau); }

/* Die Kopfzeile ist auf die Inhaltsbreite (1200 px) gedeckelt — mehr Fensterbreite hilft nicht.
   Mit dem langen Punkt „Beratung / Verkauf" braucht sie deshalb auf jeder Desktop-Breite leicht
   verdichtete Abstände (eine Stufe für alle, seit dem Zusammenlegen wieder mit Luft dazwischen).
   Ohne Verdichtung schrumpft der Telefon-Button per flex und sein Text wird abgeschnitten. */
@media (min-width: 1301px) {
  .hauptnav a:not(.btn):not(.untermenue-alle) { padding: 9px 7px 11px; font-size: 15px; }
  .hauptnav > ul > li > a::after { left: 7px; right: 7px; }
  .nav-cta { margin-left: 6px; padding: 12px 16px; }
}
@media (min-width: 1301px) and (max-width: 1560px) {
  .logo-bild { height: 96px; }
}

/* ---------- Untermenü „Anhänger" ---------- */
.hat-untermenue { display: flex; align-items: center; }
.hat-untermenue > a { padding-right: 4px !important; }
.untermenue-schalter {
  background: none; border: 0; padding: 8px 10px 8px 2px; cursor: pointer;
  color: var(--text-2); display: inline-flex; align-items: center; border-radius: 8px;
}
.untermenue-schalter svg { transition: transform .2s ease; }
.untermenue-schalter[aria-expanded="true"] svg { transform: rotate(180deg); }
.untermenue-schalter:hover { color: var(--blau); }
.untermenue {
  position: absolute; top: calc(100% + 10px); left: -12px; z-index: 120;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(16, 36, 63, .18); padding: 20px 22px; width: max-content; max-width: 92vw;
  animation: menue-auf .16s ease-out;
}
@keyframes menue-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.untermenue-titel {
  font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 12px;
}
.untermenue-liste {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(190px, max-content)); gap: 1px 8px;
}
.untermenue-liste a {
  display: flex !important; align-items: center; gap: 9px; padding: 9px 12px 9px 10px !important;
  border-radius: 10px; font-weight: 600 !important; font-size: 14.5px !important;
  color: var(--text) !important; text-decoration: none; white-space: nowrap;
}
.untermenue-liste a::after { display: none; }
.untermenue-liste a:hover { background: var(--bg); color: var(--blau-dunkel) !important; }
.untermenue-liste a[aria-current="page"] { background: #EAF1FA; color: var(--blau-dunkel) !important; }
.untermenue-liste .ic { color: var(--gruen); flex-shrink: 0; }
.untermenue-alle {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--linie); width: 100%; color: var(--blau); font-weight: 700;
  font-size: 14.5px; text-decoration: none;
}
.untermenue-alle:hover { text-decoration: underline; }
/* Telefon-Button: nur die Handlungsaufforderung. Die Nummer steht im aria-label
   (für Vorlesehilfen) sowie sichtbar im Footer und auf der Kontaktseite. */
/* flex-shrink 0: der Button darf nie schrumpfen — lieber sichtbar überstehen als Text abschneiden */
.nav-cta { margin-left: 10px; padding: 12px 20px; font-size: 14.5px; white-space: nowrap; flex-shrink: 0; }
.burger {
  display: none; align-items: center; gap: 9px;
  background: var(--blau); color: #fff; border: 0; border-radius: 99px;
  padding: 11px 18px; min-height: 48px; cursor: pointer; font-family: inherit;
}
.burger-text { font-weight: 800; font-size: 14px; letter-spacing: .08em; }
@media (max-width: 400px) { .burger { padding: 11px 15px; gap: 7px; } }

@media (max-width: 1300px) {
  .burger { display: inline-flex; }
  .hauptnav {
    display: none; position: fixed; top: 100px; left: 0; right: 0; z-index: 99;
    /* Höhe explizit: als Flex-Kind des Headers leitet der Browser sie nicht aus bottom:0 ab.
       dvh berücksichtigt ein- und ausblendende Browserleisten auf Mobilgeräten. */
    height: calc(100vh - 100px);
    height: calc(100dvh - 100px);
    background: var(--weiss); flex-direction: column; align-items: stretch;
    padding: 18px 24px 40px; overflow-y: auto; overscroll-behavior: contain;
  }
  .hauptnav.offen { display: flex; }
  .hauptnav > ul { flex-direction: column; gap: 2px; }
  .hauptnav a:not(.btn):not(.untermenue-alle) { padding: 15px 16px; font-size: 18px; min-height: 44px; }
  .hauptnav > ul > li > a::after { left: 16px; right: auto; width: 26px; bottom: 6px; }
  .nav-cta { margin: 18px 0 0; justify-content: center; }
  body.nav-offen { overflow: hidden; }

  /* Untermenü mobil: aufklappbare Liste statt schwebendem Feld */
  .hat-untermenue { flex-wrap: wrap; }
  .hat-untermenue > a { flex: 1; }
  .untermenue-schalter { padding: 14px 16px; min-width: 52px; min-height: 48px; justify-content: center; }
  .untermenue {
    position: static; min-width: 0; width: 100%; box-shadow: none; animation: none;
    border: 0; border-left: 3px solid var(--gruen); border-radius: 0;
    padding: 6px 0 10px 14px; margin: 0 0 6px 16px; background: transparent;
  }
  .untermenue-titel { display: none; }
  .untermenue-liste { grid-template-columns: 1fr; }
  .untermenue-liste a { font-size: 16px !important; padding: 12px 10px !important; min-height: 44px; }
  .untermenue-alle { margin-top: 8px; padding-top: 10px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(88vh, 720px); display: flex; align-items: center; overflow: hidden; }
.hero-bild, .hero-bild picture, .hero-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bild img {
  object-fit: cover;
  /* Ken-Burns: sehr langsames Heranfahren, damit das Standbild lebendig wirkt */
  animation: ken-burns 26s ease-out forwards;
  transform-origin: 62% 55%;
  will-change: transform;
}
@keyframes ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bild img { animation: none; transform: none; }
}
.hero-bild::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(16,36,63,.88) 0%, rgba(28,71,135,.72) 45%, rgba(42,99,184,.18) 100%);
}
.hero-innen { position: relative; z-index: 2; padding-top: 72px; padding-bottom: 72px; max-width: var(--wrap); width: 100%; }
.eyebrow {
  color: #A5E8BD; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-size: 13.5px; margin-bottom: 14px;
}
.hero h1 { color: #fff; font-size: clamp(34px, 5.4vw, 52px); margin-bottom: 16px; }
.hero-text { color: #E2ECF8; max-width: 540px; font-size: 18.5px; margin-bottom: 30px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-buttons.mitte { justify-content: center; }

/* ---------- USP ---------- */
.usp { background: var(--weiss); padding: 52px 0; border-bottom: 1px solid var(--linie); }
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.usp-item {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--radius-klein); background: var(--bg);
  border: 1px solid transparent; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.usp-item:hover { border-color: #D6E4F5; transform: translateY(-3px); box-shadow: var(--schatten); }
.usp-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  background: var(--weiss); color: var(--blau); display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(28,71,135,.10);
}
.usp-item p { font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.usp-item b { color: var(--blau-dunkel); font-size: 16px; display: block; margin-bottom: 3px; }
.usp-item b + br { display: none; }
@media (max-width: 980px) { .usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .usp-grid { grid-template-columns: 1fr; } }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 96px 0; }
.abschnitt.pt-klein { padding-top: 48px; }
.band-hell { background: var(--bg); }
/* Zwei gleichfarbige Abschnitte hintereinander ergaben 192 px Abstand ohne erkennbare
   Trennung. Der zweite rückt näher und bekommt eine feine Linie. */
.band-hell + .band-hell { padding-top: 64px; border-top: 1px solid #E4ECF5; }
.abschnitt + .abschnitt:not(.band-hell):not(.pt-klein) { padding-top: 72px; }
.abschnitt-kopf { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.abschnitt-kopf p { color: var(--text-2); margin-top: 10px; }
.abschnitt-cta { text-align: center; margin-top: 44px; }

.seiten-kopf { background: linear-gradient(115deg, #EAF1FA 0%, var(--bg) 70%); padding: 48px 0 44px; }
.seiten-kopf h1 { margin-bottom: 14px; }
.einleitung { color: var(--text-2); max-width: 780px; font-size: 18px; }
/* Einleitungstext gehört optisch zum Seitenkopf — vorher stand er in einem eigenen
   Abschnitt darunter und wirkte vom Titel abgetrennt. */
.kopf-text { max-width: 820px; }
.kopf-text p { color: var(--text-2); margin-bottom: 12px; }
.kopf-text p.einleitung { color: var(--text); font-size: 18.5px; line-height: 1.65; margin-bottom: 16px; }
.kopf-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.modell-anfrage {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
  color: var(--blau); font-weight: 700; text-decoration: none; font-size: 15.5px;
}
.modell-anfrage .ic { transition: transform .15s ease; }
.modell-anfrage:hover { text-decoration: underline; }
.modell-anfrage:hover .ic { transform: translateX(4px); }
.brotkrumen { font-size: 13.5px; color: var(--text-2); margin-bottom: 16px; }
.brotkrumen a { color: var(--text-2); text-decoration: none; }
.brotkrumen a:hover { color: var(--blau); }
.brotkrumen span { margin: 0 4px; }

/* ---------- Karten ---------- */
.karten-grid { display: grid; gap: 28px; }
.karten-grid.drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .karten-grid.drei { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .karten-grid.drei { grid-template-columns: 1fr; } }
.karte {
  background: var(--weiss); border: 1px solid #E4ECF5; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--schatten); text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
a.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-gross); }
.karte-bild { aspect-ratio: 3 / 2; overflow: hidden; background: #E8EEF5; position: relative; }
/* <picture> ist ein Inline-Element ohne eigene Höhe. Ohne diese Regel liefe height:100%
   am <img> ins Leere und das Foto füllte den Bildbereich nicht aus — darunter blieb ein
   sichtbarer leerer Streifen. Gilt für alle Bildflächen mit festem Seitenverhältnis. */
.karte-bild picture, .galerie-bild picture, .modell-hauptbild picture, .thumb picture {
  display: block; width: 100%; height: 100%;
}
.karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Aktions-Teaser auf der Startseite: gleiche Regel wie in der Aktionsübersicht —
   Angebotsfotos werden vollständig gezeigt statt zugeschnitten (Hoch- und Querformat gemischt). */
.start-aktionen .karte-bild { background: #fff; border-bottom: 1px solid #EDF2F8; padding: 14px; box-sizing: border-box; }
.start-aktionen .karte-bild img { object-fit: contain; }
/* Markierung sitzt direkt auf dem Foto — dadurch entsteht kein leerer Streifen
   zwischen Bild und Text, und die Karte wirkt kompakter. */
.pill-auf-bild {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  background: rgba(255,255,255,.94); backdrop-filter: blur(4px);
  color: var(--blau-dunkel); box-shadow: 0 2px 10px rgba(16,36,63,.22);
}
.karte-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.karte-body p { color: var(--text-2); font-size: 15px; }
.karte-mehr {
  color: var(--blau); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; text-decoration: none;
}
.karte-datum { color: var(--text-2); font-size: 13.5px; }
.pill {
  display: inline-block; background: var(--gruen-hell); color: #25703F;
  font-size: 12.5px; font-weight: 700; padding: 4px 13px; border-radius: 99px; align-self: flex-start;
}
/* Aktions-Markierung: kräftiges Rot als bewusster Ausreißer aus der Blau/Grün-Palette —
   das Handels-Signal „reduziert". #B23A1F hat 5,9:1 gegen Weiß (WCAG AA). */
.pill-aktion { background: #B23A1F; color: #fff; text-transform: uppercase; letter-spacing: .05em; }
/* Als Badge oben links am Kartenfoto (pill-auf-bild sitzt unten links und bleibt weiß) */
.pill-badge {
  position: absolute; top: 12px; left: 14px; z-index: 2;
  box-shadow: 0 2px 10px rgba(16, 36, 63, .25); padding: 6px 15px; font-size: 13px;
}

/* ---------- Aktionen (Verkaufsangebote) ---------- */
.aktion-preis {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 30px; font-weight: 800; color: var(--gruen-btn); margin: 6px 0 2px;
}
.aktion-preis-label {
  font-size: 13px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .06em;
}
/* Aufzählungen in Aktionstexten (Zeilen mit "- " im CMS): kompakte Technik-Liste */
.aktion-liste { list-style: none; padding: 0; margin: 2px 0 14px; }
.aktion-liste li {
  position: relative; padding-left: 22px; margin-bottom: 6px;
  color: var(--text-2); font-size: 15.5px; line-height: 1.55;
}
.aktion-liste li::before {
  content: ''; position: absolute; left: 4px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gruen);
}
/* „Angebot teilen"-Leiste unter den Aktions-Buttons */
.aktion-teilen {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid #E4ECF5;
}
.aktion-teilen-label {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-2); font-size: 14px; font-weight: 700;
}
.teilen-knopf {
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #DCE6F2;
  background: #fff; color: var(--blau-dunkel); cursor: pointer;
  display: inline-grid; place-items: center; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.teilen-knopf:hover { transform: translateY(-2px); border-color: transparent; color: #fff; }
.teilen-knopf.t-wa:hover { background: #1DA851; }
.teilen-knopf.t-mail:hover { background: var(--blau); }
.teilen-knopf.t-fb:hover { background: #1877F2; }
.teilen-knopf.t-link:hover, .teilen-knopf.t-nativ:hover { background: var(--gruen-btn); }
.teilen-status { color: #25703F; font-size: 13.5px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .teilen-knopf { transition: none; } .teilen-knopf:hover { transform: none; } }

.aktion-statt { color: var(--text-2); font-size: 16.5px; margin-bottom: -14px; }
.aktion-statt s { text-decoration-thickness: 2px; }
.aktion-preis-netto { color: var(--text-2); font-size: 15.5px; margin: -2px 0 8px; }
.aktion-preis-netto b { color: var(--text); }
/* Preiszeile auf der Start-Karte: durchgestrichener Normalpreis + kräftiger Aktionspreis */
.karte-preise { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.preis-statt { color: var(--text-2); font-size: 14.5px; text-decoration-thickness: 2px; }
.preis-aktion { color: var(--gruen-btn); font-weight: 800; font-size: 19px; }
.karte-netto { color: #25703F; font-weight: 700; font-size: 14px; }
.aktion-pdfs { list-style: none; padding: 0; margin: 4px 0 10px; display: flex; flex-direction: column; gap: 8px; }
.aktion-pdfs a {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  color: var(--blau); font-weight: 700; font-size: 15.5px;
  background: #EAF1FA; border-radius: 12px; padding: 10px 16px;
}
.aktion-pdfs a:hover { background: #DCE8F7; color: var(--blau-dunkel); }
.aktion-pdfs .ic { flex-shrink: 0; }
.aktion-pdfs small { font-weight: 400; color: var(--text-2); }
.text-zentriert { text-align: center; }

/* ---------- Aktionen: sortierbare Übersicht, jedes Angebot mit eigener Seite ---------- */
.ak-ueber-titel { font-size: 24px; margin-bottom: 6px; }
.ak-ueber-hinweis { color: var(--text-2); margin-bottom: 0; }
.ak-leiste {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.ak-sortieren { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ak-sortieren label { color: var(--text-2); font-size: 14.5px; font-weight: 700; }
.ak-sortieren select {
  font: inherit; font-size: 15px; color: var(--text); background: var(--weiss);
  border: 1.5px solid #DCE6F2; border-radius: 99px; padding: 10px 16px; min-height: 46px;
  cursor: pointer;
}
.ak-sortieren select:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
/* Das hidden-Attribut muss stärker sein als die display-Werte der Komponenten
   (.btn ist inline-flex, .teilen-knopf inline-grid) — sonst blendet JavaScript
   Elemente „aus", die trotzdem sichtbar bleiben. */
[hidden] { display: none !important; }
.btn-klein { padding: 9px 20px; min-height: 46px; font-size: 15px; }
.ak-ueber-frist { color: #B23A1F; font-size: 13px; font-weight: 700; }
.ak-ueber-grid-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .ak-ueber-grid-drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ak-ueber-grid {
  list-style: none; padding: 0; margin: 0;
  /* minmax(0, 1fr) statt 1fr: sonst sprengen lange Maßangaben ohne Trennstelle
     („300x165x200cm") die Spalte und die Seite scrollt seitlich. */
  display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 820px) { .ak-ueber-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.ak-ueber-karte {
  display: flex; flex-direction: column; height: 100%;
  background: var(--weiss); border: 1px solid #E4ECF5; border-radius: 14px;
  overflow: hidden; box-shadow: var(--schatten); text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ak-ueber-karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-gross); border-color: #CBDCF0; }
/* Angebotsfotos NICHT beschneiden: 33 der 61 Aktionsfotos sind Hochformat, dazu kommen
   randlos aufgebaute Herstellerfotos — mit object-fit: cover fehlten Deichsel, Aufbau oder
   Heck. Beim Verkaufsangebot zählt, dass man den ganzen Anhänger sieht; die etwas höhere
   4:3-Fläche mit hellem Grund fängt beide Formate ruhig auf. */
/* Weiße Bildfläche mit Innenabstand: die Herstellerfotos sind randlos auf Weiß freigestellt
   und ihr Motiv berührt die Dateikante. Auf farbigem Grund sah das aus wie „oben und unten
   abgeschnitten". Weiß + Padding verlängert den Bildhintergrund optisch und gibt jedem
   Motiv Luft; die Trennlinie hält die Karte trotzdem gegliedert. */
.ak-ueber-bild {
  position: relative; display: block; aspect-ratio: 4 / 3;
  background: #fff; border-bottom: 1px solid #EDF2F8;
  overflow: hidden; padding: 14px; box-sizing: border-box;
}
.ak-ueber-bild picture { display: block; width: 100%; height: 100%; }
.ak-ueber-bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ak-ueber-badge { top: 9px; left: 10px; padding: 4px 11px; font-size: 11.5px; }
.ak-ueber-text { display: flex; flex-direction: column; gap: 6px; padding: 13px 15px 15px; flex: 1; }
.ak-ueber-name {
  font-weight: 700; font-size: 15.5px; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* Modellnamen wie „Universaltransporter" sind länger als die Kachel: lieber sauber
     trennen (lang="de" liefert die Trennstellen) als hart abschneiden. */
  overflow-wrap: break-word; hyphens: auto;
}
@media (max-width: 820px) { .ak-ueber-name { font-size: 14.5px; } }
.ak-ueber-preise { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ak-ueber-mehr {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--blau); font-weight: 700; font-size: 14px;
}
.ak-ueber-mehr .ic { transition: transform .15s ease; }
.ak-ueber-karte:hover .ak-ueber-mehr .ic { transform: translateX(3px); }

/* Galerie auf den Aktionsseiten: Haupt- und Vorschaubilder vollständig, nicht beschnitten.
   Gilt bewusst nur für Angebote (.ak-modell) — die Kategorieseiten behalten ihren
   formatfüllenden Zuschnitt. */
.ak-modell .modell-hauptbild { background: #fff; padding: 22px; box-sizing: border-box; }
.ak-modell .modell-hauptbild img { object-fit: contain; }
.ak-modell .thumb { background: #fff; border-color: #E4ECF5; padding: 5px; box-sizing: border-box; }
.ak-modell .thumb.aktiv { border-color: var(--blau); }
.ak-modell .thumb img { object-fit: contain; }

/* Rückweg von einem Angebot zur Übersicht */
.ak-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ak-zurueck {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-2); text-decoration: none; font-size: 13.5px; font-weight: 700;
}
.ak-zurueck:hover { color: var(--blau); }

/* Sprungziel „Alle Angebote": der klebende Kopf (122 px) darf die Überschrift nicht verdecken */
#alle-aktionen { scroll-margin-top: 138px; }
@media (max-width: 1000px) { #alle-aktionen { scroll-margin-top: 96px; } }
@media (prefers-reduced-motion: reduce) {
  .ak-ueber-karte, .ak-ueber-mehr .ic { transition: none; }
  .ak-ueber-karte:hover { transform: none; }
}

/* ---------- Website-Hinweis (Urlaub & Co): mittiges Fenster im Stil der Marke ---------- */
.hinweis-lage {
  position: fixed; inset: 0; z-index: 320;
  display: grid; place-items: center; padding: 20px;
}
.hinweis-offen { overflow: hidden; }
.hinweis-dunkel {
  position: absolute; inset: 0;
  background: rgba(16, 36, 63, .58); backdrop-filter: blur(3px);
}
.hinweis-karte {
  position: relative; background: var(--weiss); border-radius: 22px;
  max-width: 560px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 40px 40px 34px; text-align: center;
  box-shadow: 0 24px 70px rgba(16, 36, 63, .35);
  animation: hinweis-auf .3s ease;
  /* Feiner Markenakzent als oberer Abschluss */
  border-top: 6px solid var(--blau);
}
@keyframes hinweis-auf {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .hinweis-karte { animation: none; } }
.hinweis-x {
  position: absolute; top: 14px; right: 14px;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: var(--bg); color: var(--text-2); cursor: pointer;
  display: grid; place-items: center; transition: background .15s ease, color .15s ease;
}
.hinweis-x:hover { background: #E4ECF5; color: var(--blau-dunkel); }
.hinweis-symbol {
  display: inline-grid; place-items: center; width: 62px; height: 62px;
  border-radius: 50%; background: var(--gruen-hell); color: var(--gruen-btn);
  margin-bottom: 14px;
}
.hinweis-marke {
  font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--blau); margin-bottom: 6px;
}
.hinweis-karte h2 { font-size: 27px; margin-bottom: 14px; }
.hinweis-text p { color: var(--text-2); margin-bottom: 12px; font-size: 16.5px; line-height: 1.65; }
.hinweis-ok { margin-top: 10px; min-width: 200px; justify-content: center; }
@media (max-width: 560px) {
  .hinweis-karte { padding: 34px 22px 26px; border-radius: 18px; }
  .hinweis-karte h2 { font-size: 23px; }
}

/* ---------- Bewertungen ---------- */
.bw-sterne { display: inline-flex; gap: 3px; color: #F5A623; line-height: 0; }
.bw-sterne .stern { width: 17px; height: 17px; }
.bw-sterne.gross .stern { width: 23px; height: 23px; }
.g-logo { width: 18px; height: 18px; flex-shrink: 0; }

/* Kompaktzeile unter dem Hero */
.bw-zeile {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap; justify-content: center;
  background: var(--weiss); border: 1px solid #E4ECF5; border-radius: 999px;
  padding: 13px 26px; margin: 28px auto 0; width: fit-content; max-width: 100%;
  box-shadow: var(--schatten);
}
.bw-zeile-text { font-size: 15px; color: var(--text-2); }
.bw-zeile-text b { color: var(--blau-dunkel); }
.bw-zeile-link {
  font-size: 14.5px; font-weight: 700; color: var(--blau); text-decoration: none;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
  padding-left: 13px; border-left: 1px solid var(--linie);
}
.bw-zeile-link .ic { transition: transform .15s ease; }
.bw-zeile-link:hover { text-decoration: underline; }
.bw-zeile-link:hover .ic { transform: translateX(3px); }

/* Abschnittskopf mit Durchschnittsnote */
.bw-kopf-marke {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-2);
}
.bw-schnitt { display: inline-flex; align-items: center; gap: 14px; margin-top: 16px; }
.bw-schnitt-zahl {
  font-size: 46px; font-weight: 800; color: var(--blau-dunkel); line-height: 1;
}
.bw-schnitt-rechts { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.bw-schnitt-rechts small { color: var(--text-2); font-size: 13.5px; }

/* Einzelne Bewertungskarte */
.bw-karte { margin: 0; position: relative; overflow: visible; }
.bw-karte .karte-body { padding: 22px 22px 20px; gap: 12px; }
/* Anführungszeichen sitzt im Textfluss rechts neben den Sternen — als abgesetzte Zierde,
   nicht mehr absolut positioniert (dort kollidierte es mit den Sternen). */
.bw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bw-zitat { display: flex; color: #C8DCF3; flex-shrink: 0; }
.bw-zitat .ic { width: 34px; height: 34px; }
/* Alle drei Karten sollen gleich hoch wirken: Der Anriss ist auf fünf Zeilen begrenzt und der
   Textbereich hat eine feste Mindesthöhe. Kurze Bewertungen werden darin mittig gesetzt,
   damit unter ihnen kein leeres Loch entsteht. */
.bw-karte blockquote {
  margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: center;
  min-height: 172px;
}
.bw-karte blockquote p { color: var(--text); font-size: 15.5px; line-height: 1.68; }
.bw-kurz { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
/* Getrennte Regeln, nicht als Selektorliste: Browser ohne :has() verwerfen sonst auch
   die Klassenregel dahinter — und der Anriss bliebe beim Aufklappen gekürzt. */
.bw-karte blockquote.offen .bw-kurz { -webkit-line-clamp: none; -webkit-line-clamp: initial; overflow: visible; }
.bw-karte blockquote:has(.bw-mehr[open]) .bw-kurz { -webkit-line-clamp: none; -webkit-line-clamp: initial; overflow: visible; }
.bw-mehr { margin-top: 10px; }
.bw-mehr summary {
  cursor: pointer; color: var(--blau); font-weight: 700; font-size: 14.5px;
  min-height: 30px; display: flex; align-items: center; gap: 6px; list-style: none;
}
.bw-mehr summary::-webkit-details-marker { display: none; }
.bw-mehr summary::after {
  content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.bw-mehr[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.bw-mehr summary:hover { text-decoration: underline; }
.bw-mehr p { margin-top: 8px; color: var(--text-2); font-size: 15px; }
.bw-name {
  display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--linie); font-weight: 700; color: var(--blau-dunkel); font-size: 15px;
}
.bw-name-text small {
  display: flex; align-items: center; gap: 6px; font-weight: 400; color: var(--text-2);
  font-size: 12.5px; margin-top: 3px;
}
.bw-name-text small .g-logo { width: 14px; height: 14px; }
.bw-initiale {
  width: 42px; height: 42px; border-radius: 50%; background: var(--gruen-hell); color: #25703F;
  display: grid; place-items: center; font-weight: 800; font-size: 18px; flex-shrink: 0;
}
.bw-aktionen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 44px; }
.bw-danke {
  text-align: center; color: var(--text-2); font-size: 14.5px; margin: 16px auto 0;
  max-width: 620px; line-height: 1.6;
}
@media (max-width: 560px) {
  .bw-zeile { border-radius: var(--radius); text-align: center; }
  .bw-zeile-link { border-left: 0; padding-left: 0; }
  .bw-schnitt-zahl { font-size: 38px; }
  .bw-aktionen .btn { width: 100%; justify-content: center; }
}

/* ---------- Zweispaltig ---------- */
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .zweispaltig { grid-template-columns: 1fr; gap: 32px; } }
.text-spalte h2 { margin-bottom: 18px; }
.text-spalte p { margin-bottom: 14px; color: var(--text-2); }
.text-spalte .btn { margin-top: 10px; }
.rund18, .rund18 img { border-radius: var(--radius); }
.bild-spalte picture img { box-shadow: var(--schatten-gross); }

.haken-liste { list-style: none; padding: 0; margin: 0 0 18px; }
.haken-liste li {
  padding-left: 32px; position: relative; margin-bottom: 10px; color: var(--text);
}
.haken-liste li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--gruen-hell);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232E7D48'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
  background-size: 13px; background-position: center; background-repeat: no-repeat;
}
.schritt-liste { counter-reset: schritt; list-style: none; padding: 0; }
.schritt-liste li { counter-increment: schritt; position: relative; padding-left: 52px; margin-bottom: 20px; color: var(--text-2); }
.schritt-liste li::before {
  content: counter(schritt); position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blau); color: #fff; font-weight: 800;
  display: grid; place-items: center; font-size: 16px;
}
.schritt-liste b { color: var(--blau-dunkel); }

/* ---------- CTA-Band ---------- */
.cta-band { background: linear-gradient(110deg, var(--blau-dunkel), var(--blau)); padding: 56px 0; }
.cta-band-innen { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin-bottom: 6px; }
.cta-band p { color: #DCE8F7; }
.cta-band-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Galerie / Modelle ---------- */
.galerie-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .galerie-grid { grid-template-columns: repeat(2, 1fr); } }
.galerie-bild { border-radius: var(--radius-klein); overflow: hidden; box-shadow: var(--schatten); aspect-ratio: 4 / 3; background: #E8EEF5; }
.galerie-bild img { width: 100%; height: 100%; object-fit: cover; }

.modell { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; }
/* Ohne min-width:0 zieht die intrinsische Bildbreite die Spalte auf (gemessen 850/254 px
   statt ausgeglichen) — Rasterfelder dürfen nicht an ihrem Inhalt kleben. */
.modell > *, .zweispaltig > *, .kontakt-grid > *, .karten-grid > *, .standorte-grid > * { min-width: 0; }
@media (max-width: 900px) { .modell { grid-template-columns: 1fr; gap: 26px; } }
.modell-text h2 { margin-bottom: 14px; }
.modell-text p { color: var(--text-2); margin-bottom: 14px; }
.modell-hauptbild { border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten-gross); aspect-ratio: 4 / 3; background: #E8EEF5; }
.modell-hauptbild img { width: 100%; height: 100%; object-fit: cover; }
/* Vorschaubilder als umbrechendes Raster: alle Bilder sind auf einen Blick da, ohne
   seitliches Scrollen. Die Spaltenzahl ergibt sich aus der verfügbaren Breite. */
.modell-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px; margin-top: 12px;
}
.thumb {
  aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; padding: 0; width: 100%;
  border: 2px solid transparent; cursor: pointer; background: #E8EEF5;
  transition: border-color .15s ease, transform .15s ease;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.aktiv { border-color: var(--blau); }
.thumb:hover { border-color: #9DBFE9; transform: translateY(-2px); }

/* ---------- Großansicht der Bilder ---------- */
.modell-hauptbild, .galerie-bild {
  display: block; padding: 0; border: 0; cursor: zoom-in; position: relative;
  width: 100%; font: inherit; color: inherit; background: #E8EEF5;
}
.bild-lupe {
  position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(16, 36, 63, .62); color: #fff; display: grid; place-items: center;
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.modell-hauptbild:hover .bild-lupe, .galerie-bild:hover .bild-lupe,
.modell-hauptbild:focus-visible .bild-lupe, .galerie-bild:focus-visible .bild-lupe { opacity: 1; }
/* Auf Touchgeräten gibt es kein Überfahren — dort dauerhaft, aber dezent */
@media (hover: none) { .bild-lupe { opacity: .82; } }

html.bildansicht-offen { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  opacity: 0; transition: opacity .18s ease;
}
.lb.offen { opacity: 1; }
.lb[hidden] { display: none; }
.lb-hintergrund { position: absolute; inset: 0; background: rgba(10, 24, 44, .95); cursor: zoom-out; }
/* Der Nach-oben-Knopf schwebt sonst über der geöffneten Ansicht */
html.bildansicht-offen .nach-oben,
html.bildansicht-offen .wa-knopf { display: none; }
.lb-rahmen {
  position: relative; width: min(1180px, 100vw - 24px); max-height: 100dvh;
  display: grid; place-items: center; padding: 58px 12px 12px;
}
.lb-buehne { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb-bild { display: flex; }
.lb-bild picture { display: block; }
/* width/height kommen als Attribute vom Skript und begrenzen die Anzeige auf die real
   vorhandene Auflösung; hier wird nur nach unten skaliert, nie darüber hinaus. */
.lb-bild img {
  display: block; max-width: 100%; max-height: calc(100dvh - 190px); width: auto; height: auto;
  border-radius: var(--radius-klein); background: #14263F;
}
.lb-fuss {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  color: #DCE7F4; font-size: 14.5px; text-align: center; max-width: 760px;
}
.lb-zaehler {
  background: rgba(255, 255, 255, .14); border-radius: 99px; padding: 3px 12px;
  font-weight: 700; font-size: 13px; white-space: nowrap;
}
/* Dunkle Fläche mit hellem Rand: bleibt sowohl auf dem dunklen Hintergrund als auch über
   einem hellen Produktfoto erkennbar. */
.lb-knopf {
  position: absolute; z-index: 2; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .38); background: rgba(12, 28, 50, .72); color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background .15s ease;
}
.lb-knopf:hover { background: rgba(42, 99, 184, .9); }
.lb-knopf:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lb-zu { top: 8px; right: 8px; }
.lb-zurueck { left: 4px; top: 50%; margin-top: -23px; }
.lb-weiter { right: 4px; top: 50%; margin-top: -23px; }
.lb-zurueck .ic { transform: rotate(180deg); }
.lb-einzeln .lb-zurueck, .lb-einzeln .lb-weiter, .lb-einzeln .lb-zaehler { display: none; }
.lb-status { position: absolute; left: -9999px; }
@media (max-width: 620px) {
  /* Auf schmalen Geräten wandern die Pfeile unter das Bild — seitlich würden sie auf dem
     Foto liegen und es zusätzlich schmäler machen. Wischen funktioniert ohnehin. */
  .lb-rahmen { padding: 52px 6px 68px; }
  .lb-knopf { width: 44px; height: 44px; }
  .lb-zurueck, .lb-weiter { top: auto; bottom: 12px; margin-top: 0; }
  .lb-zurueck { left: calc(50% - 98px); }
  .lb-weiter { right: calc(50% - 98px); }
  .lb-bild img { max-height: calc(100dvh - 232px); }
  .lb-fuss { font-size: 13.5px; gap: 8px; }
}

/* ---------- Querverweise am Seitenende ---------- */
.verwandte-weiter {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; margin-top: 32px;
}
.verwandte-weiter a {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px;
  color: var(--blau-dunkel); text-decoration: none; padding: 8px 4px; min-height: 40px;
}
.verwandte-weiter a .ic { color: var(--blau); flex-shrink: 0; }
.verwandte-weiter a:hover { color: var(--blau); text-decoration: underline; }

/* ---------- Fließtext & FAQ ---------- */
.abschnitt.pb-klein { padding-bottom: 40px; }
.fliess { color: var(--text-2); margin-bottom: 16px; font-size: 17.5px; }
.faq-titel { margin-bottom: 26px; }
.faq-liste { display: flex; flex-direction: column; gap: 12px; }
.faq-eintrag {
  background: var(--weiss); border: 1px solid #E4ECF5; border-radius: var(--radius-klein);
  box-shadow: var(--schatten); overflow: hidden;
}
.faq-eintrag summary {
  cursor: pointer; padding: 18px 52px 18px 22px; font-weight: 700; color: var(--blau-dunkel);
  font-size: 17px; list-style: none; position: relative; min-height: 44px;
}
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::after {
  content: ''; position: absolute; right: 20px; top: 50%; width: 11px; height: 11px;
  border-right: 2.5px solid var(--blau); border-bottom: 2.5px solid var(--blau);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq-eintrag[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-eintrag summary:hover { background: var(--bg); }
.faq-eintrag p { padding: 0 22px 20px; color: var(--text-2); }

/* ---------- Tabelle (Mietpreise) ---------- */
.tabelle-scroll { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--schatten); margin-top: 24px; }
.preis-tabelle { width: 100%; border-collapse: collapse; background: var(--weiss); font-size: 15px; min-width: 940px; }
.preis-tabelle th, .preis-tabelle td { padding: 15px 14px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
.preis-tabelle thead th { background: var(--blau-dunkel); color: #fff; font-size: 13.5px; letter-spacing: .03em; }
/* Bezeichnung und Zahlenwerte dürfen nicht umbrechen („Anhänger 4" stand sonst zweizeilig);
   die Beschreibungsspalte nimmt den verbleibenden Platz auf. */
.preis-tabelle tbody th {
  color: var(--blau-dunkel); white-space: nowrap; width: 1%; padding-right: 20px;
}
.preis-tabelle td:nth-child(2) { min-width: 150px; }
.preis-tabelle td:nth-child(3),
.preis-tabelle td:nth-child(4),
.preis-tabelle td:nth-child(5) { white-space: nowrap; width: 1%; }
.preis-tabelle thead th:nth-child(3),
.preis-tabelle thead th:nth-child(4),
.preis-tabelle thead th:nth-child(5) { white-space: nowrap; }
.preis-tabelle td:nth-child(6) { width: auto; min-width: 220px; }
.preis-tabelle tbody tr:nth-child(even) { background: var(--bg); }
.preis-tabelle .preis { font-weight: 800; color: var(--gruen-dunkel); white-space: nowrap; }
.hinweis-klein { font-size: 13.5px; color: var(--text-2); margin-top: 14px; }
@media (max-width: 720px) {
  .preis-tabelle { min-width: 0; }
  .preis-tabelle thead { position: absolute; left: -9999px; }
  .preis-tabelle tbody tr { display: block; padding: 8px 0; }
  .preis-tabelle tbody th { display: block; font-size: 17px; padding-bottom: 4px; }
  .preis-tabelle tbody td { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 5px 16px; }
  .preis-tabelle tbody td::before { content: attr(data-l); color: var(--text-2); font-size: 13.5px; }
  .preis-tabelle tbody tr { border-bottom: 1px solid var(--linie); }
}

/* ---------- Formular ---------- */
.kontakt-grid { display: grid; grid-template-columns: 380px 1fr; gap: 32px; align-items: start; }
@media (max-width: 980px) { .kontakt-grid { grid-template-columns: 1fr; } }
/* Das Formular steht in einer eigenen Karte — optisch gleichwertig zum Kontaktblock daneben. */
.formular-karte .karte-body { padding: 30px 32px 32px; gap: 0; }
.formular-titel { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.formular-titel .ic { color: var(--gruen); }
.formular-vorspann { margin: 0 0 22px; }
@media (max-width: 560px) { .formular-karte .karte-body { padding: 24px 20px 26px; } }
.feld { margin-bottom: 18px; flex: 1; }
.feld-reihe { display: flex; gap: 18px; }
@media (max-width: 640px) { .feld-reihe { flex-direction: column; gap: 0; } }
.feld label { display: block; font-weight: 700; font-size: 14.5px; color: var(--blau-dunkel); margin-bottom: 7px; }
.feld input, .feld textarea {
  width: 100%; padding: 14px 17px; border: 1.5px solid #CDDDEF; border-radius: 14px;
  font: inherit; font-size: 15.5px; background: var(--bg); color: var(--text);
}
.feld input:focus, .feld textarea:focus { outline: 2.5px solid var(--blau); outline-offset: 0; border-color: var(--blau); background: #fff; }
.feld-checkbox { display: flex; gap: 12px; align-items: flex-start; }
.feld-checkbox input { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; accent-color: var(--gruen); }
.feld-checkbox label { font-weight: 400; font-size: 14px; color: var(--text-2); margin: 0; }
.hp-feld { position: absolute; left: -9999px; top: -9999px; }
.hinweis-box { border-radius: var(--radius-klein); padding: 20px 24px; margin-bottom: 24px; }
.hinweis-box.erfolg { background: var(--gruen-hell); border: 1px solid #BCE3CB; }
.hinweis-box.erfolg h2 { color: #25703F; }
.hinweis-box.fehler { background: #FDEEEE; border: 1px solid #F2C4C4; color: #8C2B2B; }
.hinweis-box ul { margin-top: 6px; }
.kontakt-liste { list-style: none; padding: 0; }
.kontakt-liste li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.kontakt-liste .ic { flex-shrink: 0; margin-top: 4px; color: var(--gruen); }
.kontakt-liste.dunkel a { color: var(--text); text-decoration: none; font-weight: 700; }
.kontakt-liste.dunkel a:hover { color: var(--blau); }
.link-klein { font-size: 13.5px; }
.mt { margin-top: 22px; }

/* ---------- Standorte ---------- */
/* Marken-Laufband: eigener Hintergrund (kräftigeres Palettenblau), damit sich die
   Sektion von den band-hell-Nachbarn (z. B. Google-Bewertungen) sichtbar abhebt. */
.marken-band { background: #EAF1FA; }
/* Marken-Laufband: Herstellerlogos fahren endlos nach links.
   Spur = 4 identische Sets, Abstände über margin-right (nicht gap) — dadurch ist
   translateX(-50 %) exakt die halbe Spur und die Schleife springt nicht. */
.marken-laufband { overflow: hidden; }
.marken-spur { display: flex; align-items: center; width: max-content; animation: marken-fahrt 35s linear infinite; }
.marken-spur picture { display: block; margin-right: 84px; }
.marken-spur img { height: 52px; width: auto; display: block; }
@media (max-width: 560px) { .marken-spur picture { margin-right: 56px; } .marken-spur img { height: 40px; } }
.marken-laufband:hover .marken-spur { animation-play-state: paused; }
@keyframes marken-fahrt { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marken-spur { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 24px; padding: 0 16px; }
  .marken-spur picture[aria-hidden] { display: none; }
}

/* Seit Mitte 2026 nur noch ein Standort (Fernitz) — Karte mittig statt Zweierraster. */
.standorte-grid { display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; gap: 28px; }
.standort-karte .h3 { display: flex; align-items: center; gap: 10px; }
.standort-karte .ic { color: var(--gruen); }

/* ---------- Artikel ---------- */
.artikel-marke {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  background: var(--gruen-hell); color: #25703F; border-radius: 999px;
  padding: 6px 15px; font-size: 13px; font-weight: 700;
}
.artikel-meta { color: var(--text-2); font-size: 14.5px; margin-top: 12px; }
.artikel-meta time { display: inline-flex; align-items: center; gap: 7px; }
.artikel-meta .ic { color: var(--gruen); }
.artikel-bild { overflow: hidden; box-shadow: var(--schatten-gross); margin-bottom: 34px; }
.artikel-bild picture { display: block; }
/* Das Beitragsbild behält seine natürliche Höhe — kein 4:3-Zuschnitt wie in der Galerie */
.artikel-bild .galerie-bild { aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.artikel-text p { margin-bottom: 18px; color: var(--text); font-size: 17.5px; line-height: 1.75; }
/* Artikel-Detail: Bild neben dem Text (Kundenwunsch 27.07.) */
.artikel-layout { display: grid; gap: 30px; align-items: start; }
@media (min-width: 900px) {
  .artikel-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .artikel-layout .artikel-bild { position: sticky; top: 142px; margin-bottom: 0; }
  .artikel-layout .artikel-bild img { max-height: calc(100vh - 190px); object-fit: cover; }
  .artikel-layout .artikel-text { max-width: 640px; }
}
@media (max-width: 899px) {
  /* Hochformat-Fotos mobil nicht endlos hoch — Vollansicht liefert die Lupe */
  .artikel-layout .artikel-bild img { max-height: 420px; object-fit: cover; }
}
.artikel-autor {
  display: flex; align-items: center; gap: 14px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linie);
  color: var(--text-2); font-size: 15px;
}
.artikel-autor b { color: var(--blau-dunkel); font-size: 16px; }
.artikel-autor-bild { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; box-shadow: var(--schatten); }
.artikel-autor-bild img { width: 100%; height: 100%; object-fit: cover; }
.artikel-lead { font-size: 19.5px !important; line-height: 1.65 !important; color: var(--blau-dunkel) !important; font-weight: 600; }
.artikel-text + .hero-buttons { margin-top: 30px; }
.karten-grid.zwei { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .karten-grid.zwei { grid-template-columns: 1fr; } }

/* ---------- Rechtstexte ---------- */
.rechtstext h2 { margin: 34px 0 12px; font-size: 24px; }
.rechtstext h3 { margin: 24px 0 10px; font-size: 19px; }
.rechtstext p, .rechtstext li { color: var(--text-2); margin-bottom: 12px; }

/* ---------- Fehlerseiten ---------- */
.fehler-seite { min-height: 60vh; display: flex; align-items: center; }
.fehler-innen { text-align: center; }
.fehler-code { font-size: clamp(90px, 16vw, 150px); font-weight: 1000; color: #D3E2F5; line-height: 1; letter-spacing: -4px; }
.fehler-code::before { content: attr(data-code); }
.fehler-seite h1 { margin-bottom: 12px; }
.fehler-seite .einleitung { margin: 0 auto 28px; }
.fehler-links { margin-top: 44px; text-align: left; background: var(--bg); border-radius: var(--radius); padding: 26px 30px; display: inline-block; }
.fehler-links ul { margin-top: 8px; }
.fehler-links li { margin-bottom: 7px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #C8D6E6; margin-top: 0; }
/* Erste Spalte breiter (Kontaktblock), die drei Listen gleich breit und mit
   gleichmäßigem Abstand — vorher standen Navigation, Anhänger und Newsletter
   unterschiedlich weit auseinander. */
.footer-spalten {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  column-gap: 48px; row-gap: 44px; padding: 72px 24px 52px;
}
/* Zwischenbreiten: 2×2-Raster statt drei Spalten plus angehängtem Newsletter —
   sonst blieb neben dem Newsletter eine große Leerfläche. */
@media (max-width: 1180px) {
  .footer-spalten { grid-template-columns: 1.15fr 1fr; column-gap: 44px; row-gap: 40px; }
}
@media (max-width: 860px) { .footer-spalten { column-gap: 34px; } }
@media (max-width: 560px) { .footer-spalten { grid-template-columns: 1fr; row-gap: 36px; } }
.footer-logo { margin-bottom: 24px; }
.footer-logo .logo-bild { height: 108px; }
@media (max-width: 560px) { .footer-logo .logo-bild { height: 92px; } }
.footer-titel { color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .04em; margin-bottom: 16px; }
.footer-nav { list-style: none; padding: 0; }
.footer-nav li { margin-bottom: 9px; }
.footer-nav a { color: #C8D6E6; text-decoration: none; font-size: 15px; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.footer-nav.mit-icons a { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.footer-nav.mit-icons .ic { flex-shrink: 0; color: #6FCF97; opacity: .85; transition: opacity .15s ease; }
.footer-nav.mit-icons a:hover .ic { opacity: 1; }
.footer-nav.mit-icons a:hover span { text-decoration: underline; }
.site-footer .kontakt-liste a { color: #fff; text-decoration: none; }
.site-footer .kontakt-liste a:hover { text-decoration: underline; }
.site-footer .kontakt-liste li { align-items: flex-start; }
.site-footer .kontakt-liste .ic { color: #7FB77F; color: #6FCF97; }
.footer-hinweis { font-size: 13.5px; color: #8FA1B3; margin-top: 16px; }
/* Social-Profile: in der ersten Spalte beim Kontaktblock, wo sie inhaltlich hingehören */
.footer-social { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }
.footer-social-titel {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #8FA1B3; margin-bottom: 12px;
}
.footer-social-icons { display: flex; gap: 12px; }
.footer-social a {
  display: grid; place-items: center; width: 46px; height: 46px;
  background: rgba(255,255,255,.08); border-radius: 50%; color: #fff;
  transition: background .15s ease, transform .15s ease;
}
.footer-social a:hover { background: var(--gruen); transform: translateY(-2px); }
/* ---------- Newsletter im Footer ---------- */
.footer-nl-text { font-size: 14px; color: #A9BDD2; margin-bottom: 14px; line-height: 1.55; }
.footer-nl-form label[for="nl-mail"] {
  display: block; font-size: 13px; font-weight: 700; color: #C8D6E6; margin-bottom: 6px;
}
.footer-nl-reihe { display: flex; gap: 8px; }
.footer-nl-reihe input {
  flex: 1; min-width: 0; padding: 12px 15px; border: 1.5px solid rgba(255,255,255,.16);
  border-radius: 12px; background: rgba(255,255,255,.07); color: #fff; font: inherit; font-size: 15px;
}
.footer-nl-reihe input::placeholder { color: #7C93AC; }
.footer-nl-reihe input:focus { outline: 2.5px solid var(--gruen); border-color: transparent; background: rgba(255,255,255,.12); }
.footer-nl-reihe .btn { padding: 12px 18px; flex-shrink: 0; }
.footer-nl-check { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; font-size: 12.5px; color: #93A9C0; line-height: 1.5; }
.footer-nl-check input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--gruen); }
.footer-nl-check a { color: #C8D6E6; }
.footer-nl-hinweis { font-size: 13.5px; border-radius: 10px; padding: 11px 14px; margin-bottom: 12px; line-height: 1.5; }
.footer-nl-hinweis.erfolg { background: rgba(62,158,92,.18); color: #A8E6BE; }
.footer-nl-hinweis.warn { background: rgba(226,93,93,.16); color: #F3B4B4; }

/* ---------- Untere Leiste (Aufbau wie auf auto-lang.at) ---------- */
.footer-unten { border-top: 1px solid rgba(255,255,255,.1); }
.footer-unten-innen {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  flex-wrap: wrap; padding-top: 22px; padding-bottom: 24px;
  font-size: 12.5px; color: rgba(255,255,255,.5);
}
.footer-unten a { color: rgba(255,255,255,.5); text-decoration: none; }
.footer-unten a:hover { color: #fff; }
.fu-credit { display: inline-flex; align-items: center; gap: 5px; letter-spacing: .2px; transition: color .15s ease; }
.fu-herz { color: rgba(226,93,93,.5); transition: color .25s ease, transform .3s ease; }
.fu-credit:hover .fu-herz { color: #FF5050; transform: scale(1.2); }
.fu-recht { display: flex; gap: 22px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .footer-unten-innen { flex-direction: column; gap: 12px; text-align: center; }
  .fu-recht { justify-content: center; gap: 10px 18px; }
  /* Mobile Reihenfolge: zuerst AGB/Impressum/Datenschutz, dann Copyright, dann Credit */
  .fu-recht { order: 1; }
  .fu-copy { order: 2; }
  .fu-credit { order: 3; }
}

/* ---------- Nach-oben-Button ---------- */
.nach-oben {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 50px; height: 50px; border: 0; border-radius: 50%;
  background: var(--blau); color: #fff; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(16, 36, 63, .28);
  opacity: 0; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, background .15s ease;
}
.nach-oben[hidden] { display: none; }  /* sonst überschreibt display:grid das hidden-Attribut */
.nach-oben.sichtbar { opacity: 1; transform: translateY(0); }
.nach-oben:hover { background: var(--blau-dunkel); }
.nach-oben:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }
@media (max-width: 640px) {
  .nach-oben { right: 14px; bottom: 14px; width: 46px; height: 46px; }
}
@media print { .nach-oben { display: none; } }

/* ---------- WhatsApp-Knopf (fix über dem Nach-oben-Button) ---------- */
.wa-knopf {
  position: fixed; right: 20px; bottom: 82px; z-index: 90;
  width: 50px; height: 50px; border-radius: 50%;
  background: #1DA851;   /* dunkles WhatsApp-Grün — 3,1:1 gegen Weiß (grafisch ≥3:1) */
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(16, 36, 63, .28);
  transition: background .15s ease, transform .15s ease;
}
.wa-knopf:hover { background: #178A44; transform: translateY(-2px); }
.wa-knopf:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
@media (max-width: 640px) {
  .wa-knopf { right: 14px; bottom: 72px; width: 46px; height: 46px; }
}
@media print { .wa-knopf { display: none; } }

/* ---------- Druck ---------- */
@media print {
  .site-header, .site-footer, .cta-band, .hero-buttons, .burger { display: none; }
  body { font-size: 12pt; }
}