/* Signal-Werk · Anpassung an Geräte — 2026-09-23
   Eine Datei für alle Seiten des Auftritts: Telefon, Tablett, Werkbank, Fernseher.
   Werkzeugseiten haben ihre eigenen Regeln; hier geht es um den Rahmen der Seite.
   geraete.js setzt <html data-geraet="telefon|tablett|werkbank|gross"> und
   data-zeiger="grob|fein"; die Regeln unten greifen auch ohne Skript über Media Queries.
   One stylesheet for every page of the site across phone, tablet, desk and TV. */

/* ── Grundlagen / basics ─────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { min-width: 0; }
img, svg, video, canvas { max-width: 100%; height: auto; }
table { max-width: 100%; }
pre, code { overflow-wrap: anywhere; }
:root { --tipp: 40px; }                 /* Mindestgröße einer Berührfläche / minimum tap target */

/* Tabellen und Codeblöcke schieben statt abschneiden / scroll instead of clip */
.tabelle-schieb, .cmp, .kat-tab { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Kopfleiste / top rail ───────────────────────────────────────────── */
.rail, .head { gap: 8px; }
.rail .wrap, .head .wrap { display: flex; align-items: center; gap: 10px; }
@media (max-width: 900px) {
  .rail .wrap, .head .wrap { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-right: 12px; }
  .rail .wrap::-webkit-scrollbar, .head .wrap::-webkit-scrollbar { display: none; }
  .rail a.nav, .head a.nav, .head .nav { white-space: nowrap; padding: 12px 6px; flex: 0 0 auto; }
  .rail .brand, .head .brand { flex: 0 0 auto; }
  .rail-sp, .head .sp { display: none; }
  .lang { flex: 0 0 auto; margin-left: 6px; }
}

/* ── Berührung / touch ───────────────────────────────────────────────── */
@media (pointer: coarse) {
  a.nav, .lang, .chip, .kat-chips button, .btn, button { min-height: var(--tipp); }
  .kat-chips button { padding: 8px 12px; font-size: 12px; }
  .unit, .item { padding-block: 16px; }
  a:hover { color: inherit; }             /* keine Schwebezustände auf Berührgeräten */
}

/* ── Telefon / phone ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .wrap { padding-inline: 16px; }
  .hero h1, h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); line-height: 1.05; overflow-wrap: anywhere; }
  .hero .lead, .lead { font-size: 1rem; }
  .units, .list { gap: 8px; }
  .unit, .item { grid-template-columns: auto 1fr !important; }
  .unit-badge, .ic { width: 34px; height: 34px; }
  .unit-state, .st { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 6px; }
  .kat-filter { position: sticky; top: 44px; z-index: 40; background: rgba(16,14,12,.94);
    backdrop-filter: blur(6px); padding: 8px 0; margin-inline: -16px; padding-inline: 16px; }
  .kat-filter input { flex: 1 1 100%; }
  .kat-chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; }
  .kat-chips::-webkit-scrollbar { display: none; }
  .kat-zahl { margin-left: 0; }
  .cmp th, .cmp td { padding: 8px 10px; font-size: .86rem; }
  #sw-geraet { font-size: 13px; }
  /* Oszilloskop-Kachel und andere feste Höhen weich machen */
  .scope, .scope-body, canvas { max-height: 46vw; }
}
@media (max-width: 380px) {
  .hero h1, h1 { font-size: clamp(1.6rem, 10vw, 2rem); }
  .rail .brand, .head .brand { display: none; }
}

/* ── Tablett / tablet ────────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1100px) {
  .units { grid-template-columns: 1fr; }
  .kat-filter input { flex-basis: 260px; }
}

/* ── Fernseher und große Bildschirme / TV and large screens ─────────── */
@media (min-width: 1900px) {
  html { font-size: 22px; }
  .wrap { width: min(100% - 4rem, 1500px); max-width: 1500px; }
  .units, .list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .unit, .item { padding: 22px 22px 22px 34px; }
  .rail a.nav, .head a.nav { font-size: 13px; padding: 12px 8px; }
}
html[data-geraet="gross"] { font-size: 22px; }
html[data-geraet="gross"] .wrap { width: min(100% - 4rem, 1500px); max-width: 1500px; }
html[data-geraet="gross"] a, html[data-geraet="gross"] button { outline-offset: 4px; }
html[data-geraet="gross"] a:focus-visible, html[data-geraet="gross"] button:focus-visible {
  outline: 3px solid var(--zinnober, #E24A2B); }   /* Fernbedienung: sichtbarer Fokus */

/* ── Querformat auf niedrigen Bildschirmen (Telefon quer) ───────────── */
@media (max-height: 420px) and (orientation: landscape) {
  .hero { padding-block: 20px; }
  .kat-filter { position: static; }
}

/* ── Hoher Kontrast, weniger Bewegung / high contrast, reduced motion ── */
@media (prefers-contrast: more) {
  .unit, .item, .kat-chips button, .lang { border-color: currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Druck / print ───────────────────────────────────────────────────── */
@media print {
  .rail, .head, .kat-filter, #sw-geraet, #sw-testband, .lang { display: none !important; }
  .unit, .item { break-inside: avoid; border: 1px solid #999; }
  a::after { content: none; }
}