/* =========================================================================
   Pensive Peak – Brand-System (Farben direkt aus dem Logo gemessen)
   Anthrazit-Bühne · Creme-Schrift (Wortmarke) · Gold-Akzent (Gratlinie) ·
   Navy/Schiefer (Bergkörper) als Flächen. Headlines in Serifen-Versalien.
   ========================================================================= */
:root {
  --brand-bg:        #2f3235;   /* Anthrazit, etwas tiefer als der Logo-Grund */
  --brand-surface:   #3a3c3e;   /* Karten/Kacheln = Logo-Hintergrund */
  --brand-ink:       #f8f5df;   /* Creme – Schriftfarbe der Wortmarke */
  --brand-muted:     #a9adb2;   /* sekundärer Text (Schiefer, aufgehellt) */
  --brand-accent:    #edd09d;   /* Gold – Gratlinie: CTA/Fokus, NIE Fließtext */
  --brand-accent-d:  #dcb97e;   /* dunkleres Gold (Hover) */
  --brand-accent-bg: #464131;   /* gedämpfte Goldfläche (Badges) */
  --brand-navy:      #203244;   /* Bergkörper – ruhige Flächen */
  --brand-slate:     #5e6670;   /* Schieferblau – Linien/Nebenflächen */
  --brand-border:    #4a4e53;   /* Trennlinien auf Anthrazit */
  --radius:          14px;
  --shadow:          0 6px 28px rgba(0, 0, 0, .35);
  --font:            "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  --font-display:    "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }  /* nie horizontal scrollen (alle Apps) */

body {
  margin: 0;
  font-family: var(--font);
  color: var(--brand-ink);
  background: var(--brand-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.centered {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* --- Brand / Logo --- */
.brand { display: flex; align-items: center; gap: 12px; }
.brand--stacked { flex-direction: column; gap: 16px; text-align: center; }
.brand__logo { height: 26px; width: auto; }              /* Wortmarke = Logo */
.brand--stacked .brand__logo { height: auto; width: 100%; max-width: 230px; }
.brand__caption {
  font-size: .8rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-muted);
}

.topbar {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 10px 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--brand-border);
}
/* Reihenfolge: Pfeil (links) – Logo – Navigation (rechts, per margin-left:auto). */
.topbar__back { order: 0; }
.topbar .brand { order: 1; }
.topbar__nav {
  order: 2; margin-left: auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: 22px; row-gap: 6px;
}
.topbar__link {
  color: var(--brand-muted); text-decoration: none; font-size: .88rem;
  letter-spacing: .02em;
  white-space: nowrap;
}
.topbar__link:hover { color: var(--brand-accent); }
.topbar__user {
  font-size: .82rem; color: var(--brand-muted);
  padding: 3px 10px; border-radius: 999px; background: var(--brand-accent-bg);
  white-space: nowrap;
}

/* „Eine Ebene zurück": auf iPad/Desktop ein Button mit Text, auf dem iPhone nur der Pfeil. */
.topbar__back {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 8px 13px; border: 1px solid var(--brand-border); border-radius: 10px;
  background: var(--brand-surface); color: var(--brand-ink); text-decoration: none;
  font-size: .9rem; font-weight: 600; white-space: nowrap;
}
.topbar__back:hover { border-color: var(--brand-accent); color: var(--brand-accent-d); }
.topbar__back-arrow { font-size: 1.05rem; line-height: 1; }

/* „Stand" + „Aktualisieren": schlichter, zentrierter Abschluss ganz am Seitenende. */
.bottomnav {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  margin-top: 40px; padding: 16px 24px;
  border-top: 1px solid var(--brand-border);
}
.bottomnav__sync { font-size: .82rem; color: var(--brand-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.bottomnav__refresh {
  flex: 0 0 auto; appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  font-size: .85rem; padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--brand-border); background: var(--brand-surface); color: var(--brand-ink);
}
.bottomnav__refresh:hover { border-color: var(--brand-accent); color: var(--brand-accent-d); }
.bottomnav__refresh:disabled { cursor: default; opacity: .7; }

/* --- Layout --- */
.layout {
  max-width: 680px;
  margin: 40px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* Spalte nie breiter als der Bildschirm */
  gap: 24px;
}
.layout--wide { max-width: 880px; }
.layout--wide .h1 { margin-top: 8px; }
.layout--wide .muted { margin-bottom: 8px; }

/* --- Kacheln (App-Übersicht) --- */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* fest 3 pro Zeile */
  gap: 20px;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  padding: 24px;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--brand-ink);
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.tile:hover {
  border-color: var(--brand-accent);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .45);
}
.tile:active { transform: translateY(1px); }
.tile__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; }
.tile__desc { color: var(--brand-muted); font-size: .92rem; flex: 1; }
.tile__cta {
  align-self: flex-start;
  margin-top: 6px;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-accent-d);
}
.tile--disabled {
  border-style: dashed;
  box-shadow: none;
  background: transparent;
  cursor: default;
}
.tile--disabled .tile__title,
.tile--disabled .tile__desc { color: var(--brand-muted); }
.tile--disabled:hover { border-color: var(--brand-border); box-shadow: none; }

