/* ==========================================================================
   USB2DMX.com - Gestaltung
   Nachbau der Kallyas-Optik mit modernem, schlankem CSS.
   Keine Rahmenwerke, kein jQuery-Erbe. Farben und Masse stammen aus der
   bestehenden Seite (Akzent #cd2122, Grundflaeche #f5f5f5, Fuss #2f2f2f).

   Ueberarbeitet fuer JMS-200: mitlaufende Menueleiste statt zweier Leisten
   uebereinander, Klappmenue auf kleinen Geraeten, wirklich schiebender
   Bildlauf, Produktfarben (rot/blau/orange) und neu gebaute Abschnitte.
   ========================================================================== */

:root {
  --rot:        #cd2122;
  --rot-dunkel: #a81b1c;
  --orange:     #f47b20;
  --orange-hell:#ff9648;
  --blau:       #1b62b3;
  --blau-hell:  #3f8ede;
  --text:       #535353;
  --dunkel:     #2f2f2f;
  --fast-schwarz: #1a1a1a;
  --nacht:      #14171c;
  --nacht-2:    #1c2027;
  --flaeche:    #f5f5f5;
  --flaeche-2:  #ececec;
  --weiss:      #fff;
  --linie:      #dcdcdc;
  --gruen:      #5aab3e;

  --breite:     1170px;
  --kopf-hoehe: 104px;
  --leiste-hoehe: 44px;

  --schrift:    'Open Sans', -apple-system, 'Segoe UI', sans-serif;
  --schrift-t:  'Lato', 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
  /* Nur fuer Terminalbefehle. Bewusst ohne Fremdschrift - die Liste nimmt,
     was das Geraet mitbringt, damit keine Datei nachgeladen wird. */
  --schrift-mono: ui-monospace, 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace;

  /* Produktfarbe. Jeder Abschnitt und jede Kachel setzt sie neu; alles
     darunter (Haken, Knopf, Schimmer) liest nur noch diese eine Angabe. */
  --marke:      var(--rot);
  --marke-hell: #e8494a;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font: 400 13px/1.7 var(--schrift);
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--rot); text-decoration: none; }
a:hover { color: var(--rot-dunkel); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--schrift-t);
  color: var(--dunkel);
  margin: 0 0 .6em;
  line-height: 1.2;
}

