/* =========================================================================
   CSR-Automotive · eBay-Beschreibungstemplate
   Datei: csr-ebay-2026.css
   Stand: 02.09.2026 · Mobile First

   Diese Datei liegt auf dem eigenen Webspace und wird vom eBay-HTML
   nachgeladen. Wird sie hier geaendert, aendert sich das Aussehen ALLER
   eBay-Angebote sofort - ohne ein einziges Listing anzufassen.

   AUFBAU DER SEITE
     1. Banner, randlos ueber die ganze Breite
     2. Navigation: zwei Auswahlmenues (Fahrzeugmarken / Alle Kategorien)
     3. Produktblock: Galerie + Artikelbeschreibung
     4. Vertrauensleiste
     5. Aufklappbare Infoabschnitte

   Bewusst KEIN Fussbereich: eBay erlaubt in der Artikelbeschreibung keine
   Links auf externe Seiten. Kontakt-, Service- und Informationslinks sind
   deshalb entfallen.

   AUFBAU DER DATEI: Mobile First. Die Regeln ohne Media Query gelten fuer
   das Smartphone. Erst weiter unten kommen die Erweiterungen fuer
   groessere Bildschirme (@media min-width).

   BREITE: Der Inhalt nutzt die volle Breite, die eBay hergibt (maximal
   1547 px, begrenzt durch eBays aeusseres Seitenraster von 1680 px).
   Es gibt hier bewusst KEINE max-width auf dem Container - nur die
   Textspalte wird auf eine lesbare Zeilenlaenge begrenzt.

   Keine Fremd-Bibliotheken (kein Bootstrap, kein Font Awesome),
   keine Google Fonts, kein JavaScript. Icons stecken als SVG im HTML.
   Alle Klassen beginnen mit "csr-".
   ========================================================================= */

/* =========================================================================
   1. GRUNDLAGE - gilt ab dem kleinsten Smartphone
   ========================================================================= */

.csr-tpl {
  /* --- Corporate Design CSR-Automotive --- */
  --csr-magenta:      #C5007B;
  --csr-magenta-dark: #9E0063;
  --csr-magenta-soft: #FCEBF5;
  --csr-anthracite:   #4B4B4D;
  --csr-text:         #1A1A1A;
  --csr-heading:      #bc1988;   /* Farbe aller Ueberschriften */
  --csr-muted:        #6B6B70;
  --csr-line:         #E2E2E6;
  --csr-line-strong:  #C9C9CF;
  --csr-bg:           #FFFFFF;
  --csr-soft:         #F4F4F6;
  --csr-radius:       4px;

  /* --- Werte, die sich mit der Bildschirmbreite aendern --- */
  /* Innenabstand links/rechts. 0, weil eBay seine eigenen Bloecke
     (Artikelmerkmale, Abschnittsueberschriften) genau an der Kante des
     Beschreibungsrahmens ausrichtet - am 05.09.2026 nachgemessen. Jeder
     Wert groesser 0 erzeugt einen sichtbaren Versatz gegen den Rest der
     eBay-Seite. Soll doch eingerueckt werden: hier einen Wert eintragen,
     dann ruecken ALLE Bloecke gemeinsam ein. */
  --csr-pad:          0px;
  --csr-gap:          20px;   /* Abstand zwischen Bloecken   */
  /* Abstand der Navileiste zum linken und rechten Rand. Die Navileiste
     enthaelt Text, der direkt an der Kante gedrueckt wirkt - Banner und
     Bilder duerfen dagegen randlos stehen. Darum hat sie ihren eigenen
     Wert und nicht --csr-pad. */
  --csr-nav-pad:      14px;
  --csr-tap:          44px;   /* Mindestgroesse Tippflaeche  */

  /* --- Seitenverhaeltnis des Kopfbanners ---
     "auto" (Standard) = das Bild wird auf JEDEM Geraet vollstaendig
     gezeigt, in seinem eigenen Format. Nichts wird abgeschnitten. Das
     ist die richtige Einstellung, wenn im Bild wichtige Elemente am
     Rand sitzen - beim Firmenbanner etwa das CSR-Logo rechts.

     Alternative: ein Verhaeltnis eintragen, z. B. "2 / 1". Dann wird das
     Bild auf diese Hoehe gebracht und links/rechts mittig beschnitten.
     Das Motiv wirkt auf dem Handy groesser, aber alles jenseits der
     Bildmitte verschwindet. Nur sinnvoll bei Motiven, die mittig liegen
     und deren Raender leer sind. Wird hier ein Verhaeltnis gesetzt,
     muss auch der Block in Abschnitt 7 (ab 600 px) angepasst werden. */
  --csr-banner-ratio: auto;

  /* --- Maximale Zeilenlaenge der Textspalte ---
     Rund 75 Zeichen pro Zeile. Darueber wird Lesen muehsam. */
  --csr-measure:      620px;

  /* --- Hoehe der Auswahlmenue-Klappflaechen --- */
  --csr-dd-max:       340px;

  /* Systemschriften: laden von keinem fremden Server, sind sofort da.
     "Clio Light" wird zuerst versucht - ist die Hausschrift auf dem
     Rechner des Betrachters installiert, wird sie verwendet. */
  --csr-font: "Clio Light", -apple-system, BlinkMacSystemFont, "Segoe UI",
              Roboto, "Helvetica Neue", Arial, sans-serif;

  box-sizing: border-box;
  font-family: var(--csr-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--csr-text);
  background: var(--csr-bg);
  -webkit-text-size-adjust: 100%;
}

