/* ct-version: 20260820-32 */
/* ct: Startseite nach Mockup — Hero (Ink), Zulassungs-Rail, USP-Band,
   Fahrzeug-Klassen-Grid, Guide-Band. Masse/Typo 1:1 aus
   Projektinformationen/mockup/mockup-startseite.html. Eigene ct-*-Klassen,
   niedrige Spezifitaet, kein !important. */
:root{--ct-css-startseite:'20260821-33'}

/* Gemeinsame Bausteine (werden auch von Kategorie/Artikel genutzt) */
/* ct: .ct-wrap ist nach ct-base.css umgezogen (19.08.2026). Hier stand bis
   20260819-8 `max-width:1280px` — eine ZWEITE Fassung derselben Flucht,
   die die Basis-Regel per Ladereihenfolge schlug (Fehlerregister 17).
   Nicht wieder hier definieren. */
.ct-kick{
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ct-volt);
}
.ct-kick i{display:inline-block;width:26px;height:2px;background:var(--ct-volt)}
.ct-kick-light{color:var(--ct-muted)}
.ct-kick-light i{background:var(--ct-volt)}
.ct-h2{
  font-size:42px;line-height:1.02;margin:var(--ct-stack-sm) 0 0;
}
.ct-sechead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  padding-bottom:var(--ct-head-pad);margin-bottom:var(--ct-head-gap);
  border-bottom:1px solid var(--ct-line);
}
.ct-sechead-note{max-width:360px;margin:0;color:var(--ct-muted);font-size:14px;line-height:1.55;text-align:right}
/* ct: 20260820-22 (v1-Paket) — SEKTIONSKOPF NACH v1: Subline UNTER der H2,
   keine Trennlinie. Im v1-Mockup steht unter jedem Kopf die Subline
   linksbuendig direkt unter der Ueberschrift und es gibt KEINE Regelrinne
   zwischen Kopf und Inhalt (im PDF-Render nachgesehen: zwischen Subline und
   erster Kachelreihe liegt reines Weiss).
   ⚠️ Bewusst als MODIFIER, nicht als Aenderung an .ct-sechead: derselbe Kopf
   laeuft auch auf Kategorie- und Artikelseite, die in diesem Paket nicht
   gemessen werden (Fehlerregister 17 waere sonst nur umgedreht). Auf der
   Startseite tragen ihn ALLE drei Koepfe — zwei Kopfarten auf einer Seite
   waeren der sichtbarere Fehler. Fuer die uebrigen Seitentypen bleibt das als
   benannter offener Punkt. */
.ct-sechead-stack{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  padding-bottom:0;margin-bottom:var(--ct-head-gap);
  border-bottom:0;
}
/* ct: Erste Zeile des Kopfes — Kicker+H2 links, optionaler Mehr-Link rechts
   (der bleibt: er ist ein echtes Ziel, Fehlerregister 8). Die Subline steht
   als eigene Zeile darunter. */
.ct-sechead-main{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.ct-sechead-stack .ct-sechead-note{
  max-width:640px;text-align:left;margin-top:var(--ct-stack-sm);
}
.ct-sechead-dark{border-bottom-color:var(--ct-dline)}
.ct-sechead-dark .ct-h2{color:#fff}
.ct-sechead-dark .ct-sechead-note{color:var(--ct-dmuted)}

/* Buttons (Mockup: 50px, .btn-lg 58px) */
/* ct: 20260820-20 (Ben, 20.08.2026) — UMBENANNT .ct-btn-volt -> .ct-btn-cta.
   Der Hero-Primaer-CTA und die Beratungs-CTA im Fuss tragen seit der
   v1-Korrektur CI-Blau. Der alte Name haette die Farbe weiter behauptet;
   umbenannt wurde deshalb mechanisch in BEIDEN .tpl-Vorkommen
   (layout/header.tpl Hero, layout/footer.tpl Helpbox) — es gibt keine
   Ruecklassenschaft `ct-btn-volt` mehr im Template.
   .ct-btn-ghost bleibt Ghost (Sekundaeraktion) und behaelt seinen
   Volt-Hover — Volt ist weiter die Akzentfarbe. */
.ct-btn-cta{
  background:var(--ct-cta);color:#fff;border:1px solid var(--ct-cta);
  border-radius:var(--ct-radius-sm);
  font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.ct-btn-cta:hover,
.ct-btn-cta:focus{background:var(--ct-cta-d);border-color:var(--ct-cta-d);color:#fff}
.ct-btn-ghost{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);
  border-radius:var(--ct-radius-sm);
  font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;
}
.ct-btn-ghost:hover{border-color:var(--ct-volt);color:var(--ct-volt)}
/* ct: 20260819-15 (Korrekturpaket 4) — Polster 30 -> 20px. Gemessen brach
   BEIDE Hero-CTAs die Beschriftung auf zwei Zeilen um ("FAHRZEUGE" /
   "ENTDECKEN", Range.getClientRects = 4 bzw. 2 Zeilenkaesten) und lief mit
   56px Inhalt in einem 58px-Knopf ueber. Ursache war nicht die Knopfbreite
   an sich, sondern dass beide Knoepfe zusammen exakt die 496px-Textspalte
   fuellten (260 + 14 + 222) und der Text sich deshalb im Knopf staffelte. */
.ct-btn-lg{height:58px;padding:0 20px}

/* --- Hero ---------------------------------------------------------------- */
/* ct: 20260820-22 — BODENPOLSTER FUER DEN KARTEN-UEBERLAPP. Die USP-Karten
   steigen um --ct-band-y in den Hero hinein; ohne dieses Polster staenden sie
   direkt auf der Zulassungs-Rail. Der Wert ist die Summe aus Hub
   (--ct-band-y) und Zellabstand (--ct-cell-y), also zwei Rollen-Token statt
   eines gewuerfelten Werts: die Rail behaelt --ct-cell-y Luft zur obersten
   Kartenkante (gemessen, siehe Abnahme). Die Hero-CTAs bewegen sich dadurch
   NICHT — der Fold bleibt unberuehrt. */
.ct-hero{background:var(--ct-ink);color:#fff;padding:var(--ct-hero-y) 0 calc(var(--ct-band-y) + var(--ct-cell-y))}
/* ct: 20260820-31 (Ben-Review, "Raum nutzbar machen / sieht aus als wuerde
   was fehlen") — bei 1889px klaffte zwischen Textspalte (fix 496px) und
   Buehne (Deckel 810, rechtsbuendig) ein ~350px-Loch. Zwei Hebel, kein
   neues Element: (1) die Textspalte waechst mit (minmax statt fix), (2) die
   Headline skaliert fluid mit der Spalte — 4.6vw ergibt bei 1440 exakt die
   abgenommenen 66px, ab ~1830 deckelt 84px. Die Buehne behaelt ihren
   Deckel; der Ueberschuss steckt jetzt IM Inhalt statt daneben. */
.ct-hero-grid{display:grid;grid-template-columns:minmax(496px,1fr) auto;gap:54px;align-items:center;padding-bottom:var(--ct-hero-gap)}
.ct-hero-h1{
  font-size:clamp(52px, 4.6vw, 84px);line-height:.94;letter-spacing:-.03em;margin:var(--ct-stack-md) 0 0;color:#fff;
}
.ct-hero-h1 span{display:block;color:var(--ct-volt)}
.ct-hero-sub{margin:var(--ct-stack-md) 0 0;color:var(--ct-dmuted);font-size:16px;line-height:1.62;max-width:440px}
.ct-hchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--ct-stack-md)}
.ct-hchip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--ct-dline);padding:8px 14px;
  border-radius:var(--ct-radius-sm); /* ct: 20260820-20 — Rolle Bedienelement/Chip */
  font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;
}
.ct-hchip i{width:6px;height:6px;background:var(--ct-volt)}
.ct-pa{display:flex;align-items:center;gap:18px;margin-top:var(--ct-stack-lg);padding-top:var(--ct-stack-md);border-top:1px solid var(--ct-dline)}
.ct-pa-l{
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ct-dmuted);
}
.ct-pa-n{
  display:block;font-family:var(--ct-font-display);font-weight:900;font-size:48px;line-height:1;color:#fff;
}
.ct-pa-n em{font-style:normal;font-size:16px;font-weight:700;color:var(--ct-volt);margin-right:8px;text-transform:uppercase}
.ct-pa-v{display:block;margin-top:6px;font-size:11px;color:var(--ct-dmuted)}
/* ct: 20260819-15 (Korrekturpaket 4) — die Knoepfe brechen als GANZES um,
   ihre Beschriftung nie. `nowrap` am Knopf ist die eigentliche Zusage:
   ein CTA-Label, das mitten im Wort umbricht, ist ein gewuerfelter Umbruch
   (Fehlerregister 3). `flex-wrap:wrap` ist der Ausfallmodus dazu — wird es
   eng, stapeln sich die Knoepfe, statt dass der Text sich staffelt. */
