/* ============================================================
   Service Finder — Design: Dark Mode, minimalistisch & clean.
   Signalgelb bleibt als einzige Akzentfarbe erhalten, sonst
   reduzierte, ruhige Flächen mit viel Kontrast durch Fläche statt
   Schatten. Alle Klassennamen bleiben wie gehabt, damit
   app.js / parts.js unverändert funktionieren.
   ============================================================ */

/* Schrift Inter — liegt jetzt auf dem eigenen Server (assets/fonts/).
   Vorher kam sie per @import von Google: Der Browser konnte das erst
   entdecken, nachdem diese Datei geladen war, und musste dann für die
   Schrift eine zweite Verbindung zu einem fremden Server aufbauen — vor dem
   ersten Aufbau der Seite. Ohne Empfang hing das bis zum Timeout. Jetzt
   kommt die Schrift mit der App, liegt im Offline-Speicher und schickt
   nichts mehr an Google (Datenschutz). "latin-ext" wird nur nachgeladen,
   wenn Zeichen wie Č, Đ oder Ł tatsächlich vorkommen. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/inter-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/inter-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/inter-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/inter-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/inter-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/inter-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/inter-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/inter-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(fonts/inter-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(fonts/inter-latin-ext-800-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  --primary: #F9C700;        /* Signalgelb, einzige Akzentfarbe */
  --primary-dark: #E0B300;
  --primary-soft: rgba(249, 199, 0, 0.14);
  --primary-soft-strong: rgba(249, 199, 0, 0.24);
  --on-primary: #15130A;     /* dunkler Text/Icons auf gelber Fläche */

  --bg: #0A0B0D;             /* Seitenhintergrund, fast Schwarz */
  --surface: #16181C;        /* Karten, Header, Inputs */
  --surface-alt: #1E2025;    /* Hover-Zustand, alternierende Flächen */
  --surface-raised: #202329; /* leicht abgehobene Flächen (Login-Box) */

  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);

  --text: #EDEEF0;
  --muted: #8B8E94;

  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --purple: #A78BFA;
  --purple-soft: rgba(167, 139, 250, 0.14);
  --blue: #60A5FA;
  --blue-soft: rgba(96, 165, 250, 0.14);
  --green: #4ADE80;
  --green-soft: rgba(74, 222, 128, 0.12);

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.45);
  --tap-min: 44px;           /* Mindestgröße für Touch-Ziele */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}

/* Was das hidden-Attribut trägt, bleibt unsichtbar – egal welche Regel
   sonst noch ein display setzt. Ohne diese Zeile machte der Kartenumbruch
   für Tabellen (weiter unten) versteckte Bearbeiten-Zeilen sichtbar, und
   in der Verwaltung tat dasselbe die Regel für .admin-form. */
[hidden] { display: none !important; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  margin: 0;
  padding: 28px 32px calc(60px + var(--safe-bottom));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  background-color: var(--bg);
  background-image: radial-gradient(900px 480px at 100% -10%, rgba(249, 199, 0, 0.05), transparent 60%);
  background-repeat: no-repeat;
  min-height: 100vh;
  min-height: 100svh;   /* stabil, wenn die Browserleiste auf dem Handy ein-/ausfährt */

  /* Auf einem sehr großen Monitor lief früher alles über die volle Breite:
     der Ziffernblock wurde meterbreit. Der Inhalt hat deshalb eine
     Obergrenze und steht mittig — großzügig genug, dass am Rechner nichts
     eingezwängt wirkt. Auf Handy und Tablet ändert das nichts. */
  max-width: 1600px;
  margin-inline: auto;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Kopfleiste ---------- */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  background: var(--surface);
  color: var(--text);
  margin: -28px -32px 0;
  padding: 18px 32px;
  min-height: 80px;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Die Kopfzeile ist ein Weg zurück: ein Tipp auf Logo oder Name führt von
    überall auf die Startseite. Deshalb ein Link — er funktioniert auch,
    wenn kein JavaScript läuft. */
.brand-row {
  display: flex; align-items: center; gap: 12px;
  color: inherit; text-decoration: none;
  border-radius: 12px;
  padding: 2px 6px 2px 2px;
  margin-left: -2px;
  transition: background .15s;
}
.brand-row:hover { background: rgba(128, 128, 128, 0.12); }
.brand-row:active { transform: scale(0.985); }
.brand-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Das Logo bringt seinen eigenen dunklen Grund mit – deshalb hier keine
   gelbe Kachel mehr dahinter. */
.brand-mark {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-mark img { width: 38px; height: 38px; display: block; }

h1 {
  font-size: 1.65rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text);
}

.header-actions { display: flex; align-items: center; gap: 10px; }

.btn {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  padding: 11px 20px;
  min-height: var(--tap-min);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .08s;
  touch-action: manipulation;
}
.btn:hover { background: var(--primary-dark); }
.btn:active { transform: scale(0.97); }
.btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border-strong);
  font-weight: 600;
}
.btn.secondary:hover { border-color: var(--text); background: rgba(255,255,255,0.06); }
.btn.secondary:active { background: rgba(255,255,255,0.1); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

header .muted { color: var(--muted); }

.muted { color: var(--muted); font-size: 0.9rem; }

/* Nicht-Header .muted (z.B. "Letzter Sync") braucht eigenen Abstand */
body > p.muted { margin: 18px 0 4px; font-size: 0.92rem; }

.toolbar {
  display: flex;
  gap: 12px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.toolbar input[type="search"],
.toolbar input[type="text"] {
  flex: 1;
  min-width: 260px;
  padding: 16px 20px 16px 48px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1.15rem;
  color: var(--text);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8E94' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 16px center;
  background-size: 20px 20px;
}
.toolbar input[type="search"]:focus,
.toolbar input[type="text"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft-strong);
}

#searchBox {
  flex: 1;
  min-width: 260px;
  padding: 16px 20px 16px 48px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1.15rem;
  color: var(--text);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8E94' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 16px center;
  background-size: 20px 20px;
}
#searchBox:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft-strong); }

/* Suchfelder in Ersatzteile- und Fehlerlisten-Tabs: gleiche Optik wie oben
   (mit Lupen-Icon), da Suche hier die zentrale Aktion auf dem Screen ist */
#errorsSearchBox,
#partsSheetSearch {
  width: 100%;
  padding: 16px 20px 16px 48px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1.15rem;
  color: var(--text);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8E94' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 16px center;
  background-size: 20px 20px;
  box-shadow: var(--shadow);
}
#errorsSearchBox:focus,
#partsSheetSearch:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft-strong);
}

#sortSelect {
  padding: 13px 14px;
  min-height: var(--tap-min);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.98rem;
  color: var(--text);
  background: var(--surface);
}

.progress {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--primary-soft-strong);
  width: 0%;
  transition: width 0.3s ease;
  z-index: 0;
}
#progressText { position: relative; z-index: 1; font-size: 0.95rem; font-weight: 500; color: var(--text); }

.breadcrumb {
  margin: 4px 0 14px 2px;
  font-size: 0.95rem;
  color: var(--muted);
}
.breadcrumb-item {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  touch-action: manipulation;
  padding: 4px 2px;
}
.breadcrumb-item:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb-item:active { opacity: 0.6; }
.breadcrumb-current {
  color: var(--text);
  font-weight: 700;
  cursor: default;
}
.breadcrumb-sep { color: var(--muted); }

tbody tr.folder-row td:first-child {
  font-weight: 700;
}
.folder-name-cell { display: flex; align-items: center; gap: 10px; }

/* ---------- Tabs (Dateien / Ersatzteile / Fehlerlisten / Handbedienung) ---------- */
.tabbar {
  display: flex;
  gap: 4px;
  margin: 18px 0 26px;
  background: var(--surface);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 5px;
  box-shadow: var(--shadow);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: sticky;
  /* Höhe der Kopfleiste wird von ui.js gemessen und hier eingesetzt.
     Vorher stand hier ein fester Wert – sobald die Kopfleiste umbrach,
     rutschte die Tab-Leiste beim Scrollen halb dahinter. */
  top: calc(var(--header-h, 80px) + 5px);
  z-index: 20;
}
/* Die Leiste ist nur so breit wie ihre Reiter. In einem mittigen Inhalt
   soll sie deshalb auch mittig stehen und nicht links kleben. Auf dem Handy
   wird sie ohnehin über die volle Breite gezogen (siehe Handy-Block). */
.tabbar { margin-inline: auto; }
.tabbar::-webkit-scrollbar { display: none; }
.tab-btn {
  background: none;
  border: none;
  padding: 11px 18px;
  min-height: var(--tap-min);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  border-radius: 10px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .15s, background .15s;
  touch-action: manipulation;
}
.tab-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Kurzform der Tab-Beschriftung – wird nur auf schmalen Displays eingeblendet */
.tab-short { display: none; }
.tab-full { display: inline; }
.tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.tab-btn:active { transform: scale(0.98); }
.tab-btn.active {
  color: var(--on-primary);
  background: var(--primary);
  box-shadow: none;
}

/* ---------- Ersatzteile-Katalog ---------- */
.hero { margin: 4px 0 22px; display: flex; align-items: center; gap: 14px; }
.hero h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.01em; color: var(--text); }
.hero-text { flex: 1; min-width: 0; }

.global-search { margin-bottom: 22px; }
.global-search input {
  width: 100%;
  padding: 18px 24px 18px 52px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 1.2rem;
  color: var(--text);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8E94' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 18px center;
  background-size: 22px 22px;
  box-shadow: var(--shadow);
}
.global-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft-strong); }

.sheet-grid {
  display: grid;
  /* 250px statt 210px: "Motorschutzschalter" und "Frequenzumformer" passen
     damit in einer Zeile in die Kachel, statt umbrechen zu müssen. Der
     Anlagenname ist die wichtigste Angabe der Kachel — die Spaltenbreite
     richtet sich nach ihm. */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.sheet-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  box-shadow: var(--shadow);
  touch-action: manipulation;
}
.sheet-card:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.sheet-card:active { transform: scale(0.98); box-shadow: var(--shadow); }

/* Kachel darf nie breiter werden als ihre Spalte. Ohne min-width:0 dehnt ein
   langes Wort wie "Motorschutzschalter" die Kachel auf und die ganze Seite
   lässt sich plötzlich seitlich schieben. */
.sheet-card, .machine-card { min-width: 0; }
.sheet-card h3, .machine-card h3,
.sheet-card .count, .machine-card .count { overflow-wrap: break-word; }
.sheet-card .tag {
  font-size: 0.72rem;
  color: var(--on-primary);
  background: var(--primary);
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 5px;
  margin-top: 12px;
  margin-bottom: 10px;
}
.sheet-card.matrix .tag { background: var(--purple-soft); color: var(--purple); }
.sheet-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; color: var(--text); }
.sheet-card .count { font-size: 0.88rem; color: var(--muted); }

.result-count { font-size: 0.88rem; color: var(--muted); margin: 4px 2px 14px; font-weight: 500; }

.section-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
  margin: 28px 0 12px;
  padding: 8px 0;
  padding-left: 12px;
  border-left: 4px solid var(--primary);
}
.section-title:first-child { margin-top: 0; }

.part-row {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  cursor: default;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.part-row:hover { border-color: var(--border-strong); }
.part-row:active { background: var(--surface-alt); }
.part-row.flash { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft-strong); }
.part-num {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 4px 10px;
  border-radius: 5px;
  white-space: nowrap;
}
/* Das Kennzeichen der Anlage in einer Teile-Trefferzeile: eigene Zeile
   unter der Bezeichnung, nur so breit wie sein Text. */
.part-meta .kf-machine {
  font-size: 0.85rem;
  padding: 3px 10px;
  align-self: center;
}
.part-name { font-weight: 600; font-size: 1.02rem; flex: 1; min-width: 180px; color: var(--text); }
.part-meta { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; margin-top: 4px; }
.badge {
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--surface-alt);
  color: var(--muted);
  border: 1px solid var(--border);
  font-weight: 500;
}
.badge.qty { color: var(--blue); border-color: rgba(96,165,250,0.3); background: var(--blue-soft); }
.badge.price { color: var(--green); border-color: rgba(74,222,128,0.3); background: var(--green-soft); }

