/* Aussehen der Werkstatt-App.
   Farben und Schriften kommen aus dem Marken-Auftritt der Schrankwerft.
   Grundsatz: Bedienung geht vor Schönheit. Große Tippflächen, hoher Kontrast,
   lesbar mit schmutzigen Fingern im Transporter. */

:root {
  --ink: #0c0c0d;
  --ink-2: #121214;
  --ink-3: #18181b;
  --ink-4: #202024;
  --bone: #f4f0e8;
  --smoke: #adaaa2;
  --smoke-dim: #75736d;
  --sand: #cbb691;
  --sand-hell: #e0cda7;
  --sand-dunkel: #9c8460;
  --linie: rgba(203, 182, 145, 0.18);
  --linie-zart: rgba(244, 240, 232, 0.08);
  --gut: #8fae7b;
  --achtung: #d8a24a;
  --schlecht: #c4674f;
  --r: 14px;
  --r-klein: 9px;
  --ff-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ff-text: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --tippflaeche: 48px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--smoke);
  font-family: var(--ff-text);
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* Kein "overflow-x: hidden" auf html oder body. Das sieht harmlos aus, macht
   aber jedes Kleben am oberen Rand kaputt, weil der Browser daraus einen
   eigenen Scrollbereich macht. Breite Inhalte bekommen stattdessen jeweils
   ihren eigenen Rollbalken, siehe .filterreihe. */

h1, h2, h3 {
  font-family: var(--ff-display);
  color: var(--bone);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; letter-spacing: 0.08em; color: var(--sand); }

p { margin: 0 0 12px; }

a { color: var(--sand); }

.lade-hinweis {
  padding: 40px 20px;
  text-align: center;
  color: var(--smoke-dim);
}

/* ---------- Anmeldung ---------- */

.anmeldung {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px calc(32px + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(203, 182, 145, 0.07), transparent 60%),
    var(--ink);
}

.anmeldung__kasten {
  width: 100%;
  max-width: 380px;
}

.anmeldung__logo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto 36px;
}

.anmeldung__titel {
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  color: var(--smoke-dim);
  font-family: var(--ff-display);
  text-transform: uppercase;
  margin-bottom: 28px;
}

.feld { margin-bottom: 16px; }

.feld__beschriftung {
  display: block;
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.74rem;
  color: var(--smoke-dim);
  margin-bottom: 7px;
}

input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
select,
textarea {
  width: 100%;
  min-height: var(--tippflaeche);
  padding: 12px 14px;
  background: var(--ink-3);
  border: 1px solid var(--linie-zart);
  border-radius: var(--r-klein);
  color: var(--bone);
  font-family: var(--ff-text);
  font-size: 17px;
  appearance: none;
}

textarea { min-height: 96px; resize: vertical; line-height: 1.45; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--sand);
  box-shadow: 0 0 0 3px rgba(203, 182, 145, 0.14);
}

select {
  background-image: linear-gradient(45deg, transparent 50%, var(--sand) 50%),
                    linear-gradient(135deg, var(--sand) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tippflaeche);
  padding: 13px 20px;
  border: 1px solid var(--sand);
  border-radius: var(--r-klein);
  background: var(--sand);
  color: #16130e;
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.knopf:hover { background: var(--sand-hell); border-color: var(--sand-hell); }
.knopf:disabled { opacity: 0.5; cursor: default; }

.knopf--leise {
  background: transparent;
  color: var(--sand);
  border-color: var(--linie);
}
.knopf--leise:hover { background: rgba(203, 182, 145, 0.1); border-color: var(--sand); }

.knopf--schmal { width: auto; padding: 10px 16px; min-height: 44px; }

.knopf--warnen {
  background: transparent;
  border-color: rgba(196, 103, 79, 0.5);
  color: var(--schlecht);
}
.knopf--warnen:hover { background: rgba(196, 103, 79, 0.12); border-color: var(--schlecht); }

.meldung {
  padding: 12px 14px;
  border-radius: var(--r-klein);
  margin-bottom: 16px;
  font-size: 0.95rem;
  border: 1px solid;
}

.meldung--fehler {
  background: rgba(196, 103, 79, 0.12);
  border-color: rgba(196, 103, 79, 0.45);
  color: #e8a695;
}

.meldung--gut {
  background: rgba(143, 174, 123, 0.12);
  border-color: rgba(143, 174, 123, 0.45);
  color: #b9d2a8;
}

.meldung--hinweis {
  background: rgba(203, 182, 145, 0.1);
  border-color: var(--linie);
  color: var(--sand-hell);
}

.hilfstext {
  font-size: 0.88rem;
  color: var(--smoke-dim);
  margin-top: 8px;
}

/* ---------- Gerüst nach der Anmeldung ---------- */

.rahmen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Am Handy hat der Sammel-Container keine eigene Wirkung, Kopf und Leiste
   sitzen wie bisher oben und unten am Rand. Am Rechner (weiter unten) wird
   daraus der Streifen links. */
.seitenbereich { display: contents; }

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: rgba(12, 12, 13, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie-zart);
}