.ct-hcta{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--ct-stack-lg)}
.ct-hcta .btn{white-space:nowrap}

/* Weissbuehne */
/* ct: Historie zur Hoehe (gilt weiter): bis 20260819-13 wuchs die Buehne mit
   dem Bild (`min-height:480px` + `img{max-width:88%}` = 713px bei 1440) und
   bestimmte damit die Hero-Hoehe — die CTAs landeten bei 937px, also unter
   dem Fold. Seither gibt die TEXTSPALTE das Mass vor, nie das Bild. */
/* ct: 20260819-15 (Korrekturpaket 7) — DREI Aenderungen, alle gegen dieselbe
   Beanstandung "das Hero-Bild skaliert nicht mit":
   1. Die Buehne nimmt die volle Zeilenhoehe des Hero-Rasters statt fester
      566px. Gemessen war die Textspalte 605px hoch und gab damit ohnehin das
      Mass vor — die Buehne verschenkte 39px Hoehe, die dem Bild fehlten.
      `--ct-hero-stage` wird dafuer zur MINDESThoehe (auf Mobil und ueberall,
      wo die Textspalte kuerzer ist, bleibt es das alte Mass).
   2. Das Bild fuellt jetzt den Buehneninnenraum (width/height 100%) statt
      auf `width:auto` seiner Eigenhoehe zu verharren; `object-fit:contain`
      haelt das Fahrzeug vollstaendig im Bild (LEHREN F.2 — `cover` wuerde
      bei diesem quadratischen Studiofoto Dach und Raeder abschneiden).
   3. ⚠️ DER eigentliche Befund lag in der BREITE. Das Mockup zeichnet die
      Buehne 650px breit neben 496px Text (mockup-startseite.html: wrap 1280,
      hero-grid `496px 1fr`). Unsere Flucht ist 1600 breit — dadurch wuchs
      die Buehne auf 810px (1440) bzw. 1050px (1920), waehrend das
      quadratische Foto bei 506px stehenblieb: gemessene Bildflaeche 56% der
      Buehne bei 1440 und nur 43% bei 1920, also eine weisse Flaeche mit
      einem kleinen Fahrzeug darin. Die Buehne bekommt deshalb einen
      Breiten-Deckel, der an das Buehnen-Token gebunden ist (605 x 1.34 =
      810px = exakt das heutige 1440er-Mass): bei 1440 aendert sich
      nichts, ab ~1500px hoert die Buehne auf, in die Breite zu laufen, und
      der Ueberschuss wird zum Abstand zwischen Textspalte und Buehne — auf
      dem Ink-Grund des Hero, nicht als weisse Totflaeche.
   `margin-left:auto` haelt die Buehne dabei auf der rechten Content-Flucht,
   damit sie mit allen Baendern darunter buendig bleibt. */
.ct-stage{
  position:relative;background:#fff;
  width:100%;
  height:var(--ct-hero-stage);
  max-width:calc(var(--ct-hero-stage) * 1.34);
  margin-left:auto;
  display:flex;align-items:center;justify-content:center;
  padding:30px 44px;
  box-shadow:0 44px 90px rgba(0,0,0,.55);
  /* ct: 20260820-30 — bewusst KEIN overflow:hidden mehr. Der Clip lag exakt
     auf der Buehnenrundung und schnitt den Buehnen-Tag an derselben Kurve, an
     der auch das Buehnen-Weiss mit Antialiasing endet — zwei AA-Kanten
     uebereinander, in der Mischzone schien das Weiss als heller Bogen durch
     (Bens Zwickel-Befund 20.08., bei 768px an BEIDEN unteren Ecken gemessen).
     Die Rundung unten uebernimmt jetzt der Tag selbst (konzentrisch 1px
     groesser, siehe .ct-stage-tag); Bild und Passermarken liegen innerhalb,
     es gibt nichts mehr, das geclippt werden muesste. */
  border-radius:var(--ct-radius-lg);
}
/* ct: ⚠️ Bildregel bewusst UNVERAENDERT (max-height/max-width + auto):
   der Zwischenstand 20260819-15 hatte hier `width:100%;height:100%` — als
   Flex-Kind einer Buehne OHNE feste Hoehe faellt die Prozenthoehe still auf
   `auto` zurueck, das Bild rechnete sich aus seiner Breite eine 721px-
   Eigenhoehe und BLIES DIE BUEHNE AUF 781px (gemessen 809x781, Zulassungs-
   Rail erst bei y1044, also unter dem Fold — FEHLERMUSTER 1). Der Versuch,
   das Bild stattdessen absolut zu setzen, war noch schlechter: ein absolut
   positioniertes ERSETZTES Element mit `width:auto` benutzt seine INTRINSISCHE
   Breite und ignoriert `right` — gemessen Buehne 88px breit, Bild 1200px,
   Seiten-Scrollbreite 2556. Die Buehne bekommt ihre Groesse deshalb selbst
   (feste Hoehe + Breiten-Deckel), das Bild bleibt beim genuegsamen
   max-height/max-width-Muster, das in BEIDEN Faellen haelt — bei definierter
   Buehnenhoehe (Desktop) wie bei aspect-ratio-Hoehe (unter lg). */
.ct-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* ct: 20260819-14 — Passermarken an der Weissbuehne, 1:1 aus dem Mockup
   (mockup-startseite.html: `.stage .tick{position:absolute;width:22px;
   height:22px;border:1px solid rgba(13,15,14,.22);z-index:3}`,
   `.t1{left:18px;top:18px;border-right:0;border-bottom:0}`,
   `.t2{right:18px;bottom:18px;border-left:0;border-top:0}`).
   Im Mockup sind das zwei leere `<span class="tick">`; hier als ::before /
   ::after der Buehne, damit kein Markup dafuer noetig ist.
   Werte unveraendert uebernommen — die Deko ist ein Mockup-Zitat, kein
   Vertikalrhythmus, deshalb keine --ct-space-Tokens.
   z-index 3: ueber dem Bild (z-index 1 aus NOVAs Bildkontext), unter dem
   Buehnen-Tag (.ct-stage-tag, im Mockup z-index 4).
   `pointer-events:none` steht bewusst dabei: die Buehne traegt im Hero das
   Produktbild, das im spaeteren Ausbau verlinkt werden kann — zwei
   unsichtbare 22px-Ecken duerfen davon nichts abfangen (Fehlerregister 7). */
