/* v163 – Bedienung. Darrels Auftrag vom 20.10.2026: „Mach die Druckplatten-Webseite noch schöner und
   professioneller. Mach nichts kaputt, es soll für die Kunden besser bedienbar sein.“

   Diese Datei lädt nach dem Feinschliff (v157). Sie ändert Schrift, Größen und Anordnung – keine Funktion,
   keinen Text, keinen Ablauf, keine Farbe des Themas. Was sie tut:
   1. Lesbarkeit: Knöpfe, Reiter, Hinweise, Kachel-Beschriftungen und Statusschilder stehen in der Textschrift
      (Inter) statt in Schreibmaschinenschrift; jede Schriftgröße hier ist mindestens 10.5px (einzige Ausnahme:
      das Statusschild der Handy-Karten, 9px statt bisher 7.5px). Die Schreibmaschinenschrift bleibt für Nummern,
      Kennungen und Material.
   2. Formular „Auftrag einreichen“ (und die anderen Fenster mit Feldern): Beschriftungen in normaler Schreibweise
      statt in Großbuchstaben; die Erklärungen bei Sichtbarkeit und Übergabe sind gut lesbar. „Speichern“ und
      „Abbrechen“ bleiben auch am Computer immer sichtbar – am Handy war das schon so.
   3. Auftragskarten: Der Name ist die Überschrift, die Auftragsnummer steht klein darüber; der Text unter den
      Schritten ist lesbar; „Privat“/„Öffentlich“ bricht nicht mehr um. Ab 901px füllen die Karten die Reihe.
   4. Kopfzeile am Computer (ab 1280px): zwei ruhige Reihen – oben Suche, „Auftrag einreichen“ und Profil,
      darunter Neuigkeiten und Live-Status links, Hilfe rechts; die Knöpfe einer Reihe sind gleich hoch.
      Zwischen 761px und 1279px läuft die Kopfzeile nicht mehr mit: Dort war sie über 300px hoch und
      verdeckte beim Scrollen ein Drittel des Bildschirms.
   5. Sprungziele (Suche, Kacheln) landen am Computer nicht mehr unter der mitlaufenden Kopfzeile.
   Abgeschaltet für die eigene Gestaltung eines einzelnen Kontos – die regelt ihr Aussehen in ihrer eigenen Datei.
   Wo das Handy schon eigene, stärkere Regeln hat, bleiben diese bestehen. */