.kopf__symbol { width: 30px; height: 30px; flex: 0 0 auto; }

.kopf__mitte { flex: 1 1 auto; min-width: 0; }

.kopf__titel {
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.9rem;
  color: var(--bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kopf__person {
  font-size: 0.76rem;
  color: var(--smoke-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inhalt {
  flex: 1 1 auto;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 100px;
}

/* ---------- Fußleiste zum Umschalten ---------- */

.fussleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  background: rgba(18, 18, 20, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linie-zart);
  padding-bottom: env(safe-area-inset-bottom);
}

.fussleiste__knopf {
  flex: 1 1 0;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: transparent;
  color: var(--smoke-dim);
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  cursor: pointer;
  padding: 6px 4px;
}

.fussleiste__knopf[aria-current="true"] { color: var(--sand); }
.fussleiste__zeichen { font-size: 1.15rem; line-height: 1; }

/* Am Handy im Hochformat gibt es die untere Leiste nicht mehr. Fünf Reiter
   wurden mit jedem neuen Bereich enger, deshalb läuft alles über das Klappmenü
   oben rechts (Dominic am 26.07.2026). Am liegenden Tablet und am Rechner
   bleibt der Streifen links, dort ist Platz genug. */
@media (max-width: 759px), (max-height: 499px) {
  .fussleiste { display: none; }
  .inhalt { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}

/* ---------- Klappmenü ---------- */

.menueschirm {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 4, 5, 0.5);
}

.menue {
  position: fixed;
  width: min(280px, calc(100vw - 16px));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ink-3);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  padding: 8px;
}

.menue__kopf { padding: 8px 12px 12px; }

.menue__name {
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  color: var(--bone);
}

.menue__rolle { font-size: 0.78rem; color: var(--smoke-dim); }

.menue__eintrag {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: none;
  border-radius: var(--r-klein);
  background: transparent;
  color: var(--smoke);
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
}

.menue__eintrag:hover { background: var(--ink-4); }
.menue__eintrag[aria-current="true"] { color: var(--sand); background: rgba(203, 182, 145, 0.1); }
.menue__eintrag--warnen { color: #e8a49c; }
.menue__zeichen { font-size: 1.05rem; line-height: 1; width: 20px; text-align: center; }
.menue__linie { border: 0; border-top: 1px solid var(--linie-zart); margin: 8px 4px; }

.menue__fassung {
  padding: 10px 12px 4px;
  font-size: 0.72rem;
  color: var(--smoke-dim);
}

/* Am Rechner und am liegenden Tablet stehen die Bereiche schon links im
   Streifen, im Menü wären sie doppelt. */
@media (min-width: 760px) and (min-height: 500px) {
  .menue__bereiche { display: none; }
  .menue__linie:first-of-type { display: none; }
}

/* ---------- Karten und Listen ---------- */

.karte {
  background: var(--ink-3);
  border: 1px solid var(--linie-zart);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 14px;
}

.karte--anklickbar { cursor: pointer; }
.karte--anklickbar:hover { border-color: var(--linie); background: var(--ink-4); }

.karte__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.karte__titel {
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bone);
  font-size: 1rem;
}

.karte__zeile { font-size: 0.92rem; color: var(--smoke); }

.marke {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.66rem;
  border: 1px solid var(--linie);
  color: var(--sand);
  white-space: nowrap;
}

.marke--gut { border-color: rgba(143, 174, 123, 0.5); color: var(--gut); }
.marke--achtung { border-color: rgba(216, 162, 74, 0.5); color: var(--achtung); }
.marke--schlecht { border-color: rgba(196, 103, 79, 0.5); color: var(--schlecht); }
.marke--ruhig { border-color: var(--linie-zart); color: var(--smoke-dim); }

.abschnitt { margin-bottom: 32px; }

.abschnitt__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.leer {
  padding: 26px 18px;
  text-align: center;
  color: var(--smoke-dim);
  border: 1px dashed var(--linie-zart);
  border-radius: var(--r);
  font-size: 0.94rem;
}

.trennlinie { height: 1px; background: var(--linie-zart); margin: 20px 0; border: 0; }

/* ---------- Team-Verwaltung ---------- */

.person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linie-zart);
  flex-wrap: wrap;
}