.ct-stage::before,
.ct-stage::after{
  content:"";
  position:absolute;
  width:22px;height:22px;
  border:1px solid rgba(13,15,14,.22);
  z-index:3;
  pointer-events:none;
}
.ct-stage::before{left:18px;top:18px;border-right:0;border-bottom:0}
.ct-stage::after{right:18px;bottom:18px;border-left:0;border-top:0}
.ct-stage-tag{
  /* ct: 20260820-30 — Tag zeichnet die Buehnenecke unten links SELBST:
     -1px versetzt + Radius 1px groesser ergibt die konzentrische Kurve exakt
     1px AUSSERHALB der Buehnenrundung. Der opake Ink deckt so die weisse
     AA-Kante der Buehne ab, die eigene AA-Kante mischt Ink-auf-Ink gegen den
     Hero-Grund — der helle Eck-Bogen (Zwickel) ist damit weg. max-width
     +2px laesst den vollbreiten Tag (mobil, zweizeilig) rechts ebenfalls
     1px ueberstehen und deckt dort die zweite weisse Ecke. */
  position:absolute;left:-1px;bottom:-1px;display:inline-flex;align-items:center;gap:10px;
  max-width:calc(100% + 2px);
  background:var(--ct-ink);color:#fff;padding:12px 18px;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  border-radius:0 var(--ct-radius-sm) 0 calc(var(--ct-radius-lg) + 1px);
}
.ct-stage-tag i{width:6px;height:6px;background:var(--ct-volt)}

/* Zulassungs-Rail */
/* ct: Label-Spalte war 238px breit fuer ein 14px-Label (gemessen 238×121) —
   reine Totflaeche. max-content bindet die Breite an den Text, das Polster
   traegt den Abstand zur ersten Zelle; kein geratener Pixelwert mehr. */
.ct-zrail{
  display:grid;grid-template-columns:max-content repeat(3,1fr);
  border-top:1px solid var(--ct-dline);
}
.ct-zlab{display:flex;flex-direction:column;justify-content:center;padding:var(--ct-cell-y) 32px var(--ct-cell-y) 0}
.ct-zlab b{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ct-dmuted)}
.ct-z{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:var(--ct-cell-y) 24px;border-left:1px solid var(--ct-dline);color:#fff;
  text-decoration:none;
}
a.ct-z,a.ct-z:hover,a.ct-z *{text-decoration:none}
a.ct-z:hover{background:var(--ct-ink-2);color:#fff;text-decoration:none}
a.ct-z:hover .ct-z-t{color:var(--ct-volt)}
.ct-z-n{font-family:var(--ct-font-display);font-weight:900;font-size:46px;line-height:1;color:var(--ct-volt)}
.ct-z-n em{font-style:normal;font-size:14px;font-weight:700;color:#fff;margin-left:8px;letter-spacing:.04em}
.ct-z-t{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ct-dmuted)}

/* USP-Band */
/* ct: 20260820-22 (Ben-Go 20.08.2026, v1-Paket) — AUS DEM TEXTBAND WERDEN VIER
   KARTEN, DIE DIE HERO-UNTERKANTE UEBERLAPPEN.
   IST bis -21: transparente Textspalten, getrennt durch senkrechte Striche,
   Icon = 24x2px-Strich. SOLL v1 (mockup-startseite-v1.pdf, im PDF-Viewer
   angesehen und per Pixelprobe vermessen): vier weisse Karten mit Rundung und
   dezentem Schatten, oben ein ICON-QUADRAT mit getoentem Grund, und die
   Kartenreihe steht mit ihrer Oberkante UEBER der dunklen Hero-Flaeche.

   ⚠️ BANDGRUND IST WEISS, NICHT PAPIER-GRAU. Das Briefing beschrieb das Band
   als Papier-Grau; gemessen im v1-Render ist es an drei Punkten #FFFFFF
   (Papier-Grau #F4F6F8 traegt in v1 NUR das Bestseller-Band). Das Mockup ist
   der Vertrag (Fehlerregister 6) — die Karten trennen sich hier ueber Schatten
   und Rundung vom Grund, nicht ueber eine Bandfarbe. Wer doch Grau will,
   tauscht genau die eine Deklaration unten gegen var(--ct-band-paper).

   MECHANIK DES UEBERLAPPENS: Das Polster oben verhindert das Zusammenfallen
   der Aussenraender (sonst zieht der negative Aussenrand des Rasters die
   WEISSE Bandflaeche mit nach oben ueber den Hero). Beide Werte kommen aus
   demselben Token, der Hub ist also exakt eine Bandeinheit --ct-band-y und
   kein freihaendiger Pixelwert (Fehlerregister 3). Der Hero bekommt in
   gleicher Hoehe zusaetzliches Bodenpolster, damit die Zulassungs-Rail ihren
   Abstand behaelt (siehe .ct-hero). */
.ct-uspband{background:#fff;padding-top:var(--ct-band-y);padding-bottom:var(--ct-band-y)}
.ct-uspgrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ct-grid-gap);
  margin-top:calc(-1 * (var(--ct-band-y) + var(--ct-band-y)));
  position:relative;z-index:1;
}
.ct-usp{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--ct-line);
  border-radius:var(--ct-radius); /* ct: Rolle Karte */
  padding:var(--ct-cell-y);
  /* ct: Der Schatten ist der EINZIGE Wert dieser Sektion, der nicht aus einem
     Token kommt — er hat keine Rolle im Tokensatz (bisher arbeitet das Design
     ohne Schatten). Er steht deshalb hier EINMAL und wird von den
     Produktkarten unten ueber dieselbe Deklaration wiederverwendet
     (--ct-card-shadow), damit nicht zwei Schattenfassungen entstehen. */
  box-shadow:var(--ct-card-shadow);
}
/* ct: Icon-Quadrat statt Strich. Die Toenung alterniert Volt/CTA — genau so
   im v1-Render gemessen (#E9F4E1 / #E4F0FB / #EAF5E2 / blau). Beide Toene
   kommen aus vorhandenen Tokens; fuer Volt liefert --ct-volt-rgb die
   Komponenten, damit kein zweiter Hexwert entsteht. */
.ct-usp-ico{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;
  border-radius:var(--ct-radius-sm); /* ct: Rolle Bedienelement/Badge */
  background:rgba(var(--ct-volt-rgb),.14);color:var(--ct-volt-d);
  margin-bottom:var(--ct-stack-sm);
}
.ct-usp:nth-child(even) .ct-usp-ico{background:var(--ct-cta-soft);color:var(--ct-cta)}
.ct-usp-ico svg{display:block}
.ct-usp h3{
  font-size:14px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ct-text);margin:0 0 7px;
  font-family:var(--ct-font-display);
}
.ct-usp p{margin:0;font-size:13px;line-height:1.6;color:var(--ct-muted)}

/* --- Sektionen im Content ------------------------------------------------ */
/* ct: NOVA gibt jeder main section eigenes vertikales Padding — auf eigenen
   Sektionen neutralisieren, das Mass setzen wir selbst (LEHREN B.1). */
