/* Merten Broadcast Systems — gemeinsames Stylesheet.
   Erzeugt von marketing/generatoren/build_stylesheet.py.
   NICHT von Hand aendern: der naechste Lauf ueberschreibt die Datei.
   Frueher hatte jede Seite ihre eigene Kopie — mit Abweichungen, durch
   die die Kopfleiste beim Blaettern sprang. */

/* ============ 1 Basis (index.html) ============ */
:root{
    --ground:#1a1a1a; --surface:#252525; --surface-2:#2a2a2a; --line:#3a3a3a; --line-2:#454545;
    --ink:#ededed; --ink-2:#d4d4d4; --ink-dim:#9a9a9a; --ink-faint:#6a6a6a;
    --accent:#1a4d7a; --accent-h:#245f94; --live:#4a9eff; --rec:#e53935; --ok:#4caf50;
    --btn-ink:#ffffff;
    --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --maxw:1120px; --r:8px;
  }
  @media (prefers-color-scheme:light){
    :root{--ground:#f0f0f0;--surface:#ffffff;--surface-2:#e8e8e8;--line:#d3d3d3;--line-2:#c4c4c4;
      --ink:#161616;--ink-2:#2a2a2a;--ink-dim:#5a5a5a;--ink-faint:#8a8a8a;--accent:#1f5c93;--accent-h:#17466f;--live:#1f6fc4;}
  }
  :root[data-theme="dark"]{--ground:#1a1a1a;--surface:#252525;--surface-2:#2a2a2a;--line:#3a3a3a;--line-2:#454545;
    --ink:#ededed;--ink-2:#d4d4d4;--ink-dim:#9a9a9a;--ink-faint:#6a6a6a;--accent:#1a4d7a;--accent-h:#245f94;--live:#4a9eff;}
  :root[data-theme="light"]{--ground:#f0f0f0;--surface:#ffffff;--surface-2:#e8e8e8;--line:#d3d3d3;--line-2:#c4c4c4;
    --ink:#161616;--ink-2:#2a2a2a;--ink-dim:#5a5a5a;--ink-faint:#8a8a8a;--accent:#1f5c93;--accent-h:#17466f;--live:#1f6fc4;}

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;background:var(--ground);color:var(--ink-2);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  a{color:inherit}
  h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
  .eyebrow{font-size:13.5px;font-weight:600;color:var(--live);display:flex;align-items:center;gap:9px;margin:0 0 16px}
  .eyebrow .tick{width:16px;height:2px;background:var(--live);display:inline-block;border-radius:2px}

  /* image / video placeholder with graceful fallback */
  .ph{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:
    repeating-linear-gradient(135deg,var(--surface) 0 14px,var(--surface-2) 14px 28px);display:flex;align-items:center;justify-content:center;color:var(--ink-faint)}
  .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .ph .lbl{position:absolute;bottom:10px;left:10px;z-index:2;font-size:11px;color:#fff;background:rgba(0,0,0,.55);
    padding:3px 9px;border-radius:5px;border:1px solid rgba(255,255,255,.15)}
  .ph .play{z-index:2;width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.7);
    display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;background:rgba(0,0,0,.35)}

  header.bar{position:sticky;top:0;z-index:50;background:var(--ground);border-bottom:1px solid var(--line)}
  .bar .row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
  .brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16px;letter-spacing:-.01em;text-decoration:none;color:var(--ink);flex:none}
  .brand .sq{width:13px;height:13px;background:var(--accent);border-radius:3px;display:inline-block;flex:none}
  .brand .light{color:var(--ink-dim);font-weight:400}
  nav.links{display:flex;gap:24px;align-items:center}
  nav.links a{font-size:14.5px;text-decoration:none;color:var(--ink-dim);transition:color .18s}
  nav.links a:hover{color:var(--ink)}
  .nav-cta{background:var(--accent);color:var(--btn-ink)!important;padding:8px 16px;border-radius:6px;font-weight:600}
  .nav-cta:hover{background:var(--accent-h)}
  .themetgl{background:none;border:1px solid var(--line-2);color:var(--ink-dim);font:inherit;font-size:13px;padding:6px 11px;border-radius:6px;cursor:pointer}
  .themetgl:hover{border-color:var(--ink-dim);color:var(--ink)}
  .lang{display:flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
  .lang a{padding:6px 9px;font-size:12.5px;color:var(--ink-dim);text-decoration:none}
  .lang a.active{background:var(--surface-2);color:var(--ink);font-weight:600}
  @media (max-width:960px){nav.links a.lnk{display:none}}

  /* hero with photo background + readability scrim */
  .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
  .hero .bg{position:absolute;inset:0;background:linear-gradient(180deg,var(--surface),var(--ground))}
  .hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,var(--ground),transparent 72%),linear-gradient(0deg,var(--ground),transparent 62%)}
  .hero .inner{position:relative;z-index:2;padding:96px 0 84px}
  .onair{display:inline-flex;align-items:center;gap:10px;margin:0 0 24px;font-size:14px;color:var(--ink-dim)}
  .airdot{width:10px;height:10px;border-radius:50%;background:var(--rec);display:inline-block;flex:none;box-shadow:0 0 10px var(--rec);animation:air 1.5s ease-in-out infinite}
  @keyframes air{0%,100%{opacity:1;box-shadow:0 0 11px var(--rec)}50%{opacity:.3;box-shadow:0 0 2px var(--rec)}}
  @media (prefers-reduced-motion:reduce){.airdot{animation:none}}
  .onair .live{color:var(--rec);font-weight:700;letter-spacing:.06em}
  .onair .sep{color:var(--ink-faint)}
  .hero h1{font-size:clamp(2.3rem,5.8vw,4.2rem);max-width:16ch}
  .hero .lede{margin:26px 0 0;font-size:clamp(1.05rem,2.1vw,1.28rem);color:var(--ink-2);max-width:58ch}
  .cta-row{display:flex;gap:13px;margin-top:36px;flex-wrap:wrap}
  .btn{font-size:15px;font-weight:600;text-decoration:none;padding:13px 24px;border-radius:6px;display:inline-flex;align-items:center;gap:8px;transition:.18s;border:1px solid transparent;cursor:pointer}
  .btn-primary{background:var(--accent);color:var(--btn-ink)}
  .btn-primary:hover{background:var(--accent-h)}
  .btn-ghost{border-color:var(--line-2);color:var(--ink);font-weight:500;background:color-mix(in srgb,var(--ground) 55%,transparent)}
  .btn-ghost:hover{border-color:var(--ink-dim)}

  section{padding:78px 0;border-top:1px solid var(--line)}
  .sec-head{max-width:62ch}
  .sec-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
  .sec-head p.intro{color:var(--ink-dim);margin:18px 0 0;font-size:1.08rem}

  .reel{margin-top:40px}
  .reel .frame{aspect-ratio:16/9;flex-direction:column;gap:14px}

  .segments{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:46px}
  @media (max-width:780px){.segments{grid-template-columns:1fr}}
  .seg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .2s;text-decoration:none;color:inherit}
  .seg:hover{border-color:var(--accent);transform:translateY(-2px)}
  .seg .thumb{aspect-ratio:16/9;border:0;border-bottom:1px solid var(--line);border-radius:0}
  .seg .body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
  .seg .tag{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--live)}
  .seg h3{font-size:1.4rem;margin:12px 0 10px}
  .seg p{margin:0;color:var(--ink-dim);font-size:1rem;flex:1}
  .seg .more{margin-top:18px;font-size:14px;font-weight:600;color:var(--live)}

  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
  @media (max-width:840px){.pillars{grid-template-columns:1fr}}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;transition:border-color .2s,transform .2s}
  .card:hover{border-color:var(--accent);transform:translateY(-2px)}
  .card .idx{font-size:13px;font-weight:600;color:var(--live)}
  .card h3{font-size:1.24rem;margin:13px 0 10px}
  .card p{margin:0;color:var(--ink-dim);font-size:.99rem}

  .system{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
  @media (max-width:840px){.system{grid-template-columns:1fr}}
  .hw{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  .hw .thumb{aspect-ratio:4/3;border:0;border-bottom:1px solid var(--line);border-radius:0}
  .hw .body{padding:20px 22px 24px}
  .hw .kind{font-size:12px;font-weight:600;color:var(--live);letter-spacing:.04em}
  .hw h3{font-size:1.15rem;margin:8px 0 8px}
  .hw p{margin:0;color:var(--ink-dim);font-size:.96rem}

  .why{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
  @media (max-width:840px){.why{grid-template-columns:1fr;gap:30px}}
  .why p.body{color:var(--ink-dim);margin:20px 0 0;font-size:1.06rem}
  .creds{display:grid;gap:12px}
  .cred{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
  .cred .k{font-size:12.5px;font-weight:600;color:var(--live);margin-bottom:4px}
  .cred .v{font-size:1rem;color:var(--ink)}

  .contact{text-align:center;padding:96px 0}
  .contact h2{font-size:clamp(1.9rem,4.4vw,3rem);max-width:20ch;margin:0 auto}
  .contact p{color:var(--ink-dim);max-width:54ch;margin:20px auto 0;font-size:1.1rem}
  .contact .cta-row{justify-content:center}
  .contact .integrators{margin:30px auto 0;max-width:56ch;font-size:.98rem;color:var(--ink-faint);border-top:1px solid var(--line);padding-top:22px}
  .contact .integrators a{color:var(--live);text-decoration:none;font-weight:600}

  footer{border-top:1px solid var(--line);padding:58px 0 38px}
  footer .claim{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.12;margin:0 0 32px;text-align:center;text-wrap:balance}
  footer .claim .accent{color:var(--accent)}
  footer .row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-faint)}
  footer a{color:var(--ink-dim);text-decoration:none}footer a:hover{color:var(--ink)}
  .note{background:var(--surface-2);border:1px dashed var(--line-2);border-radius:6px;padding:5px 11px;font-size:12.5px}
  :focus-visible{outline:2px solid var(--live);outline-offset:3px;border-radius:3px}

/* ============ 2 Unterseiten (sport/studio) ============ */
@media (max-width:840px){.uses{grid-template-columns:1fr}}
@media (max-width:680px){.imgrow{grid-template-columns:1fr}}
nav.links a.active{color:var(--ink);font-weight:600}
.page-hero{padding:72px 0 8px}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);max-width:17ch}
.page-hero .lede{margin:22px 0 0;font-size:clamp(1.02rem,2vw,1.2rem);color:var(--ink-dim);max-width:58ch}
section.first{border-top:0}
.video-ph{margin-top:40px;border:1px solid var(--line);border-radius:var(--r);background:repeating-linear-gradient(135deg,var(--surface) 0 14px,var(--surface-2) 14px 28px);aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--ink-faint)}
.video-ph .play{width:60px;height:60px;border-radius:50%;border:2px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink-dim)}
.video-ph .cap{font-size:13px}
.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.imgrow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.img-ph{border:1px solid var(--line);border-radius:var(--r);background:repeating-linear-gradient(135deg,var(--surface) 0 14px,var(--surface-2) 14px 28px);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:13px;text-align:center;padding:14px}