/* --- Cards --- */
.card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}
.card--narrow { width: 100%; max-width: 380px; }

.h1 { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; margin: 0 0 6px; letter-spacing: .02em; }
.h2 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin: 0 0 18px; letter-spacing: .02em; }
.muted { color: var(--brand-muted); margin: 0 0 24px; }

/* --- Form --- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; grid-column: 1 / -1; min-width: 0; }
.field--small { grid-column: span 1; }

/* Adress-Suchformular (Kundenlandkarte): Straße + kleine Nr., dann schmale PLZ + Ort,
   dann Land, dann Button. `form.form--adresse` (höhere Spezifität) setzt sich auch in
   der mobilen `.form`-Regel durch. */
form.form--adresse {
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "strasse strasse strasse hausnr"
    "plz     ort     ort     ort"
    "land    land    land    land"
    "btn     btn     btn     btn";
}
form.form--adresse .field--strasse { grid-area: strasse; }
form.form--adresse .field--hausnr  { grid-area: hausnr; }
form.form--adresse .field--plz     { grid-area: plz; }
form.form--adresse .field--ort     { grid-area: ort; }
form.form--adresse .field--land    { grid-area: land; }
form.form--adresse .btn--suchen    { grid-area: btn; }
.field__label {
  font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand-muted);
}
.field__input {
  font: inherit;
  color: var(--brand-ink);
  width: 100%; min-width: 0;        /* darf schrumpfen, treibt das Grid nicht breiter */
  padding: 12px 13px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  background: #2a2c2e;
  transition: border-color .15s, box-shadow .15s;
}
.field__input:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(237, 208, 157, .22);
}
/* Select wie ein Textfeld aussehen lassen (eigener Pfeil, gleiche Höhe). */
select.field__input {
  appearance: none;
  -webkit-appearance: none;
  height: 45px;
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23a9adb2' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.btn {
  grid-column: 1 / -1;
  font: inherit; font-weight: 700; letter-spacing: .02em;
  color: #26282a;
  background: var(--brand-accent);
  border: none;
  border-radius: 10px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background .15s, transform .02s;
}
.btn:hover { background: var(--brand-accent-d); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: progress; }