.person:last-child { border-bottom: 0; }

.person__mitte { flex: 1 1 160px; min-width: 0; }

.person__name { color: var(--bone); font-weight: 500; }
.person__zeile { font-size: 0.84rem; color: var(--smoke-dim); }
.person__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.person--still .person__name { color: var(--smoke-dim); text-decoration: line-through; }

/* ---------- Fenster über der Seite ---------- */

.fenster-hintergrund {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6, 6, 7, 0.72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.fenster {
  width: 100%;
  max-width: 520px;
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--ink-2);
  border: 1px solid var(--linie);
  border-radius: var(--r) var(--r) 0 0;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
}

.fenster__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.fenster__schliessen {
  border: none;
  background: transparent;
  color: var(--smoke-dim);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  min-height: 44px;
  min-width: 44px;
}

.knopfreihe { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.knopfreihe .knopf { flex: 1 1 140px; }

.zugangsdaten {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.1rem;
  color: var(--sand-hell);
  background: var(--ink-4);
  border: 1px dashed var(--linie);
  border-radius: var(--r-klein);
  padding: 14px;
  margin: 12px 0;
  word-break: break-all;
}

/* ---------- Ab Tabletbreite ---------- */

/* Zusätzlich zur Breite zählt die Höhe: Ein Handy im Querformat ist zwar breit,
   aber nur rund 400 Pixel hoch. Dort passt der Streifen links nicht hin, die
   Bereiche würden abgeschnitten. Solche Geräte bekommen die Handy-Ansicht mit
   Klappmenü (Dominic am 26.07.2026: in der Seitenleiste ließ sich nicht
   scrollen). Ein liegendes Tablet ist 768 Pixel hoch und behält den Streifen. */
@media (min-width: 760px) and (min-height: 500px) {
  body { font-size: 17px; }
  h1 { font-size: 2rem; }

  .rahmen { flex-direction: row; }

  .seitenbereich {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 232px;
    padding: 26px 12px 20px;
    background: var(--ink);
    border-right: 1px solid var(--linie-zart);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .kopf {
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 6px 22px;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 0;
    /* Ohne das staucht der Streifen den Kopf, sobald es eng wird, statt einen
       Rollbalken anzubieten. */
    flex: 0 0 auto;
  }

  .kopf__symbol { width: 42px; height: 42px; margin-bottom: 16px; }
  .kopf__mitte { flex: 0 0 auto; margin-bottom: 18px; }
  .kopf__titel { white-space: normal; font-size: 1rem; }
  .kopf__person { white-space: normal; }

  .fussleiste {
    display: flex;
    position: static;
    flex-direction: column;
    background: transparent;
    backdrop-filter: none;
    border-top: 0;
    padding: 0;
    order: 2;
    flex: 0 0 auto;
  }

  .fussleiste__knopf {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 46px;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    border-radius: var(--r-klein);
    padding: 8px 12px;
  }

  .fussleiste__knopf[aria-current="true"] { background: rgba(203, 182, 145, 0.1); }

  .inhalt {
    margin-left: 232px;
    padding: 34px 30px 60px;
    max-width: 1000px;
  }

  .fenster-hintergrund { align-items: center; padding: 24px; }
  .fenster { border-radius: var(--r); }
}

@media (prefers-reduced-motion: no-preference) {
  .karte, .knopf { transition: background-color 0.15s ease, border-color 0.15s ease; }
}

/* ---------- Kennzahlen auf der Startseite (nur Meister) ---------- */

.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}

.zahl {
  background: var(--ink-3);
  border: 1px solid var(--linie-zart);
  border-radius: var(--r);
  padding: 15px 16px;
}

.zahl__beschriftung {
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.66rem;
  color: var(--smoke-dim);
  margin-bottom: 8px;
}

.zahl__gross {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--bone);
  line-height: 1.1;
}