/* ============ 3 Produktbereich ============ */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s}
.pcard:hover{border-color:var(--line-2)}
.pcard img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover;background:var(--surface-2)}
.pcard .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard .code{font:600 12px/1 var(--font);letter-spacing:.08em;color:var(--live)}
.pcard h3{margin:0;font-size:19px}
.pcard p{margin:0;color:var(--ink-dim);font-size:14px;flex:1}
.pcard .go{margin-top:10px;font-size:14px;color:var(--live);text-decoration:none}
.tiers{display:flex;gap:5px;margin:2px 0 4px}
.tiers i{width:8px;height:8px;border-radius:50%;background:var(--line-2);display:block}
.tiers i.on{background:var(--accent)}
.spec{width:100%;border-collapse:collapse;margin:6px 0 26px}
.spec caption{text-align:left;font:600 12px/1 var(--font);letter-spacing:.08em;color:var(--live);
  padding:16px 0 8px;text-transform:uppercase}
.spec td{padding:9px 12px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
.spec td:first-child{color:var(--ink-dim);width:42%}
.phero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start}
.phero img{width:100%;border-radius:var(--r);background:var(--surface-2)}
.noimg{aspect-ratio:1/1;border:1px dashed var(--line-2);border-radius:var(--r);display:grid;
  place-items:center;color:var(--ink-faint);font-size:14px}