.matrix-wrap { overflow-x: auto; border: 1.5px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
table.matrix { border-collapse: collapse; width: 100%; font-size: 0.9rem; background: var(--surface); }
table.matrix td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  white-space: nowrap;
  color: var(--text);
}
table.matrix tr:first-child td {
  background: var(--surface-alt);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
table.matrix td:first-child { position: sticky; left: 0; background: var(--surface); font-weight: 700; }
table.matrix tr:first-child td:first-child { background: var(--surface-alt); }
table.matrix tr:hover td { background: var(--surface-alt); }
mark { background: var(--primary); color: var(--on-primary); border-radius: 2px; padding: 0 2px; font-weight: 700; }

/* ---------- Icon-Badges (farbige Icon-Kacheln) ---------- */
.icon-badge {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-badge svg { width: 22px; height: 22px; }
.icon-badge.tone-ink   { background: rgba(255,255,255,0.08); color: var(--text); }
.icon-badge.tone-yellow{ background: var(--primary-soft); color: var(--primary); }
.icon-badge.tone-red   { background: var(--danger-soft); color: var(--danger); }
.icon-badge.tone-purple{ background: var(--purple-soft); color: var(--purple); }
.icon-badge.tone-blue  { background: var(--blue-soft); color: var(--blue); }
.icon-badge.sm { width: 32px; height: 32px; border-radius: 9px; }
.icon-badge.sm svg { width: 17px; height: 17px; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

thead th {
  text-align: left;
  padding: 13px 16px;
  background: var(--surface-alt);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1.5px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  color: var(--text);
}

tbody tr { cursor: pointer; transition: background .1s; touch-action: manipulation; }
tbody tr:hover { background: var(--surface-alt); }
tbody tr:active { background: var(--primary-soft); }
tbody tr:last-child td { border-bottom: none; }

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;   /* nicht "height": sonst springt die Seite beim Tippen */
  background: var(--bg);
  background-image: radial-gradient(900px 480px at 50% 0%, rgba(249, 199, 0, 0.06), transparent 60%);
}

.login-box {
  background: var(--surface-raised);
  padding: 40px 36px;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 320px;
  border-top: 3px solid var(--primary);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.login-box h1 { text-align: center; margin-bottom: 8px; color: var(--text); font-size: 1.4rem; }
.login-box input {
  padding: 13px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
}
.login-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft-strong); }
.login-box button.btn { padding: 13px; font-size: 1.02rem; }
.error { color: var(--danger); font-size: 0.92rem; margin: 0; font-weight: 500; }

@media (max-width: 640px) {
  body { padding: 16px 14px calc(50px + var(--safe-bottom)); }

  /* Kopfleiste scrollt auf dem Handy mit weg. Sie dauerhaft festzupinnen
     würde bei kleinen Displays ein Fünftel der Fläche kosten – wichtiger
     sind Suche und Tabs, die bleiben oben kleben. */
  header {
    position: static;
    margin: -16px -14px 0;
    padding: 12px 14px;
    min-height: 0;
    gap: 10px;
    flex-wrap: nowrap;
  }
  /* Auf dem Handy zählt jeder Millimeter: der Link bekommt hier weniger
     Polster, angetippt wird ohnehin die ganze Zeile. */
  .brand-row { min-width: 0; flex: 1; padding: 4px 2px; margin-left: -2px; }
  /* Der Name skaliert mit der Breite mit, statt abgeschnitten zu werden.
     Die Auslassungspunkte bleiben als Notnagel stehen. */
  h1 {
    font-size: clamp(0.8rem, 3.55vw, 1.1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html { font-size: 15.5px; }

  /* Knöpfe auf Symbole reduzieren – so passt alles in eine Zeile */
  .header-actions { gap: 7px; flex-shrink: 0; }
  .header-actions .btn {
    padding: 0;
    width: var(--tap-min);
    min-width: var(--tap-min);
    height: var(--tap-min);
  }
  .header-actions .btn-label { display: none; }
  .header-actions .btn svg { margin-right: 0 !important; width: 19px; height: 19px; }

  /* Das Einstellungen-Menü hängt technisch mit in .header-actions. Sein
     Knopf "Über die App" soll aber keine 44er-Kachel sein (der Text brach
     dort in drei Zeilen um), sondern über die ganze Menübreite gehen. */
  .header-actions .settings-panel .btn {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: var(--tap-min);
    padding: 0 16px;
  }
  .header-actions .settings-panel .btn-label { display: inline; }
  .header-actions .settings-panel .btn svg { margin-right: 7px !important; }
  #syncStatus { display: none; }

  /* Nur die Tab-Leiste bleibt oben kleben. Zwei übereinander klebende
     Leisten würden auf kleinen Displays zu viel Platz fressen – und die
     globale Suche blendet die Tabs ohnehin aus, solange sie Treffer zeigt. */
  .omni { margin-top: 14px; }
  .tabbar {
    top: 0;
    padding: 4px;
    margin: 10px -14px 16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    width: auto;
    /* Ohne das griff max-width: 100% aus der Grundregel — und 100 % sind hier
       die Seitenbreite MINUS der Ränder. Die Leiste war 28 px zu schmal,
       klebte links und stand rechts offen. Jetzt volle Handybreite. */
    max-width: none;
    background: var(--bg);
    box-shadow: none;
    scroll-snap-type: x proximity;
  }
  /* Symbol über Text und Kurzbeschriftung: so passen alle fünf Tabs
     nebeneinander, ohne dass man seitlich wischen muss. */
  .tab-btn {
    flex-direction: column;
    gap: 3px;
    padding: 7px 4px;
    font-size: 0.7rem;
    letter-spacing: -0.01em;
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    scroll-snap-align: start;
  }
  .tab-btn svg { width: 19px; height: 19px; }
  .tab-full { display: none; }
  .tab-short { display: inline; }
  /* Sieben Reiter statt sechs: die Beschriftung darf unter keinen Umständen
     über ihren Knopf hinauslaufen, sonst schieben sich die Reiter ineinander. */
  .tab-btn .tab-short {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero h2 { font-size: 1.25rem; }

  /* WICHTIG: mindestens 16px, sonst zoomt iOS beim Antippen in die Seite
     hinein und man muss jedes Mal wieder herauszoomen. */
  .global-search input,
  #errorsSearchBox,
  #partsSheetSearch,
  #searchBox,
  .toolbar input[type="search"],
  .toolbar input[type="text"],
  .omni input,
  .login-box input,
  #sortSelect {
    font-size: 16px;
  }
  .global-search input,
  #errorsSearchBox,
  #partsSheetSearch,
  #searchBox {
    padding: 13px 50px 13px 42px;
    background-position: 14px center;
    background-size: 18px 18px;
  }
  .omni input { padding: 14px 50px 14px 44px; background-position: 15px center; background-size: 19px 19px; }

  /* Suche und Sortierung nebeneinander statt untereinander */
  .toolbar { gap: 8px; margin: 14px 0; flex-wrap: nowrap; }
  .toolbar .search-wrap, #searchBox { min-width: 0; flex: 1; }
  #sortSelect { flex: 0 0 auto; width: auto; padding: 12px 8px; }

  /* Tabellen werden zu Karten – ohne Kopfzeile brauchen die Werte
     eine eigene Beschriftung, sonst stehen dort nur nackte Angaben.
     Die Beschriftungen setzt assets/admin.js aus der Kopfzeile. */
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  table { box-shadow: none; background: none; border-radius: 0; }
  tbody tr {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    padding: 12px 14px;
    box-shadow: var(--shadow);
    background: var(--surface);
  }
  tbody td { border: none; padding: 2px 0; font-size: 0.92rem; color: var(--muted); }
  tbody td:empty { display: none; }
  tbody td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
  }
  tbody td:first-child {
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--text);
    margin-bottom: 4px;
  }

  /* Das einspaltige Kachel-Raster für schmale Geräte steht am Dateiende,
     siehe "Kacheln auf dem Handy". */

  .hb-intro-grid { grid-template-columns: 1fr; }
  /* Auf dem Handy gehört die Bezeichnung in eine eigene Zeile unter die
     Teilenummer. "width: 100%" allein reichte dafür nicht: In einer
     Flex-Zeile sticht die Basisbreite (flex-basis: 0 aus "flex: 1") die
     Breitenangabe aus — die Bezeichnung teilte sich die Zeile deshalb weiter
     mit der Nummer und bekam nur rund 130 Pixel. In dieser Breite passte
     "Näherungsschalter" nicht mehr und wurde mitten im Wort umgebrochen. */
  .part-name { min-width: 0; flex: 1 1 100%; }
  .part-row, .error-row, .hb-function-row {
    padding: 12px 14px;
  }
  .error-desc, .hb-func-desc { font-size: 0.96rem; }

  /* Stern fest in der Ecke, der Text bekommt dafür rechts Platz in der
     Zeile selbst – sonst würde er doppelt eingerückt und unnötig schmal. */
  .part-row .fav-btn { position: absolute; top: 8px; right: 8px; }
  .part-row { position: relative; padding-right: 50px; }
  .error-row, .hb-function-row { padding-right: 50px; }
  .error-row .error-desc,
  .hb-function-row .hb-func-desc { padding-right: 0; }

  .omni-hit { padding: 12px 14px; }
  .omni-group { margin-bottom: 20px; }

  .breadcrumb { font-size: 0.86rem; }

  .login-box { width: 90vw; max-width: 340px; padding: 32px 24px; }

}

/* Schmalere Handys: sieben Reiter brauchen jeden Millimeter. Weniger
   Innenabstand und eine Spur kleinere Schrift, dann passt auch "Anlagen"
   und niemand muss seitlich wischen. */
@media (max-width: 413px) {
  .tabbar { padding: 4px 2px; }
  .tab-btn { padding: 7px 1px; font-size: 0.63rem; letter-spacing: -0.02em; gap: 2px; }
  .tab-btn svg { width: 18px; height: 18px; }
}

@media (max-width: 380px) {
  html { font-size: 14.5px; }
  /* Bleibt auch hier einspaltig — bei 380px Breite wäre eine zweite Spalte
     endgültig zu schmal für einen Anlagennamen. */
  .sheet-grid, .machine-grid { grid-template-columns: 1fr; }
  h1 { font-size: clamp(0.78rem, 3.6vw, 1rem); }
  .header-actions { gap: 5px; }
}

/* Schmale Geräte: Logo etwas kleiner, Name eine Spur schmaler – dann passen
   beide nebeneinander. Unter 331px weicht der Name, dort bleibt das Logo. */
@media (min-width: 331px) and (max-width: 374px) {
  .brand-mark, .brand-mark img { width: 30px; height: 30px; }
  .brand-row { gap: 8px; }
  h1 { font-size: clamp(0.58rem, 2.85vw, 0.95rem); }
}

/* Sehr schmale Geräte: Titel weicht, damit die Knöpfe nicht umbrechen */
@media (max-width: 330px) {
  h1 { display: none; }
}

/* Tablets und kleine Notebooks: seit dem siebten Reiter passen die vollen
   Beschriftungen ("Handbedienung", "Ersatzteile") hier nicht mehr
   nebeneinander. Deshalb dieselben Kurzformen wie auf dem Handy — lesbar
   groß, und niemand muss seitlich wischen. */
@media (min-width: 641px) and (max-width: 1100px) {
  .tabbar { width: 100%; }
  .tab-btn {
    padding: 10px 5px;
    /* Wächst mit der Breite mit, damit die sieben Reiter am unteren Ende
       dieses Bereichs nicht gekürzt werden müssen. */
    font-size: clamp(0.68rem, 1.15vw, 0.85rem);
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
  }
  .tab-btn svg { width: 17px; height: 17px; }
  .tab-full { display: none; }
  .tab-short { display: inline; }
  /* Notnagel: lieber gekürzt als über den Knopf hinaus. */
  .tab-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Fehlerlisten-Tab ---------- */
.machine-grid {
  display: grid;
  /* Gleiche Breite wie die Ersatzteil-Kacheln, aus demselben Grund. */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.machine-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  box-shadow: var(--shadow);
  touch-action: manipulation;
}
.machine-card:hover { border-color: var(--danger); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.machine-card:active { transform: scale(0.97); box-shadow: var(--shadow); }
.machine-card .icon-badge { margin-bottom: 12px; }
.machine-card h3 { font-size: 1.05rem; font-weight: 800; margin: 0; color: var(--text); }
.machine-card .count { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }

.error-row {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.error-code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-weight: 800;
  font-size: 1rem;
  color: var(--danger);
  background: var(--danger-soft);
  padding: 4px 10px;
  border-radius: 5px;
  display: inline-block;
  margin-bottom: 8px;
}
.error-desc { font-weight: 600; font-size: 1.02rem; margin-bottom: 6px; color: var(--text); }
.error-fix { font-size: 0.95rem; color: var(--text); }
.error-fix-label { font-weight: 700; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; display: block; margin-bottom: 3px; }

.empty-hint {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  background: var(--surface);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
}

#errorsVariantGrid {
  margin-top: 4px;
}
#errorsVariantGrid .machine-card:hover {
  border-color: var(--purple);
}

/* ---------- Handbedienung-Tab ---------- */
.hb-intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 40px;
}
.hb-intro-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.hb-intro-card h3 {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--text);
}
.hb-intro-card p {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 6px;
  line-height: 1.5;
}
.hb-intro-card p:last-child { margin-bottom: 0; }
.hb-intro-card.hb-hinweis {
  border-color: rgba(249, 199, 0, 0.35);
  background: var(--primary-soft);
  grid-column: 1 / -1;
}
.hb-intro-card.hb-hinweis p { color: var(--text); }

.hb-group-card .icon-badge { color: var(--purple); }

.hb-function-row {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}
.hb-func-num {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.hb-func-taste {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--purple);
  background: var(--purple-soft);
  padding: 4px 10px;
  border-radius: 5px;
  white-space: nowrap;
}
.hb-func-desc {
  font-weight: 600;
  font-size: 1rem;
  width: 100%;
  margin-top: 2px;
  color: var(--text);
}
.hb-func-remark {
  font-size: 0.88rem;
  color: var(--muted);
  width: 100%;
  line-height: 1.5;
}

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--surface);
  color: var(--muted);
  text-align: center;
  padding: 18px 20px;
  margin: 48px -32px calc(-60px - var(--safe-bottom));
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  footer.site-footer {
    margin: 36px -14px calc(-50px - var(--safe-bottom));
    padding: 14px 16px;
    font-size: 0.8rem;
  }
}

.login-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding-bottom: calc(18px + var(--safe-bottom));
  background: transparent;
  border-top: none;
}

/* ============================================================
   HELL-MODUS
   Wird über das Attribut data-theme am <html>-Element gesetzt
   (assets/theme-init.js liest die gespeicherte Auswahl, bevor die
   Seite gezeichnet wird – dadurch kein Aufblitzen des dunklen Designs).
   ============================================================ */