.csr-tpl *,
.csr-tpl *::before,
.csr-tpl *::after { box-sizing: border-box; }

.csr-tpl img { max-width: 100%; height: auto; display: block; border: 0; }

.csr-tpl a { color: var(--csr-magenta); text-decoration: none; }
.csr-tpl a:hover,
.csr-tpl a:focus-visible { text-decoration: underline; }

.csr-tpl :focus-visible {
  outline: 2px solid var(--csr-magenta);
  outline-offset: 2px;
}

.csr-tpl p { margin: 0 0 1em; }
.csr-tpl p:last-child { margin-bottom: 0; }

/* Der Container: keine Maximalbreite, nur Innenabstand.
   So nutzt das Template immer genau die Breite, die eBay hergibt. */
.csr-wrap { padding-left: var(--csr-pad); padding-right: var(--csr-pad); }

.csr-tpl h1, .csr-tpl h2, .csr-tpl h3, .csr-tpl h4 {
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .5em;
  color: var(--csr-heading);
}
.csr-tpl h1 { font-size: 1.25rem; }
.csr-tpl h2 { font-size: 1.05rem; }
.csr-tpl h3 { font-size: .95rem; }

.csr-icon { width: 1em; height: 1em; flex: 0 0 auto; fill: currentColor; }

/* =========================================================================
   2. BANNER - randlos ganz oben
   ========================================================================= */

.csr-banner img {
  width: 100%;
  aspect-ratio: var(--csr-banner-ratio);
  object-fit: cover;
  object-position: center;
}

/* =========================================================================
   3. NAVIGATION - zwei Auswahlmenues, ohne JavaScript

   Gebaut mit <details>/<summary>. Das ist normales HTML: der Browser
   klappt selbst auf und zu, es wird kein Skript geladen. Das Attribut
   name="csr-nav" an beiden Menues sorgt dafuer, dass sich das eine
   schliesst, wenn das andere geoeffnet wird.
   ========================================================================= */

.csr-nav {
  background: var(--csr-soft);
  border-top: 2px solid var(--csr-magenta);
  border-bottom: 1px solid var(--csr-line);
}

/* Bezugspunkt fuer die aufklappenden Flaechen */
.csr-nav-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: var(--csr-nav-pad);
  padding-right: var(--csr-nav-pad);
}

.csr-dd { min-width: 0; }

/* Schalter: ohne Rahmen, ohne Hintergrundfarbe - nur Text, Symbol und
   Pfeil. Der Zustand wird ueber die Textfarbe und die Pfeilrichtung
   gezeigt, nicht ueber eine Flaeche. */
.csr-dd > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--csr-tap);
  padding: 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--csr-anthracite);
  background: transparent;
  border: 0;
  transition: color .15s ease;
}
.csr-dd > summary::-webkit-details-marker { display: none; }
.csr-dd > summary .csr-icon { width: 17px; height: 17px; color: var(--csr-magenta); }

/* Der Pfeil. Dreht sich beim Aufklappen. Steht direkt hinter dem Text,
   nicht am rechten Rand - ohne Flaeche gaebe es sonst keinen Bezug. */
.csr-dd > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--csr-magenta);
  border-bottom: 2px solid var(--csr-magenta);
  margin: -4px 0 0 2px;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.csr-dd[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }

/* Zustand nur ueber die Textfarbe */
.csr-dd > summary:hover,
.csr-dd[open] > summary { color: var(--csr-magenta); }

/* Handy: die Klappflaeche steht direkt unter ihrem eigenen Schalter und
   schiebt den Inhalt nach unten. Ab Tablet (Abschnitt 7) legt sie sich
   stattdessen als breites Menue ueber den Inhalt. */