main .ct-sec,
main .ct-banddark{padding:var(--ct-band-y) 0}
.ct-klassen{background:#fff}

/* Fahrzeug-Klassen-Grid */
/* ct: 20260820-22 (Ben-Go 20.08.2026, v1-Paket) — GLEICHGROSSE KACHELN.
   IST bis -21: zwei grosse (span 3) + drei kleine (span 2) Kacheln in einem
   6-Spalten-Raster, Fusszeile hellgrau. SOLL v1: EIN Raster gleich grosser
   Kacheln, Fusszeile in Anthrazit mit weissen Versalien und gruenem Pfeil.

   SPALTENZAHL FOLGT DER ITEM-ZAHL (Fehlerregister 3b) — der Datenstand sind
   FUENF Kategorien, und fuenf gehen in kein 4er-Raster ohne halb leere Zeile:
     ab 1400px : 5 Spalten, EINE volle Zeile. Kachelbreite bei 1440 = 252px,
                 praktisch das Mockup-Mass (gemessen 244px im v1-Render) —
                 deshalb ist das hier die ruhigere Loesung als 3+2 mit zwei
                 verschieden breiten Kachelgroessen.
     992-1399  : 3 + 2. Das Raster hat 6 Spalten, die ersten drei Kacheln
                 spannen 2, die letzten beiden 3 — dadurch ist JEDE Zeile
                 voll (5 Items in 3 Spalten waeren sonst 3+2 mit 33 % Totraum).
     768-991   : 2 Spalten, letzte Kachel ueber beide (Bestandsregel).
     <768      : 1 Spalte.
   Die Bildzone haengt nicht mehr an einem Pixelwert je Kachelgroesse,
   sondern am Verhaeltnis --ct-cat-ratio — sie schrumpft mit der Kachel. */
.ct-catgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--ct-grid-gap)}
.ct-cat{
  display:flex;flex-direction:column;
  border:1px solid var(--ct-line);
  background:#fff;color:var(--ct-text);
  text-decoration:none;
  /* ct: 20260820-20 — Rolle Karte. `overflow:hidden` ist Pflicht: die Kachel
     hat oben eine Bildzone und unten eine Fusszeile mit eigener Flaeche
     (--ct-paper), beide bis an die Kartenkante — ohne Clipping stuenden ihre
     rechten Winkel ueber der Kartenrundung. */
  border-radius:var(--ct-radius);
  overflow:hidden;
}
.ct-cat:hover{border-color:var(--ct-ink);text-decoration:none;color:var(--ct-text)}
.ct-cat:hover .ct-cat-name,
.ct-cat .ct-cat-name{text-decoration:none}
/* ct: Fahrzeugbild — Weissbuehne wie im Mockup, contain statt cover (reale
   Fotos haben weissen Studiogrund, LEHREN F.2). Die Hoehe kommt aus dem
   Verhaeltnis-Token, damit alle Kacheln bei gleicher Breite auch gleich hohe
   Bildzonen haben und kein Breakpoint einen zweiten Pixelwert braucht. */
.ct-cat-img{
  display:flex;align-items:center;justify-content:center;
  background:#fff;padding:14px;
  aspect-ratio:var(--ct-cat-ratio);
  /* ⚠️ ct: `min-height:0` ist die TRAGENDE Zeile, nicht Kosmetik. Als
     Flex-Item hat die Bildzone `min-height:auto` = ihre min-content-Hoehe,
     und die ist die INTRINSISCHE Hoehe des Fahrzeugfotos. Gemessen ohne diese
     Zeile: aspect-ratio stand korrekt auf 16/9, die Zone war trotzdem
     251/251/251/362/309px hoch — fuenf Kacheln, drei verschiedene Bildzonen
     (Fehlerregister 15 in der Vertikalen, Fehlerregister 19: gleiche
     Kachelhoehe ist nicht gleiches Bild). Mit min-height:0 greift das
     Verhaeltnis, `overflow:hidden` fangt den Rest ab. */
  min-height:0;overflow:hidden;
}
.ct-cat-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* Fusszeile: Anthrazit, weisse Versalien links, gruener Pfeil rechts (v1).
   ct: 20260820-22 — vorher --ct-paper mit dunklem Text und einem umrandeten
   Pfeilkasten; die Trennlinie ueber der Fusszeile entfaellt, weil die dunkle
   Flaeche die Trennung selbst uebernimmt. */
.ct-cat-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;background:var(--ct-ink);color:#fff;
  margin-top:auto;
}
.ct-cat:hover .ct-cat-foot{background:var(--ct-ink-3)}
/* ct: min-width:0 auf dem Textblock — ein Flex-Item schrumpft nie unter sein
   laengstes unumbrechbares Wort (Fehlerregister 15). "SENIORENFAHRZEUGE" ist
   genau so ein Wort und lief bei 768px 80px ueber seine Kachel hinaus
   (gemessen clientWidth 159 / scrollWidth 239). overflow-wrap ist die
   Rueckfallebene fuer noch laengere Kategorienamen aus der Wawi (M.9). */
.ct-cat-txt{min-width:0;overflow-wrap:break-word}
/* ct: 20260820-22 — Schriftgrad 14,5 -> 11,5px mit weiterer Sperrung. Das ist
   das im v1-Render gemessene Mass (Kachel 244px, "SENIORENFAHRZEUGE" auf EINER
   Zeile). Bei 14,5px passte der laengste Kategoriename in die jetzt 252px
   breite Kachel nicht mehr auf eine Zeile — Fehlerregister 15 loest man hier
   am Schriftgrad, nicht mit einem Umbruch, den nur eine von fuenf Kacheln
   haette. */
.ct-cat-name{
  display:block;
  font-family:var(--ct-font-display);font-weight:700;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;line-height:1.3;color:#fff;
}
/* ct: Pfeil als blosses Glyph in Volt (v1) statt umrandetem Kasten. Fester
   Platz per width, damit er in allen Kacheln auf derselben Flucht sitzt. */
.ct-cat-arrow{
  flex:none;width:18px;text-align:right;
  color:var(--ct-volt);font-size:16px;line-height:1;
  transition:transform .15s ease;
}
.ct-cat:hover .ct-cat-arrow{transform:translateX(3px)}

/* Guide-Band (dunkel) */
main .ct-banddark{background:var(--ct-ink);color:#fff}
.ct-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ct-grid-gap)}
/* ct: 20260820-20 — Rolle grosser Container (Guide-Karte im dunklen Band). */
.ct-gcard{border:1px solid var(--ct-dline);padding:28px;background:var(--ct-ink-2);border-radius:var(--ct-radius-lg)}
.ct-gnum{
  font-family:var(--ct-font-display);font-weight:900;font-size:46px;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--ct-volt);
}
.ct-gcard h3{
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;margin:18px 0 10px;font-family:var(--ct-font-text);
}
.ct-gcard p{margin:0 0 10px;font-size:13.5px;line-height:1.6;color:var(--ct-dmuted)}
.ct-gquote{
  border-left:2px solid var(--ct-volt);padding-left:12px;
  font-size:12.5px;color:#fff;font-style:italic;
}

/* --- Responsive: Mockup ist Desktop-only — mobil BEWUSST abgeleitet ------ */
/* ct: 20260820-22 — Klassen-Raster unter 1400px: 3 + 2 statt 5 in einer Reihe.
   Bei 1399px waere die Kachel im 5er-Raster nur noch 232px breit; ab hier
   traegt ein 6-Spalten-Raster die fuenf Kacheln als volle 3er- und volle
   2er-Zeile (Fehlerregister 3b: keine halb leere Zeile). Die beiden Kacheln
   der zweiten Zeile sind untereinander gleich breit. */
