/* X-Hunter Design – Startseite (Schritt 3). Nur auf der Startseite geladen. */

/* Alte Leo-Elements-Startseite (Inhalt 3) ausblenden – bleibt in der Datenbank erhalten */
#content.page-home > .elementor { display: none !important; }
#index #wrapper .breadcrumb-bg { display: none; }

.xh-abschnitt { padding-top: 80px; }
.xh-abschnitt-oben { padding-top: 40px; }
.xh-abschnitt-band { margin-top: 80px; }
.xh-grau { background: var(--surface-alt); }

/* Slider */
.xh-slider { position: relative; height: 580px; background: #0b0b0b; color: #ffffff; overflow: hidden; }
.xh-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.xh-slide.xh-an { opacity: 1; visibility: visible; }
.xh-slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 7s ease-out; }
.xh-slide.xh-an .xh-slide-bg { transform: scale(1.07); }
.xh-slide-schleier { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .6) 40%, rgba(0, 0, 0, 0) 75%); }
.xh-slide-in { position: relative; height: 100%; display: flex; align-items: center; }
.xh-slide-text { max-width: 560px; display: flex; flex-direction: column; gap: 18px; opacity: 0; transform: translateX(-48px); transition: transform .9s cubic-bezier(.2, .7, .2, 1) .25s, opacity .9s ease .25s; }
.xh-slide.xh-an .xh-slide-text { opacity: 1; transform: none; }
.xh-slide-eyebrow { text-transform: uppercase; font-weight: 600; font-size: 13px; letter-spacing: 2px; color: var(--brand-red-auf-dunkel); }
/* Folientitel ist keine Überschrift (H1/H2 der Seite stehen in den Abschnitten) – Umbruch trotzdem ausgeglichen wie bei Überschriften */
.xh-slide-titel { margin: 0; font-size: 64px; line-height: 1; font-weight: 700; font-style: italic; text-transform: uppercase; color: #ffffff; font-family: var(--font-sans); text-wrap-style: balance; }
.xh-slide-text p { margin: 0; font-size: 19px; line-height: 1.5; color: #e6e6e6; }
.xh-slide-preis { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.xh-slide-preis span { font-size: 32px; font-weight: 700; }
.xh-slide-preis small { font-size: 13px; color: #cfcfcf; }
.xh-slide-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
/* Fortschrittsstriche: Trefferfläche 40 × 44 px, sichtbar bleibt der 4-px-Strich in der Mitte (nur Inhaltsfläche gefärbt) */
.xh-slider-punkte { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 8px; }
.xh-slider-punkte button { width: 40px; height: 44px; border: 0; padding: 20px 0; cursor: pointer; background-color: rgba(255, 255, 255, .45); background-clip: content-box; }
.xh-slider-punkte button.xh-an { background-color: var(--brand-red); }
/* Pfeile als Paar links und rechts neben den Strichen (Strichleiste 48 px je Folie − 8 px, je 20 px Abstand; Folienzahl --xh-folien aus startseite.tpl),
   damit sie nicht über dem Folientext liegen */
.xh-pfeil { position: absolute; bottom: 10px; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .35); color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.xh-pfeil:hover { background: var(--brand-red); border-color: var(--brand-red); }
.xh-pfeil-l { left: calc(50% - var(--xh-folien, 5) * 24px - 56px); }
.xh-pfeil-r { right: calc(50% - var(--xh-folien, 5) * 24px - 56px); }
/* Sehr breite Bildschirme: Slider etwas höher, damit das Querformat-Foto nicht zum flachen Streifen beschnitten wird */
@media (min-width: 1600px) { .xh-slider { height: clamp(580px, 30vw, 680px); } } /* breit, aber flache Fenster: Punkte und Pfeile bleiben im ersten Bildschirm */
@media (prefers-reduced-motion: reduce) { .xh-slide, .xh-slide * { transition: none !important; } }

/* Einstiege */
.xh-tueren { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 16px; }
/* Höhe mindestens 230 px, wächst mit dem Inhalt (zweizeiliger Titel bei ca. 1000–1150 px); beide Kästen einer Reihe gleich hoch */
.xh-tuer { position: relative; display: flex; flex-direction: column; min-height: 230px; overflow: hidden; background: var(--surface-tief); color: #ffffff !important; }
.xh-tuer img { position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: none; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.xh-tuer:hover img { transform: scale(1.06); }
.xh-tuer-schleier { position: absolute; inset: 0; background: linear-gradient(90deg, #121212 0%, #121212 22%, rgba(18, 18, 18, .75) 45%, rgba(18, 18, 18, 0) 70%); }
.xh-tuer-in { position: relative; flex: 1; box-sizing: border-box; padding: 28px 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.xh-tuer-eyebrow { text-transform: uppercase; font-size: 13px; font-weight: 600; letter-spacing: 2px; color: var(--brand-red-auf-dunkel); }
.xh-tuer-titel { text-transform: uppercase; font-size: 32px; font-weight: 700; font-style: italic; margin-top: 6px; text-shadow: var(--shadow-title-on-photo); }
.xh-tuer-text { font-size: 15px; line-height: 1.45; color: #e2e2e2; margin-top: 6px; max-width: 330px; }
.xh-tuer-flaeche { position: absolute; inset: 0; z-index: 1; }
.xh-tuer-in { pointer-events: none; z-index: 2; }
.xh-tuer-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; pointer-events: auto; }
.xh-tuer-knopf { border: 1px solid #ffffff; color: #ffffff !important; font-weight: 700; font-size: 13px; padding: 10px 18px; text-transform: uppercase; transition: background .15s, border-color .15s; }
.xh-tuer-knopf:hover { background: var(--brand-red); border-color: var(--brand-red); }

/* Plattformen */
.xh-plattformen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.xh-plattform { position: relative; display: block; height: 460px; overflow: hidden; background: var(--surface-tief); color: #ffffff !important; }
.xh-plattform img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.xh-plattform:hover img { transform: scale(1.06); }
.xh-plattform-name { position: absolute; left: 0; right: 0; top: 24px; font-size: 40px; font-weight: 700; font-style: italic; text-transform: uppercase; text-shadow: var(--shadow-title-on-photo); text-align: center; transition: color .15s; }
.xh-plattform:hover .xh-plattform-name { color: var(--brand-red); }
.xh-plattform-links { position: absolute; left: 0; right: 0; bottom: 0; background: var(--scrim); padding: 14px 28px; font-size: 14px; font-weight: 600; color: #e6e6e6; text-align: center; }
/* Tablet: alle drei Plattformen in einer Reihe (sonst 2 + 1 mit leerer halber Reihe) */
@media (min-width: 768px) and (max-width: 1099px) {
  .xh-plattformen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xh-plattform { height: 340px; }
  .xh-plattform-name { font-size: 28px; }
}

/* Sortiment */
.xh-sortiment { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.xh-band { position: relative; display: block; height: 240px; overflow: hidden; background: #1f1f1f; }
.xh-band img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.xh-band:hover img { transform: scale(1.06); }
.xh-band-label { position: absolute; left: 0; right: 0; bottom: 0; background: var(--scrim); color: #ffffff; padding: 12px 18px; text-align: center; }
.xh-band-label strong { display: block; text-transform: uppercase; font-weight: 700; font-style: italic; font-size: 17px; transition: color .15s; }
.xh-band:hover .xh-band-label strong { color: var(--brand-red-auf-dunkel); }
.xh-band-label small { display: block; font-size: 13px; color: #d0d0d0; margin-top: 2px; }

/* Produkt-Reiter */
.xh-reiter-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.xh-reiter { display: flex; gap: 32px; }
.xh-reiter button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 0 0 12px; font-family: var(--font-sans); font-size: 20px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); cursor: pointer; }
.xh-reiter button[aria-selected="true"] { border-bottom-color: var(--brand-red); color: var(--heading); }
.xh-reiter-alle { margin-bottom: 10px; }
.xh-reiter-alle[hidden] { display: none; }
/* Tablet: 4 Karten in einer Reihe, die 5. ausblenden wie am Handy (sonst 3 + 2) */
@media (min-width: 768px) and (max-width: 1199px) {
  .xh-start .xh-raster-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xh-start .xh-raster-5 > :nth-child(5) { display: none; }
}

/* Anzahlung */
.xh-anzahlung { background: var(--surface-tief); color: #ffffff; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; padding: 36px 44px; }
.xh-anzahlung-zahl { font-size: 64px; font-weight: 700; font-style: italic; color: var(--brand-red); line-height: 1; }
.xh-anzahlung-text { flex: 1 1 420px; font-size: 16px; color: #d0d0d0; line-height: 1.5; }
.xh-anzahlung-text > div:last-child { max-width: var(--lesebreite); }
.xh-anzahlung-titel { margin: 0 0 6px; text-transform: uppercase; font-size: 26px; line-height: 1.15; font-weight: 700; font-style: italic; color: #ffffff; font-family: var(--font-sans); }
/* Tablet: Knopf unter der Textspalte statt allein unter der „25 %“ */
@media (min-width: 768px) and (max-width: 1099px) {
  .xh-anzahlung { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 48px; row-gap: 16px; }
  .xh-anzahlung > .xh-knopf-hell { grid-column: 2; justify-self: start; }
}

/* Messer */
.xh-messer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); border: 1px solid var(--border); }
.xh-messer-bild { position: relative; min-height: 400px; background: var(--surface-tief); overflow: hidden; display: block; }
.xh-messer-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.xh-messer-bild-text { position: absolute; left: 32px; bottom: 28px; color: #ffffff; }
.xh-messer-bild small { display: block; text-transform: uppercase; font-size: 13px; font-weight: 600; letter-spacing: 2px; color: var(--brand-red-auf-dunkel); }
.xh-messer-titel { margin: 0; text-transform: uppercase; font-size: 38px; line-height: normal; font-weight: 700; font-style: italic; color: #ffffff; font-family: var(--font-sans); text-shadow: var(--shadow-title-on-photo); }
/* Tablet (Bild über der Liste): Bild flacher, sonst stark hochskaliert und der Block über 900 px hoch */
@media (min-width: 768px) and (max-width: 1099px) { .xh-messer-bild { min-height: 300px; } }
.xh-messer-liste { padding: 36px 44px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.xh-messer-liste .xh-eyebrow { margin-bottom: 6px; }
.xh-messer-punkt { display: grid; grid-template-columns: 44px 1fr 24px; align-items: center; padding: 16px 0; gap: 12px; border-bottom: 1px solid var(--border); color: var(--heading) !important; }
.xh-messer-nr { font-size: 22px; font-weight: 700; font-style: italic; color: #c9c9c9; }
.xh-messer-punkt strong { display: block; text-transform: uppercase; font-size: 17px; }
.xh-messer-punkt small { display: block; font-size: 14px; color: var(--text-muted); margin-top: 3px; }
.xh-messer-punkt svg { color: var(--brand-red); transition: transform .2s; }
.xh-messer-punkt:hover strong, .xh-messer-punkt:hover .xh-messer-nr { color: var(--brand-red); }
.xh-messer-punkt:hover svg { transform: translateX(4px); }
.xh-messer-marken { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.xh-messer-marken span { text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); margin-right: 4px; }
.xh-messer-marken a { border: 1px solid var(--border); padding: 5px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--heading); }
.xh-messer-liste .xh-more { align-self: flex-start; margin-top: 24px; }

/* Marken */
/* 10 Logos: ab 768 px 5 × 2, am Handy 2 × 5 – keine halb leere Reihe */
.xh-marken { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.xh-marken a { height: 120px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Logo-Dateien sind 130 × 130 mit Rand – größer zeigen, damit Schriftlogos lesbar werden */
.xh-marken img { max-width: 96px; max-height: 96px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .15s, opacity .15s; }
.xh-marken a:hover img { filter: none; opacity: 1; }
/* Randlose Querformat-Logos (marken/quer/, 26.10.): gleiche Höhe statt gleicher Kastengröße; Glock ist fast quadratisch */
.xh-marken img[src*="/quer/"] { max-width: 150px; max-height: 44px; }
.xh-marken img[src$="/glock.svg"] { max-height: 64px; }

/* Waffenkauf + Fachhändler */
.xh-waffenkauf { padding-top: 64px; padding-bottom: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 40px; }
.xh-waffenkauf .xh-h2 { margin-bottom: 24px; }
.xh-schritte { display: flex; flex-direction: column; gap: 12px; }
.xh-schritt { background: #ffffff; border: 1px solid var(--border); padding: 18px 22px; display: flex; gap: 20px; align-items: center; font-size: 15px; line-height: 1.45; }
.xh-schritt > span { flex: none; font-size: 38px; font-weight: 700; font-style: italic; color: var(--brand-red); line-height: 1; width: 30px; }
.xh-schritt strong { display: block; text-transform: uppercase; font-size: 16px; color: var(--heading); }
.xh-haendler { background: #ffffff; border: 1px solid var(--border); display: flex; flex-direction: column; }
.xh-haendler > img { width: 100%; height: 250px; object-fit: cover; object-position: 30% 30%; display: block; }
.xh-haendler-text { padding: 26px 30px; display: flex; flex-direction: column; gap: 12px; }
.xh-haendler blockquote { max-width: var(--lesebreite); margin: 0; padding: 0; border: 0; font-size: 18px; line-height: 1.55; color: var(--heading); }
.xh-haendler-name { font-size: 15px; font-weight: 700; color: var(--heading); }

/* Bewertungen */
.xh-bewertungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
/* Note + 3 Bewertungen: bis 4 × 280 px nebeneinander passen 2 × 2 statt 3 + 1 */
@media (min-width: 768px) and (max-width: 1215px) { .xh-bewertungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xh-note { background: var(--surface-tief); color: #ffffff; padding: 30px 32px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.xh-sterne { display: inline-flex; gap: 3px; color: var(--brand-red); }
.xh-note-zahl { font-size: 56px; font-weight: 700; font-style: italic; line-height: 1; }
.xh-note-zahl small { font-size: 24px; color: #bdbdbd; }
.xh-note-titel { text-transform: uppercase; font-weight: 700; font-size: 15px; }
.xh-note-quelle { font-size: 13px; color: #bdbdbd; line-height: 1.5; }
.xh-bewertung { border: 1px solid var(--border); padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.xh-bewertung-kopf { display: flex; justify-content: space-between; align-items: center; }
.xh-bewertung-kopf small { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.xh-bewertung p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--heading); flex: 1; }
.xh-bewertung strong { font-size: 13px; color: var(--heading); }
.xh-bewertung strong.xh-bewertung-titel { font-size: 16px; line-height: 1.35; margin-bottom: -4px; } /* Überschrift der Trustpilot-Bewertung */

/* Blog */
.xh-blog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.xh-beitrag { display: flex; flex-direction: column; gap: 10px; color: var(--text) !important; }
.xh-beitrag-bild { height: 220px; overflow: hidden; background: var(--surface-tief); }
.xh-beitrag-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.xh-beitrag:hover .xh-beitrag-bild img { transform: scale(1.06); }
.xh-beitrag-rubrik { text-transform: uppercase; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; color: var(--brand-red); margin-top: 6px; }
.xh-beitrag-titel { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--heading); }
.xh-beitrag:hover .xh-beitrag-titel { color: var(--brand-red); }
.xh-beitrag p { margin: 0; font-size: 15px; line-height: 1.55; }
.xh-beitrag-mehr { text-transform: uppercase; font-size: 13px; font-weight: 700; color: var(--heading); }

/* SEO + Newsletter */
/* Spalten wie Waffenkauf/Fachhändler (min. 480 px, Abstand 40 px) – die rechte Spaltenkante springt beim Scrollen nicht */
.xh-seo { padding-bottom: 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 24px 40px; }
.xh-seo .xh-h2 { margin: 0; }
.xh-seo p { max-width: var(--lesebreite); margin: 0; font-size: 16px; line-height: 1.65; }
.xh-newsletter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); align-items: center; gap: 24px 40px; padding-top: 48px; padding-bottom: 48px; }
.xh-newsletter-text p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; }
.xh-newsletter-form { display: flex; flex-direction: column; gap: 10px; }
.xh-newsletter-feld { display: flex; height: 50px; border: 1px solid var(--field-border); background: #ffffff; }
.xh-newsletter-feld input { flex: 1; min-width: 0; border: 0; padding: 0 16px; font-family: var(--font-sans); font-size: 16px; background: transparent; }
.xh-newsletter-feld button { border: 0; background: var(--brand-red); color: #ffffff; font-family: var(--font-sans); font-weight: 700; font-size: 14px; text-transform: uppercase; padding: 0 26px; cursor: pointer; }
.xh-newsletter-feld button:hover { background: var(--brand-red-dunkel); }
/* linksbündig (Theme-label steht rechts); Häkchen 20 px wie in Kasse und Formularen */
.xh-einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--text-muted); font-weight: 400; text-align: left; }
.xh-einwilligung input { margin: 0; width: 20px; height: 20px; flex: none; }
.xh-einwilligung span { flex: 1; }
.xh-einwilligung a { text-decoration: underline !important; color: var(--text-muted); }
.xh-meldung { background: var(--success-bg); color: var(--stock-green); padding: 10px 14px; font-size: 14px; }
.xh-meldung-fehler { background: var(--danger-bg); color: var(--danger); }

/* Slider auf Tablet und Handy (Marcus 22.10.2026: „nicht responsiv“): Bild oben im Querformat, fast vollständig sichtbar,
   Text darunter auf dunklem Grund. Alle Folien liegen im selben Raster-Feld – die Höhe richtet sich nach der längsten,
   kürzere Folien stehen mittig im Schwarzfeld. Striche auf der Bildunterkante, Pfeile mittig am Bildrand. */
@media (max-width: 991px) {
  .xh-slider { height: auto; display: grid; }
  .xh-slide { position: relative; inset: auto; grid-area: 1 / 1; display: flex; flex-direction: column; }
  .xh-slide-bg { position: relative; inset: auto; height: auto; aspect-ratio: 2.2 / 1; object-position: var(--xh-pos-m, center center) !important; }
  .xh-slide-schleier { inset: 0 0 auto 0; height: calc(100vw / 2.2); background: linear-gradient(to top, #0b0b0b 0%, rgba(11, 11, 11, 0) 40%); }
  /* volle Breite (Text an der Inhaltskante statt mittig); dunkler Grund deckt den Zoom-Überstand des Bildes ab */
  .xh-slide-in { width: 100%; height: auto; flex: 1; flex-direction: column; align-items: stretch; justify-content: center; padding-top: 18px; padding-bottom: 24px; background: #0b0b0b; }
  .xh-slide-text { max-width: none; }
  .xh-pfeil { top: calc(100vw / 4.4 - 20px); bottom: auto; }
  .xh-pfeil-l { left: 8px; }
  .xh-pfeil-r { right: 8px; }
  /* Strich 18 px über der Bildunterkante (20 px Polster der Trefferfläche abgezogen); Schatten für helle Bildstellen */
  .xh-slider-punkte { top: calc(100vw / 2.2 - 38px); bottom: auto; }
  .xh-slider-punkte button { filter: drop-shadow(0 0 1px rgba(0, 0, 0, .8)); }
}
/* Tablet: Schrift zwischen Handy und PC, flacheres Bild – der Slider füllt nicht mehr den ganzen Bildschirm */
@media (min-width: 768px) and (max-width: 991px) {
  .xh-slide-titel { font-size: 48px; }
  .xh-slide-text { gap: 14px; }
  .xh-slide-text p { font-size: 17px; }
  .xh-slide-bg { aspect-ratio: 2.6 / 1; }
  .xh-slide-schleier { height: calc(100vw / 2.6); }
  .xh-pfeil { top: calc(100vw / 5.2 - 20px); }
  .xh-slider-punkte { top: calc(100vw / 2.6 - 38px); }
}
/* Touch: Marken-Chips und Textlink mit ausreichend großer Trefferfläche */
@media (max-width: 991px) {
  .xh-messer-marken a { padding: 11px 12px; }
  .xh-waffenkauf .xh-rotlink { padding: 11px 0; }
}

/* Handy */
@media (max-width: 767px) {
  .xh-abschnitt { padding-top: 40px; }
  .xh-abschnitt-oben { padding-top: 20px; }
  .xh-abschnitt-band { margin-top: 40px; }
  .xh-kopfzeile { margin-bottom: 14px; }
  .xh-kopfzeile-text { display: none; }
  .xh-kopfzeile .xh-more { order: 3; width: 100%; justify-content: center; }
  .xh-slide-text { gap: 10px; }
  .xh-slide-titel { font-size: 38px; }
  .xh-slide-text p { font-size: 15px; }
  .xh-slide-preis span { font-size: 26px; }
  .xh-slide-preis small { display: none; } /* Zusatz „Erwerbsberechtigung nötig“ am Handy weg: Folien gleich hoch (Marcus 25.10.) */
  .xh-slide-knoepfe .xh-knopf-rot { flex: 1; justify-content: center; height: 48px; padding: 0; }
  .xh-slide-knoepfe .xh-knopf-hell { display: none; }
  .xh-tueren { gap: 10px; }
  .xh-tuer { min-height: 190px; }
  .xh-tuer img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
  .xh-tuer-schleier { background: linear-gradient(90deg, rgba(18, 18, 18, .95) 0%, rgba(18, 18, 18, .75) 50%, rgba(18, 18, 18, .15) 100%); }
  .xh-tuer-in { padding: 18px; gap: 14px; }
  .xh-tuer-titel { font-size: clamp(18px, 6.2vw, 22px); }  /* „ERWERBSBERECHTIGUNG“ passt auch bei 320 px */
  .xh-tuer-text { font-size: 13px; max-width: 230px; }
  .xh-plattformen { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .xh-plattform { height: 210px; }
  .xh-plattform img { object-position: center 45%; }
  .xh-plattform-name { font-size: 30px; top: 18px; }
  .xh-plattform-links { font-size: 13px; padding: 12px 16px; }
  .xh-sortiment { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .xh-band { height: 150px; }
  .xh-band-label { padding: 8px; }
  .xh-band-label strong { font-size: 13px; line-height: 1.15; }
  .xh-band-label small { display: none; }
  /* Reiter als drei gleich breite Felder (alle ganz sichtbar), „Alle …“ unter der Linie über den Karten */
  .xh-reiter-kopf { flex-wrap: wrap; gap: 14px; border-bottom: 0; margin-bottom: 20px; }
  .xh-reiter { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-bottom: 1px solid var(--border); }
  .xh-reiter button { min-height: 44px; padding: 0 0 8px; font-size: 13px; line-height: 1.2; }
  .xh-reiter-alle { width: 100%; justify-content: center; margin: 0; }
  .xh-anzahlung { padding: 22px 20px; gap: 10px; }
  .xh-anzahlung-zahl { font-size: 44px; }
  .xh-anzahlung-titel { font-size: 18px; }
  .xh-anzahlung-text { font-size: 14px; flex-basis: 100%; }
  .xh-anzahlung .xh-knopf-hell { width: 100%; justify-content: center; }
  .xh-messer-bild { min-height: 200px; }
  .xh-messer-titel { font-size: 26px; }
  .xh-messer-bild-text { left: 16px; bottom: 14px; }
  .xh-messer-liste { padding: 4px 16px 16px; }
  .xh-messer-punkt { grid-template-columns: 34px 1fr 20px; padding: 14px 0; gap: 8px; }
  .xh-messer-punkt strong { font-size: 14px; }
  .xh-messer-punkt small { font-size: 12px; }
  .xh-messer-liste .xh-more { align-self: stretch; justify-content: center; }
  .xh-marken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xh-marken a { height: 84px; }
  .xh-marken img { max-width: 70px; max-height: 70px; }
  .xh-marken img[src*="/quer/"] { max-width: 120px; max-height: 34px; }
  .xh-marken img[src$="/glock.svg"] { max-height: 50px; }
  .xh-waffenkauf { padding-top: 32px; padding-bottom: 32px; gap: 24px; }
  .xh-schritt { padding: 14px 16px; gap: 14px; font-size: 13px; }
  .xh-schritt > span { font-size: 30px; width: 22px; }
  .xh-haendler > img { height: 190px; }
  .xh-haendler-text { padding: 18px; }
  .xh-haendler blockquote { font-size: 15px; }
  .xh-knopf-umriss { align-self: stretch; justify-content: center; }
  .xh-note { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 18px 20px; gap: 6px 16px; }
  .xh-note-zahl { font-size: 44px; }
  .xh-bewertung { padding: 16px 18px; }
  .xh-blog { grid-template-columns: minmax(0, 1fr); }
  .xh-beitrag { display: grid; grid-template-columns: 120px 1fr; gap: 4px 12px; }
  .xh-beitrag-bild { height: 90px; grid-row: span 4; }
  .xh-beitrag p { display: none; }
  .xh-beitrag-titel { font-size: 14px; }
  .xh-seo { padding-bottom: 40px; }
  .xh-newsletter { padding-top: 32px; padding-bottom: 32px; }
  .xh-newsletter-feld { flex-direction: column; height: auto; border: 0; background: none; gap: 10px; }
  .xh-newsletter-feld input { flex: none; height: 48px; border: 1px solid var(--field-border); background: #ffffff; }
  .xh-newsletter-feld button { height: 48px; }
}
@media (max-width: 359px) { .xh-reiter button { font-size: 12px; } }

/* Hereingleiten beim Scrollen (xh-design.js hereingleiten) – nur Startseite */
.xh-reveal { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.xh-reveal.xh-sichtbar { opacity: 1; transform: none; }
.xh-reveal [style*="--xh-v"] { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--xh-v) * 70ms + 150ms); }
.xh-reveal.xh-sichtbar [style*="--xh-v"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .xh-reveal, .xh-reveal [style*="--xh-v"] { opacity: 1 !important; transform: none !important; transition: none !important; } }