/*
 * KURTH GlasERP – Angebots- & Auftragserfassung UI Theme
 * Ziel: ruhige Premium-Oberfläche nach KURTH CI/CD, passend zu GlasERP v9.7.0.
 * Diese Datei wird NACH styles.css und order-workspace.css eingebunden.
 *
 * Verwendet vorhandene KURTH-Assets:
 *   /kurth-mark.png             – KURTH-Bildmarke oben in der Navigation, per CSS auf Weiss invertiert
 *   /glas-trifft-design.png     – Bildmarke «glas trifft design.» unten in der Navigation (Original, verkleinert)
 *   /kurth-logo.png             – originale Kombimarke (Anmeldeseite)
 *   /kurth-sidebar-mountain.png – optionale Schwarz-Weiss-Berggrafik unten in der Navigation (Rückfall)
 *   /kurth-sidebar-mountain.webp – dieselbe Grafik in 724 px für Browser mit image-set
 */

:root {
  --kurth-black: #000000;
  --kurth-graphite: #1a1a1a;
  --kurth-mid-grey: #8c8c8c;
  --kurth-light-grey: #d9d9d9;
  --kurth-glass: #f2f2f2;
  --kurth-white: #ffffff;

  --bg: #f5f5f4;
  --surface: #ffffff;
  --surface2: #fafafa;
  --ink: #111111;
  --muted: #5f646b;   /* v10: 4.26:1 → 5.97:1 auf Weiss (Layout-Befund 4) */
  --line: #e4e4e4;
  --line2: #d8d8d8;
  --accent: #000000;
  --accent-dark: #000000;
  --radius: 7px;
  --r: 7px;
  --shadow: 0 10px 30px rgba(0,0,0,.045);
}

html,
body,
button,
input,
select,
textarea {
  font-family: "League Spartan", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

body {
  background: var(--kurth-glass);
  color: var(--kurth-black);
}

/* ========================================================================== */
/* ERP SHELL                                                                  */
/* ========================================================================== */

@media (min-width: 901px) {
  .app:not(.no-nav) {
    --sidebar: 222px;
    grid-template-columns: 222px minmax(0, 1fr);
  }

  .app:not(.no-nav) .sidebar {
    width: 222px;
  }

  .app:not(.no-nav) .brand-copy,
  .app:not(.no-nav) .nav-label,
  .app:not(.no-nav) .profile-copy {
    opacity: 1;
    transform: none;
  }

  .app:not(.no-nav) .nav-section {
    height: auto;
    padding: 12px 13px 4px;
  }

  .app:not(.no-nav) .nav-divider {
    display: none;
  }
}

.sidebar {
  isolation: isolate;
  background: linear-gradient(180deg, #080909 0%, #111313 58%, #090a0a 100%);
  border-right: 1px solid #202020;
}

.sidebar > * {
  position: relative;
  z-index: 2;
}

/* Die im ERP vorhandene Original-Kombimarke wird als echtes Bild benutzt – nicht nachgebaut. */
.brand {
  position: relative;
  height: 112px;
  padding: 0;
  flex: 0 0 112px;
}

.brand::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 22px;
  top: 22px;
  height: 52px;
  /* Fabian 9.10.2026: oben «nur logo» – die KURTH-Bildmarke; «glas trifft design.» steht unten (.side-bottom::before) */
  background: url("kurth-mark.png") left center / contain no-repeat;
  filter: invert(1);
  transform-origin: left center;
  pointer-events: none;
}

.brand-mark,
.brand-copy {
  display: none !important;
}

#nav-toggle {
  display: none !important;
}

.nav {
  /* Nachprüfung 9.10.2026 (Aufmass, Seitenleiste 1280×800): der Fuss (.side-bottom) steht jetzt im Fluss der Spalte (unten, margin-top:auto),
     nicht mehr absolut über dem Menü – bei 800 px Höhe verdeckte er den letzten Menüpunkt «Stammdaten» um 15 px. Das Menü braucht darum
     unten keinen Platzhalter von 262 px mehr; wird es länger als der Platz, rollt es (overflow-y: auto, min-height: 0). */
  padding: 4px 0 12px;
  min-height: 0;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: #343434 transparent;
}

