/* 14-produkte — Kategorieübersicht und Produktdetailseite (Kundenwunsch 19.09.2026), gerendert von inc/produkte.php.
   Vorbild war der Shop des Kunden; übernommen ist der Aufbau (Filterspalte links, Raster rechts; Galerie links,
   Angaben rechts), die Optik kommt aus unseren Tokens. Die Produktfotos sind Freisteller mit Alphakanal, die
   Bildfläche ist deshalb schlicht weiß — das Durchsichtige zeigt dann Weiß, ganz ohne Bildbearbeitung
   (Kundenwunsch 19.09.2026). Keine Kaufabwicklung: die Detailseite endet in zwei Wegen, Geschäft oder Shop. */

/* ---------- Übersicht ---------- */
/* Die umgebende Sektion bringt bereits --vn-section-y mit; hier noch einmal dieselbe Polsterung ergab oben eine
   sehr grosse Leerflaeche (Kundenwunsch 19.09.2026: Abstand verringern). Zusaetzlich rueckt die Sektion unter dem
   randlosen Seitenkopf enger heran — die Liste soll gleich anfangen. Unten bleibt Luft zur Standortkarte. */
.rad-produkte{padding-top:max(32px,calc(var(--vn-section-y) * .4))}
.rad-plist{padding-block:0 24px}
/* Leiste und Filterspalte bleiben beim Scrollen stehen, die Kacheln laufen dahinter durch (Kundenwunsch 19.09.2026).
   Beide brauchen dafuer einen deckenden Hintergrund und eine Ebene ueber den Karten — sonst scheinen die Raeder durch.
   Die Leiste haengt unter der gescrollten Kopfleiste, die Filterspalte darunter. */
.rad-plist__leiste{position:sticky;top:var(--rad-header-h-scrolled);z-index:3;background:var(--vn-color-bg);
  display:flex;align-items:center;gap:20px;padding:16px 0 20px;margin-bottom:28px;border-bottom:1px solid var(--vn-color-line)}
/* Die Kopfleiste der Website laeuft nach unten transparent aus (00-shell.css, so gewollt). Ueber weissen Kacheln
   blitzen dadurch Produkttexte durch. Die Leiste zieht ihre Flaeche deshalb bis zum oberen Fensterrand hoch — sie
   liegt hinter der Kopfleiste (z-index 3 gegen 50), der dunkle Verlauf des Headers legt sich also auf Papier
   statt auf Raeder (Kundenwunsch 19.09.2026). */
.rad-plist__leiste::before{content:"";position:absolute;left:0;right:0;bottom:100%;
  height:var(--rad-header-h-scrolled);background:var(--vn-color-bg);pointer-events:none;
  opacity:0;transition:opacity var(--vn-d-snap)}
/* Nur im geklebten Zustand — ungeklebt raegte das Band sonst in den Seitenkopf hinein. Die Klasse setzt
   14-produkte.js ueber einen Messpunkt vor der Leiste. */
.rad-plist__leiste.is-fest::before{opacity:1}
.rad-plist__treffer{margin:0;margin-right:auto;font:400 var(--vn-text-sm)/1.4 var(--vn-font-body);color:var(--vn-color-muted)}
.rad-plist__treffer strong{font-weight:600;color:var(--vn-color-fg)}
.rad-plist__sortierung{display:flex;align-items:center;gap:10px;font:500 var(--vn-text-sm)/1 var(--vn-font-body);color:var(--vn-color-muted)}
.rad-plist__sort{appearance:none;padding:9px 34px 9px 14px;border:1px solid var(--vn-color-line);border-radius:var(--vn-radius-full);
  background:transparent;color:var(--vn-color-fg);font:500 var(--vn-text-sm)/1 var(--vn-font-body);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23141310' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:10px 6px}
.rad-plist__filterknopf{display:none;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--vn-color-line);
  border-radius:var(--vn-radius-full);background:transparent;color:var(--vn-color-fg);font:500 var(--vn-text-sm)/1 var(--vn-font-body);cursor:pointer}
.rad-plist__aktiv{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--vn-radius-full);
  background:var(--vn-color-accent);color:var(--vn-color-ink);font:600 var(--vn-text-2xs)/1 var(--vn-font-body)}