.zahl__dazu {
  font-size: 0.9rem;
  color: var(--sand);
  margin-top: 3px;
}

.zahl__fussnote {
  font-size: 0.78rem;
  color: var(--smoke-dim);
  margin-top: 6px;
}

.zahl--betont { border-color: var(--linie); }

/* ---------- Filterknöpfe über der Auftragsliste ---------- */

.filterreihe {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 16px;
  scrollbar-width: thin;
}

.filterknopf {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--linie-zart);
  border-radius: 999px;
  background: transparent;
  color: var(--smoke);
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  cursor: pointer;
  white-space: nowrap;
}

.filterknopf--aktiv {
  background: var(--sand);
  border-color: var(--sand);
  color: #16130e;
  font-weight: 600;
}

/* ---------- Der Weg eines Auftrags durch die Phasen ---------- */

.phasenweg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 20px;
}

.phasenweg__stufe {
  flex: 1 1 auto;
  min-width: 92px;
  padding: 9px 10px;
  border-radius: var(--r-klein);
  border: 1px solid var(--linie-zart);
  background: var(--ink-2);
  color: var(--smoke-dim);
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.66rem;
  text-align: center;
}

.phasenweg__stufe--erreicht {
  border-color: var(--linie);
  color: var(--sand);
}

.phasenweg__stufe--jetzt {
  background: var(--sand);
  border-color: var(--sand);
  color: #16130e;
  font-weight: 700;
}

/* ---------- Auftragsliste nach Phasen gruppiert ---------- */

.gruppe {
  margin-bottom: 20px;
  border: 1px solid var(--linie-zart);
  border-radius: var(--r);
  overflow: hidden;
}

.gruppe__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  background: var(--ink-4);
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--bone);
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  font-weight: 600;
}

.gruppe__kopf:hover { background: #26262b; }
.gruppe__kopf::-webkit-details-marker { display: none; }

.gruppe__zahlen {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-text);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.86rem;
  color: var(--sand);
  font-weight: 400;
  white-space: nowrap;
}

.gruppe__leer {
  padding: 14px 16px;
  color: var(--smoke-dim);
  font-size: 0.9rem;
}

.gruppe__fuss {
  padding: 11px 16px;
  background: var(--ink-2);
  border-top: 1px solid var(--linie-zart);
  font-size: 0.86rem;
  color: var(--smoke-dim);
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.gruppe__fuss b { color: var(--sand); font-weight: 600; }

/* Eine Zeile in der Gruppe. Am Handy gestapelt, am Rechner nebeneinander. */

.zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 16px;
  width: 100%;
  padding: 13px 16px;
  border-top: 1px solid var(--linie-zart);
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  text-align: left;
  color: var(--smoke);
  font-family: var(--ff-text);
  font-size: 0.95rem;
  cursor: pointer;
}

.zeile:hover { background: var(--ink-3); }

.zeile__kunde { color: var(--bone); font-weight: 500; }
.zeile__was { color: var(--smoke); }
.zeile__klein { font-size: 0.84rem; color: var(--smoke-dim); }
.zeile__wert { color: var(--sand); font-variant-numeric: tabular-nums; }

@media (min-width: 760px) {
  .zeile {
    grid-template-columns: minmax(180px, 1.4fr) minmax(200px, 2fr) 90px 130px 140px;
    align-items: center;
    padding: 10px 16px;
  }

  .zeile > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .zeile__wert { text-align: right; }

  .listenkopf {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(200px, 2fr) 90px 130px 140px;
    gap: 16px;
    padding: 0 16px 8px;
    font-family: var(--ff-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.66rem;
    color: var(--smoke-dim);
  }

  .listenkopf > :last-child { text-align: right; }
}

@media (max-width: 759px) {
  .listenkopf { display: none; }
}

/* ---------- Kundenliste als schmale Liste ---------- */

.kundenliste {
  border: 1px solid var(--linie-zart);
  border-radius: var(--r);
  overflow: hidden;
}

.kundenzeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 14px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid var(--linie-zart);
  background: transparent;
  text-align: left;
  color: var(--smoke);
  font-family: var(--ff-text);
  font-size: 0.95rem;
  cursor: pointer;
}

