/**
 * Homepage (Neu) – Layout-Fundament
 * Wird nur mit dem Seitentemplate "Homepage (Neu)" geladen.
 * Alle Regeln sind unter .jp-home gekapselt.
 *
 * Breakpoints (Savoy, desktop-first; CSS-Variablen sind in Media Queries nicht nutzbar):
 *   Tablet  <= 991px
 *   Phone   <= 550px
 *
 * Aufbau:
 *   .jp-home
 *     .jp-home__hero                       vollflächig; Bild (__hero-media), Text links (__hero-body)
 *     .jp-home__section                    vertikaler Abstand 112 / 80 / 56 px
 *       .jp-home__container                Standard 1280 px (wie Header/Footer)
 *       .jp-home__container--wide          Wide 1520 px
 *         .jp-home__panel--grey            grauer Highlight-Bereich innerhalb des Wide-Containers
 *     .jp-home__section--bleed             vollflächiger Hintergrund (z. B. Newsletter)
 *
 * Bekannte Button-Konflikte (front.css, !important): siehe docs/plans/02-css-layout-fundament.md.
 * Buttons daher nicht auf dunklen Flächen verwenden.
 */

.jp-home {
   /* Container */
   --jp-home-container:      var(--nm--page-width); /* 1280px, wie Header */
   --jp-home-container-wide: 1520px;
   --jp-home-gutter:         var(--nm--page-column-spacing); /* 15px */
   --jp-home-prose:          65ch;

   /* Vertikaler Abstand */
   --jp-home-section-space: 112px;
   --jp-home-head-gap:      48px;
   --jp-home-panel-pad:     64px;
   --jp-home-grid-gap:      24px;
   --jp-home-space-xs:      8px;
   --jp-home-space-sm:      16px;
   --jp-home-space-md:      24px;
   --jp-home-space-lg:      40px;

   /* Farben (Aliase auf Savoy-/Shop-Variablen) */
   --jp-home-text:    var(--nm--color-font);
   --jp-home-strong:  var(--nm--color-font-strong);
   --jp-home-bg:      var(--nm--color-body-background);
   --jp-home-bg-tone: var(--nm--single-product-background-color); /* mittleres Grau der Produktdetailseite */
   --jp-home-dark:    var(--jp-color-darkgray_02);
   --jp-home-line:    var(--nm--color-border);
   --jp-home-accent:  var(--nm--color-font-highlight); /* Orange, nur sparsam */

   /* Typografie (Schriftfamilie wird von Savoy geerbt) */
   --jp-home-fs-body:    var(--jp-font-size-body);
   --jp-home-fs-small:   var(--jp-font-size-small);
   --jp-home-fs-h1:      clamp(32px, 4vw + 8px, 56px);
   --jp-home-fs-h2:      clamp(26px, 2vw + 14px, 38px);
   --jp-home-fs-h3:      clamp(20px, 1vw + 12px, 24px);
   --jp-home-fw-heading: 700; /* Savoy-Standard: h1 = 300; Ladegewicht im Browser prüfen */
   --jp-home-lh-body:    var(--jp-line-height);
   --jp-home-lh-heading: 1.2;

   color: var(--jp-home-text);
   font-size: var(--jp-home-fs-body);
   line-height: var(--jp-home-lh-body);
}

/* Typografie & Absätze */
.jp-home h1,
.jp-home h2,
.jp-home h3 {
   margin: 0 0 var(--jp-home-space-sm);
   color: var(--jp-home-strong);
   font-weight: var(--jp-home-fw-heading);
   line-height: var(--jp-home-lh-heading);
}
.jp-home h1 { font-size: var(--jp-home-fs-h1); }
.jp-home h2 { font-size: var(--jp-home-fs-h2); }
.jp-home h3 { font-size: var(--jp-home-fs-h3); }
.jp-home p {
   margin: 0 0 1.25em;
}
.jp-home p:last-child {
   margin-bottom: 0;
}

/* Sektion */
.jp-home__section {
   padding-block: var(--jp-home-section-space);
}
/* Zwei aufeinanderfolgende Sektionen ohne eigenen Hintergrund: Abstand nicht verdoppeln */
.jp-home__section:not(.jp-home__section--bleed) + .jp-home__section:not(.jp-home__section--bleed) {
   padding-top: 0;
}
/* Vollflächiger Hintergrund (z. B. Newsletter) */
.jp-home__section--bleed {
   background-color: var(--jp-home-bg-tone);
}

/* Container */
.jp-home__container {
   box-sizing: border-box;
   width: 100%;
   max-width: var(--jp-home-container);
   margin-inline: auto;
   padding-inline: var(--jp-home-gutter);
}
.jp-home__container--wide {
   max-width: var(--jp-home-container-wide);
}

/* Panel: Hintergrund liegt innerhalb des Containers (nicht über die ganze Bildschirmbreite) */
.jp-home__panel {
   padding: var(--jp-home-panel-pad);
}
.jp-home__panel--grey {
   background-color: var(--jp-home-bg-tone);
}

/* Hero: vollflächiges Bild (<picture>/<img>, srcset, LCP), Text links, dezenter dunkler Verlauf.
   Ohne Bild: dunkler Fallback. <= 550px: Bild oben, Text darunter (siehe Phone-Block). */
.jp-home__hero {
   position: relative;
   display: flex;
   align-items: center;
   min-height: clamp(420px, 56vh, 640px);
   padding-block: var(--jp-home-space-lg);
   overflow: hidden;
   background-color: var(--jp-home-dark);
}
.jp-home__hero--no-image {
   background-image: linear-gradient(135deg, transparent 0%, rgb(0 0 0 / .4) 100%);
}
.jp-home__hero--has-image::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(90deg, rgb(0 0 0 / .7) 0%, rgb(0 0 0 / .45) 38%, rgb(0 0 0 / 0) 70%);
   pointer-events: none;
}
/* Tablet/schmaler Desktop (551-1199px): Text überdeckt dort einen größeren Bildanteil -> kräftigerer, weiter reichender Verlauf
   (Kontrast >= 4,5:1 Text / >= 3:1 H1, gemessen auf /homepage-neu/). >= 1200px und <= 550px unverändert. */
@media (min-width: 551px) and (max-width: 1199px) {
   .jp-home__hero--has-image::before {
      background: linear-gradient(90deg, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .6) 55%, rgb(0 0 0 / .35) 80%, rgb(0 0 0 / 0) 100%);
   }
}
.jp-home__hero > .jp-home__container {
   position: relative;
   z-index: 2;
}
.jp-home__hero h1,
.jp-home__hero p {
   color: var(--jp-home-bg);
}
.jp-home__hero-media {
   position: absolute;
   inset: 0;
}
.jp-home__hero-media picture {
   display: block;
   width: 100%;
   height: 100%;
}
.jp-home__hero-img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 85% center;
}
.jp-home__hero--focus-left .jp-home__hero-img   { object-position: 15% center; }
.jp-home__hero--focus-center .jp-home__hero-img { object-position: 50% center; }
.jp-home__hero-body {
   max-width: 540px;
}
/* Textblock als Einheit: Eyebrow 12 / H1 16 / Text 28 px (Desktop und Tablet). H1 mind. 36px, damit
   zwischen Phone (34-36px) und Tablet kein Größensprung entsteht (>= 992px greift --jp-home-fs-h1 unverändert). */
.jp-home__hero .jp-home__eyebrow {
   margin-bottom: 12px;
}
.jp-home__hero h1 {
   margin-bottom: var(--jp-home-space-sm);
   font-size: max(var(--jp-home-fs-h1), 36px);
   text-wrap: balance; /* Umbruch "Camper bauen. / Freiheit leben." ohne <br> */
   /* Zeilenbreite in em (schmaler als der Gesamttext ~13,6em, breiter als "Freiheit leben." ~7em): erzwingt den Umbruch auch bei 575-740px, wo der Text sonst in den 540px-Textblock passt */
   max-width: 10em;
}
.jp-home__hero .jp-home__hero-text { /* Spezifität > ".jp-home p" */
   margin-bottom: 28px;
   font-size: var(--jp-home-fs-body);
   line-height: 1.6;
}
.jp-home__hero .jp-home__actions {
   justify-content: flex-start;
}