@media (max-width: 1399.98px){
  .ct-catgrid{grid-template-columns:repeat(6,1fr)}
  .ct-cat{grid-column:span 2}
  .ct-cat:nth-child(n+4){grid-column:span 3}
  /* ct: 20260820-26 — die 1,5-fach breiten Kacheln der zweiten Zeile bekommen
     das 1,5-fache Verhaeltnis, damit sie GLEICH HOCH mit der ersten Zeile
     schliessen. Gemessen bei 1280 ohne diese Zeile: Reihe 1 384x261,
     Reihe 2 588x376 — 115px Unterschied bei angeblich gleich grossen Kacheln
     (Fehlerregister 19). Abgeleitet aus demselben Token, kein zweiter Wert.
     ⚠️ `:nth-child` ist hier unbedenklich, weil .ct-catgrid ausschliesslich
     eigene <a class="ct-cat"> enthaelt — kein Bootstrap-clearfix dazwischen,
     der die Zaehlung verfaelschen koennte (Fehlerregister, Messfallen). */
  .ct-cat:nth-child(n+4) .ct-cat-img{aspect-ratio:calc(var(--ct-cat-ratio) * 1.5)}
}
@media (max-width: 1199.98px){
  .ct-hero-grid{grid-template-columns:1fr 1fr;gap:36px}
  .ct-hero-h1{font-size:52px}
  /* ct: Unter lg halbiert sich die Buehnenbreite (gemessen 346px bei 768),
     die feste Desktop-Hoehe wuerde daraus einen schmalen hohen Weiss-Turm
     machen. Hoehe folgt hier der Breite; 1.2 ist das Mockup-Verhaeltnis
     der Buehne (650/566 = 1.15) auf ein rundes Mass gebracht. */
  .ct-stage{height:auto;aspect-ratio:1.2;max-width:none;padding:24px 28px}
  /* ct: 3 Zellen in 2 Spalten hiessen 2+1 — die zweite Reihe stand zur
     Haelfte leer (Fehlerregister 3b). Die Spaltenzahl folgt der Item-Zahl:
     drei Zulassungsklassen = drei Spalten, Label als volle Zeile darueber. */
  .ct-zrail{grid-template-columns:repeat(3,1fr)}
  .ct-zlab{grid-column:1 / -1;padding:var(--ct-cell-y) 0 4px}
  .ct-z{padding:var(--ct-cell-y) 18px}
  .ct-z:first-of-type{border-left:0;padding-left:0}
  .ct-z-n{font-size:38px}
  /* ct: 20260820-22 — vier Karten in zwei Spalten (2x2, beide Zeilen voll).
     Die Trennstrich-/Polsterlogik des alten Textbands ist ersatzlos weg: das
     sind jetzt Karten mit eigenem Rahmen. */
  .ct-uspgrid{grid-template-columns:repeat(2,1fr)}
}
/* ct: 20260819-15 (Korrekturpaket 2) — Klassen-Raster unter lg auf ZWEI
   Spalten. Im 6-Spalten-Raster mass die kleine Kachel bei 768px nur 213px,
   der Titel brauchte 239px und wurde abgeschnitten (gemessen clientWidth 159
   gegen scrollWidth 239).
   Spaltenzahl folgt der Item-Zahl (Fehlerregister 3b): drei kleine Kacheln
   in zwei Spalten waeren 2+1 mit einer halb leeren letzten Zeile — deshalb
   spannt die LETZTE Kachel ueber beide Spalten. So ist jede Zeile voll:
   gross | gross | klein+klein | klein(voll). */
@media (max-width: 991.98px){
  /* ct: O-5 (N-7, 21.08.2026) — zwischen 768 und 991 ist die Copy-Spalte
     350px breit; beide CTAs (252 + 211 + 14 Luecke) passen nicht nebeneinander
     und brachen als ausgefranste Einzelbreiten um. Wachsende Flex-Basis:
     wo sie umbrechen, fuellt jeder seine Zeile — auf breiten Spalten teilen
     sie sich die Zeile weiter. Unter 768 gilt die 100%-Basis von unten. */
  .ct-hcta .btn{flex:1 1 auto}
  .ct-catgrid{grid-template-columns:repeat(2,1fr)}
  .ct-cat,
  .ct-cat:nth-child(n+4){grid-column:span 1}
  .ct-cat:last-child{grid-column:span 2}
  /* ct: 20260820-25 — DIE DOPPELT BREITE KACHEL BLEIBT GLEICH HOCH.
     Gemessen bei 768 ohne diese Zeile: vier Kacheln 332x232, die fuenfte
     688x432 — fast doppelt so hoch wie ihre Nachbarn, weil das Verhaeltnis
     16/9 auf der doppelten Breite auch die doppelte Hoehe ergibt. Das ist
     Fehlerregister 19 (gleiche Karte, anderes Erscheinungsbild) und
     widerspricht dem "gleichgross" des v1-Pakets.
     Die doppelte Breite bekommt deshalb das doppelte Verhaeltnis — ABGELEITET
     aus demselben Token, kein zweiter Wert (Fehlerregister 3). Restdifferenz
     ~7px: die Rasterluecke zaehlt bei der spannenden Kachel zur Breite mit. */
  .ct-cat:last-child .ct-cat-img{aspect-ratio:calc(var(--ct-cat-ratio) * 2)}
}
/* ct: KEIN vertikaler Wert mehr in dieser Media Query — die Mobilstufe des
   Rasters steht in ct-base.css (:root unter 767.98px). Hier nur noch, was
   wirklich seitenspezifisch ist: Spaltenzahl, Schriftgrade, Rahmen. */
@media (max-width: 767.98px){
  /* ct: 20260820-31 (Ben-Review) — MOBIL STEHT DIE BUEHNE UEBER DEM PREIS
     ("das artikelbild ueber den Preis bauen, sonst macht das da nix her"):
     Reihenfolge Kick -> H1 -> Subline -> Chips -> Buehne -> Preis -> CTAs.
     Gleicher display:contents-Kniff wie bei .ct-sechead-stack unten: die
     Copy-Spalte loest sich auf, ihre Kinder werden direkte Flex-Kinder des
     Hero-Stapels und lassen sich per order sortieren — ein Markup fuer
     beide Breakpoints. gap uebernimmt den Grid-Abstand. */
  .ct-hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .ct-hero-copy{display:contents}
  .ct-hero-grid .ct-kick{order:1}
  .ct-hero-grid .ct-hero-h1{order:2}
  .ct-hero-grid .ct-hero-sub{order:3}
  .ct-hero-grid .ct-hchips{order:4}
  .ct-hero-grid .ct-stage{order:5;margin-top:28px}
  .ct-hero-grid .ct-pa{order:6}
  .ct-hero-grid .ct-hcta{order:7}
  .ct-hero-h1{font-size:40px}
  .ct-zrail{grid-template-columns:1fr}
  /* ct: 20260820-31 (Ben-Review, "hier zentrieren") — die Zulassungs-Bloecke
     standen mobil linksbuendig im vollbreiten Band. */
  .ct-z{border-left:0;border-top:1px solid var(--ct-dline);padding:var(--ct-cell-y) 0;align-items:center;text-align:center}
  .ct-zlab{align-items:center;padding-right:0}
  /* ct: 20260820-22 — mobil BEWUSST gestaltet (Fehlerregister 9/21): die vier
     USP-Karten bleiben Karten und stapeln einspaltig; der Ueberlapp ueber den
     Hero bleibt erhalten (mobil --ct-band-y = 28px), weil er sonst nur auf
     dem Desktop eine Gestaltungsabsicht waere. */
  .ct-uspgrid{grid-template-columns:1fr}
  .ct-sechead{flex-direction:column;align-items:flex-start;gap:12px}
  /* ct: 20260820-24 — MOBIL STEHT DER MEHR-LINK UNTER DER SUBLINE, nicht
     zwischen Ueberschrift und Subline. Gemessen im 390er-Screenshot: durch das
     Umbrechen der Kopfzeile schob sich "Zeige alle neuen Artikel" zwischen H2
     und Erklaersatz und zerriss den Textblock (Fehlerregister 3 — sinnloser
     Umbruch, hier auf Blockebene).
     `display:contents` loest die Kopfzeile auf, damit ihre Kinder direkte
     Flex-Kinder des Stapels werden und per `order` sortiert werden koennen —
     ohne das Markup fuer den Mobilfall zu verdoppeln. */
  .ct-sechead-stack .ct-sechead-main{display:contents}
  .ct-sechead-stack > .ct-sechead-main > div{order:1}
  .ct-sechead-stack > .ct-sechead-note{order:2}
  .ct-sechead-stack .ct-morelink{order:3;align-self:flex-start;margin-top:var(--ct-stack-sm)}
  .ct-sechead-note{text-align:left;max-width:none}
  .ct-h2{font-size:30px}
  .ct-catgrid{grid-template-columns:1fr}
  .ct-cat,.ct-cat:nth-child(n+4){grid-column:span 1}
  .ct-guide{grid-template-columns:1fr}
  /* ct: Mobil bekommt jeder Hero-CTA eine eigene volle Zeile. Frueher stand
     hier `flex-direction:column` — das arbeitet gegen das flex-wrap, das die
     Zeile ab Tablet braucht (Punkt 4). Ueber die Flex-Basis erreicht man
     dasselbe Bild, ohne die Richtung umzuschalten. */
  .ct-hcta .btn{flex:1 1 100%}
}