.nav-item {
  position: relative;
  min-height: 42px;
  height: 42px;
  padding: 0 22px;
  gap: 13px;
  border-radius: 0;
  color: #dedede;
  font-weight: 450;
  background: transparent;
}

.nav-item:hover {
  color: #ffffff;
  background: rgba(255,255,255,.055);
}

.nav-item.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  font-weight: 550;
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: #ffffff;
}

.nav-icon,
.nav-icon svg {
  width: 19px;
  height: 19px;
}

.nav-section {
  color: #737373;
}

/* Bildsprache unten in der Navigation. Ohne Datei bleibt die Fläche einfach schwarz. */
.sidebar::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 245px;
  /* Version 10: scharf auf hochauflösenden Bildschirmen als WebP 724 px (54 KB); Browser ohne image-set mit Typangabe
     behalten die erste Angabe (PNG 400 px). */
  background:
    linear-gradient(180deg, #090a0a 0%, rgba(9,10,10,.25) 28%, rgba(9,10,10,.18) 100%),
    url("kurth-sidebar-mountain.png") center 67% / cover no-repeat;
  background:
    linear-gradient(180deg, #090a0a 0%, rgba(9,10,10,.25) 28%, rgba(9,10,10,.18) 100%),
    image-set(url("kurth-sidebar-mountain.webp") type("image/webp"), url("kurth-sidebar-mountain.png") type("image/png")) center 67% / cover no-repeat;
  opacity: .88;
  pointer-events: none;
}

.side-bottom {
  /* Nachprüfung 9.10.2026: im Fluss der Spalte ganz unten (margin-top: auto) statt absolut – kein Überlappen mit dem Menü;
     der Verlauf über der Berggrafik (.sidebar::after, absolut, z-index 0) bleibt gleich */
  position: relative;
  z-index: 3;
  margin-top: auto;
  flex: 0 0 auto;
  padding: 0 22px 18px;
  border: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.86) 32%, #050606 100%);
}

/* Fabian 9.10.2026: unten «glas trifft design.» (Original-Bildmarke, nie mit Schrift nachgebaut) statt «Global ideas. Swiss glass craft.» */
.side-bottom::before {
  content: "";
  display: block;
  width: 86px;
  height: 73px;
  background: url("glas-trifft-design.png") left bottom / contain no-repeat;
  filter: invert(1);
  margin: 0 0 12px;
}

.side-bottom::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  background: rgba(255,255,255,.85);
  margin-top: 11px;
}

/* v9.9.1 – VERSION, BENUTZER UND DIE BEIDEN AKTIONEN SIND WIEDER DA.
   Seit 9.7.2 stand hier «display:none» für den ganzen unteren Block. Mit ihm verschwanden am
   Desktop drei Dinge, die es nur hier gab: die laufende Versionsnummer (aus /api/version –
   sie ist der erste Blick bei jedem Update und bei jeder Störungsmeldung), «PIN ändern» und
   «Abmelden». Unter 760 px waren sie weiterhin eingeblendet, also fiel es dort nie auf.
   Sie stehen jetzt über dem Markenclaim, hell auf der Berggrafik, und bleiben so ruhig, dass
   sie das Bild nicht stören. Die Reihenfolge macht flex/order: erst wer angemeldet ist,
   dann was er tun kann, dann die Marke. */
.side-bottom {
  display: flex;
  flex-direction: column;
}

.side-bottom::before { order: 3; }
.side-bottom::after  { order: 4; }

.side-bottom .profile {
  order: 1;
  display: flex;
  min-height: 0;
  padding: 0;
  margin: 0 0 10px;
  gap: 10px;
  color: var(--kurth-white);
}