/* Heller Button auf dunklem Grund: eigene Klasse, weil .button-primary/-secondary (front.css) mit !important gesetzt sind.
   Selektor: .jp-home .jp-home__btn--inverse, Seite: nur "Homepage (Neu)". */
.jp-home .jp-home__btn--inverse {
   padding: 15px 40px;
   border: 1px solid var(--jp-home-bg);
   background-color: var(--jp-home-bg);
   color: var(--jp-home-strong);
}
.jp-home .jp-home__btn--inverse:hover {
   background-color: transparent;
   color: var(--jp-home-bg);
}
.jp-home .jp-home__btn--inverse:focus-visible {
   outline: 2px solid var(--jp-home-bg);
   outline-offset: 3px;
}

/* Sektionskopf */
.jp-home__head {
   max-width: var(--jp-home-prose);
   margin: 0 auto var(--jp-home-head-gap);
   text-align: center;
}
.jp-home__eyebrow {
   margin-bottom: var(--jp-home-space-xs);
   font-size: var(--jp-home-fs-small);
   letter-spacing: .08em;
   text-transform: uppercase;
}
/* Eyebrow im Sektionskopf (optional, AP5): wie der Untertitel dunkler als die globale Absatzfarbe (#777 = 4,48:1 erreicht AA nicht); ohne Eyebrow ändert sich nichts */
.jp-home .jp-home__head .jp-home__eyebrow {
   color: color-mix(in srgb, var(--jp-home-strong) 75%, #fff);
}

/* Grid: Spalten je Breakpoint über --jp-home-cols / -cols-md / -cols-sm steuerbar */
.jp-home__grid {
   display: grid;
   grid-template-columns: repeat(var(--jp-home-cols, 4), minmax(0, 1fr));
   gap: var(--jp-home-grid-gap);
}

/* Buttons: nur Anordnung, Aussehen kommt von .button / .button-primary / .button-secondary */
.jp-home__actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--jp-home-space-sm);
}

/* USP-Kacheln (Sektion 3): H2 + vier Kacheln (hellgrau, 8 px Radius, H3 + Balken, freigestelltes quadratisches Bild unten bündig).
   Bildfläche 4:3 (AP7b, Variante B): das quadratische Bild steht darin mit 80 % Breite und 95 % Höhe (contain, unten bündig), oben und seitlich Freiraum.
   Spalten: >= 768px 4 | 375-767px 2 | <= 374px 1; Gap über --jp-home-grid-gap (24/20/16 px). */
.jp-home__section--usp {
   --jp-usp-radius:    8px;
   --jp-usp-pad-top:   24px;
   --jp-usp-pad-x:     16px;
   --jp-usp-img-ratio: 4 / 3; /* flachere Bildfläche (AP7b); das quadratische Freisteller-Bild liegt darin kleiner (contain), siehe .jp-home__usp-media img */
   --jp-usp-img-w:     80%;   /* Bildbreite in der Fläche (Freiraum je Seite 10 %) */
   --jp-usp-img-h:     95%;   /* Bildhöhe in der Fläche (oben Freiraum), Bild unten bündig */
   --jp-usp-bar-w:     40px;
   --jp-usp-bar-h:     3px;
   padding-top: 72px; /* erster Block nach dem Hero: kompakter als der Standardabstand */
}
.jp-home__section--usp .jp-home__head {
   max-width: none; /* Überschrift über dem ganzen Raster, auf Desktop einzeilig */
}
.jp-home__section--usp .jp-home__head h2 {
   margin-bottom: 0;
   text-wrap: balance;
}
.jp-home__usp-grid {
   --jp-home-cols-sm: 2;
   margin: 0;
   padding: 0;
   list-style: none;
}
.jp-home__usp {
   min-width: 0;
   margin: 0;
   padding: 0;
}
.jp-home__usp-card {
   display: flex;
   flex-direction: column;
   height: 100%;
   padding-top: var(--jp-usp-pad-top);
   overflow: hidden;
   border-radius: var(--jp-usp-radius);
   background-color: var(--jp-home-bg-tone);
   color: var(--jp-home-strong);
   text-decoration: none;
}
.jp-home__usp-head {
   padding-inline: var(--jp-usp-pad-x);
   font-size: clamp(16px, .9vw + 11px, 20px);
   line-height: 1.25;
   text-align: center;
}
/* Titelbereich: immer 2 Zeilen hoch, damit alle Balken einer Reihe auf gleicher Höhe stehen */
.jp-home .jp-home__usp-title {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 2.5em;
   margin: 0;
   font-size: inherit;
   line-height: inherit;
   text-align: center;
   text-wrap: balance;
}
.jp-home__usp-head::after {
   content: "";
   display: block;
   width: var(--jp-usp-bar-w);
   height: var(--jp-usp-bar-h);
   margin: 12px auto 0;
   background-color: var(--jp-home-dark);
}
.jp-home__usp-media {
   position: relative;
   flex: 0 0 auto;
   margin-top: 12px;
   aspect-ratio: var(--jp-usp-img-ratio);
}
/* Das Bild liegt absolut in der Fläche: seine Eigenhöhe darf die 4:3-Fläche nicht aufweiten (min-height:auto des aspect-ratio-Kastens) */
.jp-home .jp-home__usp-media img {
   position: absolute;
   bottom: 0;
   left: calc((100% - var(--jp-usp-img-w)) / 2);
   display: block;
   width: var(--jp-usp-img-w);
   height: var(--jp-usp-img-h);
   max-width: none;
   object-fit: contain;
   object-position: center bottom;
}
/* Verlinkte Kachel: dezenter Hover, sichtbarer Tastaturfokus */
.jp-home__usp-card--link {
   transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
   .jp-home__usp-card--link:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgb(0 0 0 / .1);
   }
}
@media (prefers-reduced-motion: reduce) {
   .jp-home__usp-card--link {
      transition: none;
   }
   .jp-home__usp-card--link:hover {
      transform: none;
   }
}
.jp-home__usp-card--link:focus-visible {
   outline: 2px solid var(--jp-home-strong);
   outline-offset: 3px;
}
@media (max-width: 991px) {
   .jp-home__section--usp {
      padding-top: 56px;
   }
}
@media (max-width: 550px) {
   .jp-home__section--usp {
      padding-top: 40px;
      --jp-usp-pad-top: 20px;
      --jp-usp-pad-x:   12px;
   }
}
/* Raster: <= 374 px eine Spalte, 375-767 px zwei, ab 768 px vier (Tablet 768-991 px überschreibt die Standard-Tablet-Regel --jp-home-cols-md: 2) */
@media (max-width: 374px) {
   .jp-home__usp-grid {
      --jp-home-cols-sm: 1;
   }
}
@media (min-width: 768px) and (max-width: 991px) {
   .jp-home__usp-grid {
      --jp-home-cols-md: 4;
   }
}

/* Produktkategorien (Sektion 4): H2 + sechs vollständig klickbare Kacheln (Icon 56 px + Name, hellgrau, 8 px Radius).
   Spalten: >= 992px 6 | 551-991px 3 | <= 550px 2; Gap 24 px (992-1199px: 16 px, sonst Kachel < 150 px), Tablet 20, Phone 16 (vorhandene Grid-Logik).
   Abstand zur USP-Sektion: Standard-Sektionsabstand (Regel "Sektion + Sektion"), kein Sonderabstand. Icons: <img>, Austausch = Datei ersetzen. */