.cmp{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
.cmp th{text-align:left;padding:10px 12px;border-bottom:2px solid var(--line-2);font-weight:600}
.cmp td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.cmp td:first-child{color:var(--ink-dim)}
.crumb{color:var(--ink-faint);font-size:14px;margin:0 0 10px}
.crumb a{color:var(--ink-dim);text-decoration:none}
@media(max-width:820px){.phero{grid-template-columns:1fr}}

/* ============ 4 Rechtstexte ============ */
.legal{max-width:760px}
.legal h2{margin:34px 0 10px;font-size:22px}
.legal h3{margin:24px 0 6px;font-size:17px;color:var(--ink-2)}
.legal p,.legal li{color:var(--ink-2);line-height:1.65}
.legal ul{padding-left:20px}
.legal .box{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--live);
  border-radius:var(--r);padding:14px 18px;margin:18px 0}
.legal .box p{margin:0;color:var(--ink-dim);font-size:14px}
.legal address{font-style:normal;line-height:1.7}

/* ============ 5 Bildplaetze ============ */
/* --- Bildplaetze auf den Unterseiten (.img-ph) --- */
.img-ph{position:relative;overflow:hidden}
.img-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.img-ph img~*{display:none}

/* --- Videoplatz mit Standbild ---
   Solange kein Produktvideo existiert, traegt der Rahmen ein Bild. Gleiche
   Mechanik wie oben: Bild als erstes Kind rein, Abspielknopf und Beschriftung
   blenden sich aus. Faellt die Datei weg, nimmt sich das Bild per onerror
   heraus - dann steht wieder der Platzhalter da, statt eines leeren Rahmens. */