/* Ein eigenes display schlaegt das hidden-Attribut — ohne diese Zeile stuende dauerhaft eine „0" im Knopf. */
.rad-plist__aktiv[hidden],.rad-plist__reset[hidden],.rad-plist__leer[hidden]{display:none}

.rad-plist__raster{display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;align-items:start}

/* Filterspalte */
.rad-plist__filter{position:sticky;top:calc(var(--rad-header-h-scrolled) + 96px);z-index:2;background:var(--vn-color-bg);
  display:grid;gap:4px;max-height:calc(100vh - var(--rad-header-h-scrolled) - 120px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin}
.rad-plist__filterkopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;
  font:600 var(--vn-text-sm)/1 var(--vn-font-body);color:var(--vn-color-fg)}
.rad-plist__reset{padding:0;border:0;background:none;color:var(--vn-color-accent-text-small);font:500 var(--vn-text-micro)/1 var(--vn-font-body);cursor:pointer;text-decoration:underline}
.rad-plist__gruppe{border-top:1px solid var(--vn-color-line)}
.rad-plist__gruppe>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0;cursor:pointer;
  list-style:none;font:600 var(--vn-text-sm)/1.2 var(--vn-font-body);color:var(--vn-color-fg)}
.rad-plist__gruppe>summary::-webkit-details-marker{display:none}
.rad-plist__gruppe>summary .rad-arrow{transition:transform var(--vn-d-medium) var(--vn-ease-out)}
.rad-plist__gruppe[open]>summary .rad-arrow{transform:rotate(-90deg)}   /* .rad-arrow--down steht schon auf 90deg */
.rad-plist__werte{display:grid;gap:2px;padding-bottom:14px;max-height:270px;overflow-y:auto;overscroll-behavior:contain}
.rad-plist__wert{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;
  font:400 var(--vn-text-sm)/1.35 var(--vn-font-body);color:var(--vn-color-fg)}
.rad-plist__wert input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.rad-plist__haken{flex:0 0 auto;width:18px;height:18px;border:1px solid var(--vn-color-line);border-radius:5px;position:relative;
  transition:background var(--vn-d-snap),border-color var(--vn-d-snap)}
.rad-plist__haken::after{content:"";position:absolute;left:5px;top:4px;width:6px;height:3px;
  border-left:2px solid var(--vn-color-ink);border-bottom:2px solid var(--vn-color-ink);transform:rotate(-45deg) scale(.4);
  opacity:0;transition:opacity var(--vn-d-snap),transform var(--vn-d-snap) var(--vn-ease-out)}