/* --- Status / Alerts --- */
.status { margin-top: 18px; font-size: .92rem; }
.status--info  { color: var(--brand-muted); }
.status--error { color: #e8938c; }

.alert { margin: 4px 0 0; font-size: .88rem; }
.alert--error { color: #e8938c; }

/* --- Ergebnisliste --- */
.results__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap; margin-bottom: 6px;
}
.results__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--brand-muted); font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.results__empty { color: var(--brand-muted); font-size: .9rem; padding: 10px 4px; }
.results { list-style: none; counter-reset: rank; margin: 0; padding: 0; }
.results__item {
  counter-increment: rank;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--brand-border);
}
.results__item:last-child { border-bottom: none; }
.results__item::before {
  content: counter(rank);
  flex: 0 0 28px;
  height: 28px; width: 28px;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700;
  color: var(--brand-accent-d);
  background: var(--brand-accent-bg);
  border-radius: 50%;
}
.results__link {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-decoration: none; color: inherit;
  padding: 2px 6px; margin: -2px -6px;
  border-radius: 8px;
  transition: background .12s, color .12s;
}
.results__link:hover { background: var(--brand-accent-bg); }
.results__link:hover .results__name { color: var(--brand-accent-d); }
.results__dot {
  flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%;
  background: var(--brand-border);  /* grau = keine/unbekannte letzte Bestellung */
}
.results__dot.dot--green  { background: #2e9e5b; }
.results__dot.dot--yellow { background: #e0a32e; }
.results__dot.dot--red    { background: #d2493f; }
.results__dot.dot--grey   { background: #b9b9b9; }
.results__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.results__name { font-weight: 600; }
.results__addr { color: var(--brand-muted); font-size: .85rem; line-height: 1.3; }
.results__meta { color: var(--brand-muted); font-size: .85rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.results__dist { color: var(--brand-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Detailansicht Kunde --- */
.detail { display: grid; gap: 18px; }
.detail__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--brand-border); }
.detail__row:last-child { border-bottom: none; }
.detail__label { color: var(--brand-muted); font-size: .9rem; }
.detail__value { font-weight: 600; text-align: right; }
.detail__value a { color: var(--brand-ink); }
.kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kpi__box { padding: 18px; border: 1px solid var(--brand-border); border-radius: var(--radius); background: var(--brand-accent-bg); }
.kpi__label { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-muted); }
.kpi__num { font-size: 1.5rem; font-weight: 700; margin-top: 6px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi__sub { color: var(--brand-muted); font-size: .85rem; margin-top: 2px; }
.kpi__box--wide { grid-column: 1 / -1; }
.yearrev { margin-top: 10px; }
.yearrev__row { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: baseline; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--brand-border); font-variant-numeric: tabular-nums; }
.yearrev__row:last-child { border-bottom: none; }
.yearrev__year { color: var(--brand-muted); }
.yearrev__amount { font-weight: 600; text-align: right; }
.yearrev__count { color: var(--brand-muted); font-size: .85rem; text-align: center; }
.map { height: 320px; border-radius: var(--radius); border: 1px solid var(--brand-border); overflow: hidden; }
.address { font-style: normal; line-height: 1.6; }

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

/* =========================================================================
   Health Check – Dashboard
   Statusfarben sind die EINZIGE Ausnahme vom „ein Akzent"-Prinzip, weil
   Ampel-Semantik (grün/gelb/rot) hier Funktion und nicht Dekoration ist.
   ========================================================================= */
:root {
  --hc-ok:    #2e7d52;  --hc-ok-bg:    #eaf5ef;
  --hc-warn:  #b8860b;  --hc-warn-bg:  #fbf3e2;
  --hc-error: #b4232a;  --hc-error-bg: #fbecec;
  --hc-unknown: #8a827b; --hc-unknown-bg: #f4f1ee;
}

.hc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.hc-head__right { display: flex; align-items: center; gap: 14px; }
.hc-refresh { grid-column: auto; width: auto; padding: 10px 16px; }

.hc-overall {
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.hc-overall--ok      { color: var(--hc-ok);      background: var(--hc-ok-bg); }
.hc-overall--warn    { color: var(--hc-warn);    background: var(--hc-warn-bg); }
.hc-overall--error   { color: var(--hc-error);   background: var(--hc-error-bg); }
.hc-overall--unknown { color: var(--hc-unknown); background: var(--hc-unknown-bg); }

.hc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* fest 3 pro Zeile */
  gap: 18px;
  margin-top: 8px;
}

.hc-card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-left: 4px solid var(--brand-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.hc-card--ok      { border-left-color: var(--hc-ok); }
.hc-card--warn    { border-left-color: var(--hc-warn); }
.hc-card--error   { border-left-color: var(--hc-error); }
.hc-card--unknown { border-left-color: var(--hc-unknown); }

.hc-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hc-card__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.hc-card__summary { color: var(--brand-muted); font-size: .9rem; margin: 0; }

.hc-badge {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.hc-badge--ok      { color: var(--hc-ok);      background: var(--hc-ok-bg); }
.hc-badge--warn    { color: var(--hc-warn);    background: var(--hc-warn-bg); }
.hc-badge--error   { color: var(--hc-error);   background: var(--hc-error-bg); }
.hc-badge--unknown { color: var(--hc-unknown); background: var(--hc-unknown-bg); }

.hc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hc-metric {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border: 1px solid var(--brand-border); border-radius: 10px;
}
.hc-metric__label {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-ink);
}
.hc-metric__value { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hc-metric__sub { font-size: .76rem; color: var(--brand-muted); }

.hc-notes { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.hc-notes li { font-size: .84rem; color: var(--hc-error); }
.hc-card--warn .hc-notes li { color: var(--hc-warn); }
.hc-card--unknown .hc-notes li, .hc-card--ok .hc-notes li { color: var(--brand-muted); }

.hc-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2px; }
.hc-link {
  font-size: .8rem; font-weight: 700; color: var(--brand-accent-d); text-decoration: none;
}
.hc-link:hover { text-decoration: underline; }

.hc-stamp { margin-top: 20px; font-size: .8rem; text-align: right; }

/* --- Auftragsbestätigung (ab-) --- */
/* hidden zuverlaessig durchsetzen: sonst ueberstimmt z. B. .field{display:flex}
   das HTML-Attribut [hidden] und ausgeblendete Felder blieben sichtbar. */
[hidden] { display: none !important; }

/* Kompakte Attribut-Anzeige des gewaehlten Artikels (SKU, Preis, Beschreibung …). */
.ab-meta { font-size: .8rem; line-height: 1.25; margin-top: 2px; }
.ab-meta__row { display: flex; gap: 8px; padding: 0; }
.ab-meta__label { color: var(--brand-muted); flex: 0 0 74px; }
.ab-meta__value { color: var(--brand-ink); min-width: 0; }   /* bewusst NICHT fett */
/* Lange Beschreibung auf 2 Zeilen begrenzen, damit die Box nicht hoch wird. */
.ab-meta__value--clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Sekundär-/Ghost-Button (z. B. „Benutzerdefiniertes Produkt", „Zeile entfernen"). */
.btn--ghost {
  color: var(--brand-accent-d); background: var(--brand-accent-bg);
}
.btn--ghost:hover { background: var(--brand-accent-bg); }
.btn--inline { grid-column: auto; padding: 9px 14px; font-size: .85rem; }

/* Feine Trennlinie zwischen Messe-Auswahl und Kundenbereich. */
.ab-sep { border: 0; border-top: 1px solid var(--brand-border); margin: 24px 0 20px; }

/* Umschalter Bestandskunde / Neuer Kunde. */
.ab-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.ab-toggle__btn {
  font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--brand-border); background: var(--brand-surface); color: var(--brand-muted);
}
.ab-toggle__btn--active {
  background: var(--brand-accent-bg); color: var(--brand-accent-d); border-color: var(--brand-accent);
}

/* Ausgewählter Kunde / Artikel als Hinweisbox. */
.ab-chosen {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius);
  background: var(--brand-accent-bg); margin-bottom: 16px;
}
.ab-chosen__name { font-weight: 700; }
.ab-chosen__sub { color: var(--brand-muted); font-size: .85rem; }

/* Positionsliste als Tabelle. */
.ab-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ab-table th, .ab-table td {
  text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--brand-border); vertical-align: top;
}
.ab-table th {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-muted);
}
.ab-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-table__note { color: var(--brand-muted); font-size: .82rem; }
.ab-table__del {
  border: 0; background: none; cursor: pointer; color: var(--brand-muted); font-size: 1.1rem; line-height: 1;
}
.ab-table__del:hover { color: #e8938c; }
.ab-total { margin-top: 16px; text-align: right; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ab-empty { color: var(--brand-muted); font-size: .9rem; }

/* Button-Zeile Abschließen / Abbrechen nebeneinander (bricht auf schmal um). */
.ab-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-actions .btn { flex: 1 1 auto; }

/* Checkbox-Zeile (z. B. „Foto(s) der E-Mail anhängen"). */
.ab-check {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  font-size: .92rem; color: var(--brand-ink); cursor: pointer;
}
.ab-check input { width: 18px; height: 18px; accent-color: var(--brand-accent); cursor: pointer; }

/* Foto-Vorschau (Auftragsbestätigung): Thumbnails mit Entfernen-Knopf. */
.foto-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.foto-thumb { position: relative; width: 84px; height: 84px; }
.foto-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--brand-border);
}
.foto-thumb__del {
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--brand-border); background: #2a2c2e; color: var(--brand-ink);
  font-size: 1rem; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .40);
}
.foto-thumb__del:hover { color: #e8938c; }

/* Kompaktere Darstellung – nur Auftragsbestätigung (iPad/iPhone/Laptop).
   Über `.layout--ab` gescopet, damit die übrigen Apps unberührt bleiben.
   Bewusst dichte Abstände; Eingabe-Schriftgröße bleibt 16px (sonst zoomt iOS). */
.layout--ab               { margin: 12px auto; gap: 10px; padding: 0 14px; }
.layout--ab .card         { padding: 14px 16px; }
.layout--ab .h1           { font-size: 1.15rem; margin-bottom: 2px; }
.layout--ab .h2           { font-size: .98rem; margin-bottom: 8px; }
.layout--ab .muted        { margin-bottom: 10px; font-size: .88rem; }
.layout--ab .form         { gap: 10px; }
.layout--ab .field        { gap: 4px; }
.layout--ab .field__label { font-size: .72rem; }
.layout--ab .field__input { padding: 9px 11px; }     /* Schrift bleibt 16px */
.layout--ab select.field__input { height: 42px; }
.layout--ab .btn          { padding: 11px 16px; }
.layout--ab .ab-sep       { margin: 11px 0 9px; }
.layout--ab .ab-toggle    { margin-bottom: 9px; }
.layout--ab .ab-toggle__btn { padding: 7px 14px; }
.layout--ab .ab-chosen    { padding: 8px 12px; margin-bottom: 9px; }
.layout--ab .ab-chosen__sub { font-size: .8rem; }
.layout--ab .results__item  { padding: 8px 4px; }
.layout--ab .status       { margin-top: 9px; }
.layout--ab .ab-total     { margin-top: 10px; font-size: 1.05rem; }
.layout--ab .ab-table th, .layout--ab .ab-table td { padding: 7px 8px; }

/* Trefferliste deckeln: läuft bei eingeblendeter Tastatur nicht „unter" sie,
   sondern scrollt intern. dvh berücksichtigt die verkleinerte Sicht-Höhe. */
.layout--ab .results { max-height: 46dvh; overflow-y: auto; }

/* Kontext-Leiste: zeigt nach der Kundenwahl Messe + Kunde kompakt in EINER Zeile,
   damit der obere Bereich zusammenklappt und die Artikel-Erfassung nach oben rückt. */
.ab-context {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: var(--radius);
  background: var(--brand-accent-bg);
}
.ab-context__text { font-size: .9rem; min-width: 0; }
.ab-context__text b { font-weight: 700; }
.ab-context__sep { color: var(--brand-muted); margin: 0 6px; }

/* --- Messe Auswertung (ma-) ------------------------------------------------
   Messen als auswählbare Chips, eine große Umsatz-Kennzahl als „Hero" und eine
   Balken-Aufschlüsselung je Messe. Ein Akzent (Zartrosa), Zahlen tabellarisch. */
.ma-chips__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;
}
.ma-chips__actions { display: flex; gap: 8px; }
.ma-mini {
  font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--brand-border); background: var(--brand-surface); color: var(--brand-muted);
}
.ma-mini:hover { border-color: var(--brand-accent); color: var(--brand-accent-d); }