.jp-home__section--categories {
   --jp-cat-icon:    56px;
   --jp-cat-radius:  8px;
   --jp-cat-pad-y:   24px;
   --jp-cat-pad-x:   12px;
}
.jp-home__section--categories .jp-home__head {
   max-width: none;
}
.jp-home__section--categories .jp-home__head h2 {
   margin-bottom: 0;
   text-wrap: balance;
}
.jp-home__cat-grid {
   --jp-home-cols:    6;
   --jp-home-cols-md: 3;
   --jp-home-cols-sm: 2;
   margin: 0;
   padding: 0;
   list-style: none;
}
.jp-home__cat {
   min-width: 0;
   margin: 0;
   padding: 0;
}
.jp-home__cat-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   box-sizing: border-box;
   height: 100%;
   padding: var(--jp-cat-pad-y) var(--jp-cat-pad-x);
   border-radius: var(--jp-cat-radius);
   background-color: var(--jp-home-bg-tone);
   color: var(--jp-home-strong);
   text-align: center;
   text-decoration: none;
   transition: transform .2s ease, box-shadow .2s ease;
}
.jp-home .jp-home__cat-icon {
   display: block;
   flex: 0 0 auto;
   width: var(--jp-cat-icon);
   height: var(--jp-cat-icon);
   max-width: none;
   object-fit: contain;
}
/* Name: bis zu zwei Zeilen reserviert, damit Icons und Namen einer Reihe auf gleicher Höhe stehen; nichts wird abgeschnitten */
.jp-home__cat-name {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 2.5em;
   font-size: clamp(15px, .5vw + 12px, 17px);
   font-weight: var(--jp-home-fw-heading);
   line-height: 1.25;
   overflow-wrap: break-word;
   text-wrap: balance;
}
@media (hover: hover) {
   .jp-home__cat-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgb(0 0 0 / .1);
   }
}
@media (prefers-reduced-motion: reduce) {
   .jp-home__cat-card {
      transition: none;
   }
   .jp-home__cat-card:hover {
      transform: none;
   }
}
.jp-home__cat-card:focus-visible {
   outline: 2px solid var(--jp-home-strong);
   outline-offset: 3px;
}
@media (min-width: 992px) and (max-width: 1199px) {
   .jp-home__cat-grid {
      gap: 16px;
   }
}
@media (max-width: 550px) {
   .jp-home__section--categories {
      --jp-cat-pad-y: 20px;
      --jp-cat-pad-x: 8px;
   }
}

/* Produkt-Tabs (Sektion 5): H2 + Tabs NEU / BELIEBT / BESTSELLER, je Panel ein Slick-Karussell mit den Savoy-Produktkarten.
   Karten: >= 992px 4 | 551-991px 3 | <= 550px 2 (Slick-Breakpoints in assets/js/home-products.js); Gutter 24/20/16 px über Slide-Padding.
   Vor der Slick-Initialisierung zeigt die Spur dasselbe Raster (Flex, gleiche Spaltenbreite) -> kein Layoutsprung beim Init.
   Aktionszeile der Karte (Quick View/Warenkorb) ist hier ausgeblendet; Wishlist/Quick View werden nicht ergänzt. */