.video-ph{position:relative;overflow:hidden}
.video-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.video-ph img~*{display:none}

/* --- Stand-Hinweis im Fuss ---
   Leise, aber lesbar: gleiche Groesse wie die Rechtszeile, gedimmt, mit etwas
   Abstand darueber. Kein Kleingedrucktes - wer ihn sucht, findet ihn. */
footer .stand{margin:0 0 14px;font-size:13px;color:var(--ink-dim);max-width:70ch}

/* --- Vorbereitete Bildplaetze: Datei rein, fertig --- */
.ph.thumb{position:relative;overflow:hidden}
.ph.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph.thumb img+.lbl{display:none}
.hero .bg img{width:100%;height:100%;object-fit:cover;display:block}

/* --- Titelbild auf den Unterseiten ---
   .hero (Startseite) hatte immer eines, .page-hero nie — daher die Luecke, die
   in der Bilder-Inventur vom 24.08. auf zwoelf Seiten auffiel. Aufbau bewusst
   gleich wie oben: Bild in .bg, Verlauf darueber, Text auf z-index 2.
   Die Regel darf auf ALLEN Unterseiten stehen: ohne .bg-Block sieht der Kopf
   aus wie bisher, und ein fehlendes Bild nimmt sich per onerror selbst heraus.
   Deckkraft 0,30 statt 0,40 — auf den Unterseiten steht mehr Text darueber. */
.page-hero{position:relative;overflow:hidden}
.page-hero .bg{position:absolute;inset:0;z-index:0}
.page-hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.30}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,var(--ground),transparent 74%),linear-gradient(0deg,var(--ground),transparent 58%)}
.page-hero .wrap{position:relative;z-index:2}

/* --- Haertung: ein Bild darf das Layout NIE sprengen ---
   Gemessen: ohne die absolute Positionierung unten wuchs ein 1600 px breites
   Bild die Rasterspalte auf 1600 px, das Dokument wurde breiter als das
   Fenster und der zentrierte Inhalt rutschte nach rechts. "1fr" heisst
   minmax(auto,1fr) — das auto-Minimum ist die Min-Content-Breite des Inhalts.
   minmax(0,1fr) nimmt dem Bild dieses Druckmittel. Zweite Sicherung: kein
   Bild wird je breiter als sein Kasten, auch wenn eine Regel spaeter faellt. */