.side-bottom .profile .avatar {
  width: 27px;
  height: 27px;
  font-size: 10.5px;
  background: rgba(255, 255, 255, .92);
}

.side-bottom .profile-copy {
  opacity: 1;
  min-width: 0;
}

.side-bottom .profile-name {
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.25;
  color: var(--kurth-white);
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-bottom .profile-role {
  margin-top: 1px;
  font-size: 10.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .66);
  white-space: normal;
}

/* Untereinander statt nebeneinander: in 222 px Seitenleiste passt «PIN ändern» und
   «Abmelden» nicht in eine Zeile, ohne dass beide abgeschnitten werden. */
.side-bottom .side-actions {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 14px;
}

.side-bottom .side-actions .side-link {
  width: 100%;
  height: 30px;
  min-width: 0;
  padding: 0 10px;
  gap: 9px;
  justify-content: flex-start;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 6px;
  background: rgba(0, 0, 0, .28);
  color: rgba(255, 255, 255, .88);
  font-size: 11.5px;
}

.side-bottom .side-actions .side-link:hover {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(0, 0, 0, .5);
  color: var(--kurth-white);
}

.side-bottom .side-actions .nav-icon {
  width: auto;
  min-width: 0;
  font-size: 12px;
}

.side-bottom .side-actions .nav-label {
  opacity: 1;
  transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 10.1.0 Farbschema (Prüfung Runde 1): der Umschalter ◐ «Dunkel/Hell» teilt sich die letzte Zeile mit «Abmelden» – so bleibt der Fuss
   so hoch wie in 9.81.7 und verdeckt bei 1366×768 keinen Menüpunkt. Reihenfolge im HTML unverändert (◐ vor «Abmelden»). */
.side-bottom .side-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.side-bottom .side-actions > .side-link {
  grid-column: 1 / -1;
}

.side-bottom .side-actions > .side-link[data-aktion="thema"],
.side-bottom .side-actions > .side-link[data-aktion="abmelden"] {
  grid-column: auto;
  padding: 0 8px;
  gap: 6px;
}

/* Prüfung Runde 3 (mittel): in der schmalen Leiste (zugeklappt, ab 761 px; Tablet hochkant 60–76 px breit) überlappten sich ◐ und «Abmelden» –
   dort wieder je eine eigene Zeile wie in 9.81.7. */
@media (min-width: 761px) {
  .app:not(.expanded) .side-bottom .side-actions { grid-template-columns: minmax(0, 1fr); }
  .app:not(.expanded) .side-bottom .side-actions > .side-link[data-aktion="thema"],
  .app:not(.expanded) .side-bottom .side-actions > .side-link[data-aktion="abmelden"] { grid-column: 1 / -1; padding: 0 10px; gap: 9px; }
}

.topbar {
  height: 62px;
  padding: 0 24px;
  gap: 14px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #e8e8e8;
  backdrop-filter: blur(14px);
  box-shadow: none;
}

.page-title,
.top-tagline {
  display: none;
}

.search {
  order: 1;
  flex: 0 1 420px;
  max-width: 420px;
  height: 38px;
  border-radius: 999px;
  background: #f5f5f5;
  border: 1px solid #f0f0f0;
  padding: 0 14px;
}

.search:focus-within {
  border-color: #cfcfcf;
  box-shadow: 0 0 0 3px rgba(0,0,0,.025);
}

.search input {
  font-size: 13px;
}

.kbd-hint {
  display: none;
}

.top-actions {
  order: 2;
  margin-left: auto;
}

.content {
  padding: 18px 24px 28px;
}

#view {
  width: 100%;
  max-width: 1600px;
}

/* ========================================================================== */
/* ANGEBOT / AUFTRAG – OVERVIEW                                              */
/* ========================================================================== */

.wk-workspace {
  --wk-border: #e0e0e0;
  --wk-muted: #5f646b;   /* v10 Layout-Befund 4: Hilfstext ≥ 4.5:1 */
  font-family: "League Spartan", Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #111111;
  font-size: 13.5px;
  line-height: 1.42;
}