/* ct: NOVAs Phantom-Whitespace auf der Startseite killen (LEHREN B.2) —
   Scope ueber :has auf unsere Klassen-Sektion, ohne Body-Klasse. Das
   Vertikalmass tragen die ct-Sektionen selbst (88px).
   ⚠️ Seit ct-base.css 20260819-4 traegt #content-wrapper auch die
   HORIZONTALE Flucht (max-width + 40px Polster). Auf der Startseite ist das
   eine Ebene zu viel: hier liegen VOLLBREITE Baender (Guide-Band auf Ink,
   Slider-Band mit Trennlinie), deren Flucht das innere .ct-wrap traegt.
   Ohne diese Ausnahme polstert erst der Wrapper und dann .ct-wrap —
   gemessen 1440: Sektionsinhalt bei 80..1360 statt 40..1400, und das
   Ink-Band verlor seinen Vollrand. Bewusste, dokumentierte Ausnahme fuer
   EINEN Seitentyp — der Grundwert bleibt global (Fehlerregister 17). */
#content-wrapper:has(.ct-klassen){
  padding:0;
  max-width:none;
}
#content:has(.ct-klassen){padding-top:0;padding-bottom:0}

/* --- Produktband: STATISCHES RASTER auf Papier-Grau ---------------------- */
/* ct: 20260820-22 (Ben-Go 20.08.2026, v1-Paket) — DER SLIDER IST RAUS.
   IST bis -21: JTLs slick-Slider auf Weiss, vier von acht Karten sichtbar,
   Rest hinter Pfeilen. SOLL v1 (mockup-startseite-v1.pdf): ein statisches
   Karten-GRID auf Papier-Grau-Band, bei 1440 vier Spalten x zwei Reihen —
   alle acht Karten sofort sichtbar, kein Bedienelement noetig.

   Umgesetzt ist das am TEMPLATE, nicht per CSS gegen slick: page/index.tpl
   bindet snippets/product_slider.tpl nicht mehr ein, sondern schleift selbst
   ueber $Box->Artikel->elemente und rendert je Artikel dieselbe Kachel
   (productlist/item_slider.tpl). Damit gibt es auf dieser Sektion weder
   slick-Markup noch slick-JS — und alle frueheren Gegenregeln
   (.ct-sliderband .slick-arrow / .slick-slider-other-Aussenraender /
   Peek-Kachel-Ausgleich mobil) sind ERSATZLOS ENTFALLEN statt tot stehen zu
   bleiben. Der PDP-Empfehlungsslider bleibt Slider und hat seine eigenen
   Regeln in ct-artikel.css.

   SPALTENZAHL: page/index.tpl (Startseite) rechnet sie aus der Item-Zahl
   (8 Artikel -> 4 Spalten, 3 -> 3; keine halb leere Schlusszeile,
   Fehlerregister 3b). ct: 20260820-44 — die PDP (ct_recgrid.tpl) setzt seit
   dem Ben-Review dagegen FIX .ct-pgrid-4: Kartengroesse schlaegt dort die
   Reihenfuellung, eine teilbefuellte Schlussreihe ist akzeptiert. */
.ct-pband{background:var(--ct-band-paper)}
main section.ct-pband{padding:var(--ct-band-y) 0}
.ct-pgrid{display:grid;gap:var(--ct-grid-gap)}
.ct-pgrid-2{grid-template-columns:repeat(2,1fr)}
.ct-pgrid-3{grid-template-columns:repeat(3,1fr)}
.ct-pgrid-4{grid-template-columns:repeat(4,1fr)}
/* ct: Rasterkind = Karte. Die Kachel selbst traegt height:100% (siehe
   #content .ct-pcard), damit alle Karten einer Reihe gleich hoch schliessen. */
.ct-pgrid > .ct-pgrid-item{min-width:0;display:flex}
/* ⛔ ct: 20260820-28 — DIE KARTE MUSS IHRE SPUR AUCH IN DER BREITE FUELLEN.
   Gemessen auf der Artikelseite bei 768px (einspaltiges Raster, Spur 688px):
   die drei Karten waren 575 / 615 / 644px breit — drei verschiedene Breiten
   nebeneinander und bis zu 113px Totflaeche rechts (Fehlerregister 3b).
   Ursache: `.ct-pgrid-item` ist ein Flex-Container, `.ct-pcard` also ein
   Flex-ITEM mit `flex: 0 1 auto` — es waechst NICHT ueber seine Inhaltsbreite
   hinaus. Bei schmalen Spuren (4 Spalten, 437px) fiel das nie auf, weil die
   Inhaltsbreite groesser war als die Spur und die Karte geclampt wurde.
   `flex:1 1 auto` + `min-width:0` machen aus dem Item wieder eine Karte, die
   ihre Spur fuellt und trotzdem schrumpfen darf (Fehlerregister 15). */
.ct-pgrid > .ct-pgrid-item > .ct-pcard{flex:1 1 auto;min-width:0}
/* ct: 20260820-24 — MOBIL/TABLET BEWUSST GESTALTET (Fehlerregister 9 + 21).
   ⚠️ Dieser Block stand in -23 noch nicht, und das war ein echter Fehler:
   gemessen bei 390px trugen die Karten weiter VIER Spalten, also 76px Breite
   bei 109px Inhalt — acht ueberlaufende Karten. Das v1-Mockup ist Desktop-only,
   der Mobilzustand muss deshalb hier entschieden werden statt "macht das
   Raster schon".
   ⚠️ Der Block steht bewusst HINTER den .ct-pgrid-<n>-Regeln: beide haben
   Spezifitaet (0,1,0), es entscheidet die Reihenfolge. Weiter oben bei den
   uebrigen Media Queries wuerde er verlieren (Fehlerregister 16 — nicht
   !important, sondern die Kaskade richtig herum).
   Spaltenzahl bleibt ein Teiler der Item-Zahl (8): 4 -> 2 -> 1, nie 3
   (Fehlerregister 3b, keine halb leere Schlusszeile).
   Unter 576px EINE Spalte — das ist derselbe Zustand wie im Kategorie-Raster
   bei 390px (gemessen: Karte 350px = volle Breite). Zwei Spalten sind an
   dieser Stelle GEMESSEN worden, nicht vermutet: Karte 167px, und dann bricht
   auf ALLEN acht Karten die CTA-Beschriftung auf zwei Zeilen und der Preis auf
   vier Zeilenkaesten um (Range.getClientRects). Das ist der gewuerfelte
   Umbruch aus Fehlerregister 3 in Serie. Gleicher Baustein, gleicher
   Mobilzustand wie die Kategorie (Fehlerregister 13).
   ⚠️ Preis der Entscheidung: bei acht Artikeln wird das Band auf 390px rund
   5.200px hoch. Die Artikelzahl ist eine BACKEND-Einstellung
   (startseite_neuimsortiment_anzahl), keine Layoutfrage — als offener Punkt
   im Abnahmebericht benannt statt hier heimlich Karten zu verstecken. */