.jp-home__section--products {
   --jp-prod-gap:   24px;
   --jp-prod-cols:  4;
   --jp-prod-arrow: 40px;
   --jp-prod-rating-h: 26px; /* Höhe der WooCommerce-Bewertungszeile (.star-rating), gemessen; wird auch ohne Bewertung reserviert */
}
.jp-home__section--products .jp-home__head {
   max-width: none;
   margin-bottom: 24px;
}
.jp-home__section--products .jp-home__head h2 {
   margin-bottom: 0;
   text-wrap: balance;
}
.jp-home__tabs {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 4px 32px;
   margin-bottom: var(--jp-home-head-gap);
}
.jp-home .jp-home__tab {
   box-sizing: border-box;
   min-height: 44px;
   margin: 0;
   padding: 8px 4px;
   border: 0;
   border-bottom: 3px solid transparent;
   border-radius: 0;
   background: none;
   color: color-mix(in srgb, var(--jp-home-strong) 75%, #fff); /* inaktiv: Kontrast >= 4,5:1 (--jp-home-text wäre 4,48:1) */
   font: inherit;
   font-weight: var(--jp-home-fw-heading);
   letter-spacing: .08em;
   line-height: 1.2;
   text-transform: uppercase;
   cursor: pointer;
   transition: color .2s ease, border-color .2s ease;
}
.jp-home .jp-home__tab[aria-selected="true"] {
   border-bottom-color: var(--jp-home-dark);
   color: var(--jp-home-strong);
}
@media (hover: hover) {
   .jp-home .jp-home__tab:hover {
      color: var(--jp-home-strong);
   }
}
.jp-home .jp-home__tab:focus-visible {
   outline: 2px solid var(--jp-home-strong);
   outline-offset: 3px;
}
.jp-home__tabpanel[hidden] {
   display: none;
}
.jp-home__products {
   position: relative;
   margin-inline: calc(var(--jp-prod-gap) / -2);
}
/* Spur vor und nach der Initialisierung */
.jp-home__products-track {
   display: flex;
   margin: 0;
   padding: 0;
   overflow: hidden;
   list-style: none;
}
.jp-home__products-track li.product:not(.slick-slide) {
   flex: 0 0 calc(100% / var(--jp-prod-cols));
   float: none;
   clear: none;
   width: auto;
}
.jp-home__products-track li.product {
   box-sizing: border-box;
   min-width: 0;
   margin: 0;
   padding: 0 calc(var(--jp-prod-gap) / 2);
}
.jp-home__products-track.slick-initialized {
   display: block;
   overflow: visible;
}
.jp-home__products-track .slick-list {
   overflow: hidden;
}
.jp-home__products-track .slick-track {
   display: flex;
   margin: 0;
}
.jp-home__products-track .slick-slide {
   float: none;
   height: auto;
   clear: none;
}
.jp-home .jp-home__products .nm-shop-loop-actions {
   display: none;
}
/* Lange Titel: höchstens drei Zeilen, Höhe reserviert */
.jp-home .jp-home__products .woocommerce-loop-product__title {
   min-height: 3.9em;
   margin-bottom: 4px;
   font-size: clamp(14px, .4vw + 12px, 16px);
   line-height: 1.3;
   overflow-wrap: break-word;
   hyphens: auto;
}
.jp-home .jp-home__products .nm-shop-loop-title-link {
   display: -webkit-box;
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
}
/* Titel / Bewertung / Preis auf festen Zeilen: die Bewertungszeile bleibt auch ohne Bewertung reserviert (nur Leerraum, keine Platzhalter),
   damit alle Preise einer Reihe auf gleicher Höhe stehen; die Titelhöhe ist oben auf drei Zeilen fixiert. Nur Karten dieser Sektion. */
.jp-home .jp-home__products .nm-shop-loop-title-price {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-template-rows: auto var(--jp-prod-rating-h) auto;
}
.jp-home .jp-home__products .woocommerce-loop-product__title {
   grid-row: 1;
}
.jp-home .jp-home__products .star-rating {
   grid-row: 2;
   align-self: start;
}
.jp-home .jp-home__products .price {
   grid-row: 3;
}

/* Pfeile: dezente runde Buttons auf den Bildrändern, am Anfang/Ende abgeblendet (aria-disabled) */
.jp-home .jp-home__arrow {
   position: absolute;
   top: 36%;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   width: var(--jp-prod-arrow);
   height: var(--jp-prod-arrow);
   margin: calc(var(--jp-prod-arrow) / -2) 0 0;
   padding: 0;
   border: 1px solid rgb(0 0 0 / .15);
   border-radius: 50%;
   background-color: var(--jp-home-bg);
   box-shadow: 0 2px 8px rgb(0 0 0 / .12);
   color: var(--jp-home-strong);
   cursor: pointer;
   transition: opacity .2s ease, background-color .2s ease;
}
.jp-home .jp-home__arrow--prev {
   left: calc(var(--jp-prod-gap) / 2 + 8px);
}
.jp-home .jp-home__arrow--prev svg {
   transform: rotate(180deg);
}
.jp-home .jp-home__arrow--next {
   right: calc(var(--jp-prod-gap) / 2 + 8px);
}
.jp-home .jp-home__arrow.slick-disabled {
   opacity: .35;
   cursor: default;
}
.jp-home .jp-home__arrow.slick-hidden {
   display: none;
}
@media (hover: hover) {
   .jp-home .jp-home__arrow:not(.slick-disabled):hover {
      background-color: var(--jp-home-bg-tone);
   }
}
.jp-home .jp-home__arrow:focus-visible {
   outline: 2px solid var(--jp-home-strong);
   outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
   .jp-home .jp-home__tab,
   .jp-home .jp-home__arrow {
      transition: none;
   }
}
@media (max-width: 991px) {
   .jp-home__section--products {
      --jp-prod-gap:  20px;
      --jp-prod-cols: 3;
   }
}
@media (max-width: 550px) {
   .jp-home__section--products {
      --jp-prod-gap:   16px;
      --jp-prod-cols:  2;
      --jp-prod-arrow: 36px;
   }
   .jp-home__tabs {
      gap: 4px 16px;
   }
   .jp-home .jp-home__tab {
      font-size: 15px;
      letter-spacing: .04em;
   }
}

/* Fokusprodukt (Sektion 6): eine durchgehende Bild-Text-Box (vollbreit, kantenbündig). >= 992px: Bild links 55 % | Text rechts 45 %, Höhe richtet sich
   nach dem Text (Ziel ca. 360-400px bei 1440px, wächst bei Bedarf); 551-991px: Bild oben 16:9; <= 550px: Bild oben 4:3, Buttons untereinander.
   Bild: object-fit cover, vertikale Fokuslage über --jp-focus-y (ACF). Hintergrund: Token --jp-home-bg-tone (kein Beige). Kein Slider/Tab/JS.
   Abstand: Band ohne Innenabstand, Abstand nach unten über margin-bottom (die Folgesektion erhält sonst keinen Top-Abstand). */
.jp-home__section--focus {
   --jp-focus-y:     40%;
   --jp-focus-pad-x: clamp(24px, 3.4vw, 56px);
   --jp-focus-pad-y: 32px;
   padding-block: 0;
   margin-bottom: var(--jp-home-section-space);
}
.jp-home__focus {
   display: grid;
   grid-template-columns: 55fr 45fr;
   background-color: var(--jp-home-bg-tone);
}
.jp-home__focus-media {
   position: relative;
   min-width: 0;
   overflow: hidden;
}
.jp-home__section--focus-no-image .jp-home__focus-media {
   background-color: var(--jp-home-dark);
}
.jp-home .jp-home__focus-media img {
   position: absolute;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
   max-width: none;
   object-fit: cover;
   object-position: 50% var(--jp-focus-y);
}
.jp-home__focus-body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-width: 0;
   padding: var(--jp-focus-pad-y) var(--jp-focus-pad-x);
}
/* Eyebrow/Text: --jp-home-text (#777) hätte auf dem hellgrauen Grund nur ca. 3,9:1 -> abgedunkelt (>= 4,5:1) */
.jp-home__focus .jp-home__eyebrow {
   margin-bottom: 6px;
   color: color-mix(in srgb, var(--jp-home-strong) 75%, #fff);
}
.jp-home .jp-home__focus h2 {
   margin: 0 0 6px;
   font-size: clamp(26px, 1.4vw + 16px, 34px);
}
.jp-home__focus .jp-home__focus-sub {
   margin: 0 0 10px;
   color: var(--jp-home-strong);
   font-size: clamp(16px, .4vw + 12px, 18px);
   font-weight: 700;
   line-height: 1.3;
}
.jp-home__focus .jp-home__focus-text {
   margin: 0 0 14px;
   color: color-mix(in srgb, var(--jp-home-strong) 75%, #fff);
   font-size: 15px;
   line-height: 1.55;
}
.jp-home__focus-list {
   margin: 0 0 18px;
   padding: 0;
   list-style: none;
}
.jp-home__focus-list li {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0;
   padding: 0;
   color: var(--jp-home-strong);
   line-height: 1.7;
}
.jp-home__focus-check {
   flex: 0 0 auto;
   color: var(--jp-home-dark);
}
.jp-home__focus .jp-home__actions {
   justify-content: flex-start;
   gap: 12px;
}
.jp-home__focus .button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   gap: 8px;
   min-width: 150px;
   min-height: 48px;
   margin: 0;
   text-align: center;
}
.jp-home__focus .button:focus-visible {
   outline: 2px solid var(--jp-home-strong);
   outline-offset: 3px;
}
@media (max-width: 991px) {
   .jp-home__section--focus {
      --jp-focus-pad-x: 32px;
      --jp-focus-pad-y: 36px;
   }
   .jp-home__focus {
      grid-template-columns: minmax(0, 1fr);
   }
   .jp-home__focus-media {
      aspect-ratio: 16 / 9;
   }
}
@media (max-width: 550px) {
   .jp-home__section--focus {
      --jp-focus-pad-x: 24px;
      --jp-focus-pad-y: 32px;
   }
   .jp-home__focus-media {
      aspect-ratio: 4 / 3;
   }
   .jp-home__focus .jp-home__actions {
      flex-direction: column;
      align-items: stretch;
   }
}

/* Vorteile (Sektion 7): H2 + vier gleichwertige Einträge auf weißem Grund (kein Kachelhintergrund): Icon 40 px, H3 mit Link (nur der Titel), Beschreibung.
   Spalten: >= 992px 4 mit drei 1-px-Trennlinien | 551-991px 2 ohne Linien | <= 550px 1, Icon links, Text rechts (vorhandene Grid-Logik über die Variablen).
   Abstand: Standard-Sektionsabstand; die Regel "Sektion + Sektion" setzt den Top-Abstand auf 0, der Abstand zum Fokusband entsteht durch dessen margin-bottom.
   Icons: <img>, Austausch = Datei gleichen Namens ersetzen. Titelgröße lokal 17-20 px (die globale .jp-home h3-Größe ist für schmale Spalten zu groß).
   Kein JavaScript, keine Animation. */
.jp-home__section--benefits {
   --jp-benefit-icon:  40px;
   --jp-benefit-pad-x: clamp(16px, 2.2vw, 32px);
   --jp-benefit-title: clamp(17px, .4vw + 14px, 20px);
}
.jp-home__section--benefits .jp-home__head {
   max-width: none;
}
.jp-home__section--benefits .jp-home__head h2 {
   margin-bottom: 0;
   text-wrap: balance;
}
.jp-home__benefits {
   --jp-home-cols:    4;
   --jp-home-cols-md: 2;
   --jp-home-cols-sm: 1;
   row-gap: 40px;
   margin: 0;
   padding: 0;
   list-style: none;
}
.jp-home .jp-home__benefits > .jp-home__benefit {
   display: flex;
   flex-direction: column;
   align-items: center;
   min-width: 0;
   margin: 0;
   padding: 0 var(--jp-benefit-pad-x);
   list-style: none;
   text-align: center;
}
.jp-home .jp-home__benefit-icon {
   display: block;
   flex: 0 0 auto;
   width: var(--jp-benefit-icon);
   height: var(--jp-benefit-icon);
   max-width: none;
   margin: 0 auto 16px;
   object-fit: contain;
}
.jp-home__benefit-body {
   min-width: 0;
}
.jp-home .jp-home__benefit-title {
   margin: 0 0 8px;
   font-size: var(--jp-benefit-title);
   line-height: 1.25;
   overflow-wrap: break-word;
   text-wrap: balance;
}
/* Link nur am Titel; Klickfläche >= 44 px über Padding, durch negativen Margin bleibt das Layout unverändert */
.jp-home .jp-home__benefit-title a {
   display: inline-block;
   padding-block: 12px;
   margin-block: -12px;
   color: inherit;
   text-decoration: none;
}
.jp-home .jp-home__benefit-title a:hover,
.jp-home .jp-home__benefit-title a:focus-visible {
   color: inherit;
   text-decoration: underline;
   text-underline-offset: 3px;
}
.jp-home .jp-home__benefit-title a:focus-visible {
   outline: 2px solid var(--jp-home-strong);
   outline-offset: 3px;
}
.jp-home .jp-home__benefit-text {
   margin: 0;
   color: color-mix(in srgb, var(--jp-home-strong) 75%, #fff); /* Kontrast >= 4,5:1 (--jp-home-text wäre 4,48:1 auf Weiß) */
   overflow-wrap: break-word;
   text-wrap: pretty;
}
@media (min-width: 992px) {
   .jp-home__benefits {
      column-gap: 0;
   }
   .jp-home .jp-home__benefits > .jp-home__benefit + .jp-home__benefit {
      border-left: 1px solid var(--jp-home-line);
   }
   /* Titel: bis zu zwei Zeilen reserviert, damit alle Beschreibungen einer Reihe auf gleicher Höhe beginnen */
   .jp-home .jp-home__benefit-title {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 2.5em;
   }
}
@media (max-width: 550px) {
   .jp-home__benefits {
      row-gap: 24px;
   }
   .jp-home .jp-home__benefits > .jp-home__benefit {
      display: grid;
      grid-template-columns: var(--jp-benefit-icon) minmax(0, 1fr);
      column-gap: 16px;
      align-items: start;
      padding: 0;
      text-align: left;
   }
   .jp-home .jp-home__benefit-icon {
      grid-column: 1;
      grid-row: 1;
      margin: 0;
   }
   .jp-home__benefit-body {
      grid-column: 2;
      grid-row: 1;
   }
}

/* Kundenbewertungen (Sektion 8, Plan 11): H2 + höchstens drei statische Karten (hellgrau, 8 px Radius, kein Schatten). Aufbau je Karte von oben:
   Zeile aus rundem Produktfoto (56 px, verlinkt) + Sternen (vertikal zum Foto zentriert) -> Produktname (fett, verlinkt, darf umbrechen) -> Bewertungstext
   als kursives Zitat (bei Kürzung folgt "Ganze Bewertung" im selben Textfluss, nie mitten im Schriftzug umbrochen) -> unten Kundenname + "Verifizierter Kauf".
   Spalten: >= 992px 3 | <= 991px 1 (Liste max. 720 px, zentriert). Name/Verifizierung stehen unten bündig (Karten gleich hoch, margin-top: auto).
   Eigene Sterne (SVG), da front.css die .star-rating-Regeln mit !important setzt. Text nie per CSS abgeschnitten (Kürzung nur im PHP, wortgenau).
   Abstand: Standard-Sektionsabstand, "Sektion + Sektion" setzt den Top-Abstand auf 0. Kein JavaScript, keine Animation. */
.jp-home__section--reviews {
   --jp-review-photo: 56px;
   --jp-review-pad:   clamp(20px, 2vw, 32px);
   --jp-review-star:  color-mix(in srgb, var(--jp-home-accent) 72%, #000); /* Shop-Sternfarbe (Orange), abgedunkelt: >= 3:1 auf dem Kartengrau */
}
.jp-home__section--reviews .jp-home__head {
   max-width: none;
}
.jp-home__section--reviews .jp-home__head h2 {
   margin-bottom: 0;
   text-wrap: balance;
}
.jp-home .jp-home__sub {
   max-width: var(--jp-home-prose);
   margin: 12px auto 0;
   color: color-mix(in srgb, var(--jp-home-strong) 75%, #fff);
}
.jp-home__reviews {
   --jp-home-cols:    3;
   --jp-home-cols-md: 1;
   --jp-home-cols-sm: 1;
   margin: 0;
   padding: 0;
   list-style: none;
}
.jp-home .jp-home__reviews > .jp-home__review {
   display: flex;
   min-width: 0;
   margin: 0;
   padding: 0;
   list-style: none;
}
.jp-home .jp-home__review-card {
   display: flex;
   flex-direction: column;
   gap: 14px;
   width: 100%;
   min-width: 0;
   margin: 0;
   padding: var(--jp-review-pad);
   background-color: var(--jp-home-bg-tone);
   border-radius: 8px;
}
/* Obere Zeile: Produktfoto links, Sterne rechts daneben (vertikal zentriert) */
.jp-home .jp-home__review-top {
   display: flex;
   align-items: center;
   gap: 16px;
}
.jp-home .jp-home__review-photolink {
   display: block;
   flex: 0 0 auto;
   width: var(--jp-review-photo);
   height: var(--jp-review-photo);
   border-radius: 50%;
   line-height: 0;
   text-decoration: none;
}
.jp-home .jp-home__review-photolink:focus-visible,
.jp-home .jp-home__review-product:focus-visible,
.jp-home .jp-home__review-more:focus-visible {
   outline: 2px solid var(--jp-home-strong);
   outline-offset: 3px;
}
.jp-home .jp-home__review-photo {
   display: block;
   width: var(--jp-review-photo);
   height: var(--jp-review-photo);
   max-width: none;
   border-radius: 50%;
   object-fit: cover;
   background-color: #fff;
}
.jp-home .jp-home__review-stars {
   display: flex;
   gap: 2px;
   margin: 0;
   color: var(--jp-review-star);
   line-height: 1;
}
.jp-home .jp-home__star {
   display: block;
   flex: 0 0 auto;
   width: 20px;
   height: 20px;
   fill: currentColor;
   stroke: currentColor;
   stroke-width: 1;
   stroke-linejoin: round;
}
.jp-home .jp-home__star--empty {
   fill: none;
}
/* Produktname: fett, linksbündig, verlinkt, darf umbrechen. Klickfläche >= 44 px über Padding (negativer Margin hält das Layout) */
.jp-home .jp-home__review-productline {
   margin: 0;
   font-size: max(17px, var(--jp-home-fs-body));
   font-weight: var(--jp-home-fw-heading);
   line-height: 1.35;
   text-align: left;
}
.jp-home .jp-home__review-product {
   display: inline-block;
   padding-block: 13px;
   margin-block: -13px;
   color: var(--jp-home-strong);
   font-weight: inherit;
   overflow-wrap: break-word;
   text-decoration: none;
}
.jp-home .jp-home__review-product:hover,
.jp-home .jp-home__review-product:focus-visible,
.jp-home .jp-home__review-more:hover,
.jp-home .jp-home__review-more:focus-visible {
   color: var(--jp-home-strong);
   text-decoration: underline;
   text-underline-offset: 3px;
}
/* Zitat: kursiv; Savoy-Blockquote-Stile (Rand, Einzug, Schrift) neutralisiert */
.jp-home .jp-home__review-quote {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: var(--jp-home-fs-body);
   line-height: 1.6;
}
.jp-home .jp-home__review-quote p {
   margin: 0;
   color: color-mix(in srgb, var(--jp-home-strong) 85%, #fff);
   font-style: italic;
   overflow-wrap: break-word;
   text-wrap: pretty;
}
.jp-home .jp-home__review-text::before {
   content: "\201E";
}
.jp-home .jp-home__review-text::after {
   content: "\201C";
}
/* "Ganze Bewertung": im Textfluss hinter dem Zitat; Linktext bricht nie um, der ganze Link rutscht bei Platzmangel in die nächste Zeile.
   Klickfläche >= 44 px über Padding (inline-block + negativer Margin: die Zeilenhöhe bleibt unverändert) */
.jp-home .jp-home__review-more {
   display: inline-block;
   padding-block: 12px;
   margin-block: -12px;
   color: var(--jp-home-strong);
   font-style: normal;
   text-decoration: none;
   white-space: nowrap;
}
/* Fußzeile: Kundenname (fett) und darunter "Verifizierter Kauf" (kleiner und heller, >= 4,5:1); steht immer unten in der Karte */
.jp-home .jp-home__review-meta {
   display: flex;
   flex-direction: column;
   gap: 2px;
   margin: auto 0 0;
   padding-top: 14px;
   border-top: 1px solid color-mix(in srgb, var(--jp-home-strong) 14%, transparent);
   text-align: left;
}
.jp-home .jp-home__review-name {
   color: var(--jp-home-strong);
   font-size: var(--jp-home-fs-body);
   font-weight: var(--jp-home-fw-heading);
   line-height: 1.4;
}
.jp-home .jp-home__review-verified {
   color: color-mix(in srgb, var(--jp-home-strong) 70%, #fff);
   font-size: 13px;
   line-height: 1.4;
}
@media (max-width: 991px) {
   .jp-home__reviews {
      max-width: 720px;
      margin-inline: auto;
   }
}
@media (max-width: 550px) {
   .jp-home .jp-home__review-card {
      padding: 20px;
   }
}

/* Camper-Ausbau (Sektion 9, Plan 12): eine durchgehende Text-Bild-Fläche (vollbreit, kantenbündig). >= 992px: Text links ca. 45 % | Teamfoto rechts ca. 55 %,
   Höhe richtet sich nach dem Text; darunter einspaltig: Bild oben (551-991px 16:9 = Originalverhältnis, <= 550px 3:2), Text darunter linksbündig.
   DOM-Reihenfolge: Bild vor Text (sinnvoll für "Bild oben"); die Desktop-Anordnung erfolgt per Grid-Platzierung, nicht per order.
   Bild: object-fit cover, vertikale Fokuslage über --jp-camper-y (ACF), horizontal mittig. Ohne Bild: dunkle Fläche. Hintergrund: --jp-home-bg-tone (kein Beige).
   Abstand: Band ohne Innenabstand, Abstand nach unten über margin-bottom (die Folgesektion erhält sonst keinen Top-Abstand). Kein Slider/Tab/JS. */
.jp-home__section--camper {
   --jp-camper-y:     30%;
   --jp-camper-pad-x: clamp(24px, 3.4vw, 56px);
   --jp-camper-pad-y: 32px;
   padding-block: 0;
   margin-bottom: var(--jp-home-section-space);
}
.jp-home__camper {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   background-color: var(--jp-home-bg-tone);
}
.jp-home__camper-media {
   position: relative;
   min-width: 0;
   overflow: hidden;
   aspect-ratio: 16 / 9;
}
.jp-home__section--camper-no-image .jp-home__camper-media {
   background-color: var(--jp-home-dark);
}
.jp-home .jp-home__camper-media img {
   position: absolute;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
   max-width: none;
   object-fit: cover;
   object-position: 50% var(--jp-camper-y);
}
.jp-home__camper-body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-width: 0;
   padding: 36px 32px;
}
/* Eyebrow/Text: --jp-home-text (#777) hätte auf dem hellgrauen Grund nur ca. 3,9:1 -> abgedunkelt (>= 4,5:1) */
.jp-home__camper .jp-home__eyebrow {
   margin-bottom: 6px;
   color: color-mix(in srgb, var(--jp-home-strong) 75%, #fff);
}
.jp-home .jp-home__camper h2 {
   margin: 0 0 6px;
   font-size: clamp(26px, 1.4vw + 16px, 34px);
}
.jp-home__camper .jp-home__camper-sub {
   margin: 0 0 10px;
   color: var(--jp-home-strong);
   font-size: clamp(16px, .4vw + 12px, 18px);
   font-weight: 700;
   line-height: 1.3;
}
.jp-home__camper .jp-home__camper-text {
   margin: 0 0 14px;
   color: color-mix(in srgb, var(--jp-home-strong) 75%, #fff);
   font-size: 15px;
   line-height: 1.55;
}
.jp-home__camper-list {
   margin: 0 0 18px;
   padding: 0;
   list-style: none;
}
.jp-home__camper-list li {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0;
   padding: 0;
   color: var(--jp-home-strong);
   line-height: 1.7;
}
.jp-home__camper-check {
   flex: 0 0 auto;
   color: var(--jp-home-dark);
}
.jp-home__camper .jp-home__actions {
   justify-content: flex-start;
}
.jp-home__camper .button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   gap: 8px;
   min-width: 150px;
   min-height: 48px;
   margin: 0;
   text-align: center;
}
.jp-home__camper .button:focus-visible {
   outline: 2px solid var(--jp-home-strong);
   outline-offset: 3px;
}
@media (min-width: 992px) {
   .jp-home__camper {
      grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
      /* bei sehr breiten Viewports nicht flacher als ca. 2,1:1 (Bildfläche = 55vw), damit Köpfe und Werkzeuge im Foto sichtbar bleiben */
      min-height: calc(55vw / 2.1);
   }
   /* Anordnung per Grid-Platzierung: Text links, Foto rechts (die DOM-Reihenfolge Bild -> Text bleibt unverändert) */
   .jp-home__camper-body {
      grid-column: 1;
      grid-row: 1;
      padding: var(--jp-camper-pad-y) var(--jp-camper-pad-x);
      /* Textkante bündig zur Kante des Standardcontainers (bei breiten Viewports nicht am Bildschirmrand) */
      padding-left: max(var(--jp-camper-pad-x), calc((100vw - var(--jp-home-container)) / 2 + var(--jp-home-gutter)));
   }
   .jp-home__camper-media {
      grid-column: 2;
      grid-row: 1;
      aspect-ratio: auto;
   }
}
@media (max-width: 550px) {
   .jp-home__camper-media {
      aspect-ratio: 3 / 2;
   }
   .jp-home__camper-body {
      padding: 32px 24px;
   }
   .jp-home__camper .jp-home__actions {
      flex-direction: column;
      align-items: stretch;
   }
}

/* Sektion 10: Newsletter-Anmeldung (Plan docs/plans/13-newsletter.md)
   Zentrierter Block auf weißem Grund (ohne Bild): keine Hintergrundfarbe, kein Verlauf, keine Kachel. Eyebrow, H2, Beschreibung, Forminator-Formular
   (Design "None"; Vorname optional, E-Mail Pflicht, Button: unter 992 px untereinander, ab 992 px in einer Zeile), darunter der Datenschutzhinweis. Kein eigenes JS.
   AP8b: optionales Hintergrundbild (ACF jp_newsletter_image) über die Zustandsklasse .jp-home__section--newsletter-image, siehe Block am Ende dieser Sektion.
   Forminator-Markup (.forminator-*) wird nur innerhalb von .jp-home__newsletter-form gestaltet. Abstand: normale Sektion (Padding oben entfällt nach der
   Camperausbau-Sektion über die Regel "Sektion + Sektion", der Abstand kommt dort aus margin-bottom). */
.jp-home__section--newsletter .jp-home__newsletter {
   --jp-news-gap:   20px;
   --jp-news-field: 48px;
   --jp-news-edge:  color-mix(in srgb, var(--jp-home-strong) 55%, #fff);
   max-width: 520px;
   margin-inline: auto;
   text-align: center;
}
.jp-home__section--newsletter .jp-home__newsletter .jp-home__eyebrow {
   margin-bottom: 6px;
   color: color-mix(in srgb, var(--jp-home-strong) 75%, #fff);
}
.jp-home .jp-home__section--newsletter .jp-home__newsletter h2 {
   margin: 0 0 12px;
   text-wrap: balance;
}
.jp-home__section--newsletter .jp-home__newsletter .jp-home__newsletter-text {
   margin: 0 0 32px;
   color: color-mix(in srgb, var(--jp-home-strong) 75%, #fff);
   font-size: 16px;
   line-height: 1.55;
}
/* Formularbereich: Höhe vorab reservieren (Forminator blendet das Formular erst per JS ein -> kein Layoutsprung) */
.jp-home__section--newsletter .jp-home__newsletter-form {
   min-height: 236px;
   text-align: left;
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-row {
   margin: 0 0 var(--jp-news-gap);
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-row-last {
   margin-bottom: 0;
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-col,
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-field {
   width: 100%;
   max-width: 100%;
   float: none;
   padding: 0;
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-label {
   display: block;
   margin: 0 0 6px;
   color: var(--jp-home-strong);
   font-size: 15px;
   font-weight: 700;
   line-height: 1.3;
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-required {
   color: inherit;
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-input {
   display: block;
   box-sizing: border-box;
   width: 100%;
   max-width: 100%;
   min-height: var(--jp-news-field);
   margin: 0;
   padding: 10px 14px;
   border: 1px solid var(--jp-news-edge);
   border-radius: 0;
   background-color: #fff;
   color: var(--jp-home-strong);
   font-family: inherit;
   font-size: 16px; /* >= 16px: kein Zoom beim Fokus auf iOS */
   line-height: 1.4;
   box-shadow: none;
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-input:focus-visible {
   border-color: var(--jp-home-strong);
   outline: 2px solid var(--jp-home-strong);
   outline-offset: 2px;
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-has_error .forminator-input {
   border-color: #b3261e;
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-error-message {
   display: block;
   margin: 6px 0 0;
   color: #b3261e;
   font-size: 14px;
   line-height: 1.4;
}
/* Button: breit und dunkel, Werte und Zustände wie die Primärbuttons der Homepage (Savoy style.css ".button" + front.css ".button-primary" + Fokusring der
   Sektionen 6/9): Hintergrund --jp-color-darkgray_02 (#282828), Text #fff, Schrift 16px/normal, Padding 14px 18px, ohne Rahmen, eckig, Übergang opacity .2s;
   Hover opacity .82 (Text bleibt weiß, kein Rahmen), auf Touch-Geräten kein Hover-Effekt; Fokus 2px/3px; deaktiviert/lädt wie ".button.loading".
   Forminator setzt hier keine Savoy-Klassen, daher die Werte an dieser Stelle (nur Newsletter-Formular). */
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-button-submit {
   display: block;
   box-sizing: border-box;
   width: 100%;
   min-height: var(--jp-news-field);
   margin: 0;
   padding: 14px 18px;
   border: 0 none;
   border-radius: 0;
   background-color: var(--jp-home-dark);
   color: #fff;
   font-family: inherit;
   font-size: var(--jp-font-size-body);
   font-weight: normal;
   line-height: 16px;
   text-align: center;
   opacity: 1;
   cursor: pointer;
   box-shadow: none;
   transition: opacity .2s ease;
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-button-submit:hover {
   background-color: var(--jp-home-dark);
   color: #fff;
   opacity: .82;
}
.touch .jp-home__section--newsletter .jp-home__newsletter-form .forminator-button-submit:hover,
.touch .jp-home__section--newsletter .jp-home__newsletter-form .forminator-button-submit:focus {
   opacity: 1;
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-button-submit:focus-visible {
   outline: 2px solid var(--jp-home-strong);
   outline-offset: 3px;
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-button-submit[disabled],
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-button-submit.forminator-button-onload {
   background-color: #828282;
   cursor: default;
   opacity: .82;
}
/* Rückmeldung (Erfolg/Fehler): schlichter Text, keine Box */
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-response-message {
   margin: 0 0 var(--jp-news-gap);
   padding: 0;
   border: 0;
   background: none;
   font-size: 15px;
   line-height: 1.45;
   text-align: center;
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-response-message p {
   margin: 0;
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-response-message:empty {
   display: none;
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-response-message.forminator-success {
   color: #1b5e2f;
   font-weight: 700;
}
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-response-message.forminator-error {
   color: #b3261e;
   font-weight: 700;
}
/* Honeypot-Feld: nie sichtbar */
.jp-home__section--newsletter .jp-home__newsletter-form .forminator-hidden {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   overflow: hidden;
}
.jp-home__section--newsletter .jp-home__newsletter .jp-home__newsletter-note {
   margin: 14px 0 0;
   color: color-mix(in srgb, var(--jp-home-strong) 75%, #fff);
   font-size: 13px;
   line-height: 1.5;
   text-align: left;
}
.jp-home__section--newsletter .jp-home__newsletter .jp-home__newsletter-note a {
   color: inherit;
   text-decoration: underline;
}
.jp-home__section--newsletter .jp-home__newsletter .jp-home__newsletter-note a:focus-visible {
   outline: 2px solid var(--jp-home-strong);
   outline-offset: 2px;
}

/* Sektion 10, AP8b (Variante A der Vorschau AP8a): responsive Formularzeile und optionales Bergpanorama.
   Ab 992 px (mit und ohne Bild): Formular max. 920 px, Vorname | E-Mail | Button in einer Zeile (1fr 1.3fr 210px, 16 px Abstand, oben bündig; die Button-Zeile
   erhält den Höhenversatz des Labels 15px x 1.3 + 6px), globale Meldung über die volle Breite, Datenschutzhinweis über die volle Containerbreite (22 px Abstand, linksbündig).
   Die Grid-Regel greift erst, wenn Forminator das Formular einblendet (Inline-display:none bis dahin). Reservierte Formularhöhe: Label + Feld = 74 px. */
@media (min-width: 992px) {
   .jp-home__section--newsletter .jp-home__newsletter {
      max-width: 920px;
   }
   .jp-home__section--newsletter .jp-home__newsletter-form {
      min-height: 74px;
   }
   .jp-home__section--newsletter .jp-home__newsletter-form form.forminator-custom-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 210px;
      column-gap: 16px;
      align-items: start;
   }
   .jp-home__section--newsletter .jp-home__newsletter-form .forminator-response-message {
      grid-column: 1 / -1;
   }
   /* Forminator setzt unter den Zeilen 30 px bzw. 20 px (Selektoren mit fünf bis sechs Klassen); nur die direkten Zeilen des Formulars, nicht die verschachtelte Namenszeile */
   .jp-home__section--newsletter .jp-home__newsletter-form form.forminator-custom-form[data-grid="open"] > .forminator-row:not(.forminator-row-last),
   .jp-home__section--newsletter .jp-home__newsletter-form form.forminator-custom-form[data-grid="open"] > .forminator-row.forminator-row-last {
      margin-bottom: 0;
   }
   .jp-home__section--newsletter .jp-home__newsletter-form .forminator-row-last {
      padding-top: calc(15px * 1.3 + 6px);
   }
   .jp-home__section--newsletter .jp-home__newsletter .jp-home__newsletter-note {
      max-width: none;
      margin: 22px 0 0;
      text-align: left;
   }
}
/* Mit Hintergrundbild (Zustandsklasse nur bei gültigem Bild-Anhang): Vollbreite im Sektionsband, dekoratives <img> mit object-fit: cover (unten verankert),
   helle Überlagerung (hinter Text und Formular deckend, im unteren Freiraum auslaufend), dunkle Textfarben. Oben schließt das Band seit AP8c ohne weißen Zwischenraum direkt an
   "Wir bauen aus!" an (die Camper-Sektion verliert nur dann ihr margin-bottom, siehe nächste Regel), der Innenabstand oben bleibt; unten ein weißer Sektionsabstand vor
   "Erweitere dein Camperwissen". Erhöhte Spezifität: die Regel "Sektion + Sektion" setzt padding-top: 0. */
.jp-home .jp-home__section.jp-home__section--newsletter.jp-home__section--newsletter-image {
   --jp-news-reveal: clamp(56px, calc(12vw - 20px), 156px); /* AP8c: unteres Innenpadding 16-24 px kleiner als in AP8b (clamp(72px, 12vw, 176px)) */
   position: relative;
   isolation: isolate;
   overflow: hidden;
   padding-top: clamp(56px, 7vw, 96px);
   padding-bottom: var(--jp-news-reveal);
   margin-bottom: var(--jp-home-section-space);
}
/* AP8c: einzige Regel außerhalb der Newsletter-Sektion: der Sektionsabstand der Camper-Sektion (margin-bottom) entfällt nur, wenn unmittelbar danach das Newsletter-Bildband folgt.
   Ohne Bild bleibt der weiße Abstand (die Sektion hat dort keinen oberen Innenabstand). Ohne :has()-Unterstützung (Firefox < 121) bleibt der Abstand einfach erhalten. */
.jp-home__section.jp-home__section--camper:has(+ .jp-home__section--newsletter-image) {
   margin-bottom: 0;
}
.jp-home__section--newsletter-image::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(to bottom, rgb(255 255 255 / .8) 0, rgb(255 255 255 / .62) calc(100% - var(--jp-news-reveal)), rgb(255 255 255 / 0) 100%);
   pointer-events: none;
}
.jp-home__section--newsletter-image .jp-home__newsletter-bg {
   position: absolute;
   inset: 0;
   z-index: -2;
   display: block;
   width: 100%;
   height: 100%;
   max-width: none;
   object-fit: cover;
   object-position: 50% 100%;
   pointer-events: none;
}
.jp-home__section--newsletter-image .jp-home__newsletter .jp-home__eyebrow,
.jp-home__section--newsletter-image .jp-home__newsletter .jp-home__newsletter-text,
.jp-home__section--newsletter-image .jp-home__newsletter .jp-home__newsletter-note {
   color: var(--jp-home-strong);
}

/* Layout-Demo (temporär, wird durch echte Sektionen ersetzt) */
.jp-home__demo-tile {
   padding: var(--jp-home-space-lg) var(--jp-home-space-sm);
   border: 1px dashed var(--jp-home-line);
   text-align: center;
}

/* Tablet */
@media (max-width: 991px) {
   .jp-home {
      --jp-home-section-space: 80px;
      --jp-home-head-gap:      40px;
      --jp-home-panel-pad:     48px;
      --jp-home-grid-gap:      20px;
   }
   .jp-home__grid {
      grid-template-columns: repeat(var(--jp-home-cols-md, 2), minmax(0, 1fr));
   }
}

/* Phone */
@media (max-width: 550px) {
   .jp-home {
      --jp-home-section-space: 56px;
      --jp-home-head-gap:      32px;
      --jp-home-panel-pad:     24px;
      --jp-home-grid-gap:      16px;
   }
   .jp-home__grid {
      grid-template-columns: repeat(var(--jp-home-cols-sm, 1), minmax(0, 1fr));
   }

   /* Hero: Bild oben (3:2), Text darunter auf dunklem Grund, kein Verlauf */
   .jp-home__hero {
      flex-direction: column;
      align-items: stretch;
      min-height: 0;
      padding-block: 0;
   }
   .jp-home__hero--has-image::before {
      display: none;
   }
   .jp-home__hero-media {
      position: relative;
      inset: auto;
      aspect-ratio: 3 / 2;
      width: 100%;
   }
   .jp-home__hero > .jp-home__container {
      padding-block: 32px;
   }
   .jp-home__hero-body {
      max-width: none;
   }
   /* Kompakterer Textbereich: Eyebrow 10 / H1 14 / Text 20 px; H1 34-36px */
   .jp-home__hero .jp-home__eyebrow {
      margin-bottom: 10px;
   }
   .jp-home__hero h1 {
      margin-bottom: 14px;
      font-size: clamp(34px, 2.4vw + 25px, 36px);
   }
   .jp-home__hero .jp-home__hero-text {
      margin-bottom: 20px;
   }
   .jp-home__hero .jp-home__actions .jp-home__btn {
      width: 100%;
      text-align: center;
   }
}

/* Sektion 11: "Erweitere dein Camperwissen" (Plan docs/plans/14-camperwissen.md)
   Weißer Grund, Wide-Container. Zwei Bereiche (Blog-Beiträge, YouTube-Videos) mit je bis zu 3 Karten; die ganze Karte ist ein Link.
   >= 1400px: Bereiche nebeneinander, je 3 Karten in einer Reihe | 768-1399px: Bereiche untereinander, je 3 Karten nebeneinander (Bild oben) |
   551-767px: Karten als Zeilen (Bild links) |
   <= 550px: alles untereinander, erst Blog, dann YouTube. Kein Slider, kein JavaScript. Fehlendes Bild: dunkler 16:9-Platzhalter.
   Shorts-Vorschaubilder werden unverändert gezeigt (inkl. der von YouTube erzeugten unscharfen Seitenflächen). */
.jp-home__section--knowledge {
   --jp-know-radius:  8px;
   --jp-know-gap:     24px;
   --jp-know-cols:    48px;
   --jp-know-muted:   color-mix(in srgb, var(--jp-home-strong) 75%, #fff);
}
.jp-home .jp-home__knowledge-head h2 {
   margin-bottom: 12px;
   font-size: clamp(22px, 1.6vw + 14px, 30px);
   letter-spacing: .08em;
   text-transform: uppercase;
   text-wrap: balance;
}
.jp-home__knowledge-head .jp-home__knowledge-text {
   color: var(--jp-know-muted);
   font-size: 16px;
   line-height: 1.55;
}
.jp-home__knowledge-cols {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 56px;
}
.jp-home__knowledge-col {
   min-width: 0;
}
.jp-home__knowledge-colhead {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   justify-content: space-between;
   gap: 4px var(--jp-home-space-md);
   margin-bottom: var(--jp-home-space-md);
   padding-bottom: 12px;
   border-bottom: 1px solid var(--jp-home-line);
}
.jp-home .jp-home__knowledge-colhead h3 {
   margin: 0;
   font-size: clamp(20px, .6vw + 16px, 22px);
}
.jp-home__knowledge-more {
   color: var(--jp-home-strong);
   font-size: 15px;
   font-weight: 600;
   text-decoration: underline;
   text-decoration-color: transparent;
   text-underline-offset: 4px;
   transition: text-decoration-color .15s ease;
}
.jp-home__knowledge-more:focus-visible {
   outline: 2px solid var(--jp-home-strong);
   outline-offset: 3px;
}
.jp-home__knowledge-list {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 20px;
   margin: 0;
   padding: 0;
   list-style: none;
}
.jp-home__know-item {
   display: flex;
   min-width: 0;
   margin: 0;
   padding: 0;
}
.jp-home__know-card {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   min-width: 0;
   color: var(--jp-home-strong);
   text-decoration: none;
}
.jp-home__know-media {
   position: relative;
   display: block;
   flex: none;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   border-radius: var(--jp-know-radius);
   background-color: var(--jp-home-dark);
}
.jp-home__know-img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .3s ease;
}
/* Kategorie-Pill im Bild links oben: heller Grund, dunkle Schrift (Kontrast > 12:1), auch auf dunklen Bildern gut lesbar */
.jp-home__know-pill {
   position: absolute;
   top: 10px;
   left: 10px;
   max-width: calc(100% - 20px);
   overflow: hidden;
   padding: 4px 10px;
   border-radius: 999px;
   background-color: rgb(255 255 255 / .94);
   color: var(--jp-home-strong);
   font-size: 12px;
   font-weight: 600;
   line-height: 1.3;
   letter-spacing: .02em;
   text-overflow: ellipsis;
   white-space: nowrap;
}
/* Play-Symbol mittig: dunkle Scheibe mit weißem Rand und weißem Dreieck (Kontrast auf hellen und dunklen Bildern) */
.jp-home__know-play {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 56px;
   height: 56px;
   transform: translate(-50%, -50%);
   pointer-events: none;
   filter: drop-shadow(0 2px 6px rgb(0 0 0 / .35));
}
.jp-home__know-body {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   gap: 4px;
   padding-top: 14px;
}
.jp-home__know-date {
   color: var(--jp-know-muted);
   font-size: 13px;
   line-height: 1.3;
}
.jp-home .jp-home__know-title {
   display: -webkit-box;
   margin: 0;
   overflow: hidden;
   font-size: 17px;
   line-height: 1.35;
   overflow-wrap: break-word;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 5; /* nur Sicherung gegen extrem lange Titel; übliche Titel (auch mit Hashtags) werden vollständig gezeigt */
   line-clamp: 5;
}
.jp-home__know-card:focus-visible {
   outline: 2px solid var(--jp-home-strong);
   outline-offset: 3px;
   border-radius: var(--jp-know-radius);
}
@media (hover: hover) {
   .jp-home__know-card:hover .jp-home__know-title {
      text-decoration: underline;
      text-underline-offset: 3px;
   }
   .jp-home__know-card:hover .jp-home__know-img {
      transform: scale(1.04);
   }
   .jp-home__knowledge-more:hover {
      text-decoration-color: currentcolor;
   }
}
@media (prefers-reduced-motion: reduce) {
   .jp-home__know-img,
   .jp-home__knowledge-more {
      transition: none;
   }
   .jp-home__know-card:hover .jp-home__know-img {
      transform: none;
   }
}

/* Tablet bis schmaler Desktop 768-1399px: Bereiche untereinander, je Bereich 3 gleich breite Karten (Bild oben, Text darunter; bei weniger Karten linksbündig) */
@media (min-width: 768px) {
   .jp-home__knowledge-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--jp-know-gap);
   }
}
/* Desktop >= 1400px: die beiden Bereiche nebeneinander, je 3 Karten in einer Reihe */
@media (min-width: 1400px) {
   .jp-home__knowledge-cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--jp-know-cols);
   }
   .jp-home__knowledge-cols--single {
      grid-template-columns: minmax(0, 1fr);
   }
}
/* Kleines Tablet 551-767px: Karten als horizontale Zeilen, Bild links (40 %, 200-340 px), Text rechts */
@media (min-width: 551px) and (max-width: 767px) {
   .jp-home__know-card {
      display: grid;
      grid-template-columns: clamp(200px, 40%, 340px) minmax(0, 1fr);
      align-items: start;
      gap: 20px;
   }
   .jp-home__know-body {
      padding-top: 0;
   }
}

/* Phone <= 550px: untereinander (Blog zuerst, dann YouTube), volle Breite */
@media (max-width: 550px) {
   .jp-home__knowledge-cols {
      gap: 48px;
   }
   .jp-home__knowledge-list {
      gap: 28px;
   }
   .jp-home__knowledge-colhead {
      margin-bottom: 20px;
   }
}

/* Sektion 11: Kopf breiter als der Standard-Sektionskopf (65ch), damit die Versalien-Überschrift auf Desktop in einer Zeile steht */
.jp-home__knowledge-head {
   max-width: 800px;
}