.rad-plist__wert input:checked+.rad-plist__haken{background:var(--vn-color-accent);border-color:var(--vn-color-accent)}
.rad-plist__wert input:checked+.rad-plist__haken::after{opacity:1;transform:rotate(-45deg) scale(1)}
.rad-plist__wert input:focus-visible+.rad-plist__haken{outline:2px solid var(--vn-color-accent-text);outline-offset:2px}
.rad-plist__name{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.rad-plist__zahl{flex:0 0 auto;color:var(--vn-color-muted);font-size:var(--vn-text-micro)}
.rad-plist__wert.is-leer{opacity:.38}

/* Kartenraster */
.rad-plist__karten{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;--rad-stagger:60ms}
.rad-plist__karten--vier{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:32px}
/* Die Beratungskarte teilt sich die Hoehe der Produktkacheln, ihr Inhalt verteilt sich darin selbst. */
.rad-pcard--frage .rad-pcard__link{justify-content:space-between}
.rad-plist__leer{grid-column:1/-1;margin:48px 0 0;max-width:30em;font:400 var(--vn-text-base)/1.7 var(--vn-font-body);color:var(--vn-color-muted)}

.rad-pcard{min-width:0}
.rad-pcard.is-weg{display:none}
.rad-pcard__link{display:flex;flex-direction:column;height:100%;border-radius:var(--vn-radius-xl);background:#fff;
  color:var(--vn-color-fg);text-decoration:none;overflow:hidden;transition:transform var(--vn-d-medium) var(--vn-ease-out)}
.rad-pcard__link:is(:focus-visible){transform:translateY(-3px)}
@media(hover:hover){.rad-pcard__link:is(:hover,:focus-visible){transform:translateY(-3px)}}
/* flex:0 0 auto haelt die Bildflaeche fest; display:flex + overflow:hidden sorgen dafuer, dass ein hochformatiges
   Foto die Flaeche nicht doch noch aufzieht (sonst waeren einzelne Kacheln ein paar Pixel hoeher als die anderen). */
.rad-pcard__bild{position:relative;display:flex;flex:0 0 auto;aspect-ratio:4/3;overflow:hidden;background:#fff}
.rad-pcard__img{width:100%;height:100%;min-height:0;object-fit:contain;padding:14px;
  transition:transform var(--vn-d-slow) var(--vn-ease-out)}
.rad-pcard__link:is(:focus-visible) .rad-pcard__img{transform:scale(1.04)}
@media(hover:hover){.rad-pcard__link:is(:hover,:focus-visible) .rad-pcard__img{transform:scale(1.04)}}
.rad-pcard__spar{position:absolute;left:14px;top:14px;padding:5px 11px;border-radius:var(--vn-radius-full);
  background:var(--vn-color-accent);color:var(--vn-color-ink);font:600 var(--vn-text-micro)/1 var(--vn-font-body)}
/* Der Textblock nimmt den Rest und haengt an der Unterkante — dadurch stehen Marke, Titel, Preis und Groessen
   in allen Kacheln auf derselben Linie, egal ob der Titel zwei oder drei Zeilen braucht. */
.rad-pcard__text{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:14px 20px 22px}
.rad-pcard__marke{font:500 var(--vn-text-micro)/1 var(--vn-font-body);letter-spacing:var(--rad-ls-eyebrow);
  text-transform:uppercase;color:var(--vn-color-muted)}
/* Zwei Zeilen fest: so ist der Textblock in jeder Kachel gleich hoch und die Kacheln werden identisch, ohne dass
   zwischen Bild und Text eine Luecke entsteht. Laengere Titel enden mit Auslassungszeichen. */
.rad-pcard__titel{font:var(--rad-w-display) 1rem/1.35 var(--vn-font-display);letter-spacing:-.01em;color:var(--vn-color-ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:calc(2 * 1.35em)}
.rad-pcard__preis{margin-top:4px;font:600 1.0625rem/1.2 var(--vn-font-body);color:var(--vn-color-ink)}
.rad-pcard__preis s{margin-left:6px;font-weight:400;font-size:var(--vn-text-sm);color:var(--vn-color-muted)}
.rad-pcard__groessen{min-height:1.4em;font:400 var(--vn-text-micro)/1.4 var(--vn-font-body);color:var(--vn-color-muted)}

/* „Du hast Fragen?“ — Aufbau nach Kundenvorgabe 19.09.2026 (Vorbild im Anhang): Daniel oben und formatfuellend,
   nach unten weich auslaufend, darunter das bunte Wappen unscharf als Flaeche, unten Text und runder Pfeilknopf.
   Der Auslauf laeuft als Maske AM BILD, nicht als Farbverlauf darueber — sonst zeichnet sich auf dem Verlauf
   eine Kante ab, sobald die Kartenfarbe nicht exakt trifft. */
.rad-pcard--frage .rad-pcard__link{position:relative;isolation:isolate;overflow:hidden;padding:0;gap:0;
  justify-content:flex-end;min-height:clamp(340px,26vw,420px);
  background:linear-gradient(170deg,var(--vn-color-surface-raised),var(--vn-color-surface-darker) 62%);
  color:var(--vn-color-on-dark);box-shadow:var(--rad-card-shadow)}
/* Das Wappen liegt ganz hinten, unscharf und gross — es soll Farbe in die Flaeche bringen, nicht lesbar sein. */
/* Das Wappen sitzt dort, wo die Maske das Portraet ausblendet — nur da kann es ueberhaupt wirken.
   Weiter unten (ausserhalb der Kachel) blieb davon nur ein Schimmer neben der Schulter uebrig. */
.rad-pcard__wappen{position:absolute;z-index:0;left:50%;bottom:-6%;width:86%;translate:-50% 0;
  display:flex;justify-content:center;pointer-events:none}
.rad-pcard__wappen img{width:100%;height:auto;filter:blur(30px) saturate(190%);opacity:.62}
/* Das Portraet sitzt oben und laeuft nach unten aus. width:100% waere hier falsch: das Bild ist quadratisch,
   die Kachel nicht — object-fit uebernimmt den Ausschnitt.
   Die helle Betonwand hinter Daniel wuerde die dunkle Kachel oben aufreissen: abgedunkelt und leicht entsaettigt
   fuegt sie sich ein, ohne dass das Gesicht absaeuft. */
.rad-pcard__person{position:absolute;z-index:1;inset:0 0 auto;width:100%;height:78%;object-fit:cover;object-position:50% 20%;
  filter:brightness(.78) saturate(.9) contrast(1.06);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 56%,transparent 97%);
  mask-image:linear-gradient(to bottom,#000 0,#000 56%,transparent 97%)}
/* Farbschleier in Kachelfarbe ueber dem Foto: er zieht den Beton in den Ton der Karte. */
.rad-pcard--frage .rad-pcard__link::after{content:"";position:absolute;z-index:1;inset:0 0 auto;height:78%;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--vn-color-surface-darker) 42%,transparent),color-mix(in srgb,var(--vn-color-surface-darker) 6%,transparent) 62%,transparent)}
.rad-pcard__fragetext{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px;padding:0 24px 24px}
.rad-pcard--frage .rad-pcard__titel{font:var(--rad-w-display) clamp(1.375rem,calc(28 * var(--rad-dpx)),1.75rem)/1.2 var(--vn-font-display);
  letter-spacing:-.02em;-webkit-line-clamp:2;min-height:0;color:var(--vn-color-on-dark)}
.rad-pcard__frageline{font:400 var(--vn-text-sm)/1.55 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}

/* ---------- Detailseite ---------- */
.rad-pdetail{padding-block:calc(var(--rad-header-h) + 24px) var(--vn-section-y)}
.rad-pdetail__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:28px;
  font:400 var(--vn-text-micro)/1.4 var(--vn-font-body);color:var(--vn-color-muted)}