/* ⛔ ct: 20260820-28 — `.ct-pgrid-3` DARF UNTER 1200 NICHT AUF ZWEI SPALTEN.
   Gemessen auf der Artikelseite bei 768px, nachdem das PDP-Empfehlungsband
   dasselbe Raster benutzt: drei Karten in zwei Spuren ergaben 2 + 1, also eine
   halb leere Schlusszeile mit ~50 % Totflaeche — genau Fehlerregister 3b, und
   die Regel darueber behauptet noch "Spaltenzahl bleibt ein Teiler der
   Item-Zahl". Fuer -4 stimmt das (4 -> 2 -> 1), fuer -3 stimmte es nie:
   3 hat ausser 3 und 1 keinen Teiler.
   ⚠️ Der Fehler war schon vor der PDP da — die Startseiten-Box "Bestseller"
   traegt gemessen GENAU DREI Artikel und rendert damit `.ct-pgrid-3`. Er ist
   nur nie auf Tablet-Breite angesehen worden. Deshalb hier an der EINEN Quelle
   korrigiert und auf BEIDEN Seitengattungen nachgemessen (Fehlerregister 17).
   Stufung fuer -3: 3 Spalten bis 992 (Karte dort gemessen 288px, also breiter
   als die 167px, bei denen die CTA-Beschriftung umbricht), darunter EINE. */
@media (max-width: 1199.98px){
  .ct-pgrid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 991.98px){
  .ct-pgrid-3{grid-template-columns:1fr}
}
@media (max-width: 575.98px){
  .ct-pgrid-2,
  .ct-pgrid-3,
  .ct-pgrid-4{grid-template-columns:1fr}
}
.ct-morelink{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ct-text);border-bottom:2px solid var(--ct-volt);padding-bottom:7px;
  text-decoration:none;
}
.ct-morelink:hover{color:var(--ct-text);border-bottom-color:var(--ct-ink);text-decoration:none}

/* ct: 20260820-22 — DIE SLIDER-PFEILREGELN SIND ERSATZLOS ENTFALLEN.
   Sie positionierten NOVAs .slick-arrow auf der Kopfzeile des Bandes. Auf der
   Startseite gibt es seit dem v1-Umbau kein slick-Markup mehr; eine Regel, die
   nichts mehr trifft, ist genau die Zweitfassung, die spaeter jemand fuer die
   Erklaerung der Stelle haelt (Fehlerregister 17). Der PDP-Empfehlungsslider
   hat seine eigene, gemessene Fassung in ct-artikel.css. */

/* ct: Hier standen bis 20260819-8 zwei Selektor-Fassungen derselben Karte
   (`.slick-slide .product-wrapper > a` und `.slick-slide > div > a`), von
   denen KEINE matchte — der slick-slide IST der .product-wrapper.
   ⚠️ Seit 20260819-17 ist die Kachelwurzel auch nicht mehr der Anker, sondern
   `div.ct-pcard` aus dem neuen Child-Override productlist/item_slider.tpl
   (Korrekturpaket 6): der Link kann die Kachel nicht mehr umschliessen, weil
   in der Preiszeile ein echter Warenkorb-Button steht (<a> in <a> ist
   ungueltig, ein <form> im <a> wird vom Browser herausgeloest). */
#content .ct-pcard{
  display:flex;
  height:100%;
  background:#fff;
  border:1px solid var(--ct-line);
  text-align:left;
  /* ct: 20260820-20 — Rolle Karte, identisch zur Kategoriekachel
     (.productbox in ct-kategorie.css) — gleicher Baustein, gleiches Token
     (Fehlerregister 13). overflow:hidden wegen Bildzone und Ribbon an der
     Kartenkante. */
  border-radius:var(--ct-radius);
  overflow:hidden;
}
#content .ct-pcard-form{display:flex;flex-direction:column;width:100%}
#content .ct-pcard:hover{border-color:var(--ct-ink)}
#content .ct-pcard-link,
#content .ct-pcard-link:hover,
#content .ct-pcard-link:focus{display:block;color:inherit;text-decoration:none}
#content .ct-pcard a{text-decoration:none}
/* ct: NOVA gibt der Slider-Kachel `text-center-util` mit — im Mockup ist die
   Karte durchgehend linksbuendig (Kicker, Name, Verfuegbarkeit, Preis stehen
   auf EINER Fluchtlinie). Die Klasse sitzt am .product-wrapper, also eine
   Ebene ueber uns; deshalb hier am gemeinsamen Vorfahren zuruecknehmen. */
#content .slick-slide .product-wrapper,
#content .product-wrapper.text-center-util{text-align:left}

/* Bildzone: Weissbuehne mit Trennlinie (F.2: contain, Studiogruende
   verschmelzen). Die Bild-Transforms bleiben unangetastet (F.4). */
#content .ct-pcard .item-slider.productbox-image{
  border-bottom:1px solid var(--ct-line);background:#fff;position:relative;
}
/* Kicker + Titel — gleiche Fluchtlinie wie Preis und CTA (--ct-card-pad) */
#content .ct-pcard .ct-pcat{padding:var(--ct-card-pad) var(--ct-card-pad) 0}
#content .ct-pcard .item-slider-desc{
  padding:6px var(--ct-card-pad) 0;
  font-weight:600;font-size:15px;line-height:1.35;color:var(--ct-text);
  min-width:0;
}
/* ⛔ ct: NOVAs .text-clamp-2 war WIRKUNGSLOS und hat den Kacheltitel mitten
   durch die dritte Zeile geschnitten — gemessen 19.08. auf 8 von 8
   Startseiten-Kacheln UND 6 von 6 Kacheln im Empfehlungsslider der
   Artikelseite (Kasten 54px, Inhalt 93–149px, also bis zu 95px hart
   abgeschnitten).
   ⚠️ Es war KEIN Kaskadenproblem: .text-clamp-2 deklariert `-webkit-box`
   korrekt (NOVA _base.scss:326), aber der Karten-Anker war `display:flex`,
   das Clamp-Element damit ein FLEX-ITEM — und Flex-Items werden
   blockifiziert (`-webkit-box` -> `flow-root`), worauf -webkit-line-clamp
   nicht wirkt, waehrend NOVAs `overflow:hidden` weiter abschneidet.
   Gegenprobe am Objekt: selbst `setProperty('display','-webkit-box','important')`
   blieb `flow-root`. Der Clamp gehoert deshalb auf das INNERE span.
   Die Regel bleibt auch nach dem Umbau der Kachelwurzel stehen: sie haelt in
   beiden Faellen und ist die EINE Fassung dieses Fixes. */
#content .ct-pcard .item-slider-desc > span{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
/* ct: Titelzone auf zwei Zeilen reservieren — sonst sitzen Verfuegbarkeit,
   Preis und CTA benachbarter Kacheln auf verschiedenen Hoehen
   (Fehlerregister 19: gleiche Kartenhoehe ist nicht gleiches Bild). */
#content .ct-pcard .item-slider-desc{min-height:calc(2 * 1.35em + 6px)}
/* Verfuegbarkeitszeile */
#content .ct-pcard .item-delivery-status{
  padding:10px var(--ct-card-pad) 0;
  font-size:12.5px;min-height:34px;
}
/* Preiszeile: .ct-price-row traegt die Optik bereits (ct-kategorie.css, EINE
   Quelle fuer alle Kacheltypen) — hier nur die Kartenflucht und das
   Bodendruecken, damit die Zeile bei ungleich langen Titeln buendig bleibt. */
#content .ct-pcard .ct-price-row{
  padding:12px var(--ct-card-pad) var(--ct-card-pad);
  margin-top:auto;
}
#content .ct-pcard .item-slider-price{
  padding:0;margin:0;min-width:0;flex:1 1 auto;
}
#content .ct-pcard .price_wrapper{margin-bottom:0}