.ma-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ma-chip {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: .9rem; cursor: pointer;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--brand-border); background: var(--brand-surface); color: var(--brand-muted);
  transition: border-color .12s, background .12s, color .12s;
}
.ma-chip:hover { border-color: var(--brand-accent); }
.ma-chip--on {
  background: var(--brand-accent-bg); color: var(--brand-ink); border-color: var(--brand-accent);
}
.ma-chip__name { font-weight: 600; }
.ma-chip__count {
  font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 1px 8px; border-radius: 999px;
  background: var(--brand-border); color: var(--brand-muted);
}
.ma-chip--on .ma-chip__count { background: var(--brand-accent); color: #26282a; }

/* Hero: große Umsatzzahl. */
.ma-hero { text-align: center; background: var(--brand-accent-bg); border-color: var(--brand-accent); }
.ma-hero__label {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-muted);
}
.ma-hero__num {
  font-size: 2.8rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
  margin: 8px 0 6px; font-variant-numeric: tabular-nums; color: var(--brand-ink);
}
.ma-hero__sub { color: var(--brand-muted); font-size: .95rem; }

/* Balken je Messe. */
.ma-bars { display: grid; gap: 18px; }
.ma-bar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ma-bar__name { font-weight: 600; }
.ma-bar__val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma-bar__track {
  margin: 7px 0 5px; height: 12px; border-radius: 999px;
  background: var(--brand-accent-bg); overflow: hidden;
}
.ma-bar__fill {
  height: 100%; border-radius: 999px;
  background: var(--brand-accent); transition: width .35s ease;
}
.ma-bar__meta { color: var(--brand-muted); font-size: .82rem; }