.csr-dd-panel {
  max-height: var(--csr-dd-max);
  overflow-y: auto;
  margin-top: 4px;
  background: var(--csr-bg);
  border-top: 2px solid var(--csr-magenta);
  padding: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
}

.csr-dd-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.csr-tpl .csr-dd-grid a {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: .875rem;
  color: var(--csr-anthracite);
  border-bottom: 1px solid var(--csr-line);
  padding-right: 6px;
}
.csr-tpl .csr-dd-grid a:hover,
.csr-tpl .csr-dd-grid a:focus-visible { color: var(--csr-magenta); }
.csr-tpl .csr-dd-grid a.csr-dd-all { font-weight: 600; color: var(--csr-magenta); }

/* =========================================================================
   4. PRODUKTBLOCK: GALERIE + BESCHREIBUNG
   ========================================================================= */

/* Handy: alles untereinander */
.csr-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--csr-gap);
  padding: var(--csr-gap) 0 8px;
}

/* --- Galerie. Umschalten ueber versteckte Radio-Buttons, ohne Skript --- */
.csr-gal { min-width: 0; }
.csr-gal input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.csr-gal-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--csr-soft);
  border: 1px solid var(--csr-line);
  border-radius: var(--csr-radius);
  overflow: hidden;
}
/* Nur das gewaehlte Bild wird ueberhaupt gezeichnet.
   Kein Ein-/Ausblenden: in der eBay-Beschreibung laufen Uebergaenge
   unzuverlaessig, dann bleiben zwei Bilder halbtransparent uebereinander. */
.csr-gal-slide {
  position: absolute;
  inset: 0;
  display: none;
}
.csr-gal-slide img { width: 100%; height: 100%; object-fit: contain; }

/* Bild 1 ist die Voreinstellung */
#csr-g1:checked ~ .csr-gal-stage .csr-s1,
#csr-g2:checked ~ .csr-gal-stage .csr-s2,
#csr-g3:checked ~ .csr-gal-stage .csr-s3,
#csr-g4:checked ~ .csr-gal-stage .csr-s4,
#csr-g5:checked ~ .csr-gal-stage .csr-s5,
#csr-g6:checked ~ .csr-gal-stage .csr-s6 { display: block; }

/* Handy: 3 Vorschaubilder pro Reihe, damit sie gross genug zum Tippen sind */
.csr-gal-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
/* Die Kacheln bewusst schlicht gebaut: das Bild bekommt die Breite der
   Kachel, die Hoehe ergibt sich aus dem Bild selbst. KEIN Seitenverhaeltnis
   auf der Kachel, KEINE Prozenthoehe und KEIN object-fit - diese drei
   greifen auf iOS-Geraeten nicht zuverlaessig ineinander. Faellt dort nur
   ein Glied aus, bleibt das Bild in Originalgroesse stehen und die Kachel
   zeigt nur einen Ausschnitt (am 03.09.2026 auf iPhone festgestellt).
   Die Kacheln sind darum nicht quadratisch, sondern haben das Format der
   Produktfotos. Da alle Fotos dasselbe Format haben, bleibt die Reihe
   trotzdem gleichmaessig. */
.csr-gal-thumbs label {
  cursor: pointer;
  display: block;
  background: var(--csr-soft);
  border: 1px solid var(--csr-line);
  border-radius: var(--csr-radius);
  overflow: hidden;
  transition: border-color .15s ease;
}
.csr-gal-thumbs label:hover { border-color: var(--csr-line-strong); }

/* Doppelte Klasse davor, damit diese Regel jede allgemeinere Bildregel
   sicher ueberstimmt - auch eine, die eBay auf Mobilgeraeten selbst
   dazwischenschiebt. */
.csr-tpl .csr-gal-thumbs img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

#csr-g1:checked ~ .csr-gal-thumbs label[for="csr-g1"],
#csr-g2:checked ~ .csr-gal-thumbs label[for="csr-g2"],
#csr-g3:checked ~ .csr-gal-thumbs label[for="csr-g3"],
#csr-g4:checked ~ .csr-gal-thumbs label[for="csr-g4"],
#csr-g5:checked ~ .csr-gal-thumbs label[for="csr-g5"],
#csr-g6:checked ~ .csr-gal-thumbs label[for="csr-g6"] {
  border-color: var(--csr-magenta);
  box-shadow: inset 0 0 0 1px var(--csr-magenta);
}

.csr-gal-hint { font-size: .75rem; color: var(--csr-muted); margin-top: 8px; }