/* NOVAs Trenner-Headline (.hr-sect) rendert der Startseiten-Slider nicht
   mehr (page/index.tpl gibt title='' und setzt einen eigenen .ct-sechead) —
   die Regel bleibt, weil derselbe Baustein im Empfehlungs-Slider der
   Artikelseite weiterlaeuft (Fehlerregister 13). */
#content .hr-sect{
  font-family:var(--ct-font-display);
  font-weight:800;
  font-size:34px;
  letter-spacing:-.022em;
  text-transform:uppercase;
  color:var(--ct-text);
  justify-content:flex-start;
}
#content .hr-sect::before{display:none}

/* ct: Badges der Slider-Kachel — GLEICHE Behandlung wie in der
   Kategoriekachel (Fehlerregister 13: derselbe Baustein, zwei Instanzen).
   NOVAs .ribbon-3 haengt einen Zipfel an ::before/::after; der widerspricht
   der kantigen Designsprache. Seit die Slider-Kachel snippets/ribbon.tpl
   einbindet (Korrekturpaket 6) gibt es diese Badges hier ueberhaupt erst. */
/* ct: 20260820-21 — POSITION, RUNDUNG UND ZIPFEL STEHEN NICHT MEHR HIER.
   Bis -20 setzte diese Datei `left:0;top:0`, `border-radius` und das
   ::before/::after-Aus fuer dasselbe Badge, das ct-kategorie.css ebenfalls
   positionierte — ZWEI Fassungen desselben Fixes (Fehlerregister 17: "wer
   eine liest, haelt die Stelle fuer erklaert"). Und beide setzten das Badge
   AUF die Kartenkante, wo NOVAs Hover-Regel es herausschiebt und
   overflow:hidden es abschneidet (Bens Beanstandung 20.08.).
   Die Einrueckung liegt jetzt EINMAL in ct-base.css auf `.productbox-ribbon`
   — greift damit auch auf dieser Karte. Hier bleibt nur die FARBE/TYPO. */
#content .ct-pcard .badge,
#content .ct-pcard .label{border-radius:var(--ct-radius-sm)}
#content .ct-pcard .ribbon.productbox-ribbon{
  background:var(--ct-ink);color:#fff;
  font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}

/* --- Karten-Anbauten NUR im Startseiten-Raster (v1) ---------------------- */
/* ct: 20260820-22 — Die folgenden Regeln sind bewusst auf .ct-pgrid gescopet
   und NICHT auf .ct-pcard allgemein: dieselbe Kachel laeuft im
   PDP-Empfehlungsslider, der in diesem Paket nicht vermessen wird. Das ist die
   dokumentierte Ausnahme zu Fehlerregister 17, kein Versehen — der offene
   Punkt "Kachel-Anbauten auch fuer Kategorie/PDP" steht im Abnahmebericht. */
/* ⚠️ ct: `position:relative` ist Pflicht, nicht Deko. Ohne sie hat
   .ct-quick-actions keinen positionierten Vorfahren in der Karte und
   positioniert gegen den Ursprungs-Container: gemessen sass der Block dann bei
   x1334..1428 fuer JEDE Karte, also gestapelt am rechten Viewportrand statt in
   der Karte (Fehlerregister 2/7 — ein Overlay, das nicht in seiner Karte
   liegt). Der Label-Stapel links haengt an der Bildzone, die ihr
   position:relative schon traegt. */
.ct-pgrid .ct-pcard{position:relative;box-shadow:var(--ct-card-shadow)}

/* Label-Stapel oben links AUF dem Bild (v1: Klassen-Chip, darunter ggf. ein
   zweiter Chip — bei uns NOVAs "NEU"-Ribbon).
   ⚠️ Einzug = --ct-radius, also genau die Kartenrundung: die Overlay-Ecke
   liegt damit im Mittelpunkt des Rundungsbogens und kann weder vom
   `overflow:hidden` der Karte angeschnitten noch von einem Hover-Effekt
   herausgeschoben werden (Fehlerregister 2 / FEHLERMUSTER 2 — Bens
   Wiederholungs-Beanstandung). Kein negativer Offset, kein Sitz auf der Kante.
   Der Stapel traegt die Position EINMAL; die Kinder sind statisch, sonst
   laegen sie wieder uebereinander. */
.ct-pgrid .ct-plabels{
  position:absolute;top:var(--ct-radius);left:var(--ct-radius);z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  max-width:calc(100% - 2 * var(--ct-radius));
}
.ct-pgrid .ct-plabels .productbox-ribbon.ribbon,
.ct-pgrid .ct-pcard:hover .ct-plabels .productbox-ribbon.ribbon{
  position:static;top:auto;left:auto;right:auto;margin:0;
}
.ct-pgrid .ct-pclass{
  max-width:100%;
  padding:5px 9px;
  background:var(--ct-volt);color:var(--ct-ink);
  border-radius:var(--ct-radius-sm); /* ct: Rolle Badge */
  font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Vergleichen/Merken oben rechts — dieselben ECHTEN NOVA-Bedienelemente wie
   auf der Kategoriekachel (Fehlerregister 13). Position/Einzug kommen aus der
   Basisregel auf .productbox-quick-actions (ct-base.css); hier nur die
   Stapelordnung, weil unsere Karte eine eigene braucht. */
.ct-pgrid .ct-quick-actions{position:absolute;z-index:2;display:flex}

/* Spec-Chips (v1: graue Pillen unter dem Titel).
   ⚠️ DATENSTAND: Merkmale sind im Shop derzeit NICHT gepflegt (gemessen:
   tartikelmerkmal = 0 Zeilen). Das Template rendert die Zeile deshalb mit
   Guard — solange nichts da ist, existiert sie im DOM gar nicht, und es wird
   NICHTS erfunden. Die Optik steht hier bereits fertig, damit die Zeile beim
   ersten gepflegten Merkmal richtig aussieht statt neu gebaut zu werden. */
.ct-pgrid .ct-specs{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:10px var(--ct-card-pad) 0;
}
.ct-pgrid .ct-spec{
  padding:4px 9px;background:var(--ct-band-paper);color:var(--ct-text);
  border-radius:var(--ct-radius-sm); /* ct: Rolle Bedienelement/Chip */
  font-size:11.5px;line-height:1.35;
}
/* Marken-/Herstellerzeile in Volt (v1). Der Guard sitzt im Template
   (productlist/ct_pcat.tpl) — kHersteller ist bei allen 14 Artikeln 0,
   die Zeile bleibt bis zur Wawi-Pflege ein leerer Platzhalter, der nur die
   Fluchtlinie der Karten haelt. */
/* ct: 20260820-44 (Code-Review 14b) — die Volt-d-Einfaerbung des Kickers
   ist ENTFALLEN: #5AA834 auf Weiss traegt 2,97:1 und faellt bei 10,5px-
   Versaltext durch WCAG AA (4,5:1). Der Kicker erbt wieder --ct-muted aus
   der Grundregel — wie in der Kategorie-Kachel. */

/* ct: 20260820-22 — AUCH DIESE DREI SLIDER-GEGENREGELN SIND ENTFALLEN:
   der Kopf-Freiraum fuer die Pfeile unter 992px, die Neutralisierung der
   NOVA-Aussenraender an .slick-slider-other/.row und der Peek-Kachel-Ausgleich
   auf Mobil. Alle drei kaempften gegen slick-Markup, das die Startseite nicht
   mehr rendert. Das Raster braucht keine davon: sein Vertikalmass ist
   --ct-band-y am Band, sein Seitenmass die .ct-wrap-Flucht. */

/* ct: Preisanker brach zwischen Waehrung und Betrag um (gemessen 390+768) —
   Betrag ist eine typografische Einheit: nowrap, darunter kleinere Stufe. */
.ct-pa-n{white-space:nowrap}
@media (max-width: 991.98px){
  .ct-pa-n{font-size:34px}
}