html[data-theme="light"] {
  color-scheme: light;

  --primary-soft: rgba(249, 199, 0, 0.20);
  --primary-soft-strong: rgba(249, 199, 0, 0.40);

  --bg: #F5F4F0;
  --surface: #FFFFFF;
  --surface-alt: #F0EFEA;
  --surface-raised: #FFFFFF;

  --border: rgba(20, 23, 26, 0.13);
  --border-strong: rgba(20, 23, 26, 0.30);

  --text: #16181C;
  --muted: #5C6066;

  --danger: #C81E1E;
  --danger-soft: rgba(200, 30, 30, 0.09);
  --purple: #6428D0;
  --purple-soft: rgba(100, 40, 208, 0.09);
  --blue: #1B4FD8;
  --blue-soft: rgba(27, 79, 216, 0.08);
  --green: #15803D;
  --green-soft: rgba(21, 128, 61, 0.10);

  --shadow: 0 1px 2px rgba(20, 23, 26, 0.07);
  --shadow-hover: 0 8px 24px rgba(20, 23, 26, 0.13);
}

html[data-theme="light"] body {
  background-image: radial-gradient(900px 480px at 100% -10%, rgba(249, 199, 0, 0.20), transparent 60%);
}
html[data-theme="light"] .login-page {
  background-image: radial-gradient(900px 480px at 50% 0%, rgba(249, 199, 0, 0.22), transparent 60%);
}
/* Lupen-Symbol in den Suchfeldern dunkler, damit es auf Weiß sichtbar bleibt */
html[data-theme="light"] .toolbar input[type="search"],
html[data-theme="light"] .toolbar input[type="text"],
html[data-theme="light"] #searchBox,
html[data-theme="light"] #errorsSearchBox,
html[data-theme="light"] #partsSheetSearch,
html[data-theme="light"] .global-search input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6066' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
html[data-theme="light"] .login-box { box-shadow: 0 16px 44px rgba(20, 23, 26, 0.18); }

/* ============================================================
   GRÖSSERE DARSTELLUNG (Werkstatt-/Handschuh-Modus)
   Höhere Spezifität als die Media-Queries weiter oben, gilt also
   auch auf dem Handy.
   ============================================================ */
html[data-size="large"]  { font-size: 20px; }
html[data-size="xlarge"] { font-size: 23px; }

html[data-size="large"]  .btn,
html[data-size="xlarge"] .btn { padding: 14px 22px; }
/* Ausnahme: die Symbol-Knöpfe in der Kopfleiste am Handy. Die sind 44 px
   breit — mit 22 px Innenabstand blieb für das Symbol kein Platz mehr, die
   Knöpfe waren leer. Im Werkstatt-Modus bekommen sie stattdessen ein
   größeres Symbol. */
@media (max-width: 640px) {
  html[data-size="large"]  .header-actions .btn,
  html[data-size="xlarge"] .header-actions .btn { padding: 0; width: var(--tap-min); min-width: var(--tap-min); height: var(--tap-min); }
  html[data-size="large"]  .header-actions .btn svg,
  html[data-size="xlarge"] .header-actions .btn svg { width: 22px; height: 22px; flex-shrink: 0; }
  html[data-size="large"]  .header-actions .settings-panel .btn,
  html[data-size="xlarge"] .header-actions .settings-panel .btn { width: 100%; height: auto; padding: 0 16px; }
}
html[data-size="large"]  .part-row,
html[data-size="large"]  .error-row,
html[data-size="large"]  .hb-function-row,
html[data-size="xlarge"] .part-row,
html[data-size="xlarge"] .error-row,
html[data-size="xlarge"] .hb-function-row { padding: 18px 20px; }
html[data-size="large"]  tbody td,
html[data-size="xlarge"] tbody td { padding: 16px; }

/* ============================================================
   EINSTELLUNGEN-MENÜ (Zahnrad in der Kopfleiste)
   ============================================================ */
.icon-btn {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--text);
  width: var(--tap-min);
  height: var(--tap-min);
  min-width: var(--tap-min);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  touch-action: manipulation;
  flex-shrink: 0;
}
.icon-btn:hover { border-color: var(--text); background: rgba(128,128,128,0.12); }
.icon-btn:active { transform: scale(0.96); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.settings-wrap { position: relative; }

.settings-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 16px;
  width: 260px;
  z-index: 60;
  display: none;
}
.settings-panel.open { display: block; }
.settings-panel h4 {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.settings-panel h4:not(:first-child) { margin-top: 20px; }

.seg {
  display: flex;
  gap: 4px;
  background: var(--surface-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.seg button {
  flex: 1;
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 700;
  padding: 9px 4px;
  min-height: 40px;
  border-radius: 7px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s, color .15s;
  white-space: nowrap;   /* "Sehr groß" soll nicht umbrechen */
}
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--primary); color: var(--on-primary); }

/* ============================================================
   KURZMELDUNG ("Teilenummer kopiert")
   ============================================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + var(--safe-bottom));
  transform: translateX(-50%) translateY(12px);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 22px;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Kopierbare Elemente sichtbar antippbar machen */
.copyable { cursor: pointer; position: relative; }
.copyable:hover { filter: brightness(1.12); }
.copyable:active { transform: scale(0.97); }

/* ============================================================
   MIKROFON-KNOPF IN SUCHFELDERN
   ============================================================ */
.search-wrap { position: relative; display: flex; flex: 1; min-width: 240px; }
.search-wrap > input { flex: 1; width: 100%; padding-right: 54px !important; }

.mic-btn {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}
.mic-btn svg { width: 21px; height: 21px; }
.mic-btn:hover { color: var(--text); background: rgba(128,128,128,0.14); }
.mic-btn.listening {
  color: var(--on-primary);
  background: var(--primary);
  animation: micPulse 1.1s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--primary-soft-strong); }
  50%      { box-shadow: 0 0 0 9px transparent; }
}

/* ============================================================
   STERN-KNOPF (Favoriten)
   ============================================================ */
.fav-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 7px;
  border-radius: 8px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  touch-action: manipulation;
  flex-shrink: 0;
}
.fav-btn svg { width: 19px; height: 19px; }
.fav-btn:hover { color: var(--text); background: rgba(128,128,128,0.14); }
.fav-btn.on { color: var(--primary); }
.fav-btn.on svg { fill: var(--primary); }

.error-row, .hb-function-row { position: relative; }
.error-row .fav-btn,
.hb-function-row .fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  margin-left: 0;
}
.error-row .error-desc,
.hb-function-row .hb-func-desc { padding-right: 42px; }

/* ============================================================
   GLOBALE SUCHE (ein Feld für alle Bereiche)
   ============================================================ */
.omni {
  margin: 18px 0 0;
}
.omni .search-wrap { width: 100%; }
.omni input {
  width: 100%;
  padding: 17px 54px 17px 52px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 1.12rem;
  color: var(--text);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8E94' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 18px center;
  background-size: 21px 21px;
  box-shadow: var(--shadow);
}
html[data-theme="light"] .omni input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6066' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.omni input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft-strong);
}

#omniResults { margin-top: 18px; }
#omniResults:empty { display: none; }

.omni-group { margin-bottom: 26px; }
.omni-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.omni-group-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
}
.omni-group-head .count {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}

.omni-hit {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  touch-action: manipulation;
}
.omni-hit:hover { border-color: var(--primary); }
.omni-hit:active { background: var(--surface-alt); }
.omni-hit .omni-title { font-weight: 600; font-size: 1rem; flex: 1; min-width: 150px; color: var(--text); }
.omni-hit .omni-sub { font-size: 0.85rem; color: var(--muted); width: 100%; }

.omni-more {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 4px 2px 0;
}

/* ============================================================
   MERKLISTE (Favoriten & Verlauf)
   ============================================================ */
.fav-section { margin-bottom: 32px; }
.fav-section > .section-title { margin-top: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  touch-action: manipulation;
  transition: border-color .15s;
}
.chip:hover { border-color: var(--primary); }
.chip:active { background: var(--surface-alt); }
.chip svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); }

/* ============================================================
   OFFLINE-HINWEIS
   ============================================================ */
.offline-bar {
  display: none;
  background: var(--primary-soft);
  border: 1.5px solid var(--primary);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  margin: 16px 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  align-items: center;
  gap: 10px;
}
.offline-bar.show { display: flex; }
.offline-bar svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 640px) {
  /* Das Menü hing am Zahnrad — und weil rechts davon noch zwei Knöpfe
     stehen, ragte es links aus dem Bild hinaus. Auf dem Handy hängt es
     deshalb am Bildrand statt am Knopf.
     Diese Regel muss NACH der Grundregel stehen, sonst gewinnt die. */
  .settings-panel {
    position: fixed;
    top: calc(var(--header-h, 80px) + 6px);
    right: 12px;
    left: auto;
    width: min(300px, calc(100vw - 24px));
    max-height: calc(100vh - var(--header-h, 80px) - 28px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* font-size bleibt bei 16px (siehe Handy-Block weiter oben) – alles
     darunter lässt iOS beim Antippen in die Seite hineinzoomen. */
  .omni input { padding: 14px 50px 14px 44px; background-position: 15px center; }
  .toast { font-size: 0.9rem; padding: 12px 18px; }
}

/* ============================================================
   TOUCH-GERÄTE: Hover-Zustände abschalten
   Auf dem Handy gibt es keinen Mauszeiger. Trotzdem merkt sich der
   Browser nach einem Antippen den ":hover"-Zustand und lässt Kacheln
   oder Treffer dauerhaft hervorgehoben stehen, bis man woanders
   hintippt. Das wirkt wie ein Anzeigefehler – deshalb hier alle
   Hover-Effekte für Geräte ohne echten Mauszeiger zurücknehmen.
   Die :active-Effekte (Druckfeedback beim Antippen) bleiben.
   ============================================================ */
@media (hover: none) {
  .btn:hover { background: var(--primary); }
  .btn.secondary:hover { background: transparent; border-color: var(--border-strong); }

  .icon-btn:hover { background: transparent; border-color: var(--border-strong); }
  .icon-btn.active:hover { background: var(--primary); border-color: var(--primary); }

  .tab-btn:hover { color: var(--muted); background: none; }
  .tab-btn.active:hover { color: var(--on-primary); background: var(--primary); }

  .sheet-card:hover,
  .machine-card:hover,
  #errorsVariantGrid .machine-card:hover {
    border-color: var(--border);
    box-shadow: var(--shadow);
    transform: none;
  }

  .part-row:hover { border-color: var(--border); }
  .omni-hit:hover { border-color: var(--border); }
  .chip:hover { border-color: var(--border); }
  tbody tr:hover { background: none; }
  table.matrix tr:hover td { background: var(--surface); }

  .fav-btn:hover { color: var(--muted); background: none; }
  .fav-btn.on:hover { color: var(--primary); }
  .mic-btn:hover { color: var(--muted); background: none; }
  .mic-btn.listening:hover { color: var(--on-primary); background: var(--primary); }

  .breadcrumb-item:hover { color: var(--text); text-decoration: none; }
  .copyable:hover { filter: none; }
  .seg button:hover { color: var(--muted); }
  .seg button.active:hover { color: var(--on-primary); }
}

/* ============================================================
   INFO-FENSTER "ÜBER DIE APP"
   Erreichbar über das Zahnrad und über die Versionsnummer in der Fußzeile.
   ============================================================ */

/* Versionsnummer in der Fußzeile: sieht aus wie Text, ist aber ein Knopf */
.footer-link {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 4px 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
  touch-action: manipulation;
}
.footer-link:hover { color: var(--primary); }

/* Knopf am Ende des Einstellungen-Menüs */
.panel-btn {
  width: 100%;
  margin-top: 20px;
  font-size: 0.9rem;
}

.about-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overscroll-behavior: contain;
}

.about-box {
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 480px;
  max-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.about-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.about-title { flex: 1; min-width: 0; }
.about-title h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
}
.about-version {
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}
.about-close { font-size: 1.05rem; line-height: 1; }

.about-body {
  padding: 6px 18px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.about-intro {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 14px 0 6px;
}
.about-body h4 {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 22px 0 8px;
}

.about-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.about-row:last-child { border-bottom: none; }
.about-label { color: var(--muted); flex-shrink: 0; }
.about-value {
  color: var(--text);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}
.about-value.tone-ok   { color: var(--green); }
.about-value.tone-warn { color: var(--primary); }

/* --- Was ist neu in dieser Version --- */
.about-note-head {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin: 10px 0 4px;
  line-height: 1.35;
}
.about-note-date {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}
.about-notes {
  margin: 0 0 4px;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}
.about-notes li { margin: 4px 0; }
.about-notes li::marker { color: var(--primary); }

.about-frueher {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
.about-frueher > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 0;
  list-style-position: inside;
}
.about-frueher > summary:hover { color: var(--text); }
.about-frueher > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.about-frueher .about-note-head { font-size: 0.9rem; }

/* Verweis auf den vollständigen Verlauf */
.about-verlauf-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  background: var(--surface-alt, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.about-verlauf-link:hover { border-color: var(--primary); }
.about-verlauf-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.about-verlauf-zahl {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.about-zurueck { margin: 4px 0 10px; }
.about-verlauf-fuss {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}

/* Kleiner Punkt an Versionsnummer und Zahnrad, solange die Neuerungen
   dieser Version noch nicht geöffnet wurden. */
.hat-neues { position: relative; }
.hat-neues::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  pointer-events: none;
}
#settingsBtn.hat-neues::after { top: 6px; right: 6px; }

@media (max-width: 640px) {
  .about-overlay { padding: 0; align-items: flex-end; }
  .about-box {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: none;
    padding-bottom: var(--safe-bottom);
  }
  .about-row { font-size: 0.88rem; }
}

/* ============================================================
   STARTBILDSCHIRM
   ============================================================ */

/* ---- Kennzahl-Kacheln ---- */
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 14px;
  margin: 4px 0 26px;
}

.stat-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s, transform .12s;
  touch-action: manipulation;
  position: relative;
  overflow: hidden;
}
/* Dezenter Schimmer in der Ecke – gibt den Kacheln Tiefe */
.stat-tile::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, var(--primary-soft), transparent 70%);
  pointer-events: none;
}
.stat-tile:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.stat-tile:active { transform: scale(0.985); }
.stat-tile .icon-badge { margin-bottom: 12px; }