.kundenzeile:first-of-type { border-top: 0; }
.kundenzeile:hover { background: var(--ink-3); }

.kundenzeile__nummer {
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
  color: var(--smoke-dim);
}

.kundenzeile__name { color: var(--bone); font-weight: 500; }

/* Am Rechner bleibt jeder Kunde in einer Zeile. Was nicht passt, wird hinten
   abgeschnitten, statt die Zeile in die Höhe zu treiben. */
@media (min-width: 760px) {
  .kundenzeile > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .kundenzeile { padding: 9px 14px; align-items: center; }
}
.kundenzeile__klein { font-size: 0.85rem; color: var(--smoke-dim); }
.kundenzeile__wert { color: var(--sand); font-variant-numeric: tabular-nums; }

/* Der schmale Streifen links zeigt auf einen Blick, wie es um den Kunden
   steht. Die Bedeutung steht zusätzlich als Wort in der Zeile, damit sie
   auch bei Sonne auf dem Tablet und für Farbschwache erkennbar bleibt. */
.kundenzeile { border-left: 3px solid transparent; }
.kundenzeile--kunde { border-left-color: var(--gut); }
.kundenzeile--laeuft { border-left-color: var(--sand); }
.kundenzeile--ruhig { border-left-color: var(--ink-4); }

@media (min-width: 760px) {
  .kundenzeile {
    grid-template-columns: 88px minmax(160px, 1.4fr) minmax(180px, 1.8fr) minmax(150px, 1.2fr) 130px 110px;
    align-items: baseline;
    padding: 11px 14px;
  }

  .kundenzeile__wert { text-align: right; }

  .kundenkopf {
    display: grid;
    grid-template-columns: 88px minmax(160px, 1.4fr) minmax(180px, 1.8fr) minmax(150px, 1.2fr) 130px 110px;
    gap: 14px;
    padding: 0 14px 8px;
    font-family: var(--ff-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.66rem;
    color: var(--smoke-dim);
  }

  .kundenkopf > :last-child { text-align: right; }
}

@media (max-width: 759px) {
  .kundenkopf { display: none; }
}


/* ---------- Zurück-Leiste über den Detailseiten ---------- */

.zurueckleiste {
  position: sticky;
  top: var(--kopfhoehe, 0px);
  z-index: 15;
  margin: -20px -16px 14px;
  padding: 10px 16px;
  background: rgba(12, 12, 13, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie-zart);
}

.zurueckknopf {
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
}

.zurueckknopf > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zurueckknopf > span:first-child {
  font-size: 1.2rem;
  line-height: 1;
  margin-top: -2px;
}

@media (min-width: 760px) {
  .zurueckleiste {
    top: 0;
    margin: -34px -30px 20px;
    padding: 14px 30px;
  }
}

/* Ein Schalter mit Text daneben, groß genug zum Antippen. */
.schalter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--smoke);
}

.schalter input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--sand);
  flex: 0 0 auto;
  cursor: pointer;
}

/* ---------- Rückfrage beim Öffnen ---------- */

.fragetext {
  font-family: var(--ff-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--bone);
  margin: 14px 0 6px;
  line-height: 1.25;
}

.antwortreihe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.antwortknopf {
  width: 100%;
  min-height: 54px;
  text-align: center;
  letter-spacing: 0.06em;
}

/* ---------- Preiszeilen in der Auftragsmaske ---------- */

.preiskopf {
  display: none;
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.64rem;
  color: var(--smoke-dim);
  padding: 0 0 6px;
}

.preiszeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linie-zart);
}

.preis-weg {
  min-height: 44px;
  min-width: 44px;
  border: 1px solid var(--linie-zart);
  border-radius: var(--r-klein);
  background: transparent;
  color: var(--schlecht);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.preis-weg:hover { border-color: var(--schlecht); }

.preissumme {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--smoke-dim);
}

.preissumme b {
  font-size: 1.25rem;
  color: var(--sand);
  letter-spacing: 0;
}