.container {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: 20px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Sichtbarer Sprungverweis, sobald er die Tastaturmarke bekommt. */
a.sr-only:focus {
  width: auto; height: auto; clip-path: none;
  position: fixed; top: 8px; left: 8px; z-index: 200;
  background: var(--rot); color: var(--weiss); padding: .6rem 1rem;
}

/* ---------------------------------------------- Einblenden beim Scrollen */

/* Die Abschnitte kommen von unten ins Bild, statt einfach dazustehen.
   Ohne JavaScript (oder bei Bewegungsarmut) bleibt alles sichtbar - die
   Regel greift erst, wenn das Skript body.mit-zeig gesetzt hat. */
body.mit-zeig [data-zeig] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
body.mit-zeig [data-zeig].sichtbar { opacity: 1; transform: none; }

/* ------------------------------------------- Mitlaufende Menueleiste oben */

/* Beim Seitenanfang ist sie AUSSERHALB des Bildes. Sie faehrt erst ein,
   wenn der Kopfbereich nach oben herausgelaufen ist (JMS-200). */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 60;
  background: rgba(16,17,20,.97);
  color: #9a9a9a;
  font: 600 11.5px/var(--leiste-hoehe) var(--schrift);
  height: var(--leiste-hoehe);
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
  transform: translateY(-101%);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.topbar.sichtbar { transform: none; }
.topbar .container { display: flex; align-items: center; gap: 1.35rem; height: 100%; }
.topbar ul { display: flex; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.topbar a { color: #c3c3c3; text-transform: uppercase; letter-spacing: .04em; }
.topbar a:hover { color: var(--weiss); text-decoration: none; }
.topbar .rechts { margin-left: auto; }
.topbar .hat-unter { position: relative; }
.topbar .hat-unter > a::after { content: ' \25BE'; font-size: 9px; }

/* Klappmenues der oberen Leiste */
.topbar .unter {
  position: absolute; top: var(--leiste-hoehe); left: -12px; min-width: 200px;
  background: rgba(16,17,20,.98); padding: .45rem 0; display: none;
  flex-direction: column; gap: 0; line-height: 2;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.topbar .hat-unter:hover .unter,
.topbar .hat-unter:focus-within .unter { display: flex; }
.topbar .unter a { display: block; padding: .15rem 1rem; text-transform: none; font-weight: 400; }
.topbar .unter a:hover { background: var(--rot); color: var(--weiss); }

/* ------------------------------------------------------------ Sprachumschalter */

/* Die aktuelle Sprache steht ohne Verweis da, die andere ist anklickbar.
   So ist auf einen Blick klar, wo man ist - ohne zweite Beschriftung. */
.sprachwahl { display: flex; align-items: center; gap: .45rem; }
.sprachwahl > span[aria-current] { color: var(--weiss); }
.topbar .sprachwahl { padding-left: .9rem; border-left: 1px solid #3a3a3a; }
.fuss-unten .sprachwahl { text-transform: uppercase; }
.fuss-unten .sprachwahl > span[aria-current] { color: #cfcfcf; }

/* ------------------------------------------------------------------- Kopfteil */

.kopf {
  position: relative;
  z-index: 30;
  background: var(--nacht);
}
/* Nur ueber dem Bildlauf der Startseite liegt der Kopf auf dem Bild - und
   zwar als gleichmaessig abgedunkelter Streifen, nicht als schwarze oder
   graue Platte und nicht als auslaufender Verlauf.
   Gemessen am Original (miss-kopfleiste.js, 23.09.2026):
   header#header hat dort glatt rgba(0, 0, 0, 0.5) ueber 100 px Hoehe.
   Genau das hatte der Inhaber am 23.09. mit dem gruenen Kasten markiert:
   "kein Schwarzer, kein Grau, sondern so ein Stueck des Bild abdunkeln". */
body.mit-bildlauf .kopf {
  background: rgba(0,0,0,.5);
  margin-bottom: calc(var(--kopf-hoehe) * -1);
}
/* Feste Hoehe, nicht min-height: der Kopf wird auf der Startseite um genau
   diesen Betrag ueber das Bild gezogen. Waere er auch nur ein paar Pixel
   hoeher, bliebe oben ein heller Streifen stehen.
   align-items: stretch, damit .kopf-rechts die volle Bandhoehe bekommt und
   das Hauptmenue unten im Band sitzen kann - wie im Original, wo die
   Menuezeile bei y=59..84 in einem 100 px hohen Band steht. */
.kopf .container {
  display: flex; align-items: stretch;
  height: var(--kopf-hoehe);
  gap: 1rem;
}

/* Das Logo steht frei auf dem Bild - ohne Kasten und ohne Platte, wie im
   Original (JMS-200, Rueckmeldung vom 23.09.). Erst war es ein weisser
   Kasten, dann eine dunkle Platte; beides ist ein Fremdkoerper.
   Lesbar bleibt der weisse Schriftzug "PRO LIGHT" ueber hellen Bildstellen
   durch den Schlagschatten am Logo selbst - der braucht keine Flaeche. */
.logo {
  margin: 0;
  background: none;
  border: 0;
  padding: 14px 0 16px;
  line-height: 0;
  align-self: flex-start;
  position: relative; z-index: 2;
}
.logo img {
  width: 148px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.logo a:hover { text-decoration: none; }

/* Sprachwahl oben, Hauptmenue unten am Band - dazwischen der Abstand, den
   space-between uebrig laesst. Ohne die feste Bandhoehe rutschte das Menue
   nach oben, sobald die Menuezeile flacher wurde (JMS-200, 23.09.). */
.kopf-rechts {
  margin-left: auto;
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 16px;
  gap: 4px;
}

/* Kleine Servicezeile ueber dem Hauptmenue. Seit dem 23.09. steht dort nur
   noch die Sprachwahl - siehe _kopf.de.html. */
.kopf-dienste {
  display: flex; align-items: center; gap: 1.1rem;
  list-style: none; margin: 0; padding: 9px 4px 0;
  font: 600 11px/1 var(--schrift); text-transform: uppercase; letter-spacing: .05em;
}
.kopf-dienste a { color: rgba(255,255,255,.72); }
.kopf-dienste a:hover { color: var(--weiss); text-decoration: none; }
.kopf-dienste .sprachwahl { padding-left: .9rem; border-left: 1px solid rgba(255,255,255,.22); }
.kopf-dienste .sprachwahl > span[aria-current] { color: var(--weiss); }

/* Flache Menuezeile. Bis zum 23.09. war jeder Eintrag 47 px hoch, der rote
   Kasten darunter entsprechend wuchtig; der Inhaber wollte die Zeile "fast
   nur halb so hoch" und den roten Kasten "so zart wie im Original".
   Am Original gemessen (miss-kopfleiste.js): der aktive Eintrag STARTSEITE
   ist dort 25 px hoch bei Polster 6px 12px 5px und hat KEINE dunkle
   Unterkante. 6 + 13 + 5 = 24 px - dieselbe Zeile. */
.hauptmenue { display: flex; align-items: flex-end; gap: 0; }
.hauptmenue ul { display: flex; list-style: none; margin: 0; padding: 0; align-items: stretch; }
.hauptmenue > ul > li { position: relative; display: flex; }
.hauptmenue > ul > li > a {
  display: flex; align-items: center; padding: 6px 12px 5px;
  color: var(--weiss); font: 700 13px/1 var(--schrift-t);
  text-transform: uppercase; letter-spacing: .03em;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.hauptmenue > ul > li > a:hover { text-decoration: none; color: #fff; }
.hauptmenue > ul > li.aktiv > a,
.hauptmenue > ul > li:hover > a { background: var(--rot); text-shadow: none; }

.hauptmenue .unter {
  position: absolute; top: 100%; left: 0; min-width: 215px;
  background: rgba(20,23,28,.98); padding: .35rem 0;
  display: none; flex-direction: column;
  box-shadow: 0 10px 24px rgba(0,0,0,.4);
}
.hauptmenue li:hover > .unter,
.hauptmenue li:focus-within > .unter { display: flex; }
.hauptmenue .unter a {
  display: block; padding: .55rem 1.1rem; color: #ddd;
  font: 400 12px/1.4 var(--schrift); text-transform: none;
}
.hauptmenue .unter a:hover { background: var(--rot); color: var(--weiss); text-decoration: none; }

/* Zweizeilig und damit hoeher als die Menuezeile - so steht sie auch im
   Original (dort 53 px gegen 25 px der Menuezeile). align-self: center
   haengt sie mittig an die flache Zeile, statt sie auf deren Hoehe zu
   quetschen. Die dunkle 3-px-Unterkante ist am 23.09. entfallen: das
   Original hat sie nicht, und sie war der Hauptgrund, warum der rote Kasten
   schwer statt zart wirkte. */
.hilfe-knopf {
  display: flex; flex-direction: column; justify-content: center;
  align-self: center;
  background: var(--rot); color: var(--weiss);
  padding: 7px 15px 6px; margin-left: 10px; text-align: center;
  font: 700 13px/1.15 var(--schrift-t); text-transform: uppercase;
}
.hilfe-knopf span { display: block; font-size: 11px; font-weight: 400; }
.hilfe-knopf:hover { background: var(--rot-dunkel); color: var(--weiss); text-decoration: none; }

/* Der Aufklapp-Pfeil der Untermenues gehoert NUR auf kleine Geraete.
   Ohne diese Zeile blieb er am grossen Bildschirm als nackte Schaltflaeche
   stehen: 16 px breit, 47 px hoch, Systemgrau mit schwarzem Rahmen - die
   drei "senkrechten weissen Streifen", die der Inhaber am 23.09. zwischen
   PRODUKTE/DOWNLOADS, DOWNLOADS/SHOP und SERVICE/HILFE angestrichen hat.
   Die Untermenues klappen am grossen Bildschirm ohnehin beim Ueberfahren
   auf, der Knopf hat dort keine Aufgabe. */
.unter-knopf { display: none; }

/* Die Schaltflaeche gibt es nur auf kleinen Geraeten. */
.menue-knopf {
  display: none;
  margin-left: auto; align-self: center;
  width: 44px; height: 40px; padding: 0;
  background: transparent; border: 1px solid rgba(255,255,255,.35); cursor: pointer;
  position: relative;
}
.menue-knopf .balken,
.menue-knopf .balken::before,
.menue-knopf .balken::after {
  position: absolute; left: 50%; width: 22px; height: 2px;
  background: var(--weiss); translate: -50% 0;
  transition: transform .25s ease, opacity .2s ease;
}
.menue-knopf .balken { top: 50%; margin-top: -1px; }
.menue-knopf .balken::before { content: ''; top: -7px; }
.menue-knopf .balken::after  { content: ''; top: 7px; }
body.menue-offen .menue-knopf .balken { background: transparent; }
body.menue-offen .menue-knopf .balken::before { transform: translateY(7px) rotate(45deg); }
body.menue-offen .menue-knopf .balken::after  { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------ Bildlaufbereich */

.held { position: relative; background: #0d0f12; }
.held-fenster { overflow: hidden; }
.held-bahn {
  display: flex;
  transition: transform .75s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.held-bild {
  position: relative; flex: 0 0 100%;
  height: clamp(430px, 45vw, 620px);
  overflow: hidden;
}
.held-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.06);
  transition: transform 7s linear;
}
/* Das sichtbare Bild zieht langsam auf - die Bewegung, die vorher fehlte. */
.held-bild.an .held-foto { transform: scale(1); }

/* Der Verlauf darf nur die Schrift tragen, nicht das Produkt verdecken.
   Vorher lag er bis 72% der Breite ueber dem Bild und war auf halber Breite
   noch bei 42% Schwarz - genau dort steht auf den meisten Bildern das
   Interface. Jetzt ist er auf die linke Textspalte begrenzt und bei 55%
   ganz aus; die Lesbarkeit uebernehmen die Schatten an Schrift und Knopf
   (JMS-200, Rueckmeldung vom 23.09.). */
.held-text {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding-top: var(--kopf-hoehe);
  background: linear-gradient(96deg, rgba(8,9,12,.78) 0%, rgba(8,9,12,.54) 20%, rgba(8,9,12,.20) 38%, rgba(8,9,12,0) 55%);
}
.held-titel { max-width: 620px; }
.held-titel > * { opacity: 0; transform: translateY(22px); }
.held-bild.an .held-titel > * { animation: heldRein .65s cubic-bezier(.22,.61,.36,1) forwards; }
.held-bild.an .held-titel > :nth-child(1) { animation-delay: .10s; }
.held-bild.an .held-titel > :nth-child(2) { animation-delay: .20s; }
.held-bild.an .held-titel > :nth-child(3) { animation-delay: .30s; }
.held-bild.an .held-titel > :nth-child(4) { animation-delay: .42s; }

@keyframes heldRein { to { opacity: 1; transform: none; } }

.held-marke {
  display: inline-block; margin: 0 0 14px;
  padding: 7px 15px 7px 13px;
  background: var(--rot); color: var(--weiss);
  font: 700 11.5px/1 var(--schrift-t); letter-spacing: .16em; text-transform: uppercase;
}
.held-titel h2 {
  margin: 0 0 12px; color: var(--weiss);
  font: 900 clamp(28px, 3.4vw, 48px)/1.1 var(--schrift-t);
  letter-spacing: -.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 2px 22px rgba(0,0,0,.65);
}
.held-unter {
  margin: 0 0 24px; color: rgba(255,255,255,.88);
  font: 300 clamp(15px, 1.5vw, 19px)/1.5 var(--schrift-t);
  max-width: 34em;
  text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 2px 14px rgba(0,0,0,.6);
}
/* Der Knopf traegt seit dem helleren Verlauf seine eigene dunkle Flaeche -
   sonst steht weisse Schrift auf weissem Umriss ueber einem hellen Bild. */
.knopf-held {
  display: inline-block;
  padding: 13px 26px;
  border: 2px solid rgba(255,255,255,.85); color: var(--weiss);
  background: rgba(8,9,12,.34);
  font: 700 12px/1 var(--schrift-t); text-transform: uppercase; letter-spacing: .09em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.knopf-held:hover { background: var(--rot); border-color: var(--rot); color: var(--weiss); text-decoration: none; }

.held-pfeil {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 6;
  width: 46px; height: 46px; padding: 0; cursor: pointer;
  background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.35);
  transition: background .2s ease;
}
.held-pfeil:hover { background: var(--rot); border-color: var(--rot); }
.held-pfeil::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 11px; border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.held-pfeil.vor     { right: 18px; }
.held-pfeil.vor::before     { translate: -70% -50%; rotate: 45deg; }
.held-pfeil.zurueck { left: 18px; }
.held-pfeil.zurueck::before { translate: -30% -50%; rotate: -135deg; }

.held-punkte {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 9px; z-index: 5;
}
.held-punkte button {
  width: 26px; height: 4px; padding: 0; cursor: pointer;
  border: 0; background: rgba(255,255,255,.4);
  transition: background .2s ease, width .25s ease;
}
.held-punkte button[aria-current='true'] { background: var(--rot); width: 44px; }

/* ------------------------------------------------------------ Aktionsleiste */

.aktionsleiste { background: var(--rot); color: var(--weiss); position: relative; }
.aktionsleiste .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 20px; flex-wrap: wrap;
}
.aktionsleiste p { margin: 0; font: 400 17px/1.4 var(--schrift-t); }
.aktionsleiste::after {
  content: ''; position: absolute; left: 50%; bottom: -11px; translate: -50% 0;
  border: 11px solid transparent; border-top-color: var(--rot); border-bottom: 0;
}

.knopf-umriss {
  border: 1px solid rgba(255,255,255,.85); color: var(--weiss);
  padding: 9px 18px; font: 400 12px/1 var(--schrift); text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap;
}
.knopf-umriss:hover { background: var(--weiss); color: var(--rot); text-decoration: none; }

/* --------------------------------------------------------------- Abschnitte */

.abschnitt { padding-block: 74px; }
.abschnitt.hell   { background: var(--weiss); }
.abschnitt.grau   { background: var(--flaeche-2); }
.abschnitt.grund  { background: var(--flaeche); }

.abschnitt-kopf { max-width: 760px; margin-bottom: 44px; }
.abschnitt-kopf h2 {
  margin: 0 0 .45em;
  font: 900 clamp(24px, 2.6vw, 34px)/1.15 var(--schrift-t);
  color: var(--dunkel); letter-spacing: -.01em;
}
.abschnitt-vorspann { margin: 0; font-size: 14.5px; line-height: 1.75; color: #6b6b6b; }

/* Die kleine Zeile ueber jeder Ueberschrift - sie traegt die Produktfarbe. */
.ueberschrift-klein {
  margin: 0 0 12px; padding-left: 34px; position: relative;
  color: var(--marke);
  font: 700 11.5px/1 var(--schrift-t); letter-spacing: .18em; text-transform: uppercase;
}
.ueberschrift-klein::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 24px; height: 2px; background: var(--marke);
}

.raster-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* ------------------------------------------------------------ Produktkacheln */

.produkt-kachel {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--marke);
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.produkt-kachel.marke-rot    { --marke: var(--rot);    --marke-hell: #e8494a; }
.produkt-kachel.marke-blau   { --marke: var(--blau);   --marke-hell: var(--blau-hell); }
.produkt-kachel.marke-orange { --marke: var(--orange); --marke-hell: var(--orange-hell); }
.produkt-kachel:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0,0,0,.13); }

.produkt-kachel .bild {
  display: block; line-height: 0; background: var(--weiss); overflow: hidden;
}
.produkt-kachel .bild img {
  width: 100%; transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.produkt-kachel:hover .bild img { transform: scale(1.05); }

.kachel-text { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.kachel-marke {
  margin: 0 0 8px; color: var(--marke);
  font: 700 10.5px/1 var(--schrift-t); letter-spacing: .16em; text-transform: uppercase;
}
.produkt-kachel h3 {
  margin: 0 0 12px; font: 900 21px/1.2 var(--schrift-t);
  text-transform: uppercase; color: var(--dunkel);
}
.produkt-kachel p { margin: 0 0 20px; }
.kachel-mehr {
  margin-top: auto; align-self: flex-start;
  color: var(--marke); font: 700 12px/1 var(--schrift-t);
  text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 2px solid transparent; padding-bottom: 4px;
}
.kachel-mehr::after { content: ' \2192'; }
.kachel-mehr:hover { color: var(--marke); border-bottom-color: var(--marke); text-decoration: none; }

/* ------------------------------------------------- Merkmalsabschnitt (dunkel) */

/* AIR2DMX und USB2DMX OPTO. Dunkler Grund, dahinter ein Schimmer in der
   Produktfarbe - die freigestellten Produktbilder stehen darauf, statt in
   einer grauen Flaeche zu verschwinden. */
.merkmal-block {
  background: var(--nacht);
  color: #b4bac4;
  position: relative;
  overflow: hidden;
}
.merkmal-block.marke-orange { --marke: var(--orange); --marke-hell: var(--orange-hell); }
.merkmal-block.marke-blau   { --marke: var(--blau);   --marke-hell: var(--blau-hell); }
.merkmal-block.marke-rot    { --marke: var(--rot);    --marke-hell: #e8494a; }
.merkmal-block::before {
  content: ''; position: absolute; top: -18%; right: -10%;
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--marke) 24%, transparent) 0%, transparent 62%);
  pointer-events: none;
}
.merkmal-block.gedreht::before { right: auto; left: -10%; }

/* Bis zum 23.09. bekam das Bild die schmalere Haelfte (.92fr gegen 1.08fr)
   und stand darin auch noch in seiner natuerlichen Groesse - 365 px in
   einem 492 px breiten Feld. Am Handy fuellte dasselbe Bild 320 von 350 px.
   Genau das hatte der Inhaber gemeldet: am Handy stimmig, am grossen
   Bildschirm zu klein. Beide Haelften sind jetzt gleich breit. */
.merkmal {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center;
  position: relative;
}
.merkmal-block.gedreht .merkmal-bild { order: -1; }

.merkmal-text h2 {
  margin: 0 0 .5em; color: var(--weiss);
  font: 900 clamp(26px, 3vw, 40px)/1.12 var(--schrift-t); letter-spacing: -.015em;
}
.merkmal-vorspann {
  margin: 0 0 30px; color: #9aa2ae;
  font-size: 14.5px; line-height: 1.8; max-width: 36em;
}

.merkmal-liste { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 16px; }
.merkmal-liste li { position: relative; padding-left: 40px; }
.merkmal-liste li::before {
  content: '\2714';
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--marke) 22%, transparent);
  color: var(--marke-hell); font-size: 13px;
}
.merkmal-liste strong {
  display: block; color: var(--weiss);
  font: 700 14px/1.35 var(--schrift-t);
}
.merkmal-liste span { color: #8b939f; font-size: 12.5px; line-height: 1.6; }

.merkmal-marken {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.merkmal-marken li {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: #c6ccd6;
  padding: 7px 13px;
  font: 600 11.5px/1 var(--schrift); letter-spacing: .04em;
}

.knopf-marke {
  display: inline-block; padding: 13px 26px;
  border: 2px solid var(--marke); color: var(--marke-hell);
  font: 700 12px/1 var(--schrift-t); text-transform: uppercase; letter-spacing: .09em;
  transition: background .2s ease, color .2s ease;
}
.knopf-marke:hover { background: var(--marke); color: var(--weiss); text-decoration: none; }

.merkmal-bild { margin: 0; text-align: center; position: relative; }
/* width: 100% statt max-width - sonst bleibt das Bild bei seiner
   natuerlichen Groesse stehen und waechst nie mit dem Feld.
   Die Deckelung bei 500 px ist keine Geschmacksfrage, sondern die Grenze
   der Vorlagen: das AIR2DMX-Bild gibt es nur mit 365 px Breite (x1.37),
   das OPTO-Bild wird seit dem 23.09. in der 600-px-Fassung geladen und
   damit sogar verkleinert. Wer groesser will, braucht eine hoeher
   aufgeloeste Vorlage - nicht mehr CSS. */
.merkmal-bild img {
  width: 100%; max-width: 500px; height: auto;
  filter: drop-shadow(0 26px 44px rgba(0,0,0,.55));
}

/* ------------------------------------------------------------ Fragen Sie uns */

.hilfe-block { background: var(--flaeche-2); }
.abschnitt-kopf.hell h2 { color: var(--dunkel); }

.hilfe-raster { display: grid; grid-template-columns: 1.6fr 1fr; gap: 34px; align-items: start; }
.hilfe-karten { display: grid; gap: 18px; }

.hilfe-karte {
  background: var(--weiss);
  border-left: 3px solid var(--rot);
  padding: 22px 26px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hilfe-karte:hover { transform: translateX(4px); box-shadow: 0 8px 22px rgba(0,0,0,.09); }
.hilfe-karte h3 { margin: 0 0 .5em; font: 700 15px/1.35 var(--schrift-t); color: var(--dunkel); }
.hilfe-karte p { margin: 0; font-size: 13px; }

.fix-it {
  background: var(--nacht); color: #a8aeb8;
  padding: 34px 30px; text-align: left;
  border-top: 3px solid var(--rot);
}
.fix-it .ueberschrift-klein { --marke: var(--rot); }
.fix-it h3 { margin: 0 0 .7em; color: var(--weiss); font: 900 24px/1.15 var(--schrift-t); }
.fix-it p { margin: 0 0 1.6em; font-size: 13px; line-height: 1.75; }
.fix-it-zeile {
  margin: 1.6em 0 0 !important; padding-top: 1.1em;
  border-top: 1px solid rgba(255,255,255,.13);
  color: var(--weiss); font: 700 14px/1.4 var(--schrift-t);
}

.knopf-rot {
  display: inline-block; background: var(--rot); color: var(--weiss);
  padding: 13px 24px; font: 700 12px/1 var(--schrift-t);
  text-transform: uppercase; letter-spacing: .07em; border: 0;
  transition: background .2s ease;
}
.knopf-rot:hover { background: var(--rot-dunkel); color: var(--weiss); text-decoration: none; }

/* -------------------------------------------------------- Und das gehoert dazu */

.zusage-block { background: var(--weiss); }
.zusagen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.zusage {
  border: 1px solid var(--linie);
  padding: 30px 28px;
  transition: border-color .25s ease, transform .25s ease;
}
.zusage:hover { border-color: var(--rot); transform: translateY(-4px); }
.zusage img {
  width: 34px; height: 34px; margin-bottom: 18px;
}
/* Gezeichnetes Zeichen statt geladenem Bild - siehe home.de.html.
   color, nicht fill: die Striche im SVG stehen auf currentColor, damit die
   Hausfarbe an genau einer Stelle steht. */
.zusage-zeichen {
  display: block; width: 44px; height: 44px; margin-bottom: 18px;
  color: var(--rot);
}
.zusage h3 {
  margin: 0 0 .5em; font: 900 18px/1.2 var(--schrift-t);
  text-transform: uppercase; color: var(--dunkel);
}
.zusage p { margin: 0; font-size: 13px; }

/* ------------------------------------------------------------------- Inhalte */

.inhalt-seite { padding-block: 64px; }
.inhalt-seite h1 { font: 900 32px/1.2 var(--schrift-t); margin-bottom: .6em; }
.inhalt-seite h2 { font: 700 22px/1.25 var(--schrift-t); margin-top: 1.6em; }
.inhalt-seite h3 { font: 700 17px/1.3 var(--schrift-t); margin-top: 1.4em; }
.inhalt-seite p, .inhalt-seite li { font-size: 13.5px; }
.inhalt-seite table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }
.inhalt-seite th, .inhalt-seite td { border: 1px solid var(--linie); padding: .6rem .8rem; text-align: left; }
.inhalt-seite th { background: var(--flaeche-2); font-family: var(--schrift-t); }

.seitenkopf {
  background: var(--nacht); color: var(--weiss);
  padding-block: 44px; position: relative; overflow: hidden;
}
.seitenkopf::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--rot) 0 33%, var(--blau) 33% 66%, var(--orange) 66% 100%);
}
.seitenkopf h1 { color: var(--weiss); margin: 0; font: 900 clamp(24px,3vw,34px)/1.15 var(--schrift-t); text-transform: uppercase; }
.seitenkopf .pfad { color: #98a0ac; font-size: 12px; margin: .5rem 0 0; }
.seitenkopf .pfad a { color: #c6ccd6; }
body.mit-bildlauf .seitenkopf { padding-top: calc(44px + var(--kopf-hoehe)); }

/* ------------------------------------------- Vergleichstabelle auf /produkte */

/* Die Tabelle war eine graue Wand aus 25 gleich aussehenden Zeilen. Jetzt
   traegt jede Geraetespalte die Farbe ihres Interfaces - orange fuer die
   AIR2DMX-Reihe, rot fuer USB2DMX PRO, blau fuer USB2DMX OPTO (JMS-200).
   Die Spaltenstellung ist fest: 1 Merkmal, 2-4 AIR2DMX, 5 PRO, 6 OPTO. */

.tabelle-rollbar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 10px 30px rgba(0,0,0,.09);
  background: var(--weiss);
}
table.vergleich {
  border-collapse: separate; border-spacing: 0;
  width: 100%; min-width: 820px; font-size: 12.5px;
  --sp-o: var(--orange); --sp-r: var(--rot); --sp-b: var(--blau);
}
table.vergleich th, table.vergleich td {
  padding: .55rem .7rem; text-align: center; vertical-align: middle;
  border-bottom: 1px solid #eef0f2;
}

/* Kopfzeile: Produktname auf der Markenfarbe, Preis im abgesetzten Band. */
table.vergleich thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 0; border-bottom: 0;
  background: var(--nacht); color: var(--weiss);
  font: 900 13px/1.3 var(--schrift-t); text-transform: uppercase; letter-spacing: .04em;
  vertical-align: bottom;
}
table.vergleich thead th:first-child {
  text-align: left; padding: 0 .9rem 1.1rem;
  letter-spacing: .12em; font-size: 12px; color: #aab2bd;
  vertical-align: bottom;
}
table.vergleich thead th:nth-child(n+2) > span.name {
  display: block; padding: 14px 8px 12px;
}
table.vergleich thead th:nth-child(2),
table.vergleich thead th:nth-child(3),
table.vergleich thead th:nth-child(4) { background: var(--sp-o); }
table.vergleich thead th:nth-child(5) { background: var(--sp-r); }
table.vergleich thead th:nth-child(6) { background: var(--sp-b); }

table.vergleich thead .preis {
  display: block; background: rgba(0,0,0,.2); color: var(--weiss);
  padding: .45rem; font: 900 17px/1 var(--schrift-t);
}

/* Merkmalsspalte: linksbuendig, ruhig, als Ankerspalte erkennbar. */
table.vergleich tbody th {
  text-align: left; background: var(--flaeche);
  font: 600 12.5px/1.45 var(--schrift); color: var(--dunkel); white-space: nowrap;
  border-right: 1px solid var(--linie);
  position: sticky; left: 0; z-index: 1;
}
table.vergleich tbody tr:nth-child(even) th { background: var(--flaeche-2); }
table.vergleich tbody tr:hover td,
table.vergleich tbody tr:hover th { background: #fff8e9; }

/* Ein hauchduenner Farbton je Spalte - genug, um den Blick zu fuehren,
   ohne die Werte zu ueberdecken. */
table.vergleich tbody td:nth-child(2),
table.vergleich tbody td:nth-child(3),
table.vergleich tbody td:nth-child(4) { background: color-mix(in srgb, var(--sp-o) 5%, #fff); }
table.vergleich tbody td:nth-child(5) { background: color-mix(in srgb, var(--sp-r) 5%, #fff); }
table.vergleich tbody td:nth-child(6) { background: color-mix(in srgb, var(--sp-b) 5%, #fff); }

table.vergleich .ja { font-size: 14px; font-weight: 700; }
table.vergleich tbody td:nth-child(2) .ja,
table.vergleich tbody td:nth-child(3) .ja,
table.vergleich tbody td:nth-child(4) .ja { color: var(--sp-o); }
table.vergleich tbody td:nth-child(5) .ja { color: var(--sp-r); }
table.vergleich tbody td:nth-child(6) .ja { color: var(--sp-b); }
table.vergleich .nein { color: #c8ccd1; }

table.vergleich tfoot td { border: 0; padding: 1.1rem .5rem; background: var(--weiss); }
table.vergleich tfoot td:first-child { background: var(--flaeche); }
table.vergleich tfoot td:nth-child(2) .knopf-umriss,
table.vergleich tfoot td:nth-child(3) .knopf-umriss,
table.vergleich tfoot td:nth-child(4) .knopf-umriss { border-color: var(--sp-o); color: var(--sp-o); }
table.vergleich tfoot td:nth-child(5) .knopf-umriss { border-color: var(--sp-r); color: var(--sp-r); }
table.vergleich tfoot td:nth-child(6) .knopf-umriss { border-color: var(--sp-b); color: var(--sp-b); }
table.vergleich tfoot td:nth-child(2) .knopf-umriss:hover,
table.vergleich tfoot td:nth-child(3) .knopf-umriss:hover,
table.vergleich tfoot td:nth-child(4) .knopf-umriss:hover { background: var(--sp-o); color: var(--weiss); }
table.vergleich tfoot td:nth-child(5) .knopf-umriss:hover { background: var(--sp-r); color: var(--weiss); }
table.vergleich tfoot td:nth-child(6) .knopf-umriss:hover { background: var(--sp-b); color: var(--weiss); }

/* ============================================================ Produktseiten */

/* Die Produktseiten kamen als Stapel von Joomla-Bruchstuecken aus dem Crawl
   (eine war 14.785 Pixel lang). Sie werden jetzt aus einem Inhaltsmodell
   erzeugt - siehe baue-produktseiten.js. Hier steht nur noch das Aussehen. */

/* Hier stand bis zum 23.09.2026 abends das Kopfband (.produkt-kopf) mit Weg,
   Reihe und Produktname. Es ist ersatzlos weg - Entscheidung des Inhabers:
   "Band ganz weg - wie im Original nur das Bild." Der Spiegel bestaetigt es:
   mirror/produkte/usb2dmx-pro.html hat dort weder Brotkrumen noch <h1>, die
   Szene faengt direkt unter dem Kopfbereich an. Der Produktname steht jetzt
   nur noch als unsichtbares <h1 class="sr-only"> in der Seite. */

/* ---------------------------------------------------------- Aufbau-Szene */

/* Das Original setzt den Kopfbereich der Produktseiten Stueck fuer Stueck
   zusammen: Interface, Schriftzug, Verpackung, Fuehrungslinien und
   Beschriftungen fliegen einzeln herein. Der Inhaber hat genau das vermisst
   ("so dass die Bilder wie im Original zusammen gebaut werden", 23.09.2026).
   Die Choreografie ist aus dem Original gemessen - siehe baue-aufbau-slider.js.

   Gerechnet wird in dessen Entwurfsraster von 1130 x 700. Jede Lage steht als
   blosse Zahl im style-Attribut (--x, --y, --b); die Umrechnung in Prozent
   passiert hier. Damit skaliert die ganze Szene mit der Breite, ohne dass
   Javascript etwas nachmessen muss. */
.aufbau {
  position: relative;
  background: #eef0f2;
  border-bottom: 3px solid var(--marke, var(--rot));
}
.aufbau.marke-rot    { --marke: var(--rot);    --marke-hell: #e8494a; }
.aufbau.marke-blau   { --marke: var(--blau);   --marke-hell: var(--blau-hell); }
.aufbau.marke-orange { --marke: var(--orange); --marke-hell: var(--orange-hell); }

.aufbau-fenster {
  overflow: hidden;
  /* Das Raster des Originals. Daran haengen die cqw-Masse weiter unten. */
  aspect-ratio: 1130 / 700;
  container-type: inline-size;
}
.aufbau-bahn { display: flex; height: 100%; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.aufbau-szene { position: relative; flex: 0 0 100%; height: 100%; }
.aufbau-grund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.aufbau-ebene {
  position: absolute; margin: 0;
  left: calc(var(--x) / 11.3 * 1cqw);
  top:  calc(var(--y) / 11.3 * 1cqw);
}
.aufbau-ebene.ist-bild { width: calc(var(--b) / 11.3 * 1cqw); }
.aufbau-ebene.ist-bild img { display: block; width: 100%; height: auto; }

/* Bis die Szene laeuft, ist nichts da - sonst stuende das fertige Bild
   schon, bevor es sich aufbaut. Ohne Javascript greift die Regel ganz unten
   und zeigt alles. */
body.mit-aufbau .aufbau-ebene { opacity: 0; }

/* easeOutExpo, die Kurve des Originals. */
body.mit-aufbau .aufbau-szene.an .aufbau-ebene {
  animation: aufbauRein var(--dauer) cubic-bezier(.19, 1, .22, 1) var(--ab) both;
}
@keyframes aufbauRein {
  from { opacity: 0; transform: var(--von); }
  to   { opacity: 1; transform: none; }
}
/* "long from left" heisst im Original: von ganz ausserhalb des Bildes.
   Der Weg ist deshalb die eigene Lage im Raster plus die eigene Breite. */
.von-links  { --von: translateX(calc(var(--x) / -11.3 * 1cqw - 100%)); }
.von-rechts { --von: translateX(calc((1130 - var(--x)) / 11.3 * 1cqw)); }
.von-oben   { --von: translateY(calc(var(--y) / -11.3 * 1cqw - 100%)); }
.von-unten  { --von: translateY(calc((700 - var(--y)) / 11.3 * 1cqw)); }

/* Die Beschriftungen.

   Bis zum 23.09. waren sie GERATEN: dunkle Versalien mit einem kleinen roten
   Quadrat davor. Das Stylesheet des Joomla-Bausteins ist beim Crawl nie
   mitgekommen; die Klassennamen (jms_ast_more_details, project_title, ...)
   sagen, WAS gemeint war, nicht wie es aussieht. Im Original sind es
   farbige Schilder mit weisser Schrift am Ende der Fuehrungslinie - also
   Teil des Bildes. Der Inhaber hat genau das bemaengelt:
   "Die Beschriftung muss wie im Original auch in das Bild integriert
   werden" (23.09.2026).

   Jetzt ist es gemessen statt geraten - `miss-beschriftung.js` liest die
   berechneten Stilwerte an der echten Adresse aus, das Ergebnis liegt in
   `beschriftung-original.json`:

     jms_ast_more_details    12px/700 weiss auf #cd2122, Polster 2px 8px
     jms_orange_ast_...      dieselbe Platte in Orange (#ec6014)
     jms_shop(_orange)       20px/700 weiss auf der Marke, Polster 3px 12px
     jms_more_details        12px/400 weiss auf der Marke, Polster 2px 8px
     project_title           30px/700 weiss auf rgba(0,0,0,.3), Schatten
     jms_hl_black            26px/700 #333, ohne Schild
     jms_gray                13px/400 #777, ohne Schild
     Schrift durchweg Open Sans (--schrift), NICHT die Titelschrift.

   Warum min(): das Original setzt feste Pixel und verkleinert erst, wenn
   der Bildlauf schmaler wird als sein Raster von 1130 (12px = 1.062cqw).
   Oberhalb steht die gemessene Groesse, darunter schrumpft sie mit.

   Warum bei den Schildern trotzdem ein clamp(): bei 390 px waere die
   Schrift 4 px hoch. Das Original macht das so, lesbar ist es nicht. Der
   untere Anschlag gilt nur unterhalb von rund 750 px Breite und beruehrt
   die gemessene Darstellung am Rechner nicht. */
.aufbau-ebene.ist-text { white-space: nowrap; color: #2f2f2f; }

/* Das Schild selbst sitzt auf dem inneren <span>, nicht am Absatz: der
   Absatz traegt die Animation (transform), das Schild traegt den Ausgleich
   gegen den rechten Bildrand - siehe unten. Beides am selben Element waere
   ein Kampf um dieselbe Eigenschaft. */
.aufbau-ebene.ist-text > .aufbau-text { display: inline-block; }

/* Was rechts herausragen wuerde, wird hereingeschoben - und zwar um die
   ECHTE Breite des gesetzten Textes (100% = eigene Breite), nicht um eine
   geschaetzte. Ohne Ueberhang ist der Wert 0. Das braucht es, weil der
   untere Anschlag oben die Schilder auf schmalen Geraeten breiter macht,
   als es die Schaetzung in baue-produktseiten.js annimmt. */
.aufbau-ebene.ist-text > .aufbau-text {
  transform: translateX(min(0px, calc(100cqw - .885cqw - var(--x) / 11.3 * 1cqw - 100%)));
}

.aufbau-anriss > .aufbau-text,
.aufbau-mehr > .aufbau-text,
.aufbau-schalter > .aufbau-text {
  background: var(--marke); color: var(--weiss);
}
.aufbau-anriss {
  font: 700 clamp(8px, 1.062cqw, 12px)/1.6 var(--schrift);
}
.aufbau-anriss > .aufbau-text { padding: min(.177cqw, 2px) min(.708cqw, 8px); }
.aufbau-mehr {
  font: 400 clamp(8px, 1.062cqw, 12px)/1.6 var(--schrift);
}
.aufbau-mehr > .aufbau-text { padding: min(.177cqw, 2px) min(.708cqw, 8px); }
.aufbau-schalter {
  font: 700 clamp(9px, 1.770cqw, 20px)/1.6 var(--schrift);
}
.aufbau-schalter > .aufbau-text { padding: min(.265cqw, 3px) min(1.062cqw, 12px); }
.aufbau-titel {
  font: 700 min(2.655cqw, 30px)/.667 var(--schrift);
  text-transform: uppercase;
}
.aufbau-titel > .aufbau-text {
  background: rgba(0, 0, 0, .3); color: var(--weiss);
  padding: min(.708cqw, 8px) min(1.327cqw, 15px) min(1.239cqw, 14px);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
}
/* Die knappen Zeilenhoehen sind kein Versehen, sondern gemessen: das
   Original setzt beide Zeilen auf 20 px, gleich ob 26 px oder 13 px gross
   (also .77 bzw. 1.54). Mit einer gewoehnlichen Zeilenhoehe von 1.2 lag der
   Kasten der Ueberschrift auf der Zeile darunter - die beiden stehen nur
   25 Rastereinheiten auseinander. */
.aufbau-hl    { font: 700 clamp(9.5px, 2.301cqw, 26px)/.769 var(--schrift); color: #333; }
.aufbau-unter { font: 400 clamp(6.5px, 1.150cqw, 13px)/1.538 var(--schrift); color: #777; }
.aufbau-ebene.ist-text a { color: inherit; }
.aufbau-anriss a:hover, .aufbau-mehr a:hover,
.aufbau-schalter a:hover, .aufbau-titel a:hover { text-decoration: underline; }

/* Die Pfeile und Punkte teilen sich das Aussehen mit dem Bildlauf der
   Startseite - nur dunkel, weil die Szene auf hellem Grund steht.

   Anders als beim Bildlauf stehen sie hier NICHT an den Seiten auf halber
   Hoehe. Der Bildlauf der Startseite hat dort freie Flaeche; die Szene hat
   sie nicht: auf halber Hoehe liegen genau die Schriftzuege und die
   Beschriftungen ganz aussen. Am 23.09. standen die Pfeile deshalb auf dem
   "PRO"-Schriftzug und auf "USB POWERED".

   Die Stuecke zu verschieben waere der falsche Ausweg - ihre Lage ist aus
   dem Original gemessen, und die Beschriftungen haengen an ihren
   Fuehrungslinien. Verschoben wird die Bedienung: sie steht unten neben den
   Punkten, wo nichts liegt. */
.aufbau > .held-pfeil {
  top: auto; bottom: 6px; translate: none;
  width: 30px; height: 30px; right: auto;
  background: rgba(255,255,255,.72); border-color: rgba(0,0,0,.18);
}
.aufbau > .held-pfeil::before { border-color: #3a3f47; width: 9px; height: 9px; }
.aufbau > .held-pfeil:hover { background: var(--marke); border-color: var(--marke); }
.aufbau > .held-pfeil:hover::before { border-color: #fff; }
/* Zwei Punkte sind zusammen rund 80 px breit; 50 px ab Mitte ist der erste
   Platz, an dem ein Pfeil sie nicht beruehrt. */
.aufbau > .held-pfeil.zurueck { left: calc(50% - 82px); }
.aufbau > .held-pfeil.vor     { left: calc(50% + 52px); }
.aufbau-punkte {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 9px; z-index: 5;
}
.aufbau-punkte button {
  width: 26px; height: 4px; padding: 0; cursor: pointer;
  border: 0; background: rgba(0,0,0,.24);
  transition: background .2s ease, width .25s ease;
}
.aufbau-punkte button[aria-current='true'] { background: var(--marke); width: 44px; }

/* Die Szene traegt ihre Beschriftungen selbst - an jeder Breite, seit dem
   23.09. auch auf dem Handy. Die Liste bleibt deshalb aus; sichtbar wird sie
   nur dort, wo die Szene im Original gar keine Beschriftungen hat (die
   Uebersicht), und auch dort nur auf schmalen Geraeten - siehe unten. */
.aufbau-merkmale { display: none; }

.produkt-einstieg { background: var(--weiss); }
.produkt-einstieg.marke-rot    { --marke: var(--rot);    --marke-hell: #e8494a; }
.produkt-einstieg.marke-blau   { --marke: var(--blau);   --marke-hell: var(--blau-hell); }
.produkt-einstieg.marke-orange { --marke: var(--orange); --marke-hell: var(--orange-hell); }

.einstieg-raster {
  display: grid; grid-template-columns: .95fr 1.35fr .8fr;
  gap: 44px; align-items: start;
}
.einstieg-bild { text-align: center; }
.einstieg-bild img { max-width: 100%; }
.einstieg-bild .klein { max-width: 78%; margin-top: 18px; }

.produkt-vorspann { margin: 0 0 26px; font-size: 14.5px; line-height: 1.8; color: #5d6470; }

/* Helle Fassung der Merkmalsliste - dieselbe Struktur wie im dunklen
   Abschnitt der Startseite, nur fuer weissen Grund.
   Die Software-Detailseiten (.sw-seite) tragen dieselbe Liste auf demselben
   weissen Grund und stehen deshalb hier mit drin statt in einer zweiten,
   wortgleichen Regel - sonst faellt bei der naechsten Farbaenderung eine der
   beiden hinten runter. */
.produkt-einstieg .merkmal-liste,
.sw-seite .merkmal-liste { margin-bottom: 24px; }
.produkt-einstieg .merkmal-liste.zwei,
.sw-seite .merkmal-liste.zwei { grid-template-columns: 1fr 1fr; column-gap: 26px; }
.produkt-einstieg .merkmal-liste strong,
.sw-seite .merkmal-liste strong { color: var(--dunkel); }
.produkt-einstieg .merkmal-liste span,
.sw-seite .merkmal-liste span { color: #82888f; }
.produkt-einstieg .merkmal-liste li::before,
.sw-seite .merkmal-liste li::before {
  background: color-mix(in srgb, var(--marke) 14%, transparent);
  color: var(--marke);
}
.produkt-einstieg .merkmal-marken li,
.sw-seite .merkmal-marken li {
  border-color: var(--linie); background: var(--flaeche); color: #5d6470;
}
.produkt-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; align-items: center; }
.produkt-knoepfe .knopf-umriss.dunkel { padding: 13px 22px; font: 700 12px/1 var(--schrift-t); letter-spacing: .07em; }

.schnellverweise {
  background: var(--flaeche); border-top: 3px solid var(--marke);
  padding: 24px 24px 28px;
}
.schnellverweise h2 {
  margin: 0 0 1.2em; font: 900 15px/1.2 var(--schrift-t);
  text-transform: uppercase; letter-spacing: .1em; color: var(--dunkel);
}
.schnellverweise h3 {
  margin: 1.6em 0 .7em; font: 700 11px/1.2 var(--schrift-t);
  text-transform: uppercase; letter-spacing: .1em; color: var(--marke);
}
.schnellverweise h3:first-of-type { margin-top: 0; }
.schnellverweise ul { list-style: none; margin: 0; padding: 0; }
.schnellverweise li { margin-bottom: .55em; }
.schnellverweise a { color: var(--dunkel); font-size: 12.5px; }
.schnellverweise a:hover { color: var(--marke); }

/* Jeder Verweis traegt seit dem 23.09. sein eigenes Zeichen statt eines
   einheitlichen Winkels - siehe ZEICHEN in baue-produktseiten.js.
   Der Verweis ist dafuer ein Raster aus Zeichen und Text: bei zweizeiligen
   Eintraegen bleibt die zweite Zeile damit unter der ersten und rutscht
   nicht unter das Zeichen. */
.schnellverweise a {
  display: grid; grid-template-columns: 15px 1fr;
  gap: .6em; align-items: start;
}
.verweis-zeichen {
  color: var(--marke);
  margin-top: .18em;   /* auf die Grundlinie der ersten Zeile schieben */
  flex: none;
}

/* Erklaerbloecke (AIR2DMX) */
.bereich-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.bereich-raster.voll { grid-template-columns: 1fr; max-width: 820px; }
.bereich-raster.gedreht .bereich-bild { order: -1; }
.bereich-text h2 { margin: 0 0 .5em; font: 900 clamp(22px,2.4vw,32px)/1.15 var(--schrift-t); }
.bereich-text p { font-size: 14px; line-height: 1.8; }
.bereich-bild { margin: 0; }
.bereich-bild img { width: 100%; box-shadow: 0 16px 38px rgba(0,0,0,.14); }

/* Installationsschritte */
.schritte {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: schritt;
}
.schritte li {
  background: var(--flaeche); border: 1px solid var(--linie);
  padding: 22px 20px 24px; text-align: center;
}
/* block, nicht inline-block: als Inline-Element setzte sich die Nummer auf
   dieselbe Zeile wie das Bild und landete optisch darunter. */
.schritte .nummer {
  display: block; margin-bottom: 14px;
  color: var(--rot); font: 700 10.5px/1 var(--schrift-t);
  text-transform: uppercase; letter-spacing: .14em;
}
.schritte img { max-height: 120px; width: auto; margin-bottom: 16px; }
.schritte h3 { margin: 0; font: 700 14px/1.35 var(--schrift-t); color: var(--dunkel); }

/* Softwarekacheln */
.sw-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.sw-karte {
  display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: start;
  background: var(--weiss); border: 1px solid var(--linie); padding: 20px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.sw-karte:hover { box-shadow: 0 14px 30px rgba(0,0,0,.1); transform: translateY(-3px); }
/* JMS-458: Auf der Softwareliste waren die Programmbilder mit 150 px Spalte zu
   klein - gut ein Viertel der Karte, obwohl jede Datei 638 x 478 Pixel
   mitbringt. Die Vorlage des Inhabers zeigt die Bildspalte etwa halb so breit
   wie die Karte. Als Bruchteil statt fester Breite, damit das Verhaeltnis bei
   jeder Containerbreite stimmt und der Text nicht zur Rinne wird.
   Die Kontaktkacheln (JMS-219) teilen sich .sw-karte, sollen aber klein
   bleiben - deshalb das :not(). */
.sw-raster:not(.kontakt-karten) .sw-karte { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.sw-bild { line-height: 0; }
.sw-bild img { width: 100%; }
.sw-karte h3 { margin: 0 0 .4em; font: 900 17px/1.2 var(--schrift-t); }
.sw-karte h3 a { color: var(--dunkel); }
.sw-karte h3 a:hover { color: var(--rot); text-decoration: none; }
.sw-unter { margin: 0 0 .6em; font: 700 12.5px/1.4 var(--schrift-t); color: var(--rot); }
.sw-karte p { margin: 0; font-size: 12.5px; }

/* JMS-475: Nach JMS-458 sind die Bilder gross, die Schrift daneben aber
   stehengeblieben - 17 px Titel auf 12,5 px Fliesstext ist ein Verhaeltnis von
   1,36, zu wenig, damit der Programmname die Karte anfuehrt. Die Zahlen sind
   nicht erfunden, sondern die der Produktkacheln auf der Startseite
   (.produkt-kachel: 900 21px/1.2 Titel, 700 10,5-12px Beiwerk). Damit tragen
   beide Kachelarten der Seite dieselbe Groesse.
     - Titel 17 -> 21 px, Zeilenhoehe enger (1.2 -> 1.15) und leicht negative
       Sperrung, wie bei den grossen Ueberschriften (.einstieg h1). Gross und
       eng wirkt moderner als nur gross.
     - Unterueberschrift 12,5 -> 14 px, leichte Sperrung.
     - Der Fliesstext bleibt bei 12,5 px. Dass er *nicht* mitwaechst, ist der
       Punkt: das Verhaeltnis Titel/Text steigt auf 1,68, und erst der
       Unterschied macht den "peppigen" Eindruck, den der Inhaber meint.
   Nicht auf Grossschrift umgestellt, obwohl die Produktkacheln das tun:
   FreeStyler, QLC+ und PC DIMMER sind Schreibweisen der Hersteller, und
   "FREESTYLER" waere eine andere Marke.
   Wieder mit :not(.kontakt-karten), damit die vier Kontaktkacheln (JMS-219)
   ihre 17 px behalten - sie teilen sich .sw-karte, sind aber keine
   Softwarekacheln. Die Software-Detailseiten setzen .sw-unter ausserhalb von
   .sw-raster und bleiben darum ebenfalls unberuehrt. */
.sw-raster:not(.kontakt-karten) .sw-karte h3 {
  font-size: 21px; line-height: 1.15; letter-spacing: -.01em;
}
.sw-raster:not(.kontakt-karten) .sw-unter {
  font-size: 14px; line-height: 1.35; letter-spacing: .005em;
}

/* ---------------------------------------------------- Software-Detailseite
   Die zwoelf Seiten hinter den Kacheln (JMS-148). Aufbau wie die
   Produktseite - Bild, Text, Nebenspalte im selben .einstieg-raster -,
   deshalb steht hier nur, was die Produktseite nicht schon mitbringt.
   Die Produktfarbe ist bei allen zwoelf dasselbe Rot: die Seiten gehoeren
   zum Bereich Downloads, nicht zu einem einzelnen Interface. */
.sw-seite { --marke: var(--rot); --marke-hell: #e8494a; }
/* Ohne min-width:0 sprengt eine lange Zeile (Dateinamen in den Antworten)
   die Grid-Spalte, statt umzubrechen. */
.einstieg-text { min-width: 0; }
.sw-seite .sw-unter { margin: 0 0 18px; font-size: 13.5px; }
.sw-seite .einstieg-text p { font-size: 14px; line-height: 1.8; color: #5d6470; }
.sw-seite .produkt-knoepfe { margin-top: 26px; }
/* Die Versionsnummer steht im Downloadknopf, eine Spur kleiner als die
   Beschriftung davor. */
.sw-fassung { font-weight: 400; opacity: .82; }

.sw-nebenspalte {
  background: var(--flaeche); border-top: 3px solid var(--marke);
  padding: 22px 22px 26px; min-width: 0;
}
.sw-autor { margin: 0 0 1.4em; font-size: 12.5px; color: #5d6470; }
.sw-autor strong { color: var(--dunkel); }
.sw-verweise { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sw-verweise li { font-size: 12.5px; line-height: 1.5; }
/* Die Verweise sind Fremdadressen und oft laenger als die Spalte breit ist. */
.sw-verweise a { color: var(--dunkel); overflow-wrap: anywhere; }
.sw-verweise a:hover { color: var(--rot); }

.sw-hinweis { margin: 0; font-size: 12.5px; line-height: 1.7; color: #6b6b6b; }

/* Die Bilder in den Antworten sind Bildschirmfotos aus dem Original und
   teils breiter als die Spalte. */
.sw-seite .antwort img,
.fragen-liste .antwort img { max-width: 100%; height: auto; margin-top: 14px; }

/* Treiberkacheln */
.dl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.dl-karte {
  display: grid; grid-template-columns: 50px 1fr; gap: 18px; align-items: center;
  background: var(--flaeche); border-left: 3px solid var(--rot); padding: 18px 20px;
}
.dl-karte img { width: 50px; }
.dl-karte h3 { margin: 0 0 .25em; font: 700 14px/1.3 var(--schrift-t); }
.dl-karte h3 a { color: var(--dunkel); }
.dl-karte h3 a:hover { color: var(--rot); text-decoration: none; }
.dl-karte p { margin: 0; font-size: 12.5px; }

/* Fragen und Antworten */
.fragen-liste { display: grid; gap: 12px; max-width: 900px; }
.frage { background: var(--weiss); border: 1px solid var(--linie); }
.frage summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 17px 54px 17px 22px;
  font: 700 14.5px/1.4 var(--schrift-t); color: var(--dunkel);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ''; position: absolute; right: 24px; top: 50%;
  width: 9px; height: 9px; translate: 0 -70%; rotate: 135deg;
  border-top: 2px solid var(--rot); border-right: 2px solid var(--rot);
  transition: rotate .2s ease;
}
.frage[open] summary::after { rotate: -45deg; translate: 0 -20%; }
.frage summary:hover { color: var(--rot); }
.frage .antwort { padding: 0 22px 20px; font-size: 13.5px; }
.frage .antwort p { margin: 0 0 .9em; }
.frage .antwort ul { margin: 0 0 .9em; padding-left: 1.2em; }
.frage .antwort li { margin-bottom: .4em; }

/* Serviceseiten: FAQ nach Geraet gruppiert (JMS-201).
   Die Gruppenueberschrift und ihre Markenfarbe stehen weiter unten bei den
   uebrigen Serviceregeln; hier nur, was den Aufklapper selbst betrifft. */
.gruppen-titel {
  margin: 0 0 14px; font: 900 18px/1.2 var(--schrift-t); color: var(--dunkel);
  text-transform: uppercase; letter-spacing: .03em;
  padding-bottom: 10px; border-bottom: 2px solid var(--rot); max-width: 900px;
}
/* Die Sprungmarken zeigen auf einen Aufklapper. Ohne diesen Abstand
   verschwindet seine Kopfzeile unter der eingefahrenen .topbar. */
.frage { scroll-margin-top: 110px; }
.frage .antwort h4 { margin: 1.2em 0 .5em; font: 700 15px/1.3 var(--schrift-t); color: var(--dunkel); }
.frage .antwort h4:first-child { margin-top: 0; }
.frage .antwort h5 { margin: 1.2em 0 .5em; font: 700 13.5px/1.3 var(--schrift-t); color: var(--dunkel); }
.frage .antwort ol { margin: 0 0 .9em; padding-left: 1.4em; }
.frage .antwort ol li { margin-bottom: .4em; }
.frage .antwort .knopf-rot { display: inline-block; margin-top: .3em; }

/* Abschlussband */
.abschluss-band { background: var(--nacht); color: #a8aeb8; }
.abschluss-band.marke-rot    { --marke: var(--rot); }
.abschluss-band.marke-blau   { --marke: var(--blau); }
.abschluss-band.marke-orange { --marke: var(--orange); }
.abschluss-band { border-top: 3px solid var(--marke); padding-block: 44px; }
.abschluss-raster {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}
.abschluss-band h2 { margin: 0 0 .4em; color: var(--weiss); font: 900 24px/1.2 var(--schrift-t); }
.abschluss-band p { margin: 0; font-size: 13.5px; }

@media (max-width: 991px) {
  .einstieg-raster { grid-template-columns: 1fr; gap: 34px; }
  .produkt-einstieg .merkmal-liste.zwei { grid-template-columns: 1fr; }
  .einstieg-bild img { max-width: 300px; }
  .bereich-raster { grid-template-columns: 1fr; gap: 28px; }
  .bereich-raster.gedreht .bereich-bild { order: 0; }
  .schritte { grid-template-columns: 1fr 1fr; }
  .sw-raster { grid-template-columns: 1fr; }
  /* JMS-458: Ab hier steht nur noch eine Karte je Zeile, die Karte ist also
     fast containerbreit. Der Bruchteil von oben ergaebe hier ein 430 px
     breites Bild - mehr, als die Vorlage zeigt, und mehr, als die Dateien an
     Pixeln hergeben. Deshalb hier eine feste Obergrenze. */
  .sw-raster:not(.kontakt-karten) .sw-karte { grid-template-columns: minmax(0, 300px) minmax(180px, 1fr); }

  /* Bis zum 23.09. standen hier zwei Zeilen, die die Beschriftungen und ihre
     Fuehrungslinien auf dem Handy AUSGEBLENDET haben - sie waeren rund fuenf
     Pixel hoch gewesen. Derselbe Inhalt stand als Liste unter der Szene.

     Der Inhaber hat widersprochen: "Die Beschriftung muss wie im Original
     auch in das Bild integriert werden." Das Original zeigt sie auf dem
     Handy tatsaechlich - klein, aber als Schild im Bild (nachgesehen an der
     echten Adresse bei 390 px). Die Zeilen sind deshalb fort; lesbar bleibt
     es durch den unteren Anschlag der Schriftgroesse weiter oben.

     Die Liste unter der Szene faellt damit weg - sie war der Ersatz fuer
     etwas, das jetzt wieder da ist. Nur die Uebersichtsszene behaelt sie:
     die hat im Original ueberhaupt keine Beschriftungen, dort stehen die
     Produktnamen (.aufbau.ohne-beschriftung). */

  /* Die zweite Zeile des Kopfpaares braucht auf schmalen Geraeten etwas
     Luft: die Ueberschrift darueber hat einen unteren Anschlag, ihr Kasten
     waechst also nach unten, der Abstand von 25 Rastereinheiten nicht mit. */
  .aufbau-unter { translate: 0 4px; }

  /* Die Punkte liegen am Rechner IN der Szene. Auf dem Handy steht unter der
     Szene die Merkmalsliste - dort lagen sie ueber der Schrift. Statt sie zu
     verschieben, kommen sie hier in den Fluss, direkt unter die Szene. */
  .aufbau { display: flex; flex-direction: column; }
  .aufbau-fenster { order: 0; }
  /* Die Pfeile stehen am Rechner unten neben den Punkten. Hier laeuft die
     Szene als Spalte, und "unten" waere unter der Merkmalsliste - also
     mitten im Text. Gewischt wird auf dem Handy ohnehin, und die Punkte
     bleiben bedienbar. */
  .aufbau > .held-pfeil { display: none; }
  .aufbau-punkte {
    position: static; order: 1; transform: none;
    justify-content: center; padding-top: 14px;
  }
  .aufbau.ohne-beschriftung .aufbau-merkmale {
    order: 2;
    display: flex; flex-wrap: wrap; gap: 8px;
    list-style: none; margin: 0; padding-block: 18px;
  }
  .aufbau-merkmale li {
    padding: 7px 12px;
    background: var(--weiss); border-left: 3px solid var(--marke);
    font: 700 11px/1 var(--schrift-t); text-transform: uppercase; letter-spacing: .05em;
    color: #3a3f47;
  }
  .aufbau-punkte { bottom: 10px; }
}

@media (max-width: 575px) {
  .schritte { grid-template-columns: 1fr; }
  .sw-karte { grid-template-columns: 1fr; }
  .sw-bild img { max-width: 220px; }
  /* JMS-458: Auf dem Handy stapelt die Karte. Ohne diese Zeile wuerde die
     Zweispaltigkeit von oben (hoehere Spezifitaet) das Stapeln verhindern.
     Das Bild darf hier zugleich breiter werden als die bisherigen 220 px. */
  .sw-raster:not(.kontakt-karten) .sw-karte { grid-template-columns: 1fr; }
  .sw-raster:not(.kontakt-karten) .sw-bild img { max-width: 300px; }
  .dl-raster { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Downloadseiten */

.dl-bereiche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.dl-bereich {
  background: var(--flaeche); border-top: 3px solid var(--rot);
  padding: 26px 26px 28px; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.dl-bereich:nth-child(2) { border-top-color: var(--blau); }
.dl-bereich:nth-child(2) .kachel-mehr { color: var(--blau); }
.dl-bereich:nth-child(2) .kachel-mehr:hover { border-bottom-color: var(--blau); }
.dl-bereich:nth-child(3) { border-top-color: var(--orange); }
.dl-bereich:nth-child(3) .kachel-mehr { color: var(--orange); }
.dl-bereich:nth-child(3) .kachel-mehr:hover { border-bottom-color: var(--orange); }
.dl-bereich:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.1); }
.dl-bereich h3 { margin: 0 0 .6em; font: 900 20px/1.2 var(--schrift-t); text-transform: uppercase; }
.dl-bereich h3 a { color: var(--dunkel); }
.dl-bereich h3 a:hover { color: var(--rot); text-decoration: none; }
.dl-bereich p { margin: 0 0 20px; }

/* Umbruch fuer kleine Anzeigen.
   .dl-bereiche stand fest auf drei Spalten. Rasterfelder schrumpfen nicht
   unter ihre Mindestbreite: die drei Kacheln blieben rund 161px breit, das
   Raster wurde 541px und lief auf dem Handy quer aus dem Bild — gemessen
   auf /downloads/ (541px) und /en/downloads/ (520px) bei 390px Anzeige.

   Diese beiden Bloecke stehen mit Absicht HIER und nicht oben bei den
   uebrigen Anzeigebreiten-Regeln (Zeile ~881). Die Grundregel
   `.dl-bereiche` steht weiter unten in der Datei als jene Bloecke; bei
   gleicher Spezifitaet gewinnt die spaetere Regel. Oben eingetragen blieb
   die Ueberschreibung wirkungslos — der Browser meldete weiterhin drei
   Spalten. Wer sie verschiebt, macht den Fehler von Neuem. */
@media (max-width: 991px) {
  .dl-bereiche { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
  .dl-bereiche { grid-template-columns: 1fr; }
}

.dl-karte.gross { align-items: start; padding: 22px 24px; }
.dl-fassung { font-weight: 700; color: var(--dunkel); }
.dl-neu { margin: .8em 0 .2em !important; font: 700 11px/1 var(--schrift-t); text-transform: uppercase; letter-spacing: .1em; color: var(--rot); }
.dl-karte ul { margin: 0; padding-left: 1.1em; font-size: 12.5px; }

/* JMS-457: die Liste der unterstuetzten Betriebssysteme, die auf den alten
   Treiberseiten stand. Vierzehn macOS-Fassungen und neun Windows-Fassungen
   offen in der Karte wuerden den Knopf darunter wegschieben, darum ein
   Aufklapper. Die Zeile bleibt lesbar, die Angabe ist wieder da. */
.dl-guete { margin: .5em 0 0 !important; font-size: 12.5px; color: var(--rot); font-weight: 700; }
.dl-hinweis { margin: .3em 0 0 !important; font-size: 12.5px; color: var(--grau-text, #666); }
.dl-systeme { margin: .7em 0 0; font-size: 12.5px; }
.dl-systeme > summary { cursor: pointer; font-weight: 700; color: var(--dunkel); list-style: none; }
.dl-systeme > summary::-webkit-details-marker { display: none; }
.dl-systeme > summary::after { content: ' \25be'; color: var(--rot); }
.dl-systeme[open] > summary::after { content: ' \25b4'; }
.dl-systeme > summary:hover { color: var(--rot); }
.dl-systeme ul { margin: .5em 0 0; }

/* Der Pruefsummenblock, den belege-treiber.js einsetzt (JMS-188, B7).
   Er stand frueher in .inhalt-seite und erbte deren Tabellenstil; die neue
   Treiberseite benutzt diese Huelle nicht mehr. */
.treiber-pruefsummen h3 { margin: 0 0 .7em; font: 900 20px/1.2 var(--schrift-t); }
.treiber-pruefsummen p { font-size: 13px; }
.treiber-pruefsummen table {
  width: 100%; border-collapse: collapse; margin: 1.4em 0;
  background: var(--weiss); font-size: 12.5px;
}
.treiber-pruefsummen th, .treiber-pruefsummen td {
  border: 1px solid var(--linie); padding: .6rem .8rem; text-align: left; vertical-align: top;
}
.treiber-pruefsummen thead th {
  background: var(--nacht); color: var(--weiss);
  font: 700 12px/1.3 var(--schrift-t); text-transform: uppercase; letter-spacing: .06em;
}
.treiber-pruefsummen code { font-size: 11px; word-break: break-all; color: var(--dunkel); }
.treiber-pruefsummen small { color: #8a9098; }

/* Auf sehr schmalen Anzeigen (320px) lief die Tabelle 20px aus dem Bild.
   Die Pruefsumme selbst bricht schon (`word-break` oben) — es war die
   erste Spalte: Dateinamen wie `JMS_USB2DMX_Driver_V2.12.exe` sind ein
   einziges Wort ohne Trennstelle, und `width: 100%` hilft nicht gegen
   eine Mindestbreite, die groesser ist als die Anzeige. `anywhere`
   erlaubt den Umbruch auch mitten im Wort; das engere Zellenpolster
   holt den Rest. */
@media (max-width: 575px) {
  .treiber-pruefsummen th, .treiber-pruefsummen td {
    overflow-wrap: anywhere; padding: .5rem .45rem;
  }
}

.hinweiszeile {
  margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--linie);
  font-size: 12.5px; color: #8a9098;
}

/* Kachelliste fuer Downloads/FAQ */
.kachelliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 24px; }
.kachel { background: var(--weiss); border: 1px solid var(--linie); padding: 18px; }
.kachel h3 { font: 700 15px/1.3 var(--schrift-t); margin: 0 0 .5em; }
.kachel h3 a { color: var(--dunkel); }
.kachel h3 a:hover { color: var(--rot); text-decoration: none; }
.kachel p { margin: 0 0 1em; font-size: 12.5px; }

/* ------------------------------------------------------------- Kontaktseite

   Die vier Kacheln auf /kontakt sitzen in der Kachelform der Softwareliste
   (.sw-karte). Zwei Unterschiede gibt es (JMS-219):

   1. Ihre Texte sind mehrere Absaetze lang - .sw-karte p steht auf margin: 0,
      dort haengen sonst drei Absaetze ohne Abstand aneinander.
   2. Die vier Bilder sind die ECHTEN Originale, nicht mehr die 570-px-Fassung
      aus dem Joomla-Zwischenspeicher. Zwei davon sind nur 300 px breit. Die
      Bildspalte ist 150 px breit, das reicht fuer die doppelte Aufloesung -
      aber unter 576 px stellt .sw-bild img sonst auf max-width: 220px um, und
      dann fehlt sie. Deshalb hier der Deckel auf 150 px. */
.kontakt-karten .sw-karte p { margin: 0 0 1em; }
.kontakt-karten .sw-bild img { max-width: 150px; }

/* --------------------------------------------------------------------- Fuss */

.fuss { background: var(--dunkel); color: #d5d5d5; padding-block: 52px 0; }
.fuss a { color: #d5d5d5; }
.fuss a:hover { color: var(--weiss); }
.fuss h2 {
  color: var(--weiss); font: 700 14px/1.2 var(--schrift-t);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1.3em;
}
/* Zwei Spalten, seit der Newsletter-Kasten heraus ist (JMS-153). */
.fuss-raster { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; }
.fuss-menue { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.fuss-menue ul { list-style: none; margin: 0; padding: 0; }
.fuss-menue li { margin-bottom: .5em; }
.fuss p { font-size: 12.5px; }

.fuss .kontaktzeile { margin-bottom: .9em; }

.fuss-unten {
  margin-top: 44px; border-top: 1px solid #454545; padding-block: 22px;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  font-size: 11.5px; color: #9a9a9a;
}
.fuss-unten img { width: 64px; opacity: .7; }
.fuss-unten .sozial { margin-left: auto; display: flex; align-items: center; gap: .8rem; text-transform: uppercase; }

/* ------------------------------------------------------------- Nach-oben */

.nach-oben {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  background: rgba(20,23,28,.82); color: var(--weiss);
  width: 42px; height: 42px; display: grid; place-items: center;
  font-size: 15px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, background .2s ease;
}
.nach-oben.sichtbar { opacity: 1; pointer-events: auto; }
.nach-oben:hover { background: var(--rot); color: var(--weiss); text-decoration: none; }

/* ------------------------------------------------------------ Kleine Geraete */

@media (max-width: 991px) {
  :root { --kopf-hoehe: 64px; }

  .raster-3, .hilfe-raster, .fuss-raster { grid-template-columns: 1fr; }
  .zusagen { grid-template-columns: 1fr; }
  .merkmal { grid-template-columns: 1fr; gap: 38px; }
  .merkmal-block.gedreht .merkmal-bild { order: 0; }
  .merkmal-bild img { max-width: 320px; }

  /* Der Kopf laeuft mit und bleibt flach - vorher stand das ganze Menue
     aufgeklappt ueber dem halben Startbildschirm (JMS-200). */
  .kopf {
    position: sticky; top: 0; z-index: 70;
    background: rgba(16,17,20,.97);
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
  }
  body.mit-bildlauf .kopf { background: rgba(16,17,20,.97); margin-bottom: 0; }
  .kopf .container { min-height: var(--kopf-hoehe); align-items: center; padding-block: 8px; }

  .logo { padding: 7px 0 8px; }
  .logo img { width: 106px; }

  .menue-knopf { display: block; }
  .topbar { display: none; }

  /* Menue als Tafel von rechts, nicht als Liste ueber dem Inhalt. */
  .kopf-rechts {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(330px, 86vw);
    margin: 0;
    background: #14171c;
    box-shadow: -12px 0 34px rgba(0,0,0,.45);
    padding: calc(var(--kopf-hoehe) + 14px) 0 30px;
    overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    /* Am grossen Bildschirm schiebt space-between das Menue an den unteren
       Bandrand. In der Tafel muss es wieder von oben stapeln, sonst klebt
       die Sprachwahl am unteren Rand des Bildschirms. */
    justify-content: flex-start;
    transform: translateX(102%);
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
    visibility: hidden;
  }
  body.menue-offen .kopf-rechts { transform: none; visibility: visible; }

  .kopf-dienste {
    order: 2; flex-wrap: wrap; gap: .9rem; padding: 18px 22px;
    border-top: 1px solid rgba(255,255,255,.12); margin-top: 14px;
  }

  .hauptmenue { flex-direction: column; align-items: stretch; }
  /* In der Tafel ist jeder Eintrag wieder eine volle Zeile - die flache
     Menuezeile des grossen Bildschirms waere hier zu knapp zum Tippen. */
  .unter-knopf { display: block; }
  .hauptmenue ul { flex-direction: column; align-items: stretch; }
  .hauptmenue > ul > li { display: block; }
  .hauptmenue > ul > li > a {
    padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.09);
    font-size: 14px;
  }
  .hauptmenue > ul > li.aktiv > a,
  .hauptmenue > ul > li:hover > a { border-bottom-color: rgba(255,255,255,.09); }
  .hauptmenue .unter {
    position: static; display: none; box-shadow: none;
    background: rgba(255,255,255,.04); padding: 0;
  }
  .hauptmenue li.offen > .unter { display: flex; }
  .hauptmenue li:hover > .unter,
  .hauptmenue li:focus-within > .unter { display: none; }
  .hauptmenue li.offen:hover > .unter { display: flex; }
  .hauptmenue .unter a { padding: .7rem 22px .7rem 36px; border-bottom: 1px solid rgba(255,255,255,.06); }

  /* Der Aufklapp-Pfeil ist eine eigene Schaltflaeche, damit der Verweis
     selbst anklickbar bleibt. */
  .unter-knopf {
    position: absolute; top: 0; right: 0; width: 54px; height: 49px;
    background: transparent; border: 0; cursor: pointer; padding: 0;
  }
  .unter-knopf::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 9px; height: 9px; translate: -50% -70%; rotate: 135deg;
    border-top: 2px solid rgba(255,255,255,.7); border-right: 2px solid rgba(255,255,255,.7);
    transition: rotate .2s ease;
  }
  .hauptmenue li.offen > .unter-knopf::before { rotate: -45deg; translate: -50% -20%; }
  .hauptmenue > ul > li { position: relative; }

  .hilfe-knopf { margin: 18px 22px 0; order: 1; align-self: stretch; padding: 10px 18px; }

  .menue-schleier {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  body.menue-offen .menue-schleier { opacity: 1; pointer-events: auto; }
  body.menue-offen { overflow: hidden; }

  .held-bild { height: clamp(380px, 68vw, 520px); }
  /* Auf dem Handy steht die Schrift ueber der ganzen Breite, der Verlauf muss
     also weiter reichen als am Rechner - aber laengst nicht so dunkel wie
     bisher (.9/.7/.25). Damit blieb vom Produkt nichts uebrig. */
  .held-text { padding-top: 0; background: linear-gradient(100deg, rgba(8,9,12,.72) 0%, rgba(8,9,12,.46) 45%, rgba(8,9,12,.14) 80%, rgba(8,9,12,.04) 100%); }
  .held-pfeil { width: 38px; height: 38px; }
  .held-pfeil.vor { right: 10px; }
  .held-pfeil.zurueck { left: 10px; }

  body.mit-bildlauf .seitenkopf { padding-top: 44px; }
  .abschnitt { padding-block: 48px; }
}

@media (max-width: 575px) {
  /* Die Pfeile lagen auf der Ueberschrift. Gewischt wird auf dem Handy
     ohnehin, und die Punkte bleiben als Anzeige stehen. */
  .held-pfeil { display: none; }
  .held-titel h2 { font-size: 27px; }
  .abschnitt { padding-block: 38px; }
  .abschnitt-kopf { margin-bottom: 30px; }
  .kachel-text { padding: 18px 18px 22px; }
  .fix-it { padding: 26px 22px; }
  .hilfe-karte { padding: 18px 20px; }
  .zusage { padding: 24px 22px; }
}

/* ------------------------------------------------- Ausdruck und Bewegungsarmut */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  body.mit-zeig [data-zeig] { opacity: 1; transform: none; }
  .held-titel > * { opacity: 1; transform: none; }
  /* Wer keine Bewegung will, bekommt die fertige Szene - nicht eine leere.
     Ohne diese Zeile bliebe die Deckkraft auf 0 stehen. */
  body.mit-aufbau .aufbau-ebene { opacity: 1; transform: none; }
}

/* Schaltflaechen im Tabellenfuss */
table.vergleich tfoot .knopf-rot,
table.vergleich tfoot .knopf-umriss { display: inline-block; margin: .2rem; }
.knopf-umriss.dunkel { border-color: var(--dunkel); color: var(--dunkel); }
.knopf-umriss.dunkel:hover { background: var(--dunkel); color: var(--weiss); }

/* ------------------------------------------------- Symbole ohne Fremd-Zeichensatz */

/* Font Awesome wird nicht geladen (Abschnitt 6 der Sicherheitsvorgaben, V5).
   Die alte Seite hat damit genau zwei Symbole gezeichnet: den Haken in den
   Merkmalstabellen und den Pfeil an den Aufklapp-Ueberschriften. Ohne Ersatz
   bleiben die Behaelter leer - in einer Preistabelle heisst das, dass niemand
   mehr sieht, welches Merkmal enthalten ist. Beide kommen deshalb als
   Unicode-Zeichen aus der eigenen Schrift: keine Fremdquelle, keine Datei. */

.fa { font-style: normal; font-weight: 400; }
.fa-check::before { content: "\2713"; color: var(--gruen); font-weight: 700; }
.fa-arrow-down::before { content: "\2193"; }

/* ------------------------------------------------- Vergleichstabelle Produkte */

/* Die alte Seite stellt die Spalten (Merkmalsnamen + Geraete) ueber das
   Bootstrap-Raster nebeneinander. Der Umwandler wirft die span-Klassen weg,
   die Huellen bleiben - ohne Regel steht jede Spalte unter der vorigen.
   Die Spalten werden deshalb ueber die Huelle angesprochen, die
   .pr_table_col enthaelt; die Klasse kommt sonst nirgends vor.

   Neu fuer JMS-200: jede Geraetespalte traegt ihre Produktfarbe (rot fuer
   USB2DMX PRO, blau fuer OPTO, orange fuer die AIR2DMX-Reihe), damit die
   Tabelle nicht mehr als graue Wand dasteht. */

div:has(> div > .pr_table_col) {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-block: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.09);
}

div:has(> div > .pr_table_col) > div { flex: 3 1 0; min-width: 0; }
div:has(> div > .caption_column)     { flex: 2 1 0; }

.pr_table_col {
  height: 100%;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left-width: 0;
  --marke: var(--rot);
  --marke-hell: #e8494a;
}
div:has(> div > .pr_table_col) > div:first-child .pr_table_col { border-left-width: 1px; }

/* Die Produktfarben. Gesetzt wird die Klasse am Spaltenbehaelter in
   produkte.*.html - damit steht die Zuordnung im Inhalt, nicht im CSS. */
.pr_table_col.spalte-rot    { --marke: var(--rot);    --marke-hell: #e8494a; }
.pr_table_col.spalte-blau   { --marke: var(--blau);   --marke-hell: var(--blau-hell); }
.pr_table_col.spalte-orange { --marke: var(--orange); --marke-hell: var(--orange-hell); }

/* Kopf der Spalte - gleiche Hoehe, damit die Zeilen darunter auf einer Linie
   liegen. Die Merkmalsspalte hat nur eine Textzeile, die Geraetespalten Name
   und Preis. */
.pr_table_col .tb_header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 104px;
  padding: 12px 12px 0;
  background: var(--marke);
  border-bottom: 1px solid var(--linie);
  text-align: center;
  position: relative;
}
.pr_table_col .tb_header .ttitle {
  margin: 0;
  font: 900 14px/1.25 var(--schrift-t);
  color: var(--weiss);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.pr_table_col .tb_header .price {
  align-self: stretch; margin-top: 10px;
  background: rgba(0,0,0,.18);
}
.pr_table_col .tb_header .price p {
  margin: 0; padding: 7px 4px;
  font: 900 19px/1 var(--schrift-t); color: var(--weiss);
}
.pr_table_col.caption_column .tb_header {
  background: var(--nacht);
  font: 700 13px/1.3 var(--schrift-t); color: var(--weiss);
  text-transform: uppercase; letter-spacing: .1em;
}

/* Feste Zeilenhoehe: nur so stehen Merkmalsname und Haken auf einer Hoehe.
   Lange Namen werden gekuerzt statt umgebrochen - ein Umbruch wuerde alle
   folgenden Zeilen der Nachbarspalten verschieben. */
.pr_table_col .tb_content { margin: 0; padding: 0; list-style: none; }
/* Bewusst kein display:flex fuer die Zeile: in einem Flex-Behaelter fallen
   reine Leerzeichen-Textknoten weg, aus "<b>30 / 70</b> [Meter]" wuerde
   "30 / 70[Meter]". Mit line-height sitzt der Text genauso mittig. */
.pr_table_col .tb_content li {
  height: 36px;
  line-height: 36px;
  padding: 0 10px;
  border-bottom: 1px solid #f0f0f0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
}
.pr_table_col.caption_column .tb_content li {
  text-align: left; font-weight: 600; color: var(--dunkel);
  background: var(--flaeche);
}
.pr_table_col.caption_column .tb_content li:nth-child(odd) { background: var(--flaeche-2); }
.pr_table_col .tb_content li:nth-child(odd) { background: #fafbfc; }
.pr_table_col .tb_content li:last-child { border-bottom: 0; }
.pr_table_col .tb_content li .fa-check { margin-right: 5px; }
.pr_table_col .tb_content li .fa-check::before { color: var(--marke); }
.pr_table_col.caption_column .tb_content li .fa-check::before { color: var(--gruen); }

/* Fuss der Spalte mit dem "Details"-Verweis. */
.pr_table_col .signin { padding: 12px 10px 16px; text-align: center; border-top: 1px solid var(--flaeche-2); }
.pr_table_col .signin .knopf-umriss.dunkel {
  border-color: var(--marke); color: var(--marke);
  font-weight: 700; letter-spacing: .07em;
}
.pr_table_col .signin .knopf-umriss.dunkel:hover { background: var(--marke); color: var(--weiss); }

/* Auf schmalen Schirmen bleibt die Tabelle als Ganzes lesbar und wird
   seitlich geschoben - stapeln wuerde die Merkmalsnamen von den Werten
   trennen und den Vergleich unbrauchbar machen. */
@media (max-width: 860px) {
  div:has(> div > .pr_table_col) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  div:has(> div > .pr_table_col) > div { flex: 0 0 165px; }
  div:has(> div > .caption_column)     { flex: 0 0 158px; position: sticky; left: 0; z-index: 1; }
}

/* ==========================================================================
   Serviceseiten - die Bausteine aus baue-serviceseiten.js (JMS-200/JMS-201)

   Die Seiten /service, /service/teamviewer, /faq und /installation werden aus
   einem Inhaltsmodell erzeugt. Dieser Abschnitt deckt genau die Klassen ab,
   die dieses Modell ausgibt. Farben kommen ueber --marke an der jeweiligen
   Huelle, wie bei Produktkacheln und Vergleichstabelle auch.
   ========================================================================== */

/* ------------------------------------------------------- Die Servicekarten */

.service-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.service-karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--marke);
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.service-karte.marke-rot    { --marke: var(--rot);    --marke-hell: #e8494a; }
.service-karte.marke-blau   { --marke: var(--blau);   --marke-hell: var(--blau-hell); }
.service-karte.marke-orange { --marke: var(--orange); --marke-hell: var(--orange-hell); }
.service-karte:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0,0,0,.13); }

.service-bild { display: block; line-height: 0; overflow: hidden; background: var(--weiss); }
.service-bild img { width: 100%; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.service-karte:hover .service-bild img { transform: scale(1.05); }

.service-text { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.service-text h3 { margin: 0 0 .6em; font: 900 17px/1.25 var(--schrift-t); text-transform: uppercase; }
.service-text h3 a { color: var(--dunkel); }
.service-text h3 a:hover { color: var(--marke); text-decoration: none; }
.service-text p { margin: 0 0 1.4em; font-size: 12.5px; }

/* --------------------------------------------- Kacheln der Treiberanleitungen */

.anleitung-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.anleitung-kachel {
  background: var(--weiss); border: 1px solid var(--linie);
  padding: 26px 24px 24px;
  display: flex; flex-direction: column;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.anleitung-kachel:hover { border-color: var(--rot); box-shadow: 0 10px 26px rgba(0,0,0,.09); }
/* Die vier Symbole sind einfarbige Strichzeichnungen auf hellem Grund.
   `height: auto` statt fester 48px: feste Hoehe MAL fester Breite presst
   jedes Bild ins Quadrat, egal was im HTML steht. Genau daran lag JMS-218 -
   die Symbole waren 32 x 64 und wurden hier waagerecht um 1,5x gedehnt.
   Mit `auto` bestimmt die Datei die Hoehe, und die Kachel kann nicht mehr
   verzerren. Die Datei ist heute quadratisch, es bleibt also bei 48 x 48. */
.anleitung-kachel img { width: 48px; height: auto; margin-bottom: 16px; opacity: .8; }
.anleitung-kachel h3 { margin: 0 0 .5em; font: 700 15px/1.3 var(--schrift-t); }
.anleitung-kachel h3 a { color: var(--dunkel); }
.anleitung-kachel h3 a:hover { color: var(--rot); text-decoration: none; }
.anleitung-kachel p { margin: 0 0 1.4em; font-size: 12.5px; }
.anleitung-kachel .kachel-mehr { --marke: var(--rot); }

/* ---------------------------------------------------- Inhalt der Aufklapper */

/* Die bebilderten Anleitungen liegen IN den Aufklappern. Ohne Deckel waere
   die Seite wieder so lang wie vorher - ein einziges Bildschirmfoto ist
   bis zu 900 Pixel hoch. */
.frage .antwort img { max-width: 100%; height: auto; }

.antwort-bild { margin: .2em 0 1.2em; }
.antwort-bild img {
  max-height: 420px; width: auto;
  border: 1px solid var(--linie); background: var(--weiss);
}

/* Schritt fuer Schritt: Bild links, Anweisung rechts. Gestapelt waeren es
   wieder lauter Bloecke untereinander - genau das Muster, das weg sollte. */
.bildschritte { list-style: none; margin: 0 0 1.2em; padding: 0; counter-reset: bs; }
.bildschritte > li {
  display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--linie);
  counter-increment: bs;
}
.bildschritte > li:first-child { border-top: 0; }
.bildschritte > li > img {
  width: 100%; max-height: 190px; object-fit: contain; object-position: left center;
  border: 1px solid var(--linie); background: var(--weiss);
}
.bildschritte > li > span { font-size: 13px; }
.bildschritte > li > span::before {
  content: counter(bs) '.';
  display: inline-block; min-width: 1.6em;
  font: 900 13px/1 var(--schrift-t); color: var(--marke);
}

/* Schritte OHNE Bild - die Linux-Anleitung besteht aus Befehlen, nicht aus
   Bildschirmfotos. Nummerierung und Abstaende folgen .bildschritte, damit
   beide Anleitungen gleich gelesen werden; an der Stelle des Bildes steht
   der Befehl. */
.textschritte { list-style: none; margin: 0 0 1.2em; padding: 0; counter-reset: ts; }
.textschritte > li {
  position: relative; padding: 14px 0 14px 2.2em;
  border-top: 1px solid var(--linie); counter-increment: ts;
}
.textschritte > li:first-child { border-top: 0; }
.textschritte > li::before {
  content: counter(ts) '.';
  position: absolute; left: 0; top: 14px;
  font: 900 13px/1.7 var(--schrift-t); color: var(--marke);
}
.textschritte > li > p { margin: 0 0 .6em; font-size: 13px; }
.textschritte > li > p:last-child { margin-bottom: 0; }

/* Der Befehlskasten. Dunkel wie ein Terminal, damit ein Befehl nicht mit
   Fliesstext verwechselt wird. Das Dollarzeichen davor steht in ::before und
   nicht im Text - so kopiert der Besucher beim Markieren den Befehl allein.
   `overflow-wrap: anywhere` statt Querlauf: ohne das laeuft
   `sudo usermod -a -G dialout $USER` auf 320px aus dem Bild - derselbe
   Fehler wie in der Pruefsummentabelle (JMS-201). */
.befehl {
  display: block; margin: 0 0 .2em; padding: 10px 12px;
  background: var(--nacht); color: #e6e9ee;
  font: 400 12.5px/1.6 var(--schrift-mono);
  border-left: 3px solid var(--marke);
  overflow-wrap: anywhere;
}
.befehl::before { content: '$\00a0'; color: #7f8b9c; }

/* Hinweisschilder. Das Original setzte dafuer <span class="label-warning">;
   hier traegt der ganze Absatz die Kennzeichnung, damit auch mehrzeilige
   Hinweise als Block erkennbar bleiben. */
.hinweis {
  margin: 0 0 1.1em; padding: 11px 14px;
  background: var(--flaeche); border-left: 3px solid var(--linie);
  font-size: 12.5px;
}
.hinweis strong:first-child {
  display: inline-block; margin-right: .5em;
  font: 700 11px/1.5 var(--schrift-t); text-transform: uppercase; letter-spacing: .05em;
}
.hinweis.warnung { background: #fff6e8; border-left-color: var(--orange); }
.hinweis.warnung strong:first-child { color: #b4560f; }
.hinweis.info { background: #eef4fb; border-left-color: var(--blau); }
.hinweis.info strong:first-child { color: var(--blau); }

/* Die Gruppenfarbe faerbt den Strich unter der Gruppenueberschrift. */
.fragen-gruppen { display: grid; gap: 40px; }
.fragen-gruppe.marke-rot    { --marke: var(--rot); }
.fragen-gruppe.marke-blau   { --marke: var(--blau); }
.fragen-gruppe.marke-orange { --marke: var(--orange); }
.fragen-gruppe .gruppen-titel { border-bottom-color: var(--marke); }

/* ------------------------------------------------ Fliesstext (TeamViewer) */

.fliesstext { max-width: 760px; }
.fliesstext p { margin: 0 0 1.1em; font-size: 13.5px; }
.fliesstext .produkt-knoepfe { margin: 1.6em 0; }

/* Die Schrittliste auf /installation traegt zusaetzlich einen Satz Text. */
.schritte li p { margin: .5em 0 0; font-size: 12.5px; }

/* ------------------------------------------------------------ Kleine Geraete */

@media (max-width: 991px) {
  .service-karten { grid-template-columns: 1fr; }
  .anleitung-raster { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .anleitung-raster { grid-template-columns: 1fr; }
  /* Auf dem Handy steht das Bild ueber der Anweisung - nebeneinander
     blieben von 220 Pixel Bild nichts und vom Text zwei Woerter je Zeile. */
  .bildschritte > li { grid-template-columns: 1fr; gap: 10px; }
  .bildschritte > li > img { max-height: 240px; }
  .service-text { padding: 18px 20px 22px; }
  .anleitung-kachel { padding: 22px 20px; }
}

/* ===== JMS-478 Anfang: Betriebssystem-Zeichen ===== */
/* Die vier Zeichen aus Font Awesome 4.6.3 (fa-windows/apple/linux/android),
   dieselben Formen wie die grauen Kacheln auf /service und /installation.
   Sie nehmen ihre Farbe aus currentColor und sind damit auf weissem Grund,
   im roten Knopf und beim Zeigen auf einen Verweis jeweils richtig. */
.os-zeichen { flex: none; vertical-align: -.16em; }

/* 1) Der Kasten vor einem Merkmal, das ein Betriebssystem benennt.
      Masse, Grund und Farbe sind die des Hakens, den er ersetzt
      (.merkmal-liste li::before) — nur das Zeichen darin spricht. */
.merkmal-liste li[data-os]::before { content: none; }
.os-kasten {
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--marke) 22%, transparent);
  color: var(--marke-hell);
}
.produkt-einstieg .merkmal-liste li[data-os] .os-kasten,
.sw-seite .merkmal-liste li[data-os] .os-kasten {
  background: color-mix(in srgb, var(--marke) 14%, transparent);
  color: var(--marke);
}

/* 2) Die Reihe unter der Unterzeile einer Programmseite: auf welchen
      Systemen laeuft das Programm. */
.os-reihe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 20px;
}
.os-reihe-titel {
  font: 700 11px/1 var(--schrift-t); color: var(--grau, #82888f);
  text-transform: uppercase; letter-spacing: .12em;
}
.os-marke {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--linie); background: var(--flaeche);
  color: #5d6470; font: 600 11.5px/1 var(--schrift); letter-spacing: .04em;
}
.os-marke .os-zeichen { color: var(--dunkel); }

/* 2b) Nennt ein Merkmal mehrere Systeme ("Betriebssystemunabhaengig"), passen
       sie nicht in den 26-px-Kasten. Dann stehen die Zeichen vor der
       Unterzeile, die sie ohnehin aufzaehlt. Ohne eigenen Abstand kleben sie
       aneinander und laufen in das erste Wort hinein. */
.os-leiste {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 9px; vertical-align: -.12em;
  color: var(--dunkel);
}

/* 3) Schnellverweise: vor dem bisherigen Zeichen steht jetzt das System.
      Die Spalte ist fest 34 px breit (15 + 4 + 15) statt "auto". Mit "auto"
      waere die Spalte in Zeilen ohne Systemzeichen schmaler und der Text
      aller Zeilen stuende auf verschiedenen Fluchten. */
.schnellverweise a { grid-template-columns: 34px 1fr; }
.verweis-paar { display: flex; align-items: flex-start; gap: 4px; }
.verweis-paar .os-zeichen { margin-top: .18em; color: #6b7280; }
.os-leer { width: 15px; flex: none; }
.schnellverweise a:hover .os-zeichen { color: var(--marke); }

@media (max-width: 760px) {
  .os-reihe { gap: 6px; }
}
/* ===== JMS-478 Ende ===== */

/* ===== JMS-474 Anfang: Installationsschritte ===== */
/* Die Schrittkacheln auf /installation und auf den beiden USB-Produktseiten.
   Der Inhaber fand die bisherige Fassung "nicht so schoen": vier gleich
   aussehende Kaesten mit duennem Rahmen, grauer Flaeche und einer kleinen
   roten Zeile darueber.

   Zweite Fassung, 12.10.2026. Die erste stellte die drei Schritte
   nebeneinander. Der Inhaber hat daran zurueckgemeldet: "die Icons jeweils
   in eine Zeile, jetzt gibt es Zeilen Umbrueche". Nachgemessen ueber 15
   Fensterbreiten: keine einzige Ueberschrift bricht um - was umbricht, ist
   der erklaerende Satz unter dem Bild, in drei schmalen Spalten je nach
   Breite auf zwei bis vier Zeilen. Beides zusammen ergibt eine Lesart:
   je Schritt eine Zeile, Bild links, Text rechts. In der breiten rechten
   Spalte passt der laengste Satz auf eine Zeile.

   Was jetzt anders ist - und warum:
   - Je Schritt eine volle Zeile statt drei Spalten nebeneinander.
   - Die Kachel steht auf Weiss statt auf Grau und traegt eine weiche Kante.
     Dadurch hebt sie sich vom hellen Abschnittsgrund ab, statt darin zu
     verschwimmen.
   - Ein Farbbalken am Kopf. Er liest --marke, was auf allen drei Seiten mit
     Schrittblock das Markenrot aus :root ergibt: die Produktfarben
     (marke-blau usw.) haengen an .produkt-einstieg, .aufbau und
     .abschluss-band, nicht am Schrittblock. Rot ist hier auch das Richtige -
     die alte Schrittnummer stand ebenfalls in var(--rot). Bekaeme der
     Abschnitt spaeter eine Produktfarbe, zieht der Balken von selbst mit.
   - Die Schrittnummer ist eine Marke mit Farbverlauf statt einer Textzeile.
   - Das Bild sitzt in einem eigenen Feld mit fester Hoehe. Die Zeichnungen
     sind freigestellt und unterschiedlich hoch; ohne das Feld standen sie
     auf verschieden hohen Grundlinien.
   - Beim Zeigen hebt sich die Kachel leicht an und das Bild waechst eine
     Spur. Bei prefers-reduced-motion unterbleibt beides (Regel am Ende).

   Die Masse stehen bewusst hier unten am Dateiende: dieser Block kommt nach
   den alten .schritte-Regeln (~Zeile 1046) und nach deren Fassungen in den
   Medienabfragen, gewinnt also ohne !important und ohne dass eine fremde
   Zeile geaendert werden muesste. Die eigenen Medienabfragen stehen deshalb
   ebenfalls hier - sie muessen nach den alten stehen, sonst traegt die alte
   Zweispaltigkeit (max-width: 991px) wieder. */
.schritte {
  grid-template-columns: 1fr;
  gap: 18px;
}
.schritte li {
  position: relative;
  overflow: hidden;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 22px 28px;
  text-align: left;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;

  /* Eine Zeile je Schritt: links das Bild, rechts der Textblock. Zwei
     Spalten, keine Reihen - der Text steht seit dem 12.10. in einem eigenen
     <div class="schritt-text">. Vorher musste das Bild mehrere Textreihen
     ueberspannen; auf den Produktseiten, die keinen Satz fuehren, blieb
     dabei eine Reihe leer und zog Marke und Titel auseinander. */
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  column-gap: 30px;
  align-items: center;
}
.schritt-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}
/* Der Farbbalken am Kopf der Kachel. */
.schritte li::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--marke), var(--marke-hell));
}
.schritte li:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .13);
}
.schritte .nummer {
  display: inline-block;
  margin: 0 0 2px;
  padding: 6px 15px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--marke), var(--marke-hell));
  color: var(--weiss);
  font: 700 10.5px/1 var(--schrift-t);
  text-transform: uppercase;
  letter-spacing: .14em;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
/* Das Bild steht links und ueberspannt alle drei Textreihen. Feste Hoehe,
   damit die drei Zeilen gleich hoch sind; die Zeichnungen sind freigestellt
   und unterschiedlich gross. */
.schritte img {
  grid-column: 1;
  display: block;
  width: 100%;
  height: 128px;
  max-height: none;
  object-fit: contain;
  margin: 0;
  padding: 12px;
  background: linear-gradient(180deg, #fafbfc, #edeff2);
  border-radius: 12px;
  transition: transform .3s ease;
}
.schritte li:hover img { transform: scale(1.04); }
.schritte h3 {
  margin: 0;
  font: 800 16px/1.3 var(--schrift-t);
  color: var(--dunkel);
}
/* Der Satz steht jetzt in der breiten rechten Spalte und passt dort auf eine
   Zeile - der Grund fuer den Umbau (Rueckmeldung des Inhabers vom 12.10.:
   "die Icons jeweils in eine Zeile, jetzt gibt es Zeilenumbrueche"). */
.schritte li p {
  margin: 0;
  font-size: 13px;
  color: #5d6470;
}

/* Der Hinweis unter der Schrittliste (nur /installation): Windows 7 und XP
   koennen die Treiberinstallation weiterhin brauchen. Er traegt denselben
   linken Farbstreifen wie die Treiberkacheln, damit er als Hinweis und nicht
   als vierter Schritt gelesen wird. */
.schritte-hinweis {
  margin: 26px 0 0;
  padding: 16px 20px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--marke);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.75;
  color: #5d6470;
}
.schritte-hinweis a { font-weight: 700; }

/* Schmaler wird die Bildspalte kleiner, bevor der Satz umbricht. */
@media (max-width: 991px) {
  .schritte li { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); column-gap: 22px; padding: 20px 22px; }
  .schritte img { height: 112px; padding: 10px; }
  .schritte h3 { font-size: 15px; }
  .schritte li p { font-size: 12.5px; }
}
/* Auf dem Handy ist fuer zwei Spalten kein Platz: dort steht wieder alles
   untereinander, mittig, wie bei einer Karte. Die Reihen werden neu
   zugewiesen, weil das Bild sonst in seiner uebergreifenden Reihe bliebe. */
@media (max-width: 639px) {
  .schritte li {
    grid-template-columns: 1fr;
    row-gap: 12px;
    text-align: center;
    padding: 24px 20px;
  }
  .schritte img { grid-column: 1; height: 140px; padding: 14px; }
  .schritt-text { align-items: center; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .schritte li,
  .schritte img { transition: none; }
  .schritte li:hover { transform: none; }
  .schritte li:hover img { transform: none; }
}
/* ===== JMS-474 Ende ===== */

/* ==== JMS-479 DMXControl Fassungstabelle ANFANG ==== */

/* Die Tabelle "Welche Fassung passt zu wem?" (JMS-479) benutzt die
   Vergleichstabelle von /produkte weiter - rollbarer Rahmen, Kopfzeile auf
   --nacht, Ankerspalte links. Was dort nicht passt: die Produktfarben je
   Spalte und die Mittelachse. Hier stehen keine Haken in den Zellen, sondern
   ganze Saetze; die lesen sich linksbuendig. */
table.vergleich.fassungen { min-width: 720px; }
table.vergleich.fassungen th,
table.vergleich.fassungen td {
  text-align: left; vertical-align: top;
  padding: .8rem .9rem; line-height: 1.65;
}
table.vergleich.fassungen thead th {
  padding: .75rem .9rem; vertical-align: bottom;
  background: var(--nacht); color: var(--weiss);
}
table.vergleich.fassungen thead th:first-child {
  padding: .75rem .9rem; color: var(--weiss);
  font-size: 13px; letter-spacing: .04em;
}
table.vergleich.fassungen tbody th { white-space: normal; width: 168px; }
table.vergleich.fassungen tbody td:nth-child(n+2) { background: var(--weiss); }
table.vergleich.fassungen tbody tr.empfehlung th { background: #f7eeee; }
table.vergleich.fassungen tbody tr.empfehlung td:nth-child(n+2) { background: #fdf7f7; }
table.vergleich.fassungen tbody tr:hover td:nth-child(n+2) { background: #fff8e9; }
table.vergleich.fassungen .f-name {
  display: block; font: 900 14px/1.25 var(--schrift-t); color: var(--dunkel);
}
table.vergleich.fassungen .f-datum {
  display: block; margin-top: .3em; font-size: 11.5px; color: #8b939f; font-weight: 400;
}
table.vergleich.fassungen .f-marke {
  display: inline-block; margin-top: .5em; padding: .25em .55em;
  background: var(--rot); color: var(--weiss);
  font: 700 10px/1.4 var(--schrift-t); text-transform: uppercase; letter-spacing: .1em;
}

/* Die kleine Zeile als Zwischentitel - ohne den Abstand des Abschnittkopfes. */
.kurz-titel { margin-top: 44px; }

.fassung-kurz {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; gap: 10px; max-width: 820px;
}
.fassung-kurz li {
  position: relative; padding-left: 30px;
  font-size: 13.5px; line-height: 1.7; color: #5d6470;
}
.fassung-kurz li::before {
  content: '\2192'; position: absolute; left: 0; top: 0;
  color: var(--rot); font-weight: 700;
}
.fassung-kurz strong { color: var(--dunkel); }

/* Die Antwort auf die Server-Frage steht abgesetzt: sie raeumt ein
   Missverstaendnis aus und soll nicht in der Textwand untergehen. */
.fassung-notiz {
  margin-top: 34px; max-width: 860px;
  background: var(--weiss); border-left: 3px solid var(--rot);
  padding: 20px 24px;
}
.fassung-notiz h3 { margin: 0 0 .5em; font: 700 15px/1.3 var(--schrift-t); color: var(--dunkel); }
.fassung-notiz p { margin: 0; font-size: 13.5px; line-height: 1.8; color: #5d6470; }

.sw-text { max-width: 860px; display: grid; gap: 28px; }
.sw-text h3 { margin: 0 0 .55em; font: 700 17px/1.3 var(--schrift-t); color: var(--dunkel); }
.sw-text p { margin: 0 0 .85em; font-size: 14px; line-height: 1.8; color: #5d6470; }
.sw-text p:last-child { margin-bottom: 0; }

.sw-weiter {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 9px 26px;
}
.sw-weiter li { font-size: 13.5px; line-height: 1.6; }

/* Dateiname und Rueckweg in der Downloadkarte. .dl-karte p setzt margin: 0,
   deshalb hier dieselbe Ausnahme wie bei .dl-guete. */
.dl-datei {
  margin: .6em 0 0 !important;
  font-family: var(--schrift-mono); font-size: 11.5px; color: #8b939f;
  /* Die Dateinamen sind lang (DMXControl_3.3.3.1415_Setup.exe). "anywhere"
     bricht erst, wenn die Zeile sonst herausragen wuerde - break-all haette
     mitten im Wort umgebrochen, obwohl Platz war. */
  overflow-wrap: anywhere;
}
.dl-quelle { margin: .75em 0 0 !important; font-size: 12.5px; }

@media (max-width: 575px) {
  .fassung-notiz { padding: 18px 20px; }
}
/* ==== JMS-479 DMXControl Fassungstabelle ENDE ==== */

/* ===== JMS-474 Anfang: Zeichenreihenfolge in den Schnellverweisen ===== */
/* Rueckmeldung des Inhabers vom 12.10.2026: "die roten und grauen icons
   vertauschen so dass die roten haken links und die grauen betriessysteme
   rechts sind."

   In .verweis-paar stehen zwei Zeichen nebeneinander: das graue
   Betriebssystem-Zeichen (JMS-478) und das rote Zeichen der Handlung.
   Gedreht wird nur ihre Reihenfolge - ueber "order", nicht im HTML, damit
   die Seiten dafuer nicht neu gebaut werden muessen und die Vorlesereihen-
   folge (die ohnehin nur den Text liest; beide Zeichen sind aria-hidden)
   unveraendert bleibt.

   .os-leer ist der 15-px-Platzhalter in Zeilen ohne Systemzeichen. Er muss
   mitwandern, sonst stuende dort das rote Zeichen weiter rechts als in
   allen anderen Zeilen. */
.verweis-paar .os-zeichen,
.verweis-paar .os-leer { order: 2; }

/* Zweiter Teil, 12.10.2026: dieselbe Mischung in der Liste "Auf einen Blick"
   (.merkmal-liste) auf den Produktseiten und den Programmseiten. Der Inhaber
   hat auf die Nachfrage mit "Ja" geantwortet: roter Haken links wie in jeder
   anderen Zeile, Betriebssystem-Zeichen rechts.

   Bisher ersetzte das Systemzeichen den Haken an derselben Stelle
   (content: none weiter oben in der Datei). Jetzt steht der Haken wieder da,
   und das Systemzeichen rueckt hinter den fetten Namen: "Windows [Fenster]".

   Warum hinter den Namen und nicht dicht neben den Haken: fuer beide Zeichen
   nebeneinander muesste der Freiraum links von 40 auf 58 px wachsen, und
   jedes Pixel davon fehlt dem Text. Gemessen ueber sechs Seiten (Produkt- und
   Programmseiten, deutsch und englisch): 44 px kosten 2 zusaetzliche
   Textzeilen, 46 bis 50 px kosten 6, 58 px kosten 10. Genau diese Umbrueche
   hat der Inhaber in dieser Karte schon einmal beanstandet. Dieser Entwurf
   kostet 0.

   Technisch: die Zeile wird ein Flexkasten, damit das Zeichen hinter den
   Namen rutschen kann, ohne das HTML zu aendern (und ohne die sechs Seiten
   neu zu bauen). Der Haken bleibt absolut gesetzt und steht deshalb
   ausserhalb dieses Flusses, dort wo er immer stand. Der erklaerende Satz
   nimmt die volle Breite und steht damit wie bisher unter dem Namen. */
.merkmal-liste li[data-os]::before { content: '\2714'; }
.merkmal-liste li[data-os] {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px;
}
.merkmal-liste li[data-os] strong { order: 1; }
.merkmal-liste li[data-os] .os-kasten {
  order: 2; position: static; width: auto; height: auto;
  display: inline-flex; background: none; color: #6b7280;
}
.merkmal-liste li[data-os] > span:not(.os-kasten) { order: 3; flex: 0 0 100%; }
.produkt-einstieg .merkmal-liste li[data-os] .os-kasten,
.sw-seite .merkmal-liste li[data-os] .os-kasten { background: none; color: #6b7280; }
/* ===== JMS-474 Ende: Zeichenreihenfolge ===== */

/* ===== JMS-476 Anfang: Softwarefilter ===== */
/* Filterleiste der Softwareseite. Die Leiste traegt im HTML `hidden` und wird
   erst von usb2dmx.js aufgedeckt, sobald der Filter wirklich bedienbar ist.
   Ohne JavaScript sieht der Kunde keine Leiste, sondern alle zwoelf
   Programme — nicht eine Aufzaehlung, die auf Klick nichts tut. */
.sw-filter:not([hidden]) {
  display: block; background: var(--weiss); border: 1px solid var(--linie);
  padding: 20px 22px; margin: 0 0 26px;
}
.sw-filter-kopf {
  margin: 0 0 14px; font: 700 11.5px/1.3 var(--schrift-t); color: var(--grau);
  text-transform: uppercase; letter-spacing: .14em;
}
/* Seit JMS-476 fuenf Gruppen statt zwei. Feste zwei Spalten wuerden die
   Leiste in eine hohe Saeule verwandeln; auto-fit legt so viele Spalten
   nebeneinander, wie bei 210 px Mindestbreite hineinpassen, und stapelt den
   Rest von selbst. Damit braucht keine neue Gruppe eine CSS-Aenderung. */
.sw-filter-gruppen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 30px;
}
.sw-filter-titel {
  margin: 0 0 9px; font: 700 12.5px/1.3 var(--schrift-t); color: var(--dunkel);
}
/* Die Knoepfe sind echte <button> mit aria-pressed, keine Verweise: sie
   wechseln einen Zustand auf dieser Seite und fuehren nicht woanders hin.
   Damit koennen sie von der Tastatur aus bedient werden, ohne eine Zeile
   zusaetzliches JavaScript. */
.sw-filter-knopf {
  display: inline-block; margin: 0 7px 7px 0; padding: 7px 14px;
  font: 700 12.5px/1.2 var(--schrift-t); color: var(--dunkel);
  background: var(--hell, #f5f5f5); border: 1px solid var(--linie);
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sw-filter-knopf:hover { border-color: var(--rot); color: var(--rot); }
.sw-filter-knopf[aria-pressed="true"] {
  background: var(--rot); border-color: var(--rot); color: var(--weiss);
}
/* Der Fokus darf nicht nur durch Farbe kenntlich sein — auf dem roten Knopf
   waere der Unterschied zum gewaehlten Zustand sonst nicht zu sehen. */
.sw-filter-knopf:focus-visible { outline: 2px solid var(--dunkel); outline-offset: 2px; }
.sw-filter-fuss {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--linie);
}
.sw-filter-stand { font: 700 12.5px/1.3 var(--schrift-t); color: var(--dunkel); }
.sw-filter-weg {
  padding: 0; font: 700 12.5px/1.3 var(--schrift-t); color: var(--rot);
  background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer;
}
.sw-filter-weg[hidden] { display: none; }
.sw-filter-leer:not([hidden]) {
  margin: 0 0 26px; padding: 18px 22px; font-size: 13.5px;
  background: var(--weiss); border: 1px solid var(--linie); border-left: 3px solid var(--rot);
}
/* DIESE ZEILE TRAEGT DEN FILTER. Siehe Kommentar in baue-softwarefilter.js:
   .sw-karte hat display:grid und wuerde `hidden` sonst ueberstimmen. */
.sw-karte[hidden] { display: none; }

@media (max-width: 760px) {
  .sw-filter:not([hidden]) { padding: 16px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-filter-knopf { transition: none; }
}
/* ===== JMS-476 Ende ===== */

/* ------------------------------------------- Fernwartung: Downloadkarten
   JMS-716. Nur fuer .fw-karten auf /service/fernwartung. Die Karten stehen
   senkrecht: Symbol, Titel, Beschreibung, Hinweis, unten die Knoepfe. Die
   Knoepfe sitzen per margin-top: auto auf einer Linie, egal wie lang der
   Text darueber ist, und haben Abstand zum Text (Rueckmeldung des Inhabers
   vom 23.10.: "die roten Boxen sind zu nahe am Text"). */
.fw-karten { gap: 24px; align-items: stretch; }
.fw-karten .dl-karte.gross {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--rot);
  padding: 32px 30px 30px;
}
.fw-karten .dl-karte > img { width: 40px; height: 40px; object-fit: contain; margin: 0 0 22px; }
.fw-karten .dl-karte > div { display: flex; flex-direction: column; flex: 1; }
.fw-karten .dl-karte h3 { margin: 0 0 10px; font: 700 20px/1.25 var(--schrift-t); color: var(--dunkel); }
.fw-karten .dl-karte p.dl-fassung { font-weight: 400; color: var(--text); font-size: 14px; line-height: 1.6; }
.fw-karten .dl-karte p.fw-notiz { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: #737373; }
.fw-karten .dl-karte p.produkt-knoepfe {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: auto;
  padding-top: 28px;
}
.fw-karten .produkt-knoepfe a { text-align: center; padding: 15px 18px; line-height: 1.25; }
@media (max-width: 767px) {
  .fw-karten .dl-karte.gross { padding: 26px 22px 24px; }
}

/* ===== JMS-825 Anfang: roter Seitenkopf wie im Original ===== */
.seitenkopf {
  background: #a40802 linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%);
  isolation: isolate;
}
.seitenkopf::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../images/kallyas_images/glare-effect.png) no-repeat 50% 0;
}
.seitenkopf .pfad { color: rgba(255,255,255,.72); }
.seitenkopf .pfad a { color: var(--weiss); }
/* ===== JMS-825 Ende ===== */

/* ===== JMS-826 Anfang: Seitenkopf niedriger ===== */
.seitenkopf { padding-block: 24px; }
@media (max-width: 767px) {
  .seitenkopf { padding-block: 18px; }
}
/* ===== JMS-826 Ende ===== */