/* --- Titel + die von Afterbuy eingesetzte Beschreibung --- */
.csr-info { min-width: 0; }

/* Der Inhalt hier kommt aus Afterbuy und ist nicht vorhersehbar.
   Darum wird alles Gaengige generisch abgefangen. */
.csr-desc { font-size: .95rem; }

/* Einleitung der Artikelbeschreibung hervorheben.
   Afterbuy liefert sie als <b> direkt am Anfang - Absatz-Tags (<p>) kommen
   in den Artikeltexten gar nicht vor, getrennt wird mit <br>. Darum sind
   hier beide Faelle abgedeckt. */
.csr-desc > b:first-child { display: block; margin-bottom: .7em; }
.csr-desc > b:first-child,
.csr-desc > p:first-child { font-weight: 600; }
.csr-desc ul,
.csr-desc ol { margin: 0 0 1em; padding-left: 0; list-style: none; }
.csr-desc ol { padding-left: 1.3em; list-style: decimal; }
.csr-desc ul > li { position: relative; padding-left: 22px; margin-bottom: .4em; }
.csr-desc ul > li::before {
  content: "";
  position: absolute;
  left: 4px; top: .55em;
  width: 7px; height: 7px;
  background: var(--csr-magenta);
}
.csr-desc strong, .csr-desc b { font-weight: 600; }

/* Fremde Tabellen aus der Artikelbeschreibung koennen breiter sein als
   das Handy - sie bekommen darum ihre eigene Wischflaeche, damit die
   Seite selbst nie seitlich verrutscht. */
.csr-desc table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border-collapse: collapse;
  margin: 0 0 1em;
  font-size: .9rem;
  -webkit-overflow-scrolling: touch;
}
.csr-desc th, .csr-desc td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--csr-line);
  text-align: left;
  vertical-align: top;
}
.csr-desc th { background: var(--csr-soft); font-weight: 600; }
.csr-desc img { margin: 0 0 1em; border-radius: var(--csr-radius); }
.csr-desc font { font-size: inherit !important; font-family: inherit !important; }

/* Optionaler Merkmalskasten fuer Produkt-Kerndaten */
.csr-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--csr-line);
  border: 1px solid var(--csr-line);
  border-radius: var(--csr-radius);
  overflow: hidden;
  margin: 18px 0;
}
.csr-spec { background: var(--csr-bg); padding: 12px 14px; }
.csr-spec dt {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--csr-muted);
  margin-bottom: 3px;
}
.csr-spec dd { margin: 0; font-size: .9rem; font-weight: 600; }

/* Hinweis-/Warnkasten */
.csr-note {
  border-left: 3px solid var(--csr-magenta);
  background: var(--csr-magenta-soft);
  padding: 12px 16px;
  border-radius: 0 var(--csr-radius) var(--csr-radius) 0;
  font-size: .875rem;
  margin: 18px 0;
}

/* =========================================================================
   5. VERTRAUENSLEISTE
   ========================================================================= */

.csr-trust {
  border-top: 1px solid var(--csr-line);
  border-bottom: 1px solid var(--csr-line);
  background: var(--csr-soft);
  margin-top: var(--csr-gap);
}
.csr-trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--csr-line);
}
.csr-trust-item {
  background: var(--csr-soft);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
}
.csr-trust-item .csr-icon {
  width: 22px; height: 22px;
  color: var(--csr-magenta);
  margin-top: 1px;
}
.csr-trust-item b { display: block; font-size: .875rem; letter-spacing: .02em; }
.csr-trust-item span {
  display: block;
  font-size: .78rem;
  color: var(--csr-muted);
  line-height: 1.45;
}

/* =========================================================================
   6. AUFKLAPPBARE INFOABSCHNITTE
   ========================================================================= */

/* Der untere Abstand schliesst die Seite ab - hier endet das Template,
   es folgt kein Fussbereich mehr. */
.csr-blocks { padding-top: 26px; padding-bottom: 28px; }

.csr-acc {
  border: 1px solid var(--csr-line);
  border-radius: var(--csr-radius);
  margin-bottom: 10px;
  background: var(--csr-bg);
}
.csr-acc > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: var(--csr-tap);
  padding: 12px 14px;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.csr-acc > summary::-webkit-details-marker { display: none; }
.csr-acc > summary .csr-icon { width: 18px; height: 18px; color: var(--csr-magenta); }
/* Der Abschnittstitel ist ein h2, damit die Ueberschriftenfolge stimmt
   (h1 Artikelname -> h2 Abschnitt -> h3 Karte). Optisch soll er sich vom
   Rest des Schalters aber nicht unterscheiden, darum hier zurueckgesetzt. */