img{max-width:100%}
.imgrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:760px){.imgrow{grid-template-columns:minmax(0,1fr)}}

/* ============ 6 Korrektur Kopfleiste — MUSS zuletzt stehen ============ */
/* --- Kopfleiste: feste Position, egal welche Seite --- */
/* Die Seiten tragen historisch VIER verschiedene Stylesheets (handgeschrieben
   vs. erzeugt, DE vs. EN). Gemessen: nav gap 22 px hier, 24 px dort — dadurch
   sass die Leiste je Seite ein Dutzend Pixel woanders. Diese Regeln stehen auf
   JEDER Seite zuletzt und legen die Masse verbindlich fest. */
nav.links{gap:24px}
nav.links a.lnk{font-size:14.5px;font-weight:400;letter-spacing:0;
  display:inline-block;position:relative;line-height:1.5;white-space:nowrap}
nav.links a.lnk.active{font-weight:400}
.nav-cta{font-size:14.5px}
html{scrollbar-gutter:stable;overflow-y:scroll}
header.bar{min-height:64px}
header.bar .row{min-height:64px;align-items:center}
nav.links{flex-wrap:nowrap}
/* Menuepunkte bleiben sichtbar; enger statt weg */
@media (max-width:1180px){nav.links{gap:16px}nav.links a{font-size:13.5px}}
@media (max-width:1000px){nav.links{gap:12px}nav.links a{font-size:13px}
  .themetgl{display:none}}
@media (max-width:860px){nav.links a.lnk{display:inline}nav.links{gap:9px}
  nav.links a{font-size:12.5px}.nav-cta{padding:7px 11px}}
@media (max-width:640px){header.bar .row{flex-wrap:wrap;row-gap:8px}
  nav.links{width:100%;justify-content:flex-start}}
/* Aktive Seite kenntlich machen, OHNE das Layout anzufassen.
   Gemessen: ein Unterstrich im Textfluss machte den aktiven Punkt 5 px hoeher
   und schob ihn 2,5 px nach oben — beim Seitenwechsel sprang die Schrift
   senkrecht. Deshalb liegt der Strich jetzt absolut, ausserhalb des Flusses. */
nav.links a.lnk{position:relative;display:inline-block;line-height:1.5}
nav.links a.lnk.active{color:var(--ink)}
nav.links a.lnk.active::after{content:"";position:absolute;left:0;right:0;bottom:-7px;
  height:2px;background:var(--live);border-radius:1px}
/* Der Sprachumschalter darf durch die Fettung nicht springen */
.lang a{min-width:30px;text-align:center;box-sizing:border-box}
.lang a.active{font-weight:600}

/* ============ 7 Lebendigkeit: Kacheln reagieren ============ */
/* Kacheln reagieren auf den Zeiger — einheitlich fuer ALLE Kacheltypen.
   Vorher: .card und .seg sprangen um 2 px, aber ohne Uebergang (hart, wirkt
   wie ein Fehler), .pcard aenderte nur die Rahmenfarbe, .hw gar nichts.
   Ab hier eine einzige Sprache: anheben, Rahmen in Akzentfarbe, Schatten,
   Bild leicht heran. Der Uebergang steht am Element, nicht am :hover —
   sonst gleitet es hinein und schnappt heraus. */
.pcard,.card,.seg,.hw{
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  will-change:transform}
.pcard:hover,.card:hover,.seg:hover,.hw:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(0,0,0,.28)}

/* Das Bild in der Kachel kommt beim Zeigen leicht naeher.
   Setzt overflow:hidden an der Kachel voraus — haben alle vier. */
.pcard img,.seg .thumb img,.hw .thumb img,.seg .thumb,.hw .thumb{
  transition:transform .35s ease}
.pcard:hover img,.seg:hover .thumb img,.hw:hover .thumb img{transform:scale(1.045)}

/* Der Verweis in der Kachel ruckt mit — kleine Geste, grosse Wirkung. */
.pcard .go,.seg .more{transition:transform .18s ease}
.pcard:hover .go,.seg:hover .more{transform:translateX(3px)}