@media (min-width: 620px) {
  .preiskopf,
  .preiszeile {
    display: grid;
    grid-template-columns: 1.6fr 1.1fr 0.9fr 48px;
    gap: 10px;
    align-items: center;
  }
  .preiskopf { display: grid; }
}

/* ---------- Kundensuche in der Auftragsmaske ---------- */

.trefferliste {
  margin-top: 6px;
  border-radius: var(--r-klein);
  overflow: hidden;
}

.trefferliste:not(:empty) { border: 1px solid var(--linie-zart); }

.treffer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--linie-zart);
  background: var(--ink-3);
  color: var(--smoke);
  text-align: left;
  font-family: var(--ff-text);
  font-size: 0.94rem;
  cursor: pointer;
}

.treffer:last-child { border-bottom: 0; }
.treffer:hover { background: var(--ink-4); }
.treffer__name { color: var(--bone); }
.treffer__ort { font-size: 0.84rem; color: var(--smoke-dim); white-space: nowrap; }
.treffer__leer { padding: 12px; color: var(--smoke-dim); font-size: 0.9rem; background: var(--ink-3); }

.gewaehlt__kasten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--tippflaeche);
  padding: 10px 8px 10px 14px;
  border: 1px solid var(--sand);
  border-radius: var(--r-klein);
  background: rgba(203, 182, 145, 0.1);
  color: var(--bone);
}

.gewaehlt__weg {
  min-height: 44px;
  min-width: 44px;
  border: 0;
  background: transparent;
  color: var(--sand);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.kopfknoepfe {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ---------- Kalender ---------- */

.kal-kopf {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}

.kal-blaettern {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kal-pfeil {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--linie-zart);
  border-radius: var(--r-klein);
  background: transparent;
  color: var(--sand);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.kal-pfeil:hover { border-color: var(--sand); }

.kal-zeitraum {
  flex: 1 1 auto;
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1rem;
  font-weight: 700;
  color: var(--bone);
  text-align: center;
}

.kal-umschalter { display: flex; gap: 8px; }

.kal-raster {
  display: grid;
  /* minmax(0, 1fr) statt nur 1fr: Sonst zieht ein langer Terminname die Spalte
     breiter und die Woche steht schief. */
  grid-template-columns: 30px repeat(7, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 18px;
}

.kal-wochentag {
  text-align: center;
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.62rem;
  color: var(--smoke-dim);
  padding-bottom: 4px;
}

.kal-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 54px;
  padding: 6px 3px;
  border: 1px solid var(--linie-zart);
  border-radius: var(--r-klein);
  background: var(--ink-2);
  color: var(--smoke);
  cursor: pointer;
  font-family: var(--ff-text);
}

.kal-tag:hover { background: var(--ink-3); }
.kal-tag--fremd { opacity: 0.35; }
.kal-tag--heute { border-color: var(--sand); }
.kal-tag--gewaehlt { background: rgba(203, 182, 145, 0.14); border-color: var(--sand); }

.kal-tag__zahl { font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.kal-tag--heute .kal-tag__zahl { color: var(--sand); font-weight: 600; }

.kal-tag__balken { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.kal-punkt { width: 7px; height: 7px; border-radius: 50%; display: block; }
.kal-mehr { font-size: 0.6rem; color: var(--smoke-dim); }

.kal-tag__lang { display: none; }

/* Die Kalenderwoche am Anfang jeder Zeile. */
.kal-kw {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 0.68rem;
  color: var(--smoke-dim);
  font-variant-numeric: tabular-nums;
}

.kal-wochentag--kw { color: var(--sand-dunkel); }

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 20px;
  font-size: 0.8rem;
  color: var(--smoke-dim);
}

.legende__eintrag { display: flex; align-items: center; gap: 6px; }
.legende__punkt { width: 9px; height: 9px; border-radius: 50%; display: block; }

.kal-tagesliste h2 { margin-bottom: 12px; }

.kal-tagestitel {
  font-size: 1rem;
  margin: 22px 0 10px;
  color: var(--smoke);
}

.kal-tagestitel--heute { color: var(--sand); }

.kal-karte { border-left: 3px solid var(--linie); }

@media (min-width: 760px) {
  .kal-kopf { flex-direction: row; align-items: center; justify-content: space-between; }
  .kal-blaettern { flex: 0 1 auto; }
  .kal-zeitraum { min-width: 220px; }

  .kal-tag {
    min-height: 104px;
    align-items: stretch;
    justify-content: flex-start;
    padding: 6px 7px;
  }

  .kal-tag__zahl { text-align: right; font-size: 0.82rem; }
  .kal-tag__balken { display: none; }

  .kal-tag__lang { display: flex; flex-direction: column; gap: 2px; width: 100%; }

  .kal-strich {
    border-left: 3px solid var(--sand);
    padding-left: 5px;
    font-size: 0.7rem;
    line-height: 1.25;
    color: var(--bone);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.zeitreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.personenwahl { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }

/* ---------- Kleines Fenster beim Überfahren eines Termins ---------- */

.terminvorschau {
  position: fixed;
  z-index: 80;
  max-width: 320px;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--ink-2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.terminvorschau__titel {
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--bone);
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.terminvorschau__zeile { font-size: 0.86rem; color: var(--smoke); }

.terminvorschau__zeit {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--linie-zart);
  font-size: 0.84rem;
  color: var(--sand);
}

.kal-strich { cursor: pointer; }
.kal-strich:hover { background: rgba(203, 182, 145, 0.14); }

/* Zeilen in der Terminansicht */
.termin-zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linie-zart);
  font-size: 0.95rem;
}

.termin-zeile:last-child { border-bottom: 0; }

@media (min-width: 620px) {
  .termin-zeile { grid-template-columns: 190px 1fr; gap: 16px; align-items: baseline; }
}

.kal-tag__balken { min-height: 12px; cursor: pointer; }
.kal-hinweis { margin-top: -6px; margin-bottom: 14px; }

@media (min-width: 760px) {
  .kal-hinweis { display: none; }
}

/* Antippbare Telefonnummern, Mailadressen und Anschriften. Die gestrichelte
   Linie zeigt, dass da etwas passiert, ohne wie ein Knopf auszusehen. */
.tipplink {
  color: var(--sand);
  text-decoration: none;
  border-bottom: 1px dashed var(--sand-dunkel);
  padding-bottom: 1px;
}

.tipplink:hover {
  color: var(--sand-hell);
  border-bottom-color: var(--sand-hell);
}

/* Unterwegs mit Handschuhen: genug Platz zum Treffen. Gilt überall, nicht nur
   auf Geräten, die sich als Touchgerät melden. */
.tipplink {
  display: inline-block;
  padding: 11px 0;
  line-height: 1.35;
}

/* ---------- Aufklappbarer Abschnitt auf der Startseite ---------- */

.aufklapp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 0;
  margin-bottom: 10px;
  border: 0;
  border-bottom: 1px solid var(--linie-zart);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--bone);
}

.aufklapp:hover { color: var(--sand); }

.aufklapp__rechts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.aufklapp__pfeil {
  font-size: 0.9rem;
  color: var(--sand);
  width: 16px;
  text-align: center;
}

/* ---------- Aufgabenliste ---------- */

.aufgabenzeile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--linie-zart);
}