/* 1. Lesbarkeit ------------------------------------------------------------------------------------------- */
:where(:root:not([data-skin])) :is(.seg-btn, .sync-pill, .chip, .file-btn, .status-tag, .idea-waiting, .printer-banner-status, .footer-event-dropdown summary, .mode-banner span) {
  font-family: Inter, system-ui, sans-serif;
  letter-spacing: 0;
}
:where(:root:not([data-skin])) .seg-btn { font-size: 13px; font-weight: 600; }
:where(:root:not([data-skin])) .footer-event-dropdown summary { font-size: 12.5px; font-weight: 600; }
:where(:root:not([data-skin])) .sync-pill { font-size: 12px; font-weight: 500; }
:where(:root:not([data-skin])) .mode-banner span { font-size: 13px; }
:where(:root:not([data-skin])) .chip { font-size: 12.5px; font-weight: 500; }
:where(:root:not([data-skin])) .file-btn { font-size: 13px; font-weight: 600; }
:where(:root:not([data-skin])) .status-tag { font-size: 11.5px; font-weight: 600; }
:where(:root:not([data-skin])) .idea-waiting { font-size: 12px; font-weight: 600; }
:where(:root:not([data-skin])) .printer-banner-status { font-size: 12px; font-weight: 600; }
:where(:root:not([data-skin])) .stat-card .lbl {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
:where(:root:not([data-skin])) .order-toolbar-kicker { font-size: 10.5px; }
:where(:root:not([data-skin])) .queue-item .qcopy small { font-size: 11px; }

/* 2. Formulare --------------------------------------------------------------------------------------------- */
:where(:root:not([data-skin])) :is(.field > label, .custom-color-field > label) {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
:where(:root:not([data-skin])) :is(.visibility-option, .fulfillment-option) :is(strong, small) {
  font-family: Inter, system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
:where(:root:not([data-skin])) :is(.visibility-option, .fulfillment-option) strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
:where(:root:not([data-skin])) :is(.visibility-option, .fulfillment-option) small {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
}
@media (min-width: 641px) {
  /* Wie am Handy: Die Knöpfe des Auftragsformulars kleben unten im Fenster, der Inhalt scrollt darunter durch. */
  :where(:root:not([data-skin])) #overlay .modal-actions {
    position: sticky;
    bottom: -24px;
    z-index: 2;
    margin: 20px -24px -24px;
    padding: 14px 24px 22px;
    background-color: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -14px 24px -18px rgba(0, 0, 0, .7);
  }
}

/* 3. Auftragskarten ---------------------------------------------------------------------------------------- */
:where(:root:not([data-skin])) .card-body > .reference-number {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 0 0 4px;
}
:where(:root:not([data-skin])) .card-body > .card-title { font-size: 16px; line-height: 1.3; }
/* Die Karten-Regeln für den Computer hängen an #grid – deshalb hier ebenso. */
:where(:root:not([data-skin])) #grid .order-progress-caption {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
}
:where(:root:not([data-skin])) #grid .card-body .card-meta-line { font-size: 11.5px; }
:where(:root:not([data-skin])) #grid .card-body :is(.info-lines, .info-lines > span, .info-lines .missing) { font-size: 11.5px; }
:where(:root:not([data-skin])) #grid .card-body .card-note { font-size: 12px; }
:where(:root:not([data-skin])) #grid .order-progress-step b { font-size: 10.5px; }
:where(:root:not([data-skin])) #grid .card-footer .model-visibility { white-space: nowrap; }
:where(:root:not([data-skin])) #grid .card-footer .link-btn { font-size: 12px; }
/* Admin-Karten tragen zusätzlich vier Symbol-Knöpfe – dort bekommt der Link eine eigene Zeile, statt abgeschnitten zu werden.
   (Nicht auf Handy und Tablet: Dort schwebt die Fußleiste kompakt in der Karte.) */
:where(:root:not([data-skin]):not(.popup-swipe-mobile)) #grid .card-footer:has(> .icon-actions) { flex-wrap: wrap; row-gap: 6px; }
:where(:root:not([data-skin]):not(.popup-swipe-mobile)) #grid .card-footer:has(> .icon-actions) > :is(.link-btn, .link-empty) { flex: 1 0 100%; }
:where(:root:not([data-skin])) .order-control > span { font-size: 10.5px; }
@media (min-width: 901px) {
  /* Bisher höchstens 220px je Karte – mit der vollen Breite (v162) blieb rechts viel leer und Texte wurden eng. */
  :where(:root:not([data-skin])) #grid:not([style*="display: none"]) { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
/* Handy und Tablet: Die kompakten Karten setzen ihre Schriftgrößen mit !important (Block „Kompakte horizontale
   Auftragskarten“ in index.html). Nur diese drei Größen werden hier – ebenso stark – etwas größer: Das Statusschild
   war 7.5px klein. Breite und Abstände der Karte bleiben, wie sie sind. */
:where(:root:not([data-skin])).popup-swipe-mobile #grid .card .status-tag { font-family: Inter, system-ui, sans-serif !important; font-size: 9px !important; letter-spacing: 0 !important; padding: 4px 3px !important; }
:where(:root:not([data-skin])).popup-swipe-mobile #grid .card .card-meta-line { font-size: 10.5px !important; }
:where(:root:not([data-skin])).popup-swipe-mobile #grid .card .info-lines { font-size: 11px !important; }

/* 4. Kopfzeile am Computer ------------------------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1279px) {
  :where(:root:not([data-skin])) #pageTop { position: relative; }
}
@media (min-width: 1280px) {
  :where(:root:not([data-skin])) #pageTop { padding-top: 14px; padding-bottom: 14px; }
  :where(:root:not([data-skin])) .topbar-right { column-gap: 8px; row-gap: 5px; align-items: center; }
  /* Zeilenumbruch zwischen den beiden Reihen (eine leere Zeile ohne Höhe; die zwei Abstände ergeben 10px) */
  :where(:root:not([data-skin])) .topbar-right::before { content: ""; order: 2; flex: 0 0 100%; height: 0; }
  /* Linke Spalte: Suche, darunter Neuigkeiten und Live-Status. Rechte Spalte: Einreichen und Profil, darunter Hilfe. */
  :where(:root:not([data-skin])) .topbar-right #searchBox { order: 1; flex: 1 1 280px; max-width: 680px; height: 40px; margin: 0; }
  :where(:root:not([data-skin])) .topbar-right #roleSwitch { order: 1; margin-left: auto; }
  :where(:root:not([data-skin])) .topbar-right #accountBtn { order: 1; height: 40px; }
  :where(:root:not([data-skin])) .topbar-right #submitterBtn { min-height: 32px; padding: 0 16px; font-size: 13.5px; }
  :where(:root:not([data-skin])) .topbar-right #footerEventDropdown { order: 3; margin: 0; }
  :where(:root:not([data-skin])) .topbar-right #syncStatus { order: 3; margin: 0 auto 0 0; }
  :where(:root:not([data-skin])) .topbar-right #supportBtn { order: 3; height: 36px; padding: 0 14px; }
  :where(:root:not([data-skin])) .topbar-right #reportBtn { order: 3; height: 36px; padding: 0 14px; }
  :where(:root:not([data-skin])) .topbar-right .contact-share-actions { order: 3; flex-direction: row; gap: 8px; }
  :where(:root:not([data-skin])) .topbar-right .contact-share-icon { width: auto; height: 36px; min-height: 36px; padding: 0 12px; gap: 6px; }
  :where(:root:not([data-skin])) .topbar-right .contact-share-icon .mobile-action-label { display: inline; font-size: 13.5px; }
}

/* 5. Sprungziele ------------------------------------------------------------------------------------------ */
@media (min-width: 1280px) {
  :where(:root:not([data-skin])) { scroll-padding-top: 136px; }
}