.wk-workspace h1,
.wk-workspace h2,
.wk-workspace h3 {
  letter-spacing: -.02em;
}

.wk-header {
  align-items: flex-end;
  margin-bottom: 14px;
}

.wk-eyebrow {
  margin-bottom: 6px;
  color: #65686c;
  font-size: 11.5px;
  letter-spacing: .035em;
  font-weight: 500;
}

.wk-workspace h1 {
  font-size: 31px;
  line-height: 1.05;
  font-weight: 650;
  letter-spacing: -.045em;
}

.wk-doc-badge {
  position: relative;
  top: -2px;
  border: 1px solid #d9d9d9;
  background: #f5f5f5;
  color: #4c4c4c;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11.5px;
}

.wk-header p {
  margin-top: 7px;
  color: #7a7d80;
  font-size: 12.5px;
}

.wk-header-actions {
  gap: 8px;
}

.wk-workspace button,
.wk-workspace input,
.wk-workspace select,
.wk-workspace textarea {
  border-radius: 6px;
}

.wk-workspace button {
  min-height: 36px;
  padding: 7px 12px;
  font-weight: 500;
}

.wk-workspace .btn-primary {
  background: #060707;
  color: #ffffff;
  border: 1px solid #060707;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

.wk-workspace .btn-primary:hover {
  background: #000000;
}

.wk-workspace .btn-secondary {
  background: #ffffff;
  color: #222222;
  border: 1px solid #dfdfdf;
}

.wk-workspace .btn-secondary:hover {
  background: #f6f6f6;
  border-color: #cdcdcd;
}

/* Arbeitsschritte werden zur ruhigen Segmentnavigation. */
.wk-steps {
  width: max-content;
  min-width: 470px;
  max-width: 100%;
  margin: -52px 0 16px 365px;
  border: 0;
  border-radius: 7px;
  background: #f2f2f2;
  overflow: hidden;
}

.wk-steps button {
  min-width: 190px;
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-right: 1px solid #e2e2e2;
  background: #f2f2f2;
}

.wk-steps button b {
  display: none;
}

.wk-steps button.active {
  background: #070808;
  color: #ffffff;
}

.wk-steps > span {
  display: none;
}

.wk-info-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.wk-card {
  border: 1px solid #dfdfdf;
  border-radius: 7px;
  background: #ffffff;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.018);
}

.wk-card.ausgabe-karte { scroll-margin-top: 12px; }   /* Karte «Ansehen, drucken, senden» (public/order-workspace.js); bis 10.5.6 nur im Dunkelthema gestaltet */
.wk-card > h2 {
  min-height: 29px;
  padding: 0 0 9px;
  margin-bottom: 8px;
  border-bottom: 1px solid #eeeeee;
  font-size: 15px;
  font-weight: 650;
}

.wk-card h2 a,
.wk-card h2 > span {
  color: var(--wk-muted);
  font-size: 12px;
}

.wk-field {
  margin: 6px 0;
  gap: 12px;
  font-size: 12.5px;
}

.wk-field > span {
  color: var(--wk-muted);
}

.wk-field > b {
  color: #202124;
  font-weight: 500;
}

.wk-address {
  color: #666a6e;
}

.wk-caption {
  color: #7b7e82;
}

/* Der vierte Block ist die visuelle Angebots-/Auftragsübersicht. Bis 10.5.7 eine schwarze Karte mit weisser Schrift – seit 10.5.8
   hell mit kräftigem schwarzem Rahmen (Fabian 1.11.2026: alles Schwarz auf Weiss; Layoutprüfung 1.11.2026, Befund 8). */
.wk-info-grid > .wk-card:nth-child(4) {
  position: relative;
  color: var(--ink, #111);
  background: #ffffff;
  border: 2px solid #111;
  box-shadow: none;
}

.wk-info-grid > .wk-card:nth-child(4) > h2 {
  color: #111;
  border-bottom-color: #111;
}

.wk-info-grid > .wk-card:nth-child(4) .wk-metrics {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 14px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line, #e6e8eb);
}

.wk-info-grid > .wk-card:nth-child(4) .wk-metrics b {
  color: #111;
  font-size: 20px;
  font-weight: 600;
}

.wk-info-grid > .wk-card:nth-child(4) .wk-metrics span,
.wk-info-grid > .wk-card:nth-child(4) .wk-field > span {
  color: var(--muted, #5f646b);
}

.wk-info-grid > .wk-card:nth-child(4) .wk-field > b {
  color: #111;
}

.wk-info-grid > .wk-card:nth-child(4) .wk-status.ok {
  border-color: #cce9d7;
  background: #e9f8ef;
  color: #1f6d45;
}

.wk-note {
  border: 1px solid #dedede;
  background: #fafafa;
  border-radius: 6px;
}

/* Positionenkopf: wie eine saubere Werkzeugzeile direkt über der Tabelle. */
.wk-table-head {
  min-height: 48px;
  margin: 13px 0 0;
  padding: 11px 12px;
  border: 1px solid #e0e0e0;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: #ffffff;
}

.wk-table-head h2 {
  font-size: 16px;
  font-weight: 650;
}

.wk-table-head h2 small {
  color: #55585b;
  background: #f0f0f0;
  border-radius: 999px;
  font-size: 11px;
}

.wk-table-head > div > span {
  color: var(--wk-muted);
  font-size: 12px;
}

.wk-table-tools {
  gap: 7px;
}

.wk-table-tools > input {
  width: 230px !important;
  height: 34px;
  border-color: #e1e1e1;
  background: #fbfbfb;
}

.wk-table-tools label {
  color: #6f7275;
  font-size: 11.5px;
}

.wk-list-layout {
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 12px;
}

.wk-table-scroll {
  min-height: 310px;
  border: 1px solid #e0e0e0;
  border-radius: 0 0 7px 7px;
  box-shadow: none;
}

.wk-table {
  min-width: 900px;
}

.wk-table th {
  height: 37px;
  padding: 8px 9px;
  color: #66696c;
  background: #f7f7f7;
  border-bottom: 1px solid #dddddd;
  font-size: 11px;
  font-weight: 550;
}

.wk-table td {
  height: 48px;
  padding: 8px 9px;
  border-bottom: 1px solid #eeeeee;
  color: #2b2d2f;
  font-size: 12.5px;
}

.wk-table tbody tr:hover {
  background: #f7f7f7;
}

.wk-table tr.selected {
  background: #f4f4f4;
}

.wk-table tr.selected td:first-child {
  box-shadow: inset 2px 0 #000000;
}

/* v9.9.1a: Hier stand eine FESTE Breite von 27 px, und die allgemeine Knopfregel weiter
   oben (.wk-workspace button) gab 36 px Höhe, 12 px Innenabstand und 13 px Schrift dazu.
   Sobald order-workspace.css am breiten Bildschirm die Beschriftung einblendet
   («Bearbeiten», «Duplizieren», «Löschen»), brauchte ein Knopf damit rund 107 px – die
   Knopfreihe ist aber ein Flex-Element und drückte ihn auf die vorhandene Breite zusammen.
   Der Inhalt passte nicht mehr hinein: das Symbol stand links neben dem Kästchen, die
   Schrift rechts daraus hervor. Darum hier mit derselben Gewichtung wie die allgemeine
   Regel: kompakter, und vor allem NICHT mehr zusammendrückbar (flex-shrink: 0) – lieber
   bleiben die Knöpfe gleich gross und die Spalte wird breiter, als dass sie überlaufen. */
.wk-workspace .wk-zeilen-knopf {
  width: auto;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  flex: 0 0 auto;
  padding: 0 8px;
  gap: 5px;
  border-radius: 5px;
  border-color: #dedede;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}

.wk-workspace .wk-zeilen-knopf svg {
  width: 15px;
  height: 15px;
}

.wk-quick {
  border-radius: 7px;
  border-color: #dfdfdf;
  padding: 12px;
}

.wk-quick-sketch {
  background-color: #fbfbfb;
  background-image:
    linear-gradient(#efefef 1px, transparent 1px),
    linear-gradient(90deg,#efefef 1px,transparent 1px);
  background-size: 20px 20px;
  border-color: #e8e8e8;
}

.wk-summary {
  margin: 11px 0;
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 7px;
  background: #ffffff;
}

.wk-summary b {
  color: #202020;
}

.wk-summary .wk-grand b {
  color: #000000;
  font-size: 21px;
}

.wk-actions {
  border-color: #dfdfdf;
  border-radius: 7px;
  box-shadow: none;
}

/* ========================================================================== */
/* TECHNISCHE POSITION                                                        */
/* ========================================================================== */

.wk-technical .wk-card,
.wk-drawing,
.wk-panel,
.wk-savebar {
  border-color: #dfdfdf;
  border-radius: 7px;
  box-shadow: none;
}

.wk-canvas {
  background-color: #fbfbfb;
  background-image:
    linear-gradient(#ededed 1px, transparent 1px),
    linear-gradient(90deg,#ededed 1px,transparent 1px);
}

.wk-weg {
  min-height: 66px;
  border: 1px solid #dfdfdf;
  border-radius: 7px;
  background: #ffffff;
}

.wk-weg:hover {
  background: #fafafa;
  border-color: #c7c7c7;
}

.wk-weg.gewaehlt {
  background: #f4f4f4;
  border-color: #111111;
  box-shadow: inset 0 0 0 1px #111111;
}

.wk-panel-tab.active,
.wk-productbar .chip.active {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}

/* ========================================================================== */
/* FORM STATES                                                                */
/* ========================================================================== */

.wk-workspace input,
.wk-workspace select,
.wk-workspace textarea,
.wk-edit-field > input,
.wk-edit-field > select {
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #161616;
}

.wk-workspace input:focus,
.wk-workspace select:focus,
.wk-workspace textarea:focus,
.wk-edit-field > input:focus,
.wk-edit-field > select:focus {
  border-color: #9d9d9d;
  outline: 2px solid rgba(0,0,0,.08);
  box-shadow: none;
}

.wk-status {
  border-radius: 999px;
  padding: 4px 8px;
}

/* Kein knalliges Blau im KURTH-Theme. */
.wk-workspace button:focus-visible,
.wk-workspace tr:focus-visible,
.wk-weg:focus-visible,
.wk-zeilen-knopf:focus-visible {
  outline: 2px solid #4b4b4b;
  outline-offset: 2px;
}

/* ========================================================================== */
/* RESPONSIVE                                                                 */
/* ========================================================================== */

@media (max-width: 1350px) {
  .wk-steps {
    width: 100%;
    min-width: 0;
    margin: 0 0 14px;
  }

  .wk-info-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .wk-info-grid > .wk-card:nth-child(4) {
    min-height: 210px;
  }
}

@media (max-width: 1000px) {
  .wk-list-layout {
    grid-template-columns: 1fr;
  }

  .wk-quick {
    display: none;
  }
}

@media (max-width: 760px) {
  .sidebar::after,
  .side-bottom::before,
  .side-bottom::after {
    display: none;
  }

  .side-bottom {
    position: static;
    padding: 10px;
    background: none;
  }

  /* v9.9.1: Auf schmalen Geräten gibt es die Berggrafik nicht – der Block steht dort im
     normalen Fluss. Benutzer und Aktionen behalten ihre Anordnung, nur ohne die helle
     Schrift auf dunklem Bild. */
  .side-bottom .profile {
    margin-bottom: 8px;
  }

  .side-bottom .side-actions {
    margin-bottom: 0;
  }

  .brand {
    height: 100px;
    flex-basis: 100px;
  }

  .brand::before {
    left: 22px;
    right: 28px;
    top: 17px;
    height: 66px;
  }

  .content {
    padding: 13px 11px 22px;
  }

  .wk-header {
    align-items: flex-start;
  }

  .wk-workspace h1 {
    font-size: 26px;
  }

  .wk-info-grid {
    grid-template-columns: 1fr;
  }

  .wk-steps button {
    min-width: 0;
    flex: 1 1 50%;
  }

  .wk-table-head {
    border-bottom: 1px solid #e0e0e0;
    border-radius: 7px;
  }
}

/* ========================================================================== */
/* v9.7.1 – DRUCKBEFEHLE DIREKT IN DER KOPFZEILE                            */
/* ========================================================================== */
.wk-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  max-width: min(72%, 920px);
}

.wk-print-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}

.wk-print-label {
  margin-right: 2px;
  color: var(--wk-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
}

.wk-workspace .wk-print-btn {
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #ffffff;
  color: #171717;
  box-shadow: none;
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
}

.wk-workspace .wk-print-btn:hover {
  border-color: #8c8c8c;
  background: #f2f2f2;
}

@media (max-width: 1100px) {
  .wk-header-right { max-width: 62%; }
}

@media (max-width: 700px) {
  .wk-header-right {
    width: 100%;
    max-width: none;
    align-items: flex-start;
  }
  .wk-header-actions,
  .wk-print-actions { justify-content: flex-start; }
  .wk-print-label { flex-basis: 100%; margin-bottom: 1px; }
}

/* ==========================================================================
   NACHTRAG GlasERP 9.7.2 – zwei Stellen, an denen das Theme eine Zusicherung
   der Anwendung aufgehoben hat. Beides sind keine Geschmacksfragen, sondern
   Regeln, die aus dem Betrieb kamen und die Prüfungen festhalten:

   1. Der Ctrl-K-Hinweis in der Suche. Die Tastenkombination funktioniert
      weiterhin – aber niemand findet sie, wenn sie nirgends steht. Der Hinweis
      kommt zurück, ruhig gehalten im Grau des Themes statt als Kontrast.
   2. Spaltenköpfe der Tabellen. 11 px sind auf einem Werkstattbildschirm
      zu klein; die Untergrenze von 12 px steht seit der Kopfkarten-Prüfung
      fest und gilt weiter.
   Die übrigen Entscheidungen des Themes bleiben unangetastet.
   ========================================================================== */
.kbd-hint {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  background: #ffffff;
  color: #8a8d90;
  font-size: 11px;
  padding: 2px 6px;
  margin-left: 8px;
}

.wk-table th {
  font-size: 12px;
}

/* ========================================================================== */
/* KURTH CAD                                                                  */
/* ========================================================================== */
/* v9.9.1 – Die CAD-Auflage gehört zur Auftragserfassung, nicht zu einem fremden Fenster.
   Sie hatte eine eigene Kopfleiste mit eigenem Grau (#f5f6f7) und einer eigenen Randfarbe
   (#cdd2d8); der Editor dahinter wiederum eine dritte Abstufung. Nebeneinander gestellt sah der
   Wechsel aus dem Auftrag ins CAD nach einem Programmwechsel aus. Hier gelten dieselben Werte
   wie für die ERP-Kopfzeile – Fläche, Linie, Knopfmasse, Schrift.
   Der Editor selbst zieht dieselben Werte aus src/cad/editor.html; beide Seiten stehen
   absichtlich auf denselben Zahlen, damit sie zusammen geändert werden. */
.entry-cad-overlay {
  background: var(--kurth-glass);
}

.entry-cad-header {
  padding: 13px 24px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #e8e8e8;
}

.entry-cad-header b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--kurth-black);
}

.entry-cad-header span {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.entry-cad-header button {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 6px;
  font-weight: 500;
}

.entry-cad-header .btn-primary {
  background: #060707;
  color: #ffffff;
  border: 1px solid #060707;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.entry-cad-header .btn-primary:hover:not(:disabled) {
  background: #000000;
}

.entry-cad-header .btn-secondary {
  background: #ffffff;
  color: #222222;
  border: 1px solid #dfdfdf;
}

.entry-cad-header .btn-secondary:hover:not(:disabled) {
  background: #f6f6f6;
  border-color: #cdcdcd;
}

.entry-cad-zeiten-lasche {
  background: #f6f6f6;
  border-left: 1px solid #e8e8e8;
  color: #3f4448;
}

.entry-cad-zeiten-lasche:hover {
  background: #ededed;
}

.entry-cad-times {
  border-left: 1px solid #e8e8e8;
}

/* v9.10.0: Touch – Zeilenknöpfe der Positionsliste mindestens 44 px (steht hier, weil diese Datei
   nach styles.css lädt und die Desktop-Höhe von 30 px sonst gewinnt). */
@media (pointer: coarse) {
  .wk-workspace .wk-zeilen-knopf { min-height: 44px; height: 44px; min-width: 44px; padding: 0 12px; font-size: 13px; }
  .wk-workspace .wk-zeilen-knopf svg { width: 18px; height: 18px; }
  .wk-workspace .wk-zeilen-aktionen-kopf { width: 340px; }
}
@media (pointer: coarse) {
  .wk-workspace button, .wk-workspace .btn-secondary, .wk-workspace .btn-primary { min-height: 44px; }
  .wk-workspace .wk-print-btn { min-height: 44px; padding: 8px 12px; font-size: 13px; }
  .wk-workspace input, .wk-workspace select { min-height: 44px; font-size: 16px; }
}

/* Nachprüfung 9.10.2026 (Aufmass, Seitenleiste 1280×800): bei wenig Höhe passen Bildmarke, neun Menüpunkte und der Fuss («Profil», «PIN ändern»,
   «2-Faktor», «Abmelden», «glas trifft design.») ohne Rollen untereinander – Menüpunkte 38 statt 44 px, der Claim etwas kleiner. */
@media (min-width: 901px) and (max-height: 860px) {
  .nav { gap: 1px; }
  .nav-item { min-height: 38px; height: 38px; }
  .side-bottom .profile { margin-bottom: 8px; }
  .side-bottom .side-actions { gap: 4px; margin-bottom: 10px; }
  .side-bottom::before { height: 60px; margin-bottom: 8px; }
  .side-bottom::after { margin-top: 8px; }
}
/* 31.10.2026 (Menü «KI-Arbeiten», zehn Menüpunkte): bei 768 px Höhe (1366×768) rollte das Menü, «Stammdaten» lag halb unter dem Fuss.
   Bis 800 px Höhe Menüpunkte 34 px und die Wortmarke im Fuss etwas kleiner – alle Punkte frei klickbar (test/thema-browser.py L3). */
@media (min-width: 901px) and (max-height: 800px) {
  .nav { padding-bottom: 4px; }
  .nav-item { min-height: 34px; height: 34px; }
  .side-bottom::before { height: 48px; }
}
/* Erfassung schneller, Stufe 1 (29.10.2026): Glas der Position im Kopf des CAD; noch nicht gewählt = deutlich */
.entry-cad-header .entry-cad-glas { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; }
.entry-cad-header .entry-cad-glas:empty { display: none; }
/* 31.10.2026: Originalvorlage zum Platzhalter «Ausbruch klären» – rechts im CAD-Fenster unter der Kopfleiste (position-entry.js vorlageZeigen) */
.entry-cad-vorlage { position: absolute; right: 0; bottom: 0; top: 0; width: min(42vw, 820px); z-index: 5; }
.entry-cad-vorlage .ak-ansicht { position: absolute; inset: 0; width: auto; }
.entry-cad-header .entry-cad-glas.offen { color: var(--red, #b42318); }