/* Tastaturbedienung darf nicht schlechter sein als die Maus. */
.pcard:focus-within,.card:focus-within,.seg:focus-within,.hw:focus-within{
  border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}

/* Wer Bewegung abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion:reduce){
  .pcard,.card,.seg,.hw,.pcard img,.seg .thumb img,.hw .thumb img,
  .pcard .go,.seg .more{transition:none}
  .pcard:hover,.card:hover,.seg:hover,.hw:hover{transform:none}
  .pcard:hover img,.seg:hover .thumb img,.hw:hover .thumb img{transform:none}
  .pcard:hover .go,.seg:hover .more{transform:none}}

/* ============ 8 Sportbereich: Disziplinen + Einstiegskarten ============ */
/* --- Vier Disziplinen auf der Sportseite --- */
.uses.vier{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.uses.vier{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.uses.vier{grid-template-columns:1fr}}
.nachsatz{margin:26px 0 0;color:var(--ink-dim);font-size:1rem;max-width:70ch}

/* --- Einstiegskarten der Uebersicht: dieselbe Kachel, nur verlinkt ---
   .go und .more sind bisher auf .pcard bzw. .seg gescopt, in .card also
   wirkungslos. Die Geste bleibt dieselbe wie ueberall: 3 px nach rechts. */
a.card{display:block;text-decoration:none;color:inherit}
a.card .go{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;
  color:var(--live);transition:transform .18s ease}
a.card:hover .go{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){a.card .go,a.card:hover .go{transition:none;transform:none}}

/* --- Disziplin-Auswahl auf sport.html (Anmerkung 01.09.) ---
   Vorher stand dort EIN Bild ohne Verweis. Jetzt drei Kacheln, jede traegt
   ihren Namen und fuehrt auf ihre Seite. Der Verlauf haelt den Namen lesbar,
   egal wie hell das Foto an der Stelle ist. */
.disziplinen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:40px}
@media (max-width:760px){.disziplinen{grid-template-columns:1fr}}
.disziplinen .dis{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:inherit}
.disziplinen .dis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease}
.disziplinen .dis:hover img{transform:scale(1.05)}
.disziplinen .dis::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--ground),transparent 60%)}
.disziplinen .dis .lbl{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
  font-weight:600;font-size:1.06rem;color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .disziplinen .dis img,.disziplinen .dis:hover img{transition:none;transform:none}}

/* --- Produktzeile unter "Die Anlage" (Anmerkung 01.09.) ---
   Die Disziplinseiten beschrieben die Anlage, zeigten aber nie, WOMIT sie
   gebaut wird. Wer wissen wollte, welche Robotik gemeint ist, musste sie
   selbst suchen. */
.prod-kopf{margin:34px 0 12px;color:var(--ink-dim);font-size:14px;letter-spacing:.02em;
  text-transform:uppercase}
.produktzeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
@media (max-width:760px){.produktzeile{grid-template-columns:1fr}}
.produktzeile .prod{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .18s ease}
.produktzeile .prod:hover{border-color:var(--line-2)}
.produktzeile .prod img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;
  background:var(--surface-2)}
.produktzeile .prod .nm{display:block;padding:12px 14px 0;font-weight:600}
.produktzeile .prod .ty{display:block;padding:2px 14px 14px;color:var(--ink-dim);font-size:14px}

/* ============ 9 MAPS-Softwareseite ============ */
/* --- MAPS-Softwareseite: Text neben Screenshot --- */
.mapsrow{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;margin-top:40px}
.mapsrow.gedreht>.shot{order:-1}
@media (max-width:900px){.mapsrow{grid-template-columns:1fr;gap:24px}
  .mapsrow.gedreht>.shot{order:0}}
.shot{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--surface-2)}
.shot img{display:block;width:100%;height:auto}
.punkte{list-style:none;padding:0;margin:20px 0 0}
.punkte li{position:relative;padding-left:20px;margin:0 0 11px;color:var(--ink-dim);
  font-size:1rem;line-height:1.55}
.punkte li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--live)}
/* Querformate laufen ueber die volle Breite, ihre Punkte daher nebeneinander. */
.punkte.quer{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0 30px;margin-top:26px}
.shot.breit{margin-top:30px}