.rad-pdetail__crumbs a{padding-block:12px;margin-block:-12px;color:var(--vn-color-muted);text-decoration:none}
@media(hover:hover){.rad-pdetail__crumbs a:hover{color:var(--vn-color-fg)}}
.rad-pdetail__crumbs i{font-style:normal;opacity:.5}
.rad-pdetail__crumbs [aria-current]{color:var(--vn-color-fg)}

.rad-pdetail__raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}
/* display:flex + min-height:0 am Bild: mit place-items:center und height:100% zog ein hochformatiges Foto die
   Buehne auf, und overflow:hidden schnitt es unten ab (Kundenwunsch 19.09.2026: Bilder immer vollstaendig, mittig). */
.rad-pdetail__buehne{border-radius:var(--vn-radius-xl);background:#fff;aspect-ratio:4/3;display:flex;overflow:hidden}
.rad-pdetail__gross{width:100%;height:100%;min-height:0;min-width:0;object-fit:contain;object-position:center;padding:24px}
/* Dunkle Studioaufnahmen fuellen die Flaeche randlos — ihre Bildecken sollen nicht auf der weissen Kachel stehen. */
.rad-pdetail__gross.is-voll,.rad-pcard__img.is-voll,.rad-pdetail__minibild img.is-voll{object-fit:cover;padding:0}
.rad-pdetail__mini{margin:14px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.rad-pdetail__minibild{display:block;width:100%;padding:0;border:1px solid transparent;border-radius:var(--vn-radius-md);
  background:#fff;cursor:pointer;overflow:hidden;transition:border-color var(--vn-d-snap)}
.rad-pdetail__minibild{display:flex}
.rad-pdetail__minibild img{display:block;width:100%;min-height:0;aspect-ratio:1;object-fit:contain;object-position:center;padding:6px}
.rad-pdetail__minibild.is-aktiv{border-color:var(--vn-color-accent)}

.rad-pdetail__marke{margin:0;font:500 var(--vn-text-sm)/1 var(--vn-font-body);letter-spacing:var(--rad-ls-eyebrow);
  text-transform:uppercase;color:var(--vn-color-accent-text-small)}
.rad-pdetail__titel{margin:14px 0 0;text-transform:none;   /* site.css setzt h1 global auf Versalien */
  font:var(--rad-w-display) clamp(1.5rem,calc(32 * var(--rad-dpx)),2.125rem)/1.2 var(--vn-font-display);
  letter-spacing:var(--rad-ls-head);color:var(--vn-color-fg);text-wrap:balance}
.rad-pdetail__preis{margin:20px 0 0;font:600 1.75rem/1.1 var(--vn-font-body);color:var(--vn-color-fg)}
.rad-pdetail__preis s{margin-left:10px;font-weight:400;font-size:var(--vn-text-label);color:var(--vn-color-muted)}
.rad-pdetail__steuer{margin:6px 0 0;font:400 var(--vn-text-micro)/1.5 var(--vn-font-body);color:var(--vn-color-muted)}

.rad-pdetail__option{margin-top:26px}
.rad-pdetail__optionname{display:block;margin-bottom:10px;font:600 var(--vn-text-sm)/1 var(--vn-font-body);color:var(--vn-color-fg)}
.rad-pdetail__werte{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.rad-pdetail__werte li{padding:8px 14px;border:1px solid var(--vn-color-line);border-radius:var(--vn-radius-full);
  font:500 var(--vn-text-sm)/1 var(--vn-font-body);color:var(--vn-color-fg)}

.rad-pdetail__lager{display:flex;align-items:center;gap:10px;margin:26px 0 0;
  font:500 var(--vn-text-sm)/1.5 var(--vn-font-body);color:var(--vn-color-fg)}
.rad-pdetail__lager::before{content:"";flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--vn-color-accent);
  box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--vn-color-accent) 35%,transparent)}
.rad-pdetail__lager.is-aus::before{background:var(--vn-color-muted)}

.rad-pdetail__aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.rad-pdetail__aktionen .rad-button{flex:1 1 220px;justify-content:center}
/* Zweiter Weg, leiser: gefuellt in Tiefschwarz statt umrandet — Umrissknoepfe gibt es auf dieser Website nicht. */
.rad-button--still{background:var(--vn-color-surface-dark);color:var(--vn-color-on-dark);border-color:var(--vn-color-ink)}
@media(hover:hover){.rad-button--still:hover{background:var(--vn-color-surface-raised);border-color:var(--vn-color-surface-raised)}}

.rad-pdetail__zusagen{margin:32px 0 0;padding:26px 0 0;list-style:none;border-top:1px solid var(--vn-color-line);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
.rad-pdetail__zusagen li{display:flex;flex-direction:column;gap:5px}
.rad-pdetail__zusagen strong{font:600 var(--vn-text-sm)/1.3 var(--vn-font-body);color:var(--vn-color-fg)}
.rad-pdetail__zusagen span{font:400 var(--vn-text-micro)/1.55 var(--vn-font-body);color:var(--vn-color-muted)}

.rad-pdetail__text{margin-top:var(--vn-section-y)}
.rad-pdetail__text h2{margin:0 0 28px}
.rad-pdetail__fliess{columns:2;column-gap:56px;max-width:none}
.rad-pdetail__fliess p{margin:0 0 1em;font:400 var(--vn-text-base)/1.7 var(--vn-font-body);color:var(--vn-color-fg);break-inside:avoid}
.rad-pdetail__fliess h3{margin:1.6em 0 .6em;font:var(--rad-w-display) 1.125rem/1.3 var(--vn-font-display);letter-spacing:-.01em;break-after:avoid}
.rad-pdetail__fliess ul{margin:0 0 1em;padding:0;list-style:none;display:grid;gap:8px}
.rad-pdetail__fliess li{position:relative;padding-left:22px;font:400 var(--vn-text-sm)/1.6 var(--vn-font-body);color:var(--vn-color-fg);break-inside:avoid}
.rad-pdetail__fliess li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--vn-color-accent)}