.stat-num {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 0.98rem; font-weight: 700; color: var(--text); margin-top: 3px; }
.stat-sub   { font-size: 0.84rem; color: var(--muted); }

.dash-section { margin-top: 28px; }

/* ============================================================
   FEHLERCODE-ZIFFERNBLOCK
   ============================================================ */
.numpad-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.numpad-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.numpad-head h3 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--text); }
.numpad-head p { margin: 2px 0 0; font-size: 0.86rem; }

/* Anzeige des eingetippten Codes */
.np-display {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  text-align: center;
  margin-bottom: 12px;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.04em;
}
.np-placeholder {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 2rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.np-caret { opacity: 0.45; margin-left: 4px; }

/* Auswahl des Kennbuchstabens */
.np-prefix {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.np-prefix button {
  flex: 1;
  background: var(--surface-alt);
  border: 1.5px solid var(--border);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 10px 6px;
  min-height: 42px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s, color .15s, border-color .15s;
}
.np-prefix button:hover { color: var(--text); }
.np-prefix button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

/* Tastenfeld */
.np-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.np-key {
  background: var(--surface-alt);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  /* Bewusst groß: soll auch mit Arbeitshandschuhen sicher zu treffen sein */
  min-height: 62px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  touch-action: manipulation;
  transition: background .12s, transform .06s, border-color .12s;
}
.np-key:hover { border-color: var(--border-strong); background: var(--surface); }
.np-key:active { transform: scale(0.95); background: var(--primary-soft); border-color: var(--primary); }
.np-key.np-fn { font-size: 1.15rem; color: var(--muted); }

/* Treffer unter dem Tastenfeld */
.np-results { margin-top: 16px; }
.np-count { font-size: 0.84rem; color: var(--muted); font-weight: 600; margin-bottom: 9px; }

.np-hit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s;
  touch-action: manipulation;
}
.np-hit:hover { border-color: var(--primary); border-left-color: var(--primary); }
.np-hit .error-code { margin-bottom: 0; flex-shrink: 0; }
.np-hit-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-hit-desc { font-weight: 600; font-size: 0.96rem; color: var(--text); }
.np-hit-machine { font-size: 0.83rem; color: var(--muted); }

.np-empty {
  background: var(--bg);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}

@media (max-width: 640px) {
  .dash-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-tile { padding: 14px 14px 13px; }
  .stat-num { font-size: 1.75rem; }
  .stat-label { font-size: 0.92rem; }
  .stat-sub { font-size: 0.78rem; }

  .numpad-card { padding: 16px 14px; }
  .np-key { min-height: 58px; font-size: 1.4rem; }
  .np-code, .np-placeholder { font-size: 1.75rem; }
}

@media (hover: none) {
  .stat-tile:hover { border-color: var(--border); box-shadow: var(--shadow); transform: none; }
  .np-key:hover { border-color: var(--border); background: var(--surface-alt); }
  .np-hit:hover { border-color: var(--border); border-left-color: var(--danger); }
  .np-prefix button:hover { color: var(--muted); }
  .np-prefix button.active:hover { color: var(--on-primary); }
}

/* ============================================================
   Anlagen-Kennzeichen in Trefferlisten

   Fehlercodes verschiedener Anlagen stehen untereinander und sehen sich
   oft zum Verwechseln ähnlich — F035 gibt es bei SB und bei SB-OB mit
   praktisch gleichem Text. Eine feste Farbe je Anlage macht den
   Unterschied auf einen Blick sichtbar.

   Die Farben sind für Dunkel- und Hell-Modus getrennt gesetzt, damit der
   Text in beiden Fällen genug Kontrast hat. Die Farbe ist immer nur eine
   Zugabe: Der Name steht daneben, damit es auch ohne Farbwahrnehmung
   eindeutig bleibt.
   ============================================================ */

.kf-machine {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  padding: 3px 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  overflow-wrap: anywhere;
  /* Standard, falls einmal keine Farbklasse gesetzt ist */
  color: var(--muted);
  background: var(--surface-alt);
}

.kf-machine.tone-blue   { color: #60A5FA; background: rgba(96,165,250,0.14);  border-color: rgba(96,165,250,0.30); }
.kf-machine.tone-green  { color: #4ADE80; background: rgba(74,222,128,0.13);  border-color: rgba(74,222,128,0.30); }
.kf-machine.tone-purple { color: #A78BFA; background: rgba(167,139,250,0.15); border-color: rgba(167,139,250,0.32); }
.kf-machine.tone-orange { color: #FB923C; background: rgba(251,146,60,0.14);  border-color: rgba(251,146,60,0.32); }
.kf-machine.tone-pink   { color: #F472B6; background: rgba(244,114,182,0.14); border-color: rgba(244,114,182,0.32); }
.kf-machine.tone-cyan   { color: #22D3EE; background: rgba(34,211,238,0.13);  border-color: rgba(34,211,238,0.30); }
.kf-machine.tone-red    { color: #F87171; background: rgba(248,113,113,0.14); border-color: rgba(248,113,113,0.32); }
.kf-machine.tone-yellow { color: #F9C700; background: rgba(249,199,0,0.15);   border-color: rgba(249,199,0,0.34); }
.kf-machine.tone-grey   { color: var(--muted); background: var(--surface-alt); border-color: var(--border); }

/* Hell-Modus: kräftigere, dunklere Töne — die hellen von oben wären auf
   weißem Grund nicht mehr lesbar. */
html[data-theme="light"] .kf-machine.tone-blue   { color: #1B4FD8; background: rgba(27,79,216,0.09);   border-color: rgba(27,79,216,0.22); }
html[data-theme="light"] .kf-machine.tone-green  { color: #15803D; background: rgba(21,128,61,0.10);   border-color: rgba(21,128,61,0.22); }
html[data-theme="light"] .kf-machine.tone-purple { color: #6428D0; background: rgba(100,40,208,0.09);  border-color: rgba(100,40,208,0.22); }
html[data-theme="light"] .kf-machine.tone-orange { color: #B45309; background: rgba(180,83,9,0.10);    border-color: rgba(180,83,9,0.24); }
html[data-theme="light"] .kf-machine.tone-pink   { color: #BE185D; background: rgba(190,24,93,0.09);   border-color: rgba(190,24,93,0.22); }
html[data-theme="light"] .kf-machine.tone-cyan   { color: #0E7490; background: rgba(14,116,144,0.10);  border-color: rgba(14,116,144,0.24); }
html[data-theme="light"] .kf-machine.tone-red    { color: #C81E1E; background: rgba(200,30,30,0.09);   border-color: rgba(200,30,30,0.22); }
html[data-theme="light"] .kf-machine.tone-yellow { color: #806400; background: rgba(249,199,0,0.20);   border-color: rgba(224,179,0,0.40); }

/* In der globalen Suche steht das Kennzeichen in einer eigenen Zeile */
.omni-hit .kf-machine { width: auto; margin-top: 2px; }

/* Größere Schriftgrade der App mitnehmen */
html[data-size="large"]  .kf-machine { font-size: 0.97rem; }
html[data-size="xlarge"] .kf-machine { font-size: 1.04rem; }

/* ============================================================
   Sichtbarer Zurück-Knopf

   Die Brotkrümel-Zeile allein reicht als Rückweg nicht: Der Text ist klein
   und am Handy mit Handschuhen kaum zu treffen. Dieser Knopf steht in
   jeder geöffneten Ansicht vor den Brotkrümeln und hält die 44 Pixel
   Mindestgröße ein, die für Touch-Bedienung nötig sind.
   ============================================================ */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 10px;
  padding: 9px 15px 9px 12px;
  min-height: var(--tap-min);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .15s, background .15s;
}

.back-btn svg { width: 19px; height: 19px; flex: none; }

.back-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.back-btn:active { transform: scale(0.97); }
.back-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Auf Touch-Geräten den Hover-Zustand nicht kleben lassen */
@media (hover: none) {
  .back-btn:hover {
    border-color: var(--border-strong);
    color: var(--text);
    background: var(--surface);
  }
}

/* Am Handy volle Breite: das größte erreichbare Ziel */
@media (max-width: 560px) {
  .back-btn {
    width: 100%;
    justify-content: center;
    margin-right: 0;
    margin-bottom: 10px;
    font-size: 1rem;
  }
}

html[data-size="large"]  .back-btn { font-size: 1.02rem; }
html[data-size="xlarge"] .back-btn { font-size: 1.1rem; }

/* ============================================================
   Begrüßung auf dem Startbildschirm
   ============================================================ */

.dash-greeting {
  margin: 2px 0 18px 2px;
}

.dash-greeting-hello {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--text);
  overflow-wrap: anywhere;
}

.dash-greeting-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
}

@media (max-width: 560px) {
  .dash-greeting { margin-bottom: 14px; }
  .dash-greeting-hello { font-size: 1.3rem; }
  .dash-greeting-sub { font-size: 0.87rem; }
}

html[data-size="large"]  .dash-greeting-hello { font-size: 1.62rem; }
html[data-size="xlarge"] .dash-greeting-hello { font-size: 1.75rem; }

/* ============================================================
   Unterlagen für den Offline-Betrieb
   ============================================================ */

/* Knopf in der Größenspalte der Dateiliste */
.size-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}
.size-value { color: var(--muted); }

.doc-offline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  flex: none;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  touch-action: manipulation;
  transition: color .15s, border-color .15s, background .15s;
}
.doc-offline svg { width: 19px; height: 19px; }
.doc-offline:hover { color: var(--primary); border-color: var(--primary); }
.doc-offline:active { transform: scale(0.94); }
.doc-offline:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Gespeichert: deutlich grün, damit man es in einer langen Liste sofort sieht */
.doc-offline.aktiv {
  color: var(--green);
  border-color: transparent;
  background: var(--green-soft);
}
.doc-offline.laedt { opacity: 0.5; cursor: progress; }
.doc-offline:disabled { cursor: progress; }

@media (hover: none) {
  .doc-offline:hover { color: var(--muted); border-color: var(--border); }
  .doc-offline.aktiv:hover { color: var(--green); border-color: transparent; }
}

/* Leiste über der Dateiliste */
.offline-docs {
  margin: 0 0 14px;
  padding: 12px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

.offline-docs-hint {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
}
.offline-docs-hint svg { width: 17px; height: 17px; flex: none; }

.offline-docs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.offline-docs-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  color: var(--text);
}
.offline-docs-title svg { width: 18px; height: 18px; flex: none; color: var(--green); }

.offline-docs-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.offline-docs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.offline-docs-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .offline-docs-row { flex-wrap: wrap; }
  .offline-docs-name { flex-basis: 100%; white-space: normal; }
}

/* ============================================================
   Reiter „Anlagen"
   ============================================================ */

.machine-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 9px;
  cursor: pointer;
  min-height: var(--tap-min);
  touch-action: manipulation;
  transition: border-color .15s;
}
.machine-row:hover { border-color: var(--primary); border-left-color: var(--primary); }
.machine-row:active { transform: scale(0.995); }

.machine-row-main { font-size: 1rem; min-width: 0; overflow-wrap: anywhere; }
.machine-row-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* Hinweis auf noch nicht gesendete Einsätze */
.draft-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--primary-soft);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 11px 15px;
  margin-bottom: 14px;
  font-weight: 600;
}
.draft-bar svg { width: 18px; height: 18px; flex: none; }

/* Kopfzeile einer geöffneten Anlage */
.machine-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.machine-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.machine-actions .btn svg { width: 18px; height: 18px; }

.machine-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.machine-fact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
}
.machine-fact-label { display: block; font-size: 0.78rem; color: var(--muted);
                      text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.machine-fact-value { display: block; font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; }

.machine-note {
  margin-top: 12px; padding: 13px 16px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  line-height: 1.55;
}

/* Kleine Kennzeichen (Art des Einsatzes, "noch nicht gesendet" …) */
.pill {
  display: inline-block;
  font-size: 0.73rem; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  background: var(--surface-alt); color: var(--muted);
  border: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}
.pill.ok   { background: var(--green-soft);   color: var(--green);        border-color: transparent; }
.pill.warn { background: var(--primary-soft); color: var(--primary-dark); border-color: transparent; }
.pill.err  { background: var(--danger-soft);  color: var(--danger);       border-color: transparent; }
.pill.accent { background: var(--primary); color: var(--on-primary); border-color: transparent; }
/* "neu" ist nur eine Randnotiz und soll "wichtig" nicht die Schau stehlen. */
.pill.neu { background: transparent; color: var(--blue); border-color: var(--blue); }

/* Ein erfasster Einsatz in der Liste unter der Anlage */
.visit-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
}
/* Noch nicht gesendet: fällt bewusst auf, damit man es nicht übersieht. */
.visit-card.entwurf { border-left-color: var(--primary); background: var(--primary-soft); }

.visit-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.visit-head .error-code { margin-bottom: 0; font-size: 0.9rem; }
.visit-date { font-weight: 700; }

.visit-text { margin-bottom: 6px; line-height: 1.55; }
.visit-text strong { color: var(--muted); font-weight: 600; }

.visit-parts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.visit-part {
  font-size: 0.85rem;
  padding: 3px 9px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.visit-by { font-size: 0.84rem; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); }

/* Einsatz-Formular */
.visit-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 22px;
}
.visit-form label { display: block; font-size: 0.87rem; font-weight: 600; margin-bottom: 14px; }
.visit-form input[type="text"],
.visit-form input[type="number"],
.visit-form input[type="datetime-local"],
.visit-form select,
.visit-form textarea {
  display: block; width: 100%; margin-top: 6px;
  padding: 11px 13px;
  font: inherit; font-size: 16px;          /* verhindert Hineinzoomen auf iOS */
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  min-height: var(--tap-min);
}
.visit-form textarea { min-height: 0; resize: vertical; line-height: 1.5; }
.visit-form input:focus, .visit-form select:focus, .visit-form textarea:focus {
  outline: 2px solid var(--primary); outline-offset: 1px;
}

.visit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.visit-sub { font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
             letter-spacing: 0.06em; color: var(--muted); margin: 18px 0 10px; }

.visit-part-row { display: grid; grid-template-columns: 1fr 1.6fr 70px auto; gap: 8px; margin-bottom: 8px; }
.visit-part-row input { margin-top: 0; }

.visit-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

@media (max-width: 560px) {
  .visit-grid { grid-template-columns: 1fr; }

  /* Teilenummer, Anzahl und Entfernen nebeneinander, die Bezeichnung
     darunter über die ganze Breite — sonst wird jedes Feld zu schmal. */
  .visit-part-row { grid-template-columns: 1fr 72px 44px; }
  .visit-part-row input[data-part="teilenummer"] { grid-column: 1; grid-row: 1; }
  .visit-part-row input[data-part="anzahl"]      { grid-column: 2; grid-row: 1; }
  .visit-part-row [data-part-remove]             { grid-column: 3; grid-row: 1; padding: 0; }
  .visit-part-row input[data-part="bezeichnung"] { grid-column: 1 / -1; grid-row: 2; }
  .machine-actions .btn { flex: 1 1 100%; justify-content: center; }
}


/* ============================================================
   TECHNISCHE NEUIGKEITEN

   Meldungen wie "neue Software für die CB3". Die betroffene Anlage steht
   groß und farbig über der Meldung — dieselben Farben wie in den
   Fehlerlisten, damit CB3 überall gleich aussieht.
   ============================================================ */

/* Hinweis ganz oben, wenn es Ungelesenes gibt. Der Ziffernblock soll seinen
   Platz behalten, deshalb steht die Meldung selbst weiter unten — dieser
   schmale Streifen führt hin. */
.news-hinweis {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  margin: 0 0 18px;
  padding: 12px 16px;
  font: inherit; font-size: 0.95rem; font-weight: 700;
  text-align: left;
  color: var(--on-primary);
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  min-height: var(--tap-min);
  cursor: pointer;
}
.news-hinweis svg { width: 19px; height: 19px; flex-shrink: 0; }
.news-hinweis-pfeil {
  margin-left: auto; font-size: 0.85rem; font-weight: 700;
  text-decoration: underline; white-space: nowrap;
}
.news-hinweis:active { transform: scale(0.99); }

/* Die Meldungen stehen als mittige Spalte. Die Obergrenze hält Textzeilen
   lesbar und Fotos in vernünftiger Größe, ohne dass die Spalte am Rechner
   schmal wirkt. */
.news-bereich { max-width: 1100px; margin-inline: auto; }

.news-h { display: flex; align-items: center; gap: 9px; }
.news-h svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Dasselbe Suchfeld wie im Rest der App — groß, mit Lupe und Schatten. */
.news-suche { margin-bottom: 14px; }
.news-suche input { font-size: 1.05rem; padding: 15px 20px 15px 50px; background-size: 20px 20px; }

/* Auswahl je Anlage */
.news-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.news-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  font: inherit; font-size: 0.87rem; font-weight: 700;
  color: var(--muted);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  min-height: 38px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.news-chip:hover { color: var(--text); border-color: var(--border-strong); }
.news-chip-zahl {
  font-size: 0.78rem; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: var(--surface-alt); color: var(--muted);
}
/* Der aktive Knopf trägt die Farbe seiner Anlage – so ist auch ohne Text
   klar, wonach gerade gefiltert wird. */
.news-chip.active {
  color: var(--text);
  border-color: currentColor;
  background: var(--surface-alt);
}
.news-chip.active.tone-blue   { color: #60A5FA; }
.news-chip.active.tone-green  { color: #4ADE80; }
.news-chip.active.tone-purple { color: #A78BFA; }
.news-chip.active.tone-orange { color: #FB923C; }
.news-chip.active.tone-pink   { color: #F472B6; }
.news-chip.active.tone-cyan   { color: #22D3EE; }
.news-chip.active.tone-red    { color: #F87171; }
.news-chip.active.tone-yellow { color: #F9C700; }

/* Eine Meldung */
.news-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.news-karte.wichtig { border-left: 3px solid var(--primary); }
.news-karte.neu     { border-color: var(--primary); }

.news-marken { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 10px; }
/* In der Meldung darf das Kennzeichen der Anlage ruhig etwas größer sein –
   es ist die wichtigste Angabe der ganzen Karte. */
.news-marken .kf-machine { font-size: 0.95rem; padding: 4px 12px; }

.news-titel { font-size: 1.12rem; font-weight: 800; margin: 0 0 8px; line-height: 1.3; }
.news-text  { line-height: 1.6; overflow-wrap: anywhere; }
.news-text a { color: var(--blue); }

/* Bilder werden direkt gezeigt — wie in einem Beitrag. */
.news-bilder { margin-top: 14px; display: grid; gap: 8px; }
.news-bilder.viele { grid-template-columns: 1fr 1fr; }
.news-bild {
  display: block; overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  line-height: 0;
}

/* Ein einzelnes Bild behält sein Seitenverhältnis.
   Vorher stand hier eine feste Höhe mit "cover" — auf einem breiten
   Monitor wurde daraus ein Streifen, bei dem oben und unten mehr als die
   Hälfte des Fotos abgeschnitten war. */
.news-bild img {
  width: 100%; height: auto; display: block;
  /* Notbremse für extreme Hochformate: verkleinern statt beschneiden. */
  max-height: 70vh;
  object-fit: contain;
}

/* Mehrere Bilder als gleichmäßige Kacheln — hier ist ein Zuschnitt richtig,
   sonst stünden unterschiedlich hohe Bilder nebeneinander. Ein Tipp
   öffnet das Bild ohnehin in voller Größe. */
.news-bilder.viele .news-bild img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.news-bild:hover { border-color: var(--border-strong); }

/* Alles andere als Zeile mit Symbol, Name und Art. */
.news-dateien { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.news-datei {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  color: var(--text); text-decoration: none;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: var(--tap-min);
}
.news-datei:hover { border-color: var(--border-strong); }

.news-datei-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
}
.news-datei-icon svg { width: 19px; height: 19px; }
/* Je Art eine eigene Farbe — man sieht am Symbol, was einen erwartet. */
.news-datei-icon.art-pdf     { color: var(--danger); background: var(--danger-soft);  border-color: transparent; }
.news-datei-icon.art-archiv  { color: var(--primary-dark); background: var(--primary-soft); border-color: transparent; }
.news-datei-icon.art-tabelle { color: var(--green); background: var(--green-soft); border-color: transparent; }
.news-datei-icon.art-text    { color: var(--blue);  background: var(--blue-soft);  border-color: transparent; }

.news-datei-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.news-datei-name { font-size: 0.94rem; font-weight: 700; overflow-wrap: anywhere; }
.news-datei-art  { font-size: 0.8rem; font-weight: 500; }
.news-datei-pfeil { margin-left: auto; flex: none; color: var(--muted); display: grid; place-items: center; }
.news-datei-pfeil svg { width: 18px; height: 18px; }

.news-fuss { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.85rem; }

.news-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.news-knoepfe .btn { flex: 1 1 200px; justify-content: center; }

@media (max-width: 560px) {
  .news-karte { padding: 14px 15px; }
  .news-titel { font-size: 1.05rem; }
  .news-bild img { max-height: 300px; }
  .news-bilder.viele .news-bild img { height: 120px; }
}

/* ============================================================
   Ersatzteil-Pakete

   Fertige Zusammenstellungen für einen Reparaturfall. Sie stehen
   über der Teileliste einer Anlage und werden in der Suche
   vorgeschlagen. Bewusst anders eingefärbt als die Teilezeilen —
   ein Paket ist kein Teil, das soll man sofort sehen.
   ============================================================ */

.kit-block { margin-bottom: 22px; }
.kit-block-titel { border-left-color: var(--blue, #3B82F6); }

.kit-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--blue, #3B82F6);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  touch-action: manipulation;
}
.kit-card:hover { border-color: var(--blue, #3B82F6); box-shadow: var(--shadow-hover); }
.kit-card:active { transform: scale(0.995); }
.kit-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.kit-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kit-card-name { font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.kit-card-sub  { font-size: 0.86rem; color: var(--muted); }

/* In der globalen Suche steht der Vorschlag ganz oben. */
.kit-vorschlag { margin-bottom: 26px; }

/* Kopf der geöffneten Paketansicht */
.kit-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--blue, #3B82F6);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.kit-kopf-text { min-width: 0; }
.kit-kopf-text h3 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; overflow-wrap: anywhere; }
.kit-kopf-text p  { margin: 0; font-size: 0.88rem; }
.kit-kopf .btn { flex-shrink: 0; }

@media (max-width: 520px) {
  .kit-kopf { flex-direction: column; align-items: stretch; }
  .kit-kopf .btn { width: 100%; justify-content: center; }
}

/* Zusatzangaben an einer Datei aus dem Software-Ordner: Anlage und Bemerkung. */
.datei-zusatz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 5px;
}
.datei-bemerkung { font-size: 0.84rem; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.datei-kunde { font-size: 0.86rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }

/* ============================================================
   Mehrfeld-Suche in den Kundensicherungen

   Vier Felder nebeneinander, auf dem Handy untereinander. Sie
   steht zwischen Brotkrümeln und Dateiliste und ist nur in
   diesem einen Ordner zu sehen.
   ============================================================ */

.sw-suche {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.sw-suche[hidden] { display: none; }

.sw-suche-felder {
  display: grid;
  gap: 12px 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .sw-suche-felder { grid-template-columns: 1.4fr 0.7fr 1fr 1fr; }
}

.sw-suche-felder label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.sw-suche-felder input,
.sw-suche-felder select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;              /* verhindert das Hineinzoomen auf iOS */
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.sw-suche-felder input:focus,
.sw-suche-felder select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.sw-suche-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.sw-suche-fuss .muted { font-size: 0.88rem; }

/* ================================================================
   Räderwäsche — Unterordner mit Foto

   Vier Kacheln zur Auswahl, bevor die Teileliste kommt. Das Foto ist der
   eigentliche Zweck: die Bauarten lassen sich am Namen kaum auseinander-
   halten, auf dem Bild sofort.
   ================================================================ */

.rw-grid {
  display: grid;
  /* 180px als Mindestbreite ist mit Bedacht gewählt: auf dem Handy stehen
     dadurch zwei Kacheln nebeneinander statt untereinander. Bei einer Spalte
     füllt jede Kachel fast den ganzen Bildschirm, und man scrollt für vier
     Ordner dreimal — genau das, was man beim schnellen Nachschlagen nicht
     will. Am PC ergeben sich vier Spalten nebeneinander. */
  /* auto-FIT statt auto-fill: leere Spalten fallen weg, die vier Kacheln
     verteilen sich also auf die volle Breite statt schmal links zu kleben. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.rw-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 2px;
  min-width: 0;
  padding: 0 0 14px;
  overflow: hidden;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.rw-card:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.rw-card:active { transform: scale(0.98); box-shadow: var(--shadow); }
.rw-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Bildfläche mit festem Seitenverhältnis: die Kacheln stehen dadurch in einer
   sauberen Reihe, egal wie hoch oder breit das hochgeladene Foto ist. */
.rw-bild {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--surface-2, rgba(127,127,127,.10));
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.rw-bild img {
  width: 100%;
  height: 100%;
  /* "contain" statt "cover": Lieber schmale Ränder als ein angeschnittenes
     Gerät. Wer die Bauart erkennen will, braucht sie ganz. */
  object-fit: contain;
  display: block;
}

/* Ersatzsymbol, solange noch kein Foto hochgeladen wurde. Standardmäßig
   versteckt — sichtbar wird es erst, wenn das Bild nicht geladen werden
   konnte (Klasse "leer", gesetzt von assets/parts.js). */
.rw-bild-ersatz {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  opacity: .35;
}
.rw-bild-ersatz svg { width: 40px; height: 40px; }
.rw-bild.leer img { display: none; }
.rw-bild.leer .rw-bild-ersatz { display: flex; }

.rw-name {
  padding: 0 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.rw-anzahl {
  padding: 0 14px;
  color: var(--muted);
  font-size: .85rem;
}

/* Kopfbild im geöffneten Räderwäsche-Ordner.
   Flacher als die Auswahlkacheln: es soll zeigen, wo man ist, und nicht die
   halbe Teileliste vom Bildschirm schieben. */
.rw-kopf {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2, rgba(127,127,127,.10));
  border: 1.5px solid var(--border);
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  touch-action: manipulation;
  transition: border-color .15s;
}
.rw-kopf:hover { border-color: var(--primary); }
.rw-kopf:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* KEIN festes Seitenverhältnis: die Höhe richtet sich nach dem Bild, damit
   nichts abgeschnitten wird und auch keine leeren Balken entstehen. Die
   Obergrenze verhindert nur, dass ein hochkant fotografiertes Gerät die ganze
   Teileliste vom Bildschirm schiebt. */
.rw-kopf img {
  width: 100%;
  height: auto;
  max-height: 46vh;
  object-fit: contain;
  display: block;
}
/* Der Name steht UNTER dem Bild, nicht darauf. Ein Schriftzug über dem Foto
   verdeckt genau den unteren Rand — und dort sitzt bei diesen Geräten das
   Fahrwerk. Das Bild bleibt so wirklich vollständig sichtbar. */
.rw-kopf-name {
  display: block;
  padding: 9px 12px 10px;
  border-top: 1px solid var(--border);
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  /* Auf dem Handy etwas knapper — dort zählt jede Zeile Teileliste. */
  .rw-kopf img { max-height: 38vh; }
}

/* Lupe als Hinweis, dass sich das Bild vergrößern lässt. */
.rw-kopf-lupe {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
}
.rw-kopf-lupe svg { width: 16px; height: 16px; }

/* ---------------- Vollbild-Vorschau eines Fotos ---------------- */

.bild-vorschau {
  position: fixed;
  inset: 0;
  z-index: 400;                 /* über allem, auch über "Über die App" (300) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .95);
  overscroll-behavior: contain;
  cursor: zoom-out;
}
.bild-vorschau img {
  /* Breite UND Höhe auf 100% mit "contain": Das Foto nutzt den Bildschirm
     aus, statt in seiner Originalgröße klein in der Mitte zu stehen. Das
     Seitenverhältnis bleibt dabei erhalten, abgeschnitten wird nichts. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}
.bild-vorschau-name {
  position: absolute;
  left: 16px;
  right: 60px;
  bottom: 14px;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
  pointer-events: none;
}
.bild-vorschau-zu {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.bild-vorschau-zu:hover { background: rgba(255, 255, 255, .28); }
.bild-vorschau-zu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Seite dahinter nicht mitscrollen lassen, solange die Vorschau offen ist. */
body.vorschau-offen { overflow: hidden; }

/* Teilezeile ohne Kärcher-Teilenummer: gedämpft und ohne Kopier-Anmutung. */
.part-num.leer {
  opacity: .55;
  font-style: italic;
  cursor: default;
}


/* ================================================================
   Feinschliff 1.27.0
   ================================================================ */

/* Lange Fachwörter sollen sich trennen statt mitten durchzubrechen.
   Ohne das wird aus "Motorschutzschalter" ein "Motorschutzschalte" mit
   einem einsamen "r" in der nächsten Zeile. hyphens braucht die
   Sprachangabe im <html lang="de">, die steht dort. */
.sheet-card h3,
.machine-card h3,
.anlagen-kopf-name,
.rw-name,
.rw-kopf-name,
.part-name,
.error-desc,
.news-titel {
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Mindestens sechs Zeichen im Wort, drei vor und drei nach dem Trennstrich —
     so entsteht "Hochdruckreinigungs-/anlage" statt "…anlagen-/l age". */
  hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  /* "break-word", NICHT "anywhere": anywhere bricht mitten im Wort, ohne
     Trennstrich — genau das sah bei "Hochdruckreinigungsanlage" falsch aus.
     break-word greift erst, wenn ein Wort auch getrennt nicht passt, und die
     Kacheln stehen ohnehin in festen Rasterspalten (minmax(210px, 1fr)) mit
     min-width:0, können die Seite also nicht seitlich aufziehen. */
  overflow-wrap: break-word;
}

/* Symbolfeld und Beschriftung klebten in den Katalog-Kacheln aneinander:
   das Symbol endete genau dort, wo die Beschriftung begann. */
.sheet-card .icon-badge + .tag { margin-left: 10px; }

/* Hinweiszeile unter der globalen Suche. Die Beispiele stehen hier statt im
   Platzhalter — im Feld wurden sie auf dem Handy mitten im Wort abgeschnitten. */
.omni-hinweis {
  margin: 6px 2px 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}

/* Der Anlagenname ist die WICHTIGSTE Angabe auf der Kachel — er entscheidet,
   ob man richtig ist. Er steht deshalb größer als der übrige Kacheltext und
   nicht kleiner; passt ein langer Name nicht in eine Zeile, wird er sauber
   getrennt (siehe die Silbentrennung oben) statt geschrumpft. */
.sheet-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0;
}

/* ----------------------------------------------------------------
   Symbolfelder in den Anlagenfarben

   Bisher trugen alle acht Kacheln der Fehlerliste dasselbe rote Dreieck —
   acht gleiche Symbole tragen keine Information. Jetzt bekommt jede Anlage
   ihren Farbton (KF.machineTone), denselben wie ihr Kennzeichen in den
   Suchtreffern. So erkennt man CB3 am Farbton wieder, bevor man liest.

   Die Werte sind bewusst dieselben wie bei .kf-machine, damit Kachel und
   Kennzeichen nicht in leicht verschiedenen Grüntönen erscheinen.
   ---------------------------------------------------------------- */
.icon-badge.tone-green  { background: rgba(74,222,128,0.13);  color: #4ADE80; }
.icon-badge.tone-orange { background: rgba(251,146,60,0.14);  color: #FB923C; }
.icon-badge.tone-pink   { background: rgba(244,114,182,0.14); color: #F472B6; }
.icon-badge.tone-cyan   { background: rgba(34,211,238,0.13);  color: #22D3EE; }
.icon-badge.tone-grey   { background: var(--surface-alt);     color: var(--muted); }

html[data-theme="light"] .icon-badge.tone-green  { background: rgba(21,128,61,0.10);  color: #15803D; }
html[data-theme="light"] .icon-badge.tone-orange { background: rgba(180,83,9,0.10);   color: #B45309; }
html[data-theme="light"] .icon-badge.tone-pink   { background: rgba(190,24,93,0.09);  color: #BE185D; }
html[data-theme="light"] .icon-badge.tone-cyan   { background: rgba(14,116,144,0.10); color: #0E7490; }

/* Kacheln etwas kompakter: Auf dem Fehler-Bildschirm passten keine vier
   Anlagen auf einen Handy-Schirm, obwohl in jeder Kachel nur ein Name und
   eine Zahl steht. Weniger Polsterung, engere Zeilen — der Inhalt bleibt
   gleich gut lesbar, es passt aber gut eine Reihe mehr aufs Bild. */
.machine-card,
.sheet-card {
  padding: 17px 16px;
}
/* Auf schmalen Geräten etwas enger. Diese Regel MUSS hier unten stehen:
   Ein Media-Query erhöht die Spezifität nicht, der ältere Block weiter oben
   in der Datei würde von den Zeilen hier sonst überschrieben. */
@media (max-width: 640px) {
  .machine-card,
  .sheet-card { padding: 15px 13px; }
}
.machine-card h3,
.sheet-card h3 {
  margin-bottom: 3px;
  line-height: 1.3;
}
.machine-card .count,
.sheet-card .count {
  line-height: 1.35;
}
/* Genauso in den Fehlerlisten. text-wrap: balance verteilt einen
   zweizeiligen Namen wie "CW1 · CW3 · CW5" gleichmäßig auf beide Zeilen,
   statt ein einzelnes Wort allein nach unten zu schieben. */
.machine-card h3 {
  text-wrap: balance;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0;
}

/* Textausschnitt unter einem Dateitreffer: zeigt die Fundstelle im Dokument.
   Bewusst kleiner und gedämpft — der Dateiname bleibt die Hauptsache. */
.datei-ausschnitt {
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.datei-ausschnitt mark {
  background: var(--primary-soft);
  color: var(--primary);
  padding: 0 2px;
  border-radius: 3px;
}

/* Weg von der Fehlerliste zu den Anlagen dieses Typs. Steht über dem
   Suchfeld, weil man ihn beim Lesen eines Fehlercodes braucht — nicht
   erst nach dem Scrollen. */
.zu-anlagen {
  margin: 0 0 10px;
}


/* ================================================================
   Kopfzeile mit dem Anlagennamen (1.27.1)

   Steht über jeder geöffneten Teile- oder Fehlerliste. Der Brotkrümelpfad
   darüber nennt die Anlage nur klein und grau zwischen anderem Text — beim
   Durchgehen einer Liste mit hunderten Zeilen, oder wenn man aus der Suche
   irgendwo hineinspringt, soll ohne Nachlesen dastehen, an WELCHER Anlage
   man gerade ist.

   Der Farbstreifen links trägt den Farbton der Anlage (KF.machineTone) —
   derselbe wie auf ihrer Kachel und ihrem Kennzeichen in den Suchtreffern.
   ================================================================ */
.anlagen-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left-width: 5px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.anlagen-kopf-text { min-width: 0; }

.anlagen-kopf-name {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}
/* Die Variante ("Neue Steuerung", "1.22.0.0") gehört zum Namen, ist aber
   nicht der Name — deshalb dahinter, eine Spur kleiner und ruhiger. */
.anlagen-kopf-variante {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
}
.anlagen-kopf-zusatz {
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Der Farbstreifen. Dieselben Töne wie bei .kf-machine und .icon-badge. */
.anlagen-kopf.tone-blue   { border-left-color: #60A5FA; }
.anlagen-kopf.tone-red    { border-left-color: #F87171; }
.anlagen-kopf.tone-yellow { border-left-color: #FACC15; }
.anlagen-kopf.tone-purple { border-left-color: #A78BFA; }
.anlagen-kopf.tone-green  { border-left-color: #4ADE80; }
.anlagen-kopf.tone-orange { border-left-color: #FB923C; }
.anlagen-kopf.tone-pink   { border-left-color: #F472B6; }
.anlagen-kopf.tone-cyan   { border-left-color: #22D3EE; }
.anlagen-kopf.tone-grey   { border-left-color: var(--border); }

html[data-theme="light"] .anlagen-kopf.tone-blue   { border-left-color: #2563EB; }
html[data-theme="light"] .anlagen-kopf.tone-red    { border-left-color: #DC2626; }
html[data-theme="light"] .anlagen-kopf.tone-yellow { border-left-color: #CA8A04; }
html[data-theme="light"] .anlagen-kopf.tone-purple { border-left-color: #7C3AED; }
html[data-theme="light"] .anlagen-kopf.tone-green  { border-left-color: #15803D; }
html[data-theme="light"] .anlagen-kopf.tone-orange { border-left-color: #B45309; }
html[data-theme="light"] .anlagen-kopf.tone-pink   { border-left-color: #BE185D; }
html[data-theme="light"] .anlagen-kopf.tone-cyan   { border-left-color: #0E7490; }

@media (max-width: 640px) {
  .anlagen-kopf { padding: 11px 13px; margin-bottom: 12px; }
  .anlagen-kopf-name { font-size: 1.25rem; }
  /* Auf dem Handy unter den Namen statt daneben — sonst drückt die Variante
     den Namen in eine zweite Zeile, und genau der soll ganz oben stehen. */
  .anlagen-kopf-variante { display: block; margin-left: 0; margin-top: 1px; }
}

/* Das Kennzeichen der Anlage in den Suchtreffern. Es beantwortet die Frage
   "zu welcher Anlage gehört dieser Treffer?" und war dafür zu zurückhaltend:
   etwas größer, kräftiger und mit mehr Luft steht es jetzt gleichwertig
   neben dem Trefferschlüssel statt darunter zu verschwinden. */
.kf-machine {
  font-size: 0.95rem;
  font-weight: 800;
  padding: 4px 11px;
  /* Nicht mitten im Wort umbrechen — Anlagennamen sind kurz genug. */
  overflow-wrap: break-word;
}

/* Bauart der Räderwäsche: auf der Ordnerkachel und im Kopf über der Liste.
   Genau diese vier Namen unterscheiden sich nur in ein, zwei Wörtern —
   der Name muss also lesbar groß sein, sonst nützt die Unterscheidung nichts. */
.rw-name {
  font-size: 1.06rem;
  font-weight: 700;
}
/* Die Zeile unter dem Foto trägt nicht mehr den Namen (der steht groß in der
   Kopfzeile darüber), sondern den Bedienhinweis — also ruhig und klein. */
.rw-kopf-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}


/* ================================================================
   Acht weitere Anlagenfarben (1.27.2)

   WOZU
   Es gab acht Farben für neunzehn Anlagen. Wer keine feste Zuordnung hatte,
   bekam seine Farbe aus einer Quersumme des Namens — und "CWB3" und "WRP"
   fielen dabei auf dieselbe. Auf dem Handy standen beide untereinander und
   sahen gleich aus; die Farbe war an dieser Stelle also wertlos.

   Jetzt sind es sechzehn Farben, und assets/ui.js vergibt sie so, dass keine
   Anlage die Farbe einer anderen bekommt.

   DIE WERTE SIND GEMESSEN, NICHT GERATEN
   Alle sechzehn Töne haben untereinander einen Mindestabstand von rund 12
   ΔE2000 — in der dunklen wie in der hellen Ansicht — und jeder erreicht auf
   seinem Untergrund mindestens das 4,6-fache an Kontrast (WCAG-Schwelle für
   Kleintext ist 4,5). Wer hier etwas ändert, sollte beides im Blick behalten:
   Zwei Anlagen in fast derselben Farbe sind schlimmer als eine graue.
   ================================================================ */

/* Symbolfeld auf den Kacheln */
.icon-badge.tone-oliv     { background: rgba(222,230,168,0.15); color: #DEE6A8; }
.icon-badge.tone-limette  { background: rgba(118,237,38,0.15); color: #76ED26; }
.icon-badge.tone-mint     { background: rgba(157,241,221,0.15); color: #9DF1DD; }
.icon-badge.tone-schiefer { background: rgba(188,198,210,0.15); color: #BCC6D2; }
.icon-badge.tone-malve    { background: rgba(215,183,213,0.15); color: #D7B7D5; }
.icon-badge.tone-magenta  { background: rgba(224,38,237,0.15); color: #E026ED; }
.icon-badge.tone-braun    { background: rgba(224,192,174,0.15); color: #E0C0AE; }
.icon-badge.tone-sand     { background: rgba(161,152,114,0.15); color: #A19872; }

html[data-theme="light"] .icon-badge.tone-oliv     { background: rgba(95,114,5,0.13); color: #5F7205; }
html[data-theme="light"] .icon-badge.tone-limette  { background: rgba(49,90,22,0.13); color: #315A16; }
html[data-theme="light"] .icon-badge.tone-mint     { background: rgba(22,90,81,0.13); color: #165A51; }
html[data-theme="light"] .icon-badge.tone-schiefer { background: rgba(42,55,70,0.13); color: #2A3746; }
html[data-theme="light"] .icon-badge.tone-malve    { background: rgba(84,29,78,0.13); color: #541D4E; }
html[data-theme="light"] .icon-badge.tone-magenta  { background: rgba(194,10,194,0.13); color: #C20AC2; }
html[data-theme="light"] .icon-badge.tone-braun    { background: rgba(84,38,29,0.13); color: #54261D; }
html[data-theme="light"] .icon-badge.tone-sand     { background: rgba(89,77,54,0.13); color: #594D36; }

/* Das gelbe Symbolfeld hing an --primary, und --primary wird in der hellen
   Ansicht nicht umgestellt: Auf weißem Grund kam das Gelb auf das 1,4-fache
   an Kontrast und war praktisch unsichtbar. Betraf die WRP. */
html[data-theme="light"] .icon-badge.tone-yellow { background: rgba(128,100,0,0.13); color: #806400; }

/* Kennzeichen der Anlage in Suchtreffern und Meldungen */
.kf-machine.tone-oliv     { color: #DEE6A8; background: rgba(222,230,168,0.15); border-color: rgba(222,230,168,0.32); }
.kf-machine.tone-limette  { color: #76ED26; background: rgba(118,237,38,0.15); border-color: rgba(118,237,38,0.32); }
.kf-machine.tone-mint     { color: #9DF1DD; background: rgba(157,241,221,0.15); border-color: rgba(157,241,221,0.32); }
.kf-machine.tone-schiefer { color: #BCC6D2; background: rgba(188,198,210,0.15); border-color: rgba(188,198,210,0.32); }
.kf-machine.tone-malve    { color: #D7B7D5; background: rgba(215,183,213,0.15); border-color: rgba(215,183,213,0.32); }
.kf-machine.tone-magenta  { color: #E026ED; background: rgba(224,38,237,0.15); border-color: rgba(224,38,237,0.32); }
.kf-machine.tone-braun    { color: #E0C0AE; background: rgba(224,192,174,0.15); border-color: rgba(224,192,174,0.32); }
.kf-machine.tone-sand     { color: #A19872; background: rgba(161,152,114,0.15); border-color: rgba(161,152,114,0.32); }

html[data-theme="light"] .kf-machine.tone-oliv     { color: #5F7205; background: rgba(95,114,5,0.10); border-color: rgba(95,114,5,0.24); }
html[data-theme="light"] .kf-machine.tone-limette  { color: #315A16; background: rgba(49,90,22,0.10); border-color: rgba(49,90,22,0.24); }
html[data-theme="light"] .kf-machine.tone-mint     { color: #165A51; background: rgba(22,90,81,0.10); border-color: rgba(22,90,81,0.24); }
html[data-theme="light"] .kf-machine.tone-schiefer { color: #2A3746; background: rgba(42,55,70,0.10); border-color: rgba(42,55,70,0.24); }
html[data-theme="light"] .kf-machine.tone-malve    { color: #541D4E; background: rgba(84,29,78,0.10); border-color: rgba(84,29,78,0.24); }
html[data-theme="light"] .kf-machine.tone-magenta  { color: #C20AC2; background: rgba(194,10,194,0.10); border-color: rgba(194,10,194,0.24); }
html[data-theme="light"] .kf-machine.tone-braun    { color: #54261D; background: rgba(84,38,29,0.10); border-color: rgba(84,38,29,0.24); }
html[data-theme="light"] .kf-machine.tone-sand     { color: #594D36; background: rgba(89,77,54,0.10); border-color: rgba(89,77,54,0.24); }

/* Filterknöpfe über den Meldungen. Hier fehlten die acht neuen Töne ganz —
   acht Anlagen fielen dadurch auf dieselbe graue Standardfarbe zurück, also
   genau derselbe Fehler eine Ansicht weiter. Und für die hellen Ansicht gab
   es bisher überhaupt keine Werte: Dort standen die dunklen Töne auf hellem
   Grund, mit Kontrasten um 1,4. */
.news-chip.active.tone-oliv     { color: #DEE6A8; }
.news-chip.active.tone-limette  { color: #76ED26; }
.news-chip.active.tone-mint     { color: #9DF1DD; }
.news-chip.active.tone-schiefer { color: #BCC6D2; }
.news-chip.active.tone-malve    { color: #D7B7D5; }
.news-chip.active.tone-magenta  { color: #E026ED; }
.news-chip.active.tone-braun    { color: #E0C0AE; }
.news-chip.active.tone-sand     { color: #A19872; }

html[data-theme="light"] .news-chip.active.tone-blue     { color: #1B4FD8; }
html[data-theme="light"] .news-chip.active.tone-green    { color: #15803D; }
html[data-theme="light"] .news-chip.active.tone-purple   { color: #6428D0; }
html[data-theme="light"] .news-chip.active.tone-orange   { color: #B45309; }
html[data-theme="light"] .news-chip.active.tone-pink     { color: #BE185D; }
html[data-theme="light"] .news-chip.active.tone-cyan     { color: #0E7490; }
html[data-theme="light"] .news-chip.active.tone-red      { color: #C81E1E; }
html[data-theme="light"] .news-chip.active.tone-yellow   { color: #806400; }
html[data-theme="light"] .news-chip.active.tone-oliv     { color: #5F7205; }
html[data-theme="light"] .news-chip.active.tone-limette  { color: #315A16; }
html[data-theme="light"] .news-chip.active.tone-mint     { color: #165A51; }
html[data-theme="light"] .news-chip.active.tone-schiefer { color: #2A3746; }
html[data-theme="light"] .news-chip.active.tone-malve    { color: #541D4E; }
html[data-theme="light"] .news-chip.active.tone-magenta  { color: #C20AC2; }
html[data-theme="light"] .news-chip.active.tone-braun    { color: #54261D; }
html[data-theme="light"] .news-chip.active.tone-sand     { color: #594D36; }

/* Farbstreifen der Kopfzeile über einer geöffneten Liste */
.anlagen-kopf.tone-oliv     { border-left-color: #DEE6A8; }
.anlagen-kopf.tone-limette  { border-left-color: #76ED26; }
.anlagen-kopf.tone-mint     { border-left-color: #9DF1DD; }
.anlagen-kopf.tone-schiefer { border-left-color: #BCC6D2; }
.anlagen-kopf.tone-malve    { border-left-color: #D7B7D5; }
.anlagen-kopf.tone-magenta  { border-left-color: #E026ED; }
.anlagen-kopf.tone-braun    { border-left-color: #E0C0AE; }
.anlagen-kopf.tone-sand     { border-left-color: #A19872; }
html[data-theme="light"] .anlagen-kopf.tone-oliv     { border-left-color: #5F7205; }
html[data-theme="light"] .anlagen-kopf.tone-limette  { border-left-color: #315A16; }
html[data-theme="light"] .anlagen-kopf.tone-mint     { border-left-color: #165A51; }
html[data-theme="light"] .anlagen-kopf.tone-schiefer { border-left-color: #2A3746; }
html[data-theme="light"] .anlagen-kopf.tone-malve    { border-left-color: #541D4E; }
html[data-theme="light"] .anlagen-kopf.tone-magenta  { border-left-color: #C20AC2; }
html[data-theme="light"] .anlagen-kopf.tone-braun    { border-left-color: #54261D; }
html[data-theme="light"] .anlagen-kopf.tone-sand     { border-left-color: #594D36; }


/* ================================================================
   Kacheln auf dem Handy (1.27.1)

   MUSS AM DATEIENDE STEHEN. Ein @media-Block erhöht die Spezifität nicht:
   Bei gleich schweren Selektoren gewinnt die spätere Zeile. Früher in der
   Datei stehend wurden diese Regeln von den Feinschliff-Blöcken oben
   überschrieben — die Schriftgrößen, das Polster und die Abstände am
   Symbol kamen nicht an.

   WAS HIER PASSIERT
   Auf schmalen Geräten standen zwei Kacheln nebeneinander, je rund 140
   Pixel für den Namen. "Räderwäsche 2.0 Höhenverstellbar HD" brach darin
   auf vier Zeilen, teils mitten im Wort. Jetzt: eine Kachel je Zeile, das
   Symbol links NEBEN dem Text statt darüber — der Name steht vollständig
   da, und die Liste wird trotzdem kaum länger.
   ================================================================ */
@media (max-width: 640px) {
  .sheet-grid,
  .machine-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sheet-card,
  .machine-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 13px;
    align-items: center;
    padding: 14px 14px;
  }

  /* Die Zeilen müssen ausdrücklich angelegt werden: "grid-row: 1 / -1"
     spannt nur über das AUSDRÜCKLICHE Raster. Ohne diese Angabe hat das
     Raster null Zeilen, -1 liegt auf derselben Linie wie 1, und das Symbol
     stünde neben der ersten Textzeile statt neben dem ganzen Text. */
  .sheet-card   { grid-template-rows: repeat(3, auto); }   /* Art, Name, Anzahl */
  .machine-card { grid-template-rows: repeat(2, auto); }   /* Name, Anzahl */

  .sheet-card .icon-badge,
  .machine-card .icon-badge {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    margin: 0;
  }
  .sheet-card > *:not(.icon-badge),
  .machine-card > *:not(.icon-badge) { grid-column: 2; }

  /* Die Beschriftung ("TEILELISTE") würde als Rasterzelle sonst die ganze
     Spaltenbreite einnehmen — sie soll nur so breit sein wie ihr Text. */
  .sheet-card .icon-badge + .tag { margin-left: 0; }
  .sheet-card .tag { justify-self: start; }

  .sheet-card h3,
  .machine-card h3 { font-size: 1.08rem; }
}


/* ================================================================
   Hinweisband für ablaufende Kundenzugänge (1.28.0)

   Erscheint ab sieben Tagen vor Ablauf. Absichtlich oben über allem und
   nicht als kleines Symbol irgendwo: Wer im Technikraum steht und morgen
   nicht mehr hineinkommt, soll das heute schon gesehen haben.
   ================================================================ */
.lizenz-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--primary);
  background: var(--primary-soft);
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.4;
}
.lizenz-bar svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--primary); }
.lizenz-bar strong { font-weight: 800; }

/* Die letzten zwei Tage in Rot — gelb ist bis dahin ein Hinweis, danach ist
   es eine Ansage. */
.lizenz-bar.dringend {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.lizenz-bar.dringend svg { color: var(--danger); }

@media (max-width: 640px) {
  .lizenz-bar { padding: 10px 13px; font-size: 0.88rem; }
}

/* ============================================================
   Vorschau für PDF und Bilder (seit 1.31.0, assets/vorschau.js)
   Am Rechner ein Panel rechts, das die Liste zusammenschiebt; auf dem
   Handy bildschirmfüllend mit Zurück-Pfeil.
   ============================================================ */
.vorschau {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(46vw, 760px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
  z-index: 40;
}
.vorschau[hidden] { display: none; }
/* Am Rechner rückt die Seite nach links, damit die Liste nicht unter dem
   Panel liegt. Die Kopfzeile behält ihre volle Breite. */
@media (min-width: 901px) {
  body.vorschau-offen { padding-right: calc(min(46vw, 760px) + 24px); }
  body.vorschau-offen header { margin-right: calc(-1 * (min(46vw, 760px) + 24px) - 32px); }
}

.vorschau-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.vorschau-titel { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.vorschau-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vorschau-meta { font-size: 0.8rem; color: var(--muted); }
.vorschau-knopf.vorschau-zurueck { display: none; }

.vorschau-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer;
}
.vorschau-knopf:hover { border-color: var(--text); }
.vorschau-knopf:disabled { opacity: 0.35; cursor: default; }

.vorschau-leiste {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.vorschau-leiste .doc-offline { margin: 0; }
.vorschau-nav, .vorschau-zoom { display: inline-flex; align-items: center; gap: 4px; }
.vorschau-zoom { margin-left: auto; }
.vorschau-zoom span { min-width: 52px; text-align: center; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.vorschau-seiten { font-size: 0.85rem; color: var(--muted); min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }

.vorschau-inhalt {
  position: relative;   /* offsetTop der Seiten bezieht sich damit auf diesen Kasten */
  flex: 1; overflow: auto; padding: 16px;
  background: #24262B;
  --vorschau-zoom: 1;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html[data-theme="light"] .vorschau-inhalt { background: #D9DBE0; }
.vorschau-seite {
  width: calc(100% * var(--vorschau-zoom));
  margin: 0 auto 14px;
  background: #fff; border-radius: 3px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  min-height: 60px;
  color: #444; font-size: 0.85rem; display: flex; align-items: center; justify-content: center;
}
.vorschau-seite canvas { display: block; width: 100%; height: auto; border-radius: 3px; }
.vorschau-bild {
  display: block; margin: 0 auto;
  width: calc(100% * var(--vorschau-zoom)); max-width: none; height: auto;
  border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.vorschau-hinweis { color: var(--text); text-align: center; padding: 40px 16px; }
.vorschau-hinweis p { margin: 0 0 14px; }

/* Die gerade angezeigte Zeile in der Liste */
#fileTableBody tr.vorschau-aktiv td { background: var(--primary-soft); }
#fileTableBody tr.hat-vorschau { cursor: pointer; }

@media (max-width: 900px) {
  .vorschau { width: 100%; border-left: 0; box-shadow: none; }
  body.vorschau-offen { overflow: hidden; }
  .vorschau-knopf.vorschau-zurueck { display: inline-flex; }
  .vorschau-knopf.vorschau-x { display: none; }
  .vorschau-inhalt { padding: 10px; }
  .vorschau-seiten { min-width: 0; width: 100%; text-align: center; }
}

/* Trefferzeile in der Vorschau: auf welchen Seiten die Suchwörter stehen */
.vorschau-treffer {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px; font-size: 0.84rem; color: var(--muted);
  background: var(--primary-soft); border-bottom: 1px solid var(--border);
}
.vorschau-treffer[hidden] { display: none; }
.vorschau-seitenknopf {
  min-width: 34px; height: 30px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--bg); color: var(--text);
  font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer;
}
.vorschau-seitenknopf:hover { border-color: var(--primary); color: var(--primary); }

/* Vollbild-Knopf und Vollbild-Zustand der Vorschau (1.32.0) */
.vorschau-voll .voll-aus { display: none; }
.vorschau.vollbild .voll-an { display: none; }
.vorschau.vollbild .voll-aus { display: inline; }
.vorschau.vollbild {
  width: 100vw; width: 100dvw; left: 0; right: 0; border-left: 0; box-shadow: none;
  z-index: 60;
}
.vorschau.vollbild:fullscreen { width: 100%; height: 100%; }
/* Im Vollbild bleibt die Seite lesbar breit (max. 1100 px) und steht mittig;
   der Zoom vergrößert von dort aus weiter. */
.vorschau.vollbild .vorschau-inhalt { padding-left: max(16px, calc((100% - 1100px) / 2)); padding-right: max(16px, calc((100% - 1100px) / 2)); }
@media (min-width: 901px) {
  body.vorschau-vollbild.vorschau-offen { padding-right: 32px; overflow: hidden; }
  body.vorschau-vollbild.vorschau-offen header { margin-right: -32px; }
}

/* ---- Vorschau 1.33: Suche im Dokument, Stift, Zuletzt geöffnet ---- */
.vorschau-werkzeuge { display: inline-flex; gap: 4px; }
.vorschau-knopf.aktiv { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.vorschau-suche {
  display: flex; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border); margin: 0;
}
.vorschau-suche input {
  flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; font: inherit; font-size: 16px;
  color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px;
}
.vorschau-suche input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

.vorschau-stiftleiste {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--primary-soft);
}
.vorschau-stift-hinweis { font-size: 0.84rem; color: var(--muted); margin-right: auto; }
.stift-farbe {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.stift-farbe i { display: block; width: 20px; height: 20px; border-radius: 50%; }
.stift-farbe.aktiv { border-color: var(--text); }
.vorschau-stiftleiste .vorschau-knopf { min-width: 36px; height: 36px; font-size: 1rem; }

/* Zeichenfläche über Seite bzw. Bild: nimmt nur im Stift-Modus Berührungen an */
.vorschau-seite, .vorschau-bildbox { position: relative; }
.vorschau-bildbox { width: calc(100% * var(--vorschau-zoom)); margin: 0 auto; }
.vorschau-bildbox .vorschau-bild { width: 100%; }
.vorschau-stift {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; border-radius: 3px;
}
.vorschau.stift .vorschau-stift { pointer-events: auto; cursor: crosshair; touch-action: none; }
.vorschau.stift .vorschau-inhalt { overscroll-behavior: contain; }

/* "Zuletzt geöffnet" über der Dateiliste */
.zuletzt-leiste {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px;
}
.zuletzt-titel { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-right: 4px; }
.zuletzt-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 260px; min-height: 38px;
  padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
}
.zuletzt-chip:hover { border-color: var(--primary); }
.zuletzt-art { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; padding: 3px 6px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.zuletzt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .zuletzt-leiste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; }
  .zuletzt-leiste::-webkit-scrollbar { display: none; }
  .zuletzt-chip { flex-shrink: 0; max-width: 220px; }
  .vorschau-stift-hinweis { display: none; }
}

/* Eigene Anlagen (1.34.0) */
.pill-eigene {
  display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary); border: 1px solid rgba(249,199,0,0.35);
}
.machine-eigene-hinweis { margin: -6px 0 12px; font-size: 0.86rem; }


/* ================================================================
   Dateiliste mit sichtbarem Ordnerinhalt (1.40.0)

   Zwischenüberschriften, Inhaltszeile unter dem Ordnernamen, Typ-Marken
   als Text, Aufklappen an Ort und Stelle, Ordnerpfad bei Suchtreffern
   und der Ordnerbaum links am Rechner. Bewusst ohne neue Symbole.
   ================================================================ */

/* Zwischenüberschrift „Ordner · 6" / „Dateien · 3" */
tr.datei-gruppe { cursor: default; }
tr.datei-gruppe:hover { background: none; }
tr.datei-gruppe td {
  padding: 7px 16px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
html[data-theme="light"] tr.datei-gruppe td { background: rgba(20, 23, 26, 0.035); }

/* Ordnerzeile: Name, darunter der Inhalt, rechts der Aufklapp-Pfeil */
.folder-name-cell { align-items: center; }
.ordner-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ordner-name { font-weight: 700; overflow-wrap: anywhere; }
.ordner-inhalt {
  font-size: 0.84rem; font-weight: 400; color: var(--muted); margin-top: 2px;
  overflow-wrap: anywhere;
}
.ordner-inhalt b { color: var(--text); font-weight: 600; }
.ordner-leer { font-style: italic; }
tbody tr.folder-row td:first-child { font-weight: 400; }

.ordner-auf {
  flex: none; width: 36px; height: 36px; margin: -4px -6px -4px 6px;
  border: 1.5px solid var(--border); border-radius: 9px; background: transparent;
  color: var(--muted); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.ordner-auf:hover { border-color: var(--border-strong); color: var(--text); }
.ordner-auf-pfeil {
  display: block; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s;
}
.ordner-auf[aria-expanded="true"] { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.ordner-auf[aria-expanded="true"] .ordner-auf-pfeil { transform: translateY(2px) rotate(-135deg); }
.ordner-auf.laedt { opacity: 0.4; }

/* Dateiarten in der Spalte „Typ": „11 PDF · 2 Bilder" — reiner Text */
.ordner-typen { white-space: normal; }
.typ-marke {
  display: inline-block; padding: 1px 8px; margin: 1px 4px 1px 0;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.78rem; color: var(--muted); white-space: nowrap;
}

/* Aufgeklappter Ordner und seine Einträge */
tr.ordner-offen td { background: rgba(249, 199, 0, 0.05); }
tr.ordner-offen td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
tr.ordner-kind td { background: rgba(255, 255, 255, 0.025); padding-top: 9px; padding-bottom: 9px; font-size: 0.93rem; }
tr.ordner-kind td:first-child { padding-left: 58px; }
tr.ordner-kind.folder-row .icon-badge.sm { width: 26px; height: 26px; border-radius: 7px; }
tr.ordner-kind.folder-row .icon-badge.sm svg { width: 14px; height: 14px; }
tr.ordner-kind.folder-row .ordner-name { font-weight: 500; }
tr.ordner-kind-mehr td { color: var(--primary); font-weight: 700; font-size: 0.88rem; }
tr.ordner-kind-hinweis { cursor: default; }
html[data-theme="light"] tr.ordner-kind td { background: rgba(20, 23, 26, 0.03); }

/* Ordnerpfad unter einem Suchtreffer */
.datei-pfad {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px;
  margin-top: 4px; font-size: 0.83rem; color: var(--muted);
}
.datei-pfad-teil {
  background: none; border: none; padding: 2px 0; margin: 0; font: inherit;
  color: var(--muted); cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.datei-pfad-teil:hover { color: var(--primary); }
.datei-pfad-sep { opacity: 0.6; }

/* Ordnerbaum links — nur am breiten Rechnerbildschirm, nie bei offener Vorschau */
.dateien-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.ordnerbaum { display: none; }
@media (min-width: 1100px) {
  body:not(.vorschau-offen) .dateien-layout:has(> .ordnerbaum:not([hidden])) {
    grid-template-columns: 250px minmax(0, 1fr);
  }
  body:not(.vorschau-offen) .ordnerbaum:not([hidden]) {
    display: block;
    position: sticky; top: calc(var(--header-h, 80px) + 84px);
    max-height: calc(100vh - var(--header-h, 80px) - 100px);
    overflow: auto;
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 8px 8px 10px;
    font-size: 0.92rem;
    scrollbar-width: thin;
  }
}
.ob-titel {
  padding: 6px 10px 8px; font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.ob-zeile {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px calc(8px + var(--tiefe, 0) * 16px);
  border-radius: 8px; cursor: pointer; color: var(--text); min-height: 34px;
}
.ob-zeile:hover { background: var(--surface-alt); }
.ob-zeile.ob-aktuell { background: var(--primary-soft); font-weight: 700; }
.ob-zeile.ob-leer .ob-name { color: var(--muted); }
.ob-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-zahl { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.ob-auf, .ob-platz { flex: none; width: 20px; height: 20px; }
.ob-auf {
  border: none; background: none; padding: 0; cursor: pointer; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.ob-auf::before {
  content: ""; width: 6px; height: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.ob-auf.offen::before { transform: rotate(45deg); }
.ob-auf:hover { color: var(--text); }

/* Handy: die Tabelle ist dort eine Kartenliste (siehe oben) */
@media (max-width: 640px) {
  tr.datei-gruppe { border: none; background: none; box-shadow: none; padding: 10px 4px 2px; margin-bottom: 4px; }
  tr.datei-gruppe td { background: none; padding: 0; font-size: 0.72rem; color: var(--muted); }
  .folder-name-cell { align-items: flex-start; }
  .ordner-auf { margin: -2px 0 0 4px; }
  .ordner-typen::before { color: var(--muted); }
  tr.ordner-kind { margin-left: 18px; }
  tr.ordner-kind td:first-child { padding-left: 0; }
  tr.ordner-kind td { background: none; padding: 2px 0; font-size: 0.9rem; }
  tr.ordner-kind { padding: 10px 12px; margin-bottom: 8px; }
  tr.ordner-offen { border-color: rgba(249, 199, 0, 0.45); }
  tr.ordner-offen td:first-child { box-shadow: none; }
  tr.ordner-kind-mehr td, tr.ordner-kind-hinweis td { padding: 2px 0; }
}

/* ================================================================
   Technische Neuigkeiten: eingeklappte Meldungen (1.42.2)
   Nur Kopfzeile sichtbar (Kennzeichen, Titel, Datum) — der Text
   klappt beim Antippen auf.
   ================================================================ */
.news-karte.zu { padding: 0; overflow: hidden; }
.news-kopfzeile {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 16px; margin: 0; border: none; background: none;
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
  min-height: var(--tap-min); touch-action: manipulation;
}
.news-kopfzeile:hover { background: var(--surface-alt); }
.news-kopf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.news-karte.zu .news-marken { margin-bottom: 0; }
.news-karte.zu .news-titel { margin: 0; font-size: 1.02rem; }
.news-karte.zu .news-fuss { font-size: 0.82rem; margin-top: 0; padding-top: 0; border-top: none; }
.news-pfeil {
  flex: none; width: 9px; height: 9px; margin-right: 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .15s;
}
.news-karte.auf .news-pfeil { transform: rotate(-135deg) translateY(-2px); }
.news-inhalt { padding: 2px 16px 14px; }
.news-inhalt[hidden] { display: none; }

/* Neuigkeiten ganz ausgeblendet (1.42.3): schmale Zeile statt Liste */
.news-zeigen {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; background: none; padding: 6px 2px; margin: 2px 0 0;
  font: inherit; font-size: 0.9rem; color: var(--muted); cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
  min-height: var(--tap-min); touch-action: manipulation;
}
.news-zeigen:hover { color: var(--primary); }