.csr-acc > summary h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
.csr-acc > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--csr-magenta);
}
.csr-acc[open] > summary { border-bottom: 1px solid var(--csr-line); }
.csr-acc[open] > summary::after { content: "\2013"; }
.csr-acc > summary:hover { color: var(--csr-magenta); }
.csr-acc-body { padding: 16px 14px; font-size: .9rem; }

.csr-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.csr-card {
  border: 1px solid var(--csr-line);
  border-left: 3px solid var(--csr-magenta);
  border-radius: 0 var(--csr-radius) var(--csr-radius) 0;
  padding: 14px 16px;
  background: var(--csr-bg);
}
.csr-card h3 {
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .5em;
}
.csr-card p { font-size: .85rem; color: var(--csr-anthracite); }
.csr-card--muted { border-left-color: var(--csr-line-strong); }

.csr-legal-hint {
  font-size: .8rem;
  color: var(--csr-muted);
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--csr-line);
}

/* =========================================================================
   7. AB 600 px - grosses Handy im Querformat, kleines Tablet
   ========================================================================= */

@media (min-width: 600px) {
  /* Hier stand fruehr ein Bannerformat fuer den Beschnitt. Wird in
     Abschnitt 1 ein Verhaeltnis gesetzt, kann hier ein flacheres
     eintragen werden, z. B. --csr-banner-ratio: 3 / 1; */
  .csr-tpl { --csr-gap: 24px; }

  /* Die zwei Auswahlmenues nebeneinander. Ohne Flaeche richtet sich die
     Breite nach dem Text, der Abstand macht die Trennung. */
  .csr-nav-inner { flex-direction: row; gap: 32px; }
  .csr-dd { flex: 0 0 auto; }

  /* Ab hier legt sich die Klappflaeche als breites Menue ueber den Inhalt
     darunter, statt ihn wegzuschieben. Sie spannt sich ueber die volle
     Breite der Navileiste. */
  .csr-dd-panel {
    position: absolute;
    left: var(--csr-nav-pad);
    right: var(--csr-nav-pad);
    top: 100%;
    z-index: 30;
    margin-top: 0;
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
    padding: 8px 14px 12px;
  }

  .csr-gal-thumbs { grid-template-columns: repeat(6, 1fr); }

  .csr-dd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }

  .csr-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .csr-acc > summary { padding: 15px 18px; font-size: .95rem; }
  .csr-acc-body { padding: 20px 18px; }

  /* Zeilenlaenge begrenzen. Wichtig im Bereich 600-899 px, wo Galerie und
     Text noch untereinander stehen und der Text sonst ueber die ganze
     Tabletbreite laufen wuerde. */
  .csr-info { max-width: var(--csr-measure); }
}

/* =========================================================================
   8. AB 900 px - Tablet quer, kleines Notebook: zwei Spalten
   ========================================================================= */

@media (min-width: 900px) {
  .csr-tpl { --csr-gap: 28px; --csr-dd-max: 420px; }

  /* Ab hier ist immer genug Breite da: das Banner wird nie beschnitten,
     auch wenn in Abschnitt 1 ein Verhaeltnis gesetzt wurde. */
  .csr-banner img { aspect-ratio: auto; object-fit: fill; }

  /* Galerie links, Beschreibung rechts */
  .csr-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .csr-tpl h1 { font-size: 1.45rem; }

  .csr-dd-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .csr-trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .csr-trust-item { padding: 18px 20px; }
  .csr-blocks { padding-top: 36px; padding-bottom: 40px; }
}

/* =========================================================================
   9. AB 1280 px - Desktop: volle Breite nutzen
   Die Galerie waechst mit, die Textspalte bleibt bei lesbarer
   Zeilenlaenge stehen. So bleibt kein Platz ungenutzt und der Text
   laeuft trotzdem nicht ueber 80 Zeichen pro Zeile.
   ========================================================================= */

@media (min-width: 1280px) {
  .csr-tpl { --csr-gap: 32px; }

  .csr-product { grid-template-columns: minmax(0, 1fr) minmax(0, var(--csr-measure)); }
  .csr-desc { font-size: 1rem; }
  .csr-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .csr-dd-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* =========================================================================
   10. DRUCK
   ========================================================================= */

@media print {
  .csr-nav, .csr-banner, .csr-gal-thumbs, .csr-gal-hint { display: none; }
  .csr-acc > summary::after { content: ""; }
}