.rad-pdetail__weitere{margin-top:var(--vn-section-y)}
/* Vier Karten stehen im Bild, gewischt oder geklickt laeuft die Reihe weiter. Der Schieber ist eine ganz normale
   Scrollflaeche mit Einrastpunkten — Tastatur und Wischgeste funktionieren damit ohne Zutun. */
.rad-pslider{position:relative;margin-top:32px}
/* Flex statt Grid: eine Prozentbreite in grid-auto-columns rechnet gegen eine unbestimmte Breite, sobald das
   Raster ueberlaeuft — die Karten wurden dadurch auf die Mindestbreite gestaucht. Als Flex-Basis rechnet dieselbe
   Angabe gegen die sichtbare Breite und stimmt. */
/* overflow-y MUSS gesetzt sein: sobald eine Achse nicht „visible" ist, rechnet die andere automatisch auf „auto"
   — im Schieber liess sich dadurch auch senkrecht scrollen. Mit hidden bleibt nur der Seitwaertslauf, das Mausrad
   scrollt wieder die ganze Seite. Die Polsterung gibt dem Hover-Schein Platz, damit hidden ihn nicht abschneidet;
   die negativen Aussenabstaende heben sie im Layout wieder auf. */
.rad-pslider__spur{margin-block:-22px;padding:22px 0;list-style:none;display:flex;gap:20px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.rad-pslider__spur::-webkit-scrollbar{display:none}
.rad-pslider__spur>*{flex:0 0 calc((100% - 60px) / 4);scroll-snap-align:start}
.rad-pslider__knopf{position:absolute;top:calc(50% - 44px);z-index:2;display:grid;place-items:center;
  width:48px;height:48px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--vn-color-surface-dark);color:var(--vn-color-on-dark);box-shadow:var(--rad-card-shadow);
  transition:opacity var(--vn-d-snap),background var(--vn-d-snap)}