.aufgabenzeile__titel {
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  color: var(--bone);
  margin-bottom: 3px;
}

.aufgabenzeile__mitte { flex: 1 1 auto; min-width: 0; }
.aufgabenzeile__rechts { display: flex; gap: 8px; flex-wrap: wrap; }

@media (min-width: 620px) {
  .aufgabenzeile { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .aufgabenzeile__rechts { flex: 0 0 auto; }
}

/* ---------- Jahresziel als Kreis ---------- */

.jahresziel {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--ink-3);
  border: 1px solid var(--linie-zart);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 26px;
}

.jahresziel__kreis { flex: 0 0 auto; }

.jahresziel__text { flex: 1 1 auto; min-width: 0; }

.jahresziel__beschriftung {
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.66rem;
  color: var(--smoke-dim);
  margin-bottom: 6px;
}

.jahresziel__zahlen {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--bone);
  line-height: 1.2;
}

.jahresziel__rest { font-size: 0.88rem; color: var(--sand); margin-top: 4px; }
.jahresziel__aendern {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px dashed var(--sand-dunkel);
  background: transparent;
  color: var(--sand);
  font-family: var(--ff-text);
  font-size: 0.84rem;
  cursor: pointer;
}

.jahresziel__aendern:hover { color: var(--sand-hell); border-bottom-color: var(--sand-hell); }