/* ==========================================================
   Lagerverwaltung – Stylesheet
   Farb-/Gestaltungsschema orientiert an der bestehenden
   Admin-Oberfläche (dunkles Petrol-Grün, cremefarbener Hintergrund,
   weiße abgerundete Karten, pillenförmige Buttons).
   ========================================================== */

:root {
  --color-primary: #2c5657;
  --color-primary-dark: #1f4041;
  --color-primary-light: #3f7273;
  --color-bg: #f5f2ec;
  --color-card: #ffffff;
  --color-border: #e6e1d6;
  --color-text: #201f1c;
  --color-text-muted: #6f6b62;
  --color-danger: #a8433d;
  --color-danger-dark: #8a3631;

  --status-offen-bg: #e4f2e6;
  --status-offen-fg: #2c6b3a;
  --status-verkauft-bg: #e2eeee;
  --status-verkauft-fg: #2c5657;
  --status-extern-bg: #f7ead2;
  --status-extern-fg: #93611a;
  --status-bestellt-bg: #ebe6f5;
  --status-bestellt-fg: #5b3f9c;
  --status-ausgeliefert-bg: #e3ecf7;
  --status-ausgeliefert-fg: #2c5a8f;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(32, 31, 28, 0.04), 0 1px 8px rgba(32, 31, 28, 0.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }

/* ---------------- Topbar ---------------- */
.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #3d7071 0%, #1f4344 100%);
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-center { display: flex; justify-content: center; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 12px; justify-self: end; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  background: rgba(255,255,255,0.14);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.icon-btn:hover { background: rgba(255,255,255,0.24); }

.logo-box {
  display: flex;
  align-items: center;
  height: 42px;
  flex: none;
}
.logo-box img { height: 42px; width: auto; max-width: 240px; object-fit: contain; }
.logo-fallback {
  display: none;
  align-items: center;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
}

.topbar-betrieb {
  display: flex;
  align-items: center;
  flex: none;
  height: 42px;
  padding: 0 16px;
  background: rgba(255,255,255,0.14);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.92);
  border-radius: var(--radius-pill);
  padding: 0 18px;
  height: 42px;
  width: 100%;
  max-width: 620px;
  color: var(--color-text-muted);
}
.topbar-search input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
}
.topbar-search svg { flex: none; opacity: 0.7; }

.topbar-icons { display: flex; gap: 10px; flex: none; }

/* ---------------- Sidebar ---------------- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: #fff;
  border-right: 1px solid var(--color-border);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  z-index: 50;
  overflow-y: auto;
}
.sidebar.open { transform: translateX(0); }

.sidebar-user { padding: 10px 12px 16px; }
.sidebar-user-name { font-weight: 700; }
.sidebar-user-role { font-size: 13px; color: var(--color-text-muted); }

.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: 500;
  font-size: 14px;
}
.sidebar a:hover { background: var(--color-bg); }

/* ---------------- Türkiser Punkt vor jedem Menüpunkt ----------------
   Gilt fuer alle Eintraege der Seitenleiste, auch fuer die
   Klapp-Menuepunkte und deren Untereintraege. Rein dekorativ, deshalb
   ueber ::before und nicht als Zeichen im Text - Screenreader lesen
   ihn dadurch nicht mit vor. */
.sidebar a::before,
.nav-flyout-trigger::before,
.nav-flyout-item::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary-light);
  opacity: 0.85;
}

/* Die Klapp-Menuepunkte bestehen aus Text und Pfeil. Der Text nimmt den
   freien Platz ein, dadurch bleibt der Pfeil rechts und der Punkt klebt
   am Text. Die Ausrichtung selbst steht weiter unten bei den beiden
   Definitionen - hier stand sie frueher auch, wurde von dort aber
   ueberschrieben und blieb wirkungslos. */
.nav-flyout-trigger > span,
.nav-flyout-item > span { flex: 1 1 auto; }

/* Untereintraege sitzen eine Ebene tiefer und bekommen einen etwas
   kleineren Punkt. */
.nav-flyout-item::before { width: 6px; height: 6px; opacity: 0.7; }
.sidebar-divider { height: 1px; background: var(--color-border); margin: 10px 4px; }

/* Menuepunkt mit Flyout-Untermenue (z.B. "Reifen / Räder") */
.nav-flyout-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}
.nav-flyout-trigger:hover { background: var(--color-bg); }
.nav-flyout-trigger.active,
.nav-flyout-trigger.is-open { color: var(--color-primary); font-weight: 700; }
.nav-flyout-trigger.is-open { background: var(--color-bg); }

.nav-caret { flex: none; opacity: 0.55; }

/* Die Flyout-Ebenen werden per JavaScript positioniert (position: fixed),
   damit sie nicht vom Scrollbereich der Sidebar abgeschnitten werden. */
.nav-flyout-panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 210px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 34px rgba(32, 31, 28, 0.16);
}
.nav-flyout-panel.open { display: flex; }

.nav-flyout-item {
  display: flex;
  align-items: center;
  /* flex-start, nicht space-between: Untereintraege bestehen nur aus
     Punkt und Text. "space-between" schiebt den Text ans rechte Ende,
     waehrend alle uebrigen Menuepunkte links stehen. Bei den Eintraegen
     mit Pfeil bleibt der Pfeil trotzdem rechts - dafuer sorgt das
     "flex: 1 1 auto" am span weiter oben. */
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.nav-flyout-item:hover { background: var(--color-bg); }
.nav-flyout-item.active,
.nav-flyout-item.is-open { color: var(--color-primary); font-weight: 700; }
.nav-flyout-item.is-open { background: var(--color-bg); }

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 24, 0.35);
  z-index: 45;
  display: none;
}
.sidebar-overlay.open { display: block; }

/* ---------------- Content / page header ---------------- */
/* Der Hauptbereich nutzt die volle Bildschirmbreite - Listen und
   Tabellen bekommen dadurch den Platz, den der Monitor hergibt. Die
   Polsterung bleibt, damit nichts am Rand klebt.
   Einzelne schmale Karten (kleine Formulare, Anmeldung, Druckbogen)
   behalten ihre eigene Begrenzung: ein zweispaltiges Formular ueber die
   ganze Breite waere schlechter zu bedienen, nicht besser. */
.content { width: 100%; margin: 0; padding: 28px 24px 60px; }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.page-eyebrow { color: var(--color-text-muted); font-size: 14px; margin-bottom: 4px; }
.page-title { font-size: 30px; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary { background: #fff; color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { background: var(--color-bg); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: var(--color-danger-dark); }
.btn-ghost { background: transparent; color: var(--color-text-muted); border-color: transparent; padding: 8px 12px; }
.btn-ghost:hover { background: var(--color-bg); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------------- Stat cards ---------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.stat-card a { display: block; }
.stat-label { color: var(--color-text-muted); font-size: 14px; margin-bottom: 10px; }
.stat-value { font-size: 34px; font-weight: 800; }

/* ---------------- Admin-Sammelseite ---------------- */
.admin-abschnitt { margin-bottom: 28px; }
.admin-abschnitt h2 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.admin-karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px;
  color: var(--color-text);
  transition: border-color .15s ease, transform .15s ease;
}
.admin-karte:hover {
  border-color: var(--color-primary-light);
  transform: translateY(-1px);
}
.admin-karte-titel { font-size: 17px; font-weight: 700; }
.admin-karte-text { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.5; }

/* Umwandlungswerkzeuge laufen in einem Rahmen innerhalb der Seite.
   Die Hoehe passt JavaScript an den Inhalt an; der Wert hier ist die
   Rueckfallebene, falls das nicht greift. */
.converter-karte { padding: 0; overflow: hidden; }
.converter-rahmen {
  display: block;
  width: 100%;
  height: 78vh;
  min-height: 460px;
  border: 0;
}

/* ---------------- Cards / tables ---------------- */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px;
  margin-bottom: 20px;
}
.card h2 { font-size: 18px; margin-bottom: 14px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
th { color: var(--color-text-muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #faf9f6; }

.artikel-stack { display: flex; flex-direction: column; gap: 2px; }
.artikel-stack span { white-space: nowrap; font-weight: 600; }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- Status Badges ---------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-offen    { background: var(--status-offen-bg);    color: var(--status-offen-fg); }
.badge-verkauft { background: var(--status-verkauft-bg); color: var(--status-verkauft-fg); }
.badge-extern   { background: var(--status-extern-bg);   color: var(--status-extern-fg); }
.badge-bestellt { background: var(--status-bestellt-bg); color: var(--status-bestellt-fg); }
.badge-ausgeliefert { background: var(--status-ausgeliefert-bg); color: var(--status-ausgeliefert-fg); }

/* ---------------- Status-Schnellauswahl (Dropdown im Badge-Look) ---------------- */
.status-quickform { display: inline-block; }
.badge-select {
  display: inline-flex;
  align-items: center;
  padding: 5px 26px 5px 12px;
  border-radius: var(--radius-pill);
  border: none;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23201f1c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.badge-select:focus { outline: 2px solid var(--color-primary-light); outline-offset: 2px; }

/* ---------------- Status filter tabs ---------------- */
.status-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.status-tab {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.status-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.status-tab .count { opacity: 0.75; margin-left: 4px; }

/* ---------------- Forms ---------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.form-grid.cols-1 { grid-template-columns: 1fr; }
@media screen and (max-width: 720px) {
  .form-grid, .form-grid.cols-4 { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field.span-2 { grid-column: span 2; }
@media screen and (max-width: 720px) { .field.span-2 { grid-column: span 1; } }

label { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.hint { font-size: 12.5px; color: var(--color-text-muted); font-weight: 400; }

input[type=text], input[type=number], input[type=date], input[type=password],
input[type=search], select, textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-text);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(63, 114, 115, 0.15);
}
input.uppercase-field { text-transform: uppercase; }
input.uppercase-field::placeholder { text-transform: none; }
textarea { resize: vertical; min-height: 80px; }

fieldset { border: none; padding: 0; margin: 0 0 22px; }
legend { font-size: 15px; font-weight: 700; padding: 0 0 10px; }

.form-actions { display: flex; gap: 10px; margin-top: 6px; }

/* Artikelnummer + Bildvorschau Layout */
.artikel-bild-layout { display: grid; grid-template-columns: 1fr 200px; gap: 24px; align-items: start; }
@media screen and (max-width: 720px) { .artikel-bild-layout { grid-template-columns: 1fr; } }
.artikel-felder { display: flex; flex-direction: column; gap: 12px; }
.bild-vorschau {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #faf9f6;
}
.bild-vorschau img { width: 100%; height: 100%; object-fit: contain; }
.bild-vorschau .placeholder { color: var(--color-text-muted); font-size: 13px; text-align: center; padding: 12px; }

/* ---------------- Flash-Meldungen ---------------- */
.flash { padding: 13px 18px; border-radius: var(--radius-md); margin-bottom: 20px; font-size: 14px; font-weight: 500; }
.flash-erfolg { background: var(--status-offen-bg); color: var(--status-offen-fg); }
.flash-fehler { background: #fbe6e4; color: var(--color-danger-dark); }
.flash-hinweis { background: #fdf3dd; color: #7a5200; }

/* ---------------- Meta / Zuordnung ---------------- */
.meta-line { color: var(--color-text-muted); font-size: 13px; margin-top: 4px; }
.empty-state { text-align: center; padding: 50px 20px; color: var(--color-text-muted); }

/* ---------------- Login-Seite ---------------- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3d7071 0%, #1f4344 100%);
  padding: 20px;
}
.auth-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 34px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.auth-box h1 { font-size: 22px; margin-bottom: 6px; }
.auth-box p.sub { color: var(--color-text-muted); margin: 0 0 22px; font-size: 14px; }
.auth-box .field { margin-bottom: 16px; }
.auth-box .btn { width: 100%; margin-top: 6px; }

/* ---------------- Druckansicht ---------------- */
.print-sheet {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.print-sheet h1 { font-size: 22px; margin-bottom: 4px; }
.print-sheet .betrieb { color: var(--color-text-muted); margin-bottom: 24px; }
.print-block { margin-bottom: 22px; }
.print-block h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 8px; }
.print-block table { font-size: 14px; }
.print-toolbar { display: flex; justify-content: flex-end; gap: 10px; max-width: 800px; margin: 0 auto 16px; }

/* ---------------- Etikett (QR-Code) ---------------- */
.etikett-sheet { max-width: 420px; margin: 0 auto; }
.etikett-box {
  background: #fff;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.etikett-qr { width: 150px; height: 150px; }
.etikett-info { width: 100%; }
.etikett-info .artikel-stack { align-items: center; margin-bottom: 8px; }
.etikett-zeile { font-size: 14px; margin-top: 2px; }

/* ---------------- Statusverlauf ---------------- */
.verlauf-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.verlauf-liste li { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.verlauf-liste li:last-child { border-bottom: none; padding-bottom: 0; }
.verlauf-datum { color: var(--color-text-muted); min-width: 150px; }
.verlauf-wer { font-weight: 600; min-width: 120px; }
.verlauf-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------------- Rechnungsvorlage (Angebots-Ausdruck) ---------------- */
/* Grauer "Druckvorschau"-Hintergrund hinter dem weißen A4-Blatt */
body:has(.rechnung-sheet) { background: #ebebeb; }

.rechnung-sheet {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 20px;
  background: #fff;
  padding: 8mm 11mm;
  border: 1px solid #d0d0d0;
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
  color: #111;
}
.rechnung-sheet table { width: 100%; border-collapse: collapse; }
.rechnung-top { flex: 0 0 auto; }
.rechnung-bottom { margin-top: auto; flex: 0 0 auto; }

.rechnung-header-logos {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 3.8mm;
}
.rechnung-logo-left, .rechnung-logo-center, .rechnung-logo-right {
  display: table-cell;
  vertical-align: top;
  width: 33.33%;
}
.rechnung-logo-center { text-align: center; }
.rechnung-logo-left img { height: 8mm; width: auto; }
.rechnung-logo-center img { height: 16mm; width: auto; display: inline-block; }
.rechnung-logo-right { text-align: right; }
.rechnung-logo-right img { height: 8mm; width: auto; }

.rechnung-absender {
  font-size: 7pt;
  color: #555;
  border-bottom: 0.2mm solid #9e9e9e;
  padding-bottom: 1.2mm;
  margin-bottom: 6.2mm;
}

.rechnung-title-meta {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 6.4mm;
}
.rechnung-title-meta > div { display: table-cell; vertical-align: top; }
.rechnung-title-meta > div:first-child { padding-right: 5.2mm; }
.rechnung-title-meta > div:last-child { width: 102mm; }
.rechnung-kunde-block { font-size: 10.6pt; font-weight: 700; line-height: 1.15; padding-top: 4mm; }
.rechnung-kunde-ort { margin-top: 2mm; }

.rechnung-payment-note { font-size: 7.8pt; font-weight: 700; margin: 0 0 1mm; }

.rechnung-meta-table th {
  border: 0.2mm solid #b9b9b9;
  padding: 1.2mm 1.5mm;
  background: #fff;
  font-size: 6.5pt;
  line-height: 1.05;
  font-weight: 400;
  color: #535353;
  text-align: left;
  vertical-align: top;
}
.rechnung-meta-table td {
  border: 0.2mm solid #b9b9b9;
  padding: 1.5mm 1.5mm 1.3mm;
  font-size: 7.4pt;
  line-height: 1.05;
  font-weight: 700;
  vertical-align: top;
  background: #fff;
}
.rechnung-meta-table .value-strong { font-size: 9pt; }

.rechnung-fahrzeug-table { margin-bottom: 4.6mm; }
.rechnung-fahrzeug-table th {
  border: 0.2mm solid #b9b9b9;
  padding: 1.3mm 1.5mm;
  font-size: 6.35pt;
  font-weight: 400;
  color: #535353;
  text-align: left;
  white-space: nowrap;
}
.rechnung-fahrzeug-table td {
  border: 0.2mm solid #b9b9b9;
  padding: 1.7mm 1.5mm;
  font-size: 7.1pt;
  line-height: 1.05;
  height: 7.7mm;
  vertical-align: middle;
}

.rechnung-artikel-table { table-layout: fixed; margin-bottom: 0; }
.rechnung-artikel-table thead th {
  border: none;
  border-bottom: 0.2mm solid #b9b9b9;
  padding: 1.1mm 1.4mm 1.4mm;
  font-size: 7.2pt;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.rechnung-artikel-table thead th.num { text-align: right; }
.rechnung-artikel-table tbody td {
  border: none;
  border-bottom: 0.2mm solid #d2d2d2;
  padding: 1.55mm 1.4mm;
  font-size: 7.75pt;
  line-height: 1.15;
  vertical-align: top;
}
.rechnung-artikel-table tbody td.num { text-align: right; white-space: nowrap; }
.rechnung-artikel-table .col-art { width: 20%; }
.rechnung-artikel-table .col-desc { width: 38%; }
.rechnung-artikel-table .col-qty { width: 10%; }
.rechnung-artikel-table .col-price { width: 16%; }
.rechnung-artikel-table .col-total { width: 16%; }
.rechnung-artikel-table .article-no,
.rechnung-artikel-table .desc-cell { white-space: pre-line; word-break: break-word; overflow-wrap: anywhere; }
.rechnung-artikel-table .no-items { padding: 2mm 1.4mm; font-size: 7.75pt; color: #555; }

.rechnung-bild-service-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 4mm;
}
.rechnung-bild-wrap { flex: none; }
.rechnung-bild-img { width: 4cm; height: 4cm; object-fit: contain; display: block; }

.rechnung-notiz { font-size: 7.8pt; line-height: 1.2; margin-top: 3.2mm; }
.rechnung-service-note { font-size: 7.8pt; line-height: 1.1; text-align: right; }

.rechnung-summen-table th {
  border: 0.2mm solid #b9b9b9;
  padding: 1.2mm 1.5mm;
  font-size: 6.3pt;
  font-weight: 400;
  color: #535353;
  text-align: left;
  white-space: nowrap;
  background: #fff;
}
.rechnung-summen-table td {
  border: 0.2mm solid #b9b9b9;
  padding: 1.35mm 1.5mm 1.25mm;
  font-size: 9pt;
  font-weight: 700;
  white-space: nowrap;
  background: #fff;
}

.rechnung-sumline {
  font-size: 7.8pt;
  font-weight: 700;
  margin: 1.25mm 0 1mm;
  padding-bottom: 0.9mm;
  border-bottom: 0.2mm solid #b9b9b9;
}

/* Hauspreis: der ausgehandelte Endbetrag auf dem Angebot.
   Rechtsbuendig ueber der Summentabelle - dort sucht das Auge den
   Endbetrag. Der Kasten ist nur so breit wie sein Inhalt, damit er
   sich vom Rest abhebt statt eine weitere Zeile zu bilden. */
.rechnung-hauspreis {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 1.6mm;
}

.rechnung-hauspreis-kasten {
  display: inline-flex;
  align-items: baseline;
  gap: 2.5mm;
  padding: 1.2mm 2.5mm;
  border: 0.5mm solid #000;
}

.rechnung-hauspreis-titel {
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rechnung-hauspreis-betrag {
  font-size: 13pt;
  font-weight: 800;
}

.rechnung-hauspreis-zusatz {
  font-size: 7pt;
  font-weight: 400;
}

.rechnung-legal {
  display: table;
  width: 100%;
  table-layout: fixed;
  font-size: 6.2pt;
  line-height: 1.15;
  color: #444;
  margin-bottom: 2.2mm;
  padding-top: 1mm;
  border-top: 0.2mm solid #b9b9b9;
}
.rechnung-legal > div { display: table-cell; vertical-align: top; width: 50%; }
.rechnung-legal > div:first-child { padding-right: 7mm; }

.rechnung-footer-block {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-top: 1.05mm solid #111;
  padding-top: 2.25mm;
  font-size: 6.35pt;
  line-height: 1.28;
  color: #111;
}
.rechnung-footer-block > div { display: table-cell; vertical-align: top; }
.rechnung-footer-block > div:not(:last-child) { padding-right: 5.6mm; }
.rechnung-footer-block > div:nth-child(1) { width: 36%; }
.rechnung-footer-block > div:nth-child(2) { width: 31%; }
.rechnung-footer-block > div:nth-child(3) { width: 33%; }
.rechnung-footer-block strong { display: block; font-size: 6.9pt; margin-bottom: 0.65mm; font-weight: 700; }

/* ---------------- Greiferzettel (Kommissionierliste) ---------------- */
.greifer-sheet { display: block; min-height: 0; padding: 12mm 12mm 10mm; }
.greifer-tabelle tbody tr { break-inside: avoid; page-break-inside: avoid; }

.greifer-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 2px solid #111;
  padding-bottom: 3mm;
  margin-bottom: 5mm;
}
.greifer-titel { font-size: 22pt; font-weight: 800; margin: 0; letter-spacing: 0.5px; }
.greifer-betrieb { font-size: 10pt; margin-top: 1mm; }
.greifer-beleg { text-align: right; font-size: 10pt; line-height: 1.5; }

.greifer-meta { margin-bottom: 6mm; font-size: 9pt; }
.greifer-meta th {
  text-align: left;
  font-size: 7.5pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #555;
  border-bottom: 1px solid #bbb;
  padding: 0 3mm 1mm 0;
}
.greifer-meta td { padding: 1.5mm 3mm 0 0; font-size: 10pt; font-weight: 600; vertical-align: top; }

.greifer-tabelle { font-size: 10.5pt; }
.greifer-tabelle th {
  text-align: left;
  font-size: 8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #eee;
  border: 1px solid #999;
  padding: 2mm 2.5mm;
}
.greifer-tabelle td {
  border: 1px solid #999;
  padding: 3.2mm 2.5mm;
  vertical-align: middle;
}
.greifer-tabelle tbody tr:nth-child(even) td { background: #f7f7f7; }
/* Die globale Regel "tr:last-child td { border-bottom: none }" wuerde die
   Tabelle unten offen lassen - hier ist ein geschlossener Rahmen gewollt. */
.greifer-tabelle tr:last-child td { border-bottom: 1px solid #999; }
.greifer-artikelnummer { font-family: "Courier New", Courier, monospace; font-weight: 700; white-space: nowrap; }
.greifer-col-art { width: 42mm; }
.greifer-col-menge { width: 18mm; }
.greifer-col-bestand { width: 20mm; }
.greifer-col-lager { width: 26mm; }
.greifer-col-haken { width: 12mm; text-align: center; }
.greifer-menge { text-align: center; font-weight: 700; }
.greifer-haken { text-align: center; }
.greifer-tabelle .no-items { text-align: center; color: #777; font-style: italic; }

.greifer-hinweis { margin-top: 4mm; font-size: 9pt; color: #7a5200; }

.greifer-fuss {
  display: flex;
  gap: 14mm;
  margin-top: 18mm;
}
.greifer-unterschrift {
  flex: 1;
  border-top: 1px solid #111;
  padding-top: 1.5mm;
  font-size: 8.5pt;
  color: #444;
}

@media print {
  .greifer-sheet { min-height: 0; }
  .greifer-tabelle tbody tr:nth-child(even) td { background: #f7f7f7; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .greifer-tabelle th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@page { size: A4 portrait; margin: 8mm; }

@media print {
  .topbar, .sidebar, .sidebar-overlay, .print-toolbar, .page-header, .flash { display: none !important; }
  main.content { padding: 0; }
  .print-sheet { border: none; box-shadow: none; padding: 0; }
  html, body {
    width: 210mm;
    height: auto;
    background: #fff;
    margin: 0;
    padding: 0;
  }
  .rechnung-sheet {
    width: auto;
    min-height: 297mm;
    margin: 0;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .rechnung-top { flex: 0 0 auto; }
  .rechnung-bottom { margin-top: auto; flex: 0 0 auto; }
  .rechnung-sheet table, .rechnung-sheet tr, .rechnung-sheet td, .rechnung-sheet th {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

@media screen and (max-width: 720px) {
  .topbar-search, .topbar-betrieb { display: none; }
  .content { padding: 20px 14px 50px; }
  .page-title { font-size: 24px; }
  .rechnung-sheet { width: 100%; min-height: 0; padding: 5mm; }
  .rechnung-title-meta, .rechnung-title-meta > div,
  .rechnung-legal, .rechnung-legal > div,
  .rechnung-footer-block, .rechnung-footer-block > div,
  .rechnung-header-logos, .rechnung-header-logos > div {
    display: block;
    width: 100% !important;
    padding-right: 0 !important;
  }
  .rechnung-meta-table { width: 100%; }
  .rechnung-fahrzeug-table { display: block; overflow-x: auto; white-space: nowrap; }
  .rechnung-legal, .rechnung-footer-block { grid-template-columns: 1fr; }
}

/* ---------------- Dachboxverleih ---------------- */
.dbx-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.dbx-umschalter, .dbx-blaettern { display: flex; gap: 8px; }
.dbx-legende { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13.5px; }
.dbx-legende span { display: inline-flex; align-items: center; gap: 6px; }
.dbx-punkt {
  width: 14px; height: 14px; border-radius: 4px; display: inline-block;
  border: 1px solid rgba(32,31,28,.18);
}

/* Statusfarben: reserviert hellrot, Box raus hellgelb, Box zurück hellgrün */
.dbx-reserviert { background: #fbe0dd; border-color: #e3aba5; color: #7c2f28; }
.dbx-ausgegeben { background: #fbeec6; border-color: #ddc484; color: #6f5310; }
.dbx-zurueck    { background: #dcefe0; border-color: #a6cfae; color: #23592f; }
.badge.dbx-reserviert, .badge.dbx-ausgegeben, .badge.dbx-zurueck { border: none; }

.dbx-plan-karte { padding: 16px; }
.dbx-plan { overflow-x: auto; }
.dbx-raster { min-width: 720px; }
.dbx-plan-jahr .dbx-raster { min-width: 3400px; }

.dbx-zeile { display: flex; align-items: stretch; }
.dbx-zeile + .dbx-zeile { margin-top: 4px; }

.dbx-boxname {
  flex: 0 0 118px;
  display: flex; flex-direction: column; justify-content: center;
  padding-right: 10px;
  font-weight: 700; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Bleibt beim Querscrollen der Jahresansicht stehen */
  position: sticky; left: 0; z-index: 4;
  background: #fff;
  box-shadow: 1px 0 0 var(--color-border);
}
.dbx-boxname .hint { font-weight: 400; font-size: 11.5px; }

.dbx-spur { position: relative; flex: 1 1 auto; min-height: 34px; }

.dbx-tage {
  display: grid;
  grid-template-columns: repeat(var(--dbx-tage), 1fr);
  height: 100%;
  min-height: 34px;
}
.dbx-tag, .dbx-tag-kopf {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: #fff;
  min-height: 34px;
}
.dbx-tag:first-child, .dbx-tag-kopf:first-child { border-left: 1px solid var(--color-border); }
.dbx-tag { display: block; transition: background .12s; }
.dbx-tag:hover { background: var(--status-verkauft-bg); }
.dbx-tag.ist-wochenende, .dbx-tag-kopf.ist-wochenende { background: var(--color-bg); }
.dbx-tag.ist-heute, .dbx-tag-kopf.ist-heute { box-shadow: inset 0 0 0 2px var(--color-primary-light); }
.dbx-tag.ist-monatsanfang, .dbx-tag-kopf.ist-monatsanfang { border-left: 2px solid var(--color-primary-light); }

.dbx-kopfzeile .dbx-spur { min-height: 0; }
.dbx-tag-kopf {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 38px; font-size: 11px; color: var(--color-text-muted);
  border-bottom: none; background: transparent;
  position: relative;
}
.dbx-wochentag { font-size: 9.5px; text-transform: uppercase; letter-spacing: .02em; }
.dbx-tagzahl { font-weight: 700; color: var(--color-text); font-size: 12px; }
.dbx-monatsleiste { position: relative; height: 30px; }
.dbx-monatsname {
  position: absolute; top: 6px;
  display: block; overflow: hidden;
  padding-left: 6px;
  border-left: 2px solid var(--color-primary-light);
  font-size: 12px; font-weight: 700; color: var(--color-text);
  white-space: nowrap;
}

.dbx-balken {
  position: absolute; top: 3px; bottom: 3px;
  display: flex; align-items: center;
  padding: 0 8px;
  border: 1px solid;
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  overflow: hidden; white-space: nowrap;
  z-index: 2;
}
.dbx-balken:hover { filter: brightness(.96); }
.dbx-balken-text { overflow: hidden; text-overflow: ellipsis; }
.dbx-plan-jahr .dbx-balken { font-size: 11px; padding: 0 4px; }

.dbx-statusleiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.dbx-statusleiste .hint { margin-left: 8px; }

/* Mietvertrag */
.vertrag-sheet h3 { margin-bottom: 6px; }
.vertrag-parteien { display: flex; gap: 32px; }
.vertrag-parteien > div { flex: 1 1 0; line-height: 1.6; }
.vertrag-luecke {
  display: inline-block; min-width: 140px;
  border-bottom: 1px solid var(--color-text-muted);
}
.vertrag-sheet table th {
  text-align: left; font-size: 12px; color: var(--color-text-muted);
  font-weight: 600; padding: 6px 10px 6px 0; white-space: nowrap; vertical-align: top;
}
.vertrag-sheet table td { padding: 6px 24px 6px 0; font-size: 14px; }
.vertrag-hinweis { font-size: 14px; line-height: 1.5; }
.vertrag-bedingungen { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; }
.vertrag-bedingungen li { margin-bottom: 4px; }
.vertrag-fussnote { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.vertrag-unterschriften { display: flex; gap: 32px; margin-top: 28px; }
.vertrag-unterschriften > div { flex: 1 1 0; }
.vertrag-linie { border-bottom: 1px solid var(--color-text); height: 34px; }
.vertrag-beschriftung { font-size: 11.5px; color: var(--color-text-muted); margin-top: 4px; }
.vertrag-rueckgabe { margin-top: 30px; border-top: 1px dashed var(--color-border); padding-top: 16px; }

@media screen and (max-width: 700px) {
  .dbx-boxname { flex-basis: 74px; font-size: 13px; }
  .vertrag-parteien, .vertrag-unterschriften { flex-direction: column; gap: 16px; }
}

/* Angebotspositionen: Lagerort und Aufschlag */
.readonly-feld {
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: default;
}
.pos-aufschlag-zelle { text-align: center; }
/* Muss vor der display-Regel greifen: ein Klassenselektor wuerde das
   hidden-Attribut sonst uebersteuern und das Kaestchen bliebe sichtbar. */
.pos-aufschlag[hidden] { display: none; }
.pos-aufschlag {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0;
}
.pos-aufschlag input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }

/* ---------------- Hinweisleiste "automatische Abmeldung" ---------------- */
.sitzung-hinweis {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 24px);
  padding: 12px 16px;
  border-radius: 12px;
  background: #2b2b2b;
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  font-size: 14px;
}
.sitzung-hinweis[hidden] { display: none; }
.sitzung-hinweis .sitzung-text { line-height: 1.35; }
.sitzung-hinweis strong { font-variant-numeric: tabular-nums; }

/* ---------------- Erinnerungen / Fristen (Dashboard) ---------------- */
.erinnerung-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.erinnerung-karte {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.erinnerung-karte:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(32, 31, 28, 0.1);
}
.erinnerung-zahl {
  flex: none;
  min-width: 52px;
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.erinnerung-titel { font-weight: 700; font-size: 15px; }
.erinnerung-text { font-size: 13px; opacity: 0.8; margin-top: 2px; }

.erinnerung-kritisch { background: #fbe6e4; color: var(--color-danger-dark); border-color: #f2cfcb; }
.erinnerung-warnung  { background: #fdf3dd; color: #7a5200; border-color: #f0e2bf; }
.erinnerung-hinweis  { background: #e3ecf7; color: var(--status-ausgeliefert-fg); border-color: #cddef1; }

.filter-hinweis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.badge-abgelaufen { background: #fbe6e4; color: var(--color-danger-dark); }

/* ---------------- Auswertung ---------------- */
.auswertung-filter {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.auswertung-filter .field { margin: 0; }
.auswertung-filter input[type="date"] { max-width: 180px; }
.auswertung-schnellwahl { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.auswertung-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.auswertung-kopf h2 { font-size: 18px; }
.auswertung-kopf .meta-line { display: inline; font-weight: 400; }

.stat-einheit { font-size: 15px; font-weight: 500; color: var(--color-text-muted); }

/* Waagerechte Balken - bewusst ohne Diagrammbibliothek */
.balken-liste { display: flex; flex-direction: column; gap: 8px; }
.balken-zeile {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr 60px;
  align-items: center;
  gap: 12px;
}
.balken-name {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.balken-spur {
  height: 20px;
  background: var(--color-bg);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.balken-spur-schmal { height: 12px; max-width: 160px; display: inline-block; width: 100%; vertical-align: middle; }
.balken-fuellung {
  height: 100%;
  min-width: 2px;
  background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary));
  border-radius: var(--radius-pill);
}
.balken-wert {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.balken-wert-inline {
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

@media screen and (max-width: 720px) {
  .balken-zeile { grid-template-columns: minmax(90px, 130px) 1fr 46px; gap: 8px; }
  .auswertung-schnellwahl { margin-left: 0; }
}

/* ---------------- Reifen-Suche: Umschalter und Kappungshinweis ---------------- */
.reifen-suchmodus {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: #fff;
}
.reifen-suchmodus label {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.reifen-suchmodus label + label { border-left: 1px solid var(--color-border); }
.reifen-suchmodus label.is-aktiv { background: var(--color-primary); color: #fff; }
.reifen-suchmodus input { position: absolute; opacity: 0; width: 0; height: 0; }

.reifen-kappung {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: #fdf3dd;
  color: #7a5200;
  font-size: 13.5px;
  line-height: 1.45;
}

/* ---------------- Datensicherung ---------------- */
.sicherung-zeitwert { font-size: 20px; line-height: 1.3; }
.sicherung-gut  { color: var(--status-offen-fg); }
.sicherung-warn { color: var(--color-danger-dark); }

.sicherung-h3 { font-size: 15px; margin: 22px 0 6px; }
.sicherung-h3:first-of-type { margin-top: 8px; }

.sicherung-code {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.sicherung-code code {
  flex: 1;
  min-width: 200px;
  font-size: 13px;
  word-break: break-all;
}

.sicherung-anleitung { margin: 6px 0 10px; padding-left: 20px; }
.sicherung-anleitung li { margin-bottom: 6px; }

.badge-ok { background: var(--status-offen-bg); color: var(--status-offen-fg); }

/* ==========================================================
   Teileinfo – Auskunft zu einer Teilenummer (Startseite)
   Eingabezeile, darunter eine Zeile je Treffer. Die Tabelle
   uebernimmt das allgemeine Tabellen-Aussehen der Anwendung.
   ========================================================== */

/* Die Grossschreibung kommt von der Klasse "uppercase-field" am Feld -
   dieselbe, die Scanner, Radsatz und Angebot benutzen. */
.tninfo-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}

.tninfo-form input[type="text"] {
  flex: 1 1 260px;
  max-width: 360px;
  width: auto;
}

/* .table-wrap setzt kein display, das hidden-Attribut greift also von
   selbst. Die Regel steht trotzdem hier, damit ein spaeteres display
   an .table-wrap den Kasten nicht ungewollt sichtbar macht. */
.tninfo-ergebnis[hidden] { display: none; }

.tninfo-ergebnis table { margin: 0; }

/* Schmale Spalte fuer das Aufschlag-Kaestchen, wie im Angebot. */
.tninfo-a-spalte { width: 38px; text-align: center; }
.tninfo-a-spalte input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }

.tninfo-status { margin-top: 10px; }