@media (max-width: 480px) {
  .ma-hero__num { font-size: 2.1rem; }
}

@media (max-width: 480px) {
  .ab-table th:nth-child(2), .ab-table td:nth-child(2) { display: none; } /* Artikelnr. ausblenden */
}

@media (max-width: 480px) {
  .hc-metrics { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }   /* Tablet: 2 pro Zeile */
  .hc-grid { grid-template-columns: repeat(2, 1fr); } /* Health Check: Tablet 2 pro Zeile */
}

@media (max-width: 480px) {
  .card { padding: 22px; }
  .layout--ab        { margin: 8px auto; }   /* Auftragsbestätigung: noch enger */
  .layout--ab .card  { padding: 12px 14px; }
  .form { grid-template-columns: 1fr; }
  .field--small { grid-column: 1 / -1; }
  /* Adress-Suchformular (Kundenlandkarte) auf dem Handy: Straße+Nr / PLZ+Ort je eine Zeile
     statt 4 Spalten (sonst zu breit). Eigene Selektor-Spezifität schlägt die .form-Regel. */
  form.form--adresse {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "strasse strasse hausnr" "plz ort ort" "land land land" "btn btn btn";
  }
  .tiles { grid-template-columns: 1fr; }              /* Handy: 1 pro Zeile */
  .hc-grid { grid-template-columns: 1fr; }            /* Health Check: Handy 1 pro Zeile */
  /* iPhone: Logo + Name/Abmelden zusammen in EINER Zeile (gleiche Höhe), der Zurück-Pfeil
     eine Zeile darunter. Elemente kompakter, damit alles nebeneinander passt. */
  .topbar { padding: 12px 14px; row-gap: 8px; }
  .brand__logo { height: 20px; }
  .topbar__nav {
    flex-wrap: nowrap; gap: 10px; min-width: 0;          /* Name + Abmelden bleiben zusammen */
  }
  .topbar__user {
    font-size: .76rem; padding: 2px 8px; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44vw;
  }
  .topbar__link { font-size: .8rem; letter-spacing: 0; }
  /* Zeilenumbruch erzwingen, damit der Pfeil UNTER das Logo rutscht (eigene Zeile). */
  .topbar::after { content: ''; order: 3; flex-basis: 100%; height: 0; }
  /* Zurück nur als Pfeil (wie auf der Übersichtskarte), Text ausgeblendet. */
  .topbar__back { order: 4; padding: 8px 11px; gap: 0; }
  .topbar__back-label { display: none; }
  /* Seitenabschluss kompakter. */
  .bottomnav { padding: 14px 16px; margin-top: 28px; gap: 12px; }
  .bottomnav__refresh { padding: 8px 12px; }
}

/* ---------------------------------------------------------------------------
   Web-App-/Mobil-Feinschliff (Teil A5)
   --------------------------------------------------------------------------- */

/* Breite Tabellen (Admin, B2B) horizontal scrollen lassen, statt die ganze Seite
   überlaufen zu lassen. Container scrollt, die Tabelle bleibt unverändert. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;   /* sanftes Touch-Scrollen auf iOS */
  max-width: 100%;
}

/* Tap-Ziele (interaktive Mini-Buttons) auf eine fingerfreundliche Mindesthöhe.
   Reine Status-Badges (z. B. .hc-badge) bleiben klein – sie sind nicht klickbar. */
@media (max-width: 760px) {
  .ma-mini,
  .adm-tag a,
  button.adm-tag {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }
}

/* iOS: kein graues Antipp-Aufblitzen auf eigenen Buttons/Links. */
.btn, .tile, .topbar__link, .ma-mini { -webkit-tap-highlight-color: transparent; }