@media(hover:hover){.rad-pslider__knopf:hover{background:var(--vn-color-surface-raised)}}
.rad-pslider__knopf--zurueck{left:-24px}
.rad-pslider__knopf--zurueck .rad-arrow{transform:rotate(180deg)}
.rad-pslider__knopf--vor{right:-24px}
.rad-pslider__knopf[disabled]{opacity:0;pointer-events:none}
.rad-pdetail__weitere .rad-head{margin-bottom:0;align-items:baseline}

/* ---------- ≤1000: Filter in eine Schublade, Raster zweispaltig ---------- */
@media (max-width:1000px){
  .rad-plist__raster{grid-template-columns:minmax(0,1fr);gap:0}
  .rad-plist__filterknopf{display:inline-flex}
  .rad-plist__filter{position:static;display:none;margin-bottom:28px;padding:18px 20px;border:1px solid var(--vn-color-line);border-radius:var(--vn-radius-xl)}
  .rad-plist__filter.is-offen{display:grid}
  .rad-plist__karten{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .rad-plist__karten--vier{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rad-pslider__spur{gap:16px}
  .rad-pslider__spur>*{flex-basis:calc((100% - 16px) / 2)}
  .rad-pslider__knopf--zurueck{left:-8px}
  .rad-pslider__knopf--vor{right:-8px}
  .rad-pdetail__raster{grid-template-columns:minmax(0,1fr);gap:32px}
  .rad-pdetail__fliess{columns:1}
  .rad-pdetail__mini{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* ---------- ≤650: eine Spalte, kompaktere Karten ---------- */
@media (max-width:650px){
  .rad-pslider__knopf{display:none}
  .rad-pslider__spur>*{flex-basis:78%}
  .rad-plist__leiste{flex-wrap:wrap;gap:12px}
  .rad-plist__treffer{order:3;flex:1 0 100%;margin-right:0}
  .rad-plist__karten,.rad-plist__karten--vier{grid-template-columns:minmax(0,1fr)}
  .rad-pcard__text{padding:4px 18px 20px}
  .rad-pdetail__zusagen{grid-template-columns:minmax(0,1fr);gap:16px}
  .rad-pdetail__aktionen .rad-button{flex:1 1 100%}
  .rad-pdetail__mini{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
}

@media (prefers-reduced-motion:reduce){
  .rad-pcard__link,.rad-pcard__img{transition:none}
  .rad-pcard__link:is(:focus-visible){transform:none}
  @media(hover:hover){.rad-pcard__link:is(:hover,:focus-visible){transform:none}}
  .rad-pcard__link:is(:focus-visible) .rad-pcard__img{transform:none}
  @media(hover:hover){.rad-pcard__link:is(:hover,:focus-visible) .rad-pcard__img{transform:none}}
}