/* ============================================================
   LINIE B — «Werkstattgrau»
   Der Zustand ist eine Tonstufe: was du als Nächstes tust, liegt
   hell und vorn; was bei anderen liegt, tritt dunkel zurück.
   Fette schmale Versalien, Checklisten als Kästchen, Orange nur
   dort, wo es brennt.
   ============================================================ */

/* Barlow Condensed wird mitgeliefert, nicht vom Google-Server geholt:
   Die CSP des Servers erlaubt nur eigene Quellen, und es soll keine
   Adresse zu Google gehen. SIL Open Font License, siehe schriften/LIZENZ.txt.
   Nur das Latin-Subset — 29 KB für beide Schnitte zusammen. */
@font-face {
  font-family: "Barlow Condensed";
  src: url("schriften/barlow-condensed-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("schriften/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --grund:  #E4E4E1;
  --stufe1: #F2F2EF;   /* Als Nächstes — hell, vorn */
  --stufe2: #C6C6C1;   /* Läuft — mitten drin. Hell genug für dunkle Schrift:
                          weisse Schrift auf mittlerem Grau erreicht nur 2.6:1. */
  --stufe3: #24241F;   /* Wartet auf andere — hinten */
  --dunkel: #16161A;
  --matt:   #4A4A45;   /* dunkel genug für Chips und Nebentext auf dem Grund */
  --signal: #FF5A1F;
  --signal-text: #C33C08;   /* satter Ton für Schrift auf hellem Grund */
  /* Barlow Condensed, mitgeliefert — läuft dadurch auf jedem Gerät gleich:
     Mac, iPhone, Windows, Android. Das war der Grund für den Wechsel, denn
     die Vorgänger waren Apple-Systemschriften und fielen anderswo weg.
     Verlauf: Helvetica Neue Condensed → DIN Condensed (verworfen) →
     zurück → Barlow (17.08.). Die Systemschriften bleiben als Rückfall,
     falls die Datei einmal nicht lädt. */
  --schmal: "Barlow Condensed", "HelveticaNeue-CondensedBold",
            "Avenir Next Condensed", "Arial Narrow", sans-serif;
}

/* ---------- Meldungsband ---------- */

.meldung {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 11px 22px;
  background: var(--dunkel);
  color: #fff;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  text-align: center;
}
/* Fehler tragen das Signal — mit dunkler Schrift, weil Weiss auf diesem
   Orange nur 3.1:1 erreicht. */
.meldung.fehler {
  background: var(--signal);
  color: var(--dunkel);
  font-weight: 700;
}

body {
  background: var(--grund);
  color: var(--dunkel);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.42;
}

.rahmen { max-width: 1320px; margin: 0 auto; }

/* ---------- Torhalle ---------- */

.tor {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--grund);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tor-blatt {
  background: var(--stufe1);
  width: min(420px, 100%);
  padding: 34px 32px 30px;
  border-top: 6px solid var(--dunkel);
}

.tor-titel {
  margin: 0 0 14px;
  font-family: var(--schmal);
  font-size: 49px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
}

.tor-text { margin: 0 0 22px; font-size: 14px; color: var(--matt); }

.tor .feld { margin-bottom: 16px; }

.tor-fehler {
  margin: 0 0 16px;
  padding: 10px 13px;
  background: var(--signal);
  color: var(--dunkel);
  font-size: 13.5px;
  font-weight: 700;
}

.tor .knopf.haupt { width: 100%; }

.tor-hinweis {
  margin: 18px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--matt);
}

/* ---------- Kopf ---------- */

.kopf { padding: 28px 32px 0; }
.kopf-oben { gap: 18px; }

h1 {
  margin: 0;
  font-family: var(--schmal);
  /* Barlow läuft rund 11 % schmaler als die vorherige Systemschrift —
     die Grade sind entsprechend angehoben, damit die Anmutung bleibt. */
  font-size: 45px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
}

.ansicht-wechsel { gap: 2px; margin-left: 4px; }
.ansicht-knopf {
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 8px 15px;
  background: rgba(0,0,0,0.06);
  color: var(--matt);
}
.ansicht-knopf:hover { background: rgba(0,0,0,0.11); color: var(--dunkel); }
.ansicht-knopf.aktiv { background: var(--dunkel); color: #fff; }

#neuer-job { margin-left: auto; }

.firmen-zeile { display: flex; gap: 6px; margin-top: 20px; flex-wrap: wrap; align-items: center; }
.kunden-zeile { gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.leisten-name { display: none; }

.firmen-leiste, .kunden-leiste { gap: 5px; }

.firma-chip {
  font-size: 13px;
  padding: 6px 13px;
  background: rgba(0,0,0,0.05);
  color: var(--matt);
}
.firma-chip:hover { background: rgba(0,0,0,0.1); color: var(--dunkel); }
.firma-chip.aktiv { background: var(--dunkel); color: #fff; }

.kunden-chip {
  font-size: 12px;
  padding: 5px 11px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
  color: var(--matt);
}
.kunden-chip:hover { color: var(--dunkel); box-shadow: inset 0 0 0 1px var(--dunkel); }
.kunden-chip.aktiv { background: var(--dunkel); color: #fff; box-shadow: none; }

.sortierung { gap: 8px; font-size: 11.5px; color: var(--matt); }
.sortierung span { letter-spacing: 0.1em; text-transform: uppercase; }
.sortierung select {
  font-size: 12.5px;
  padding: 5px 9px;
  border: 0;
  background: rgba(0,0,0,0.06);
  color: var(--dunkel);
  border-radius: 0;
}

/* ---------- Board: drei Tonstufen ---------- */

.board { gap: 3px; margin: 24px 0 0; padding: 0 32px 60px; }

.spalte { padding-bottom: 6px; }
.spalte[data-status="naechstes"] { background: var(--stufe1); color: var(--dunkel); }
.spalte[data-status="laeuft"]    { background: var(--stufe2); color: var(--dunkel); }
.spalte[data-status="wartet"]    { background: var(--stufe3); color: #fff; }

.spalte-kopf { padding: 19px 22px 15px; }
.spalte-kopf h2 {
  margin: 0;
  font-family: var(--schmal);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}
/* Deckkraft bewusst hoch: auf der hellen Mittelstufe fällt 0.6 unter 4.5:1. */
.zaehler { font-size: 13px; opacity: 0.75; font-variant-numeric: tabular-nums; }

/* ---------- Job ---------- */

.job { padding: 15px 22px 16px; border-top: 1px solid rgba(0,0,0,0.13); }
.spalte[data-status="wartet"] .job { border-top-color: rgba(255,255,255,0.18); }
.job:hover { background: rgba(0,0,0,0.05); }
.spalte[data-status="wartet"] .job:hover { background: rgba(255,255,255,0.07); }
.job:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }

.meta {
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 4px;
}
.meta .kunde { font-weight: 700; opacity: 1; }

/* Firmen als kleine Quadrate — passt zur eckigen Sprache */
.zeichen { width: 7px; height: 7px; flex: 0 0 7px; box-shadow: inset 0 0 0 1.2px currentColor; }
.zeichen[data-firma="wagner-kreativ"] { background: currentColor; }
.zeichen[data-firma="kampagnons"]     { background: linear-gradient(135deg, currentColor 50%, transparent 50%); }
.zeichen[data-firma="mad-saints"]     { opacity: 0.55; background: currentColor; }
.zeichen[data-firma="flying-rebels"]  { background: transparent; }

.titel {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

.beschrieb { margin: 0 0 11px; font-size: 13px; line-height: 1.4; opacity: 0.8; }

.job-fuss { gap: 11px; font-size: 12px; }

/* Checkliste als Kästchen */
.fortschritt { gap: 7px; }
.fortschritt.leer { display: none; }
.einheiten { gap: 4px; }
.einheit { width: 11px; height: 11px; box-shadow: inset 0 0 0 1.3px currentColor; opacity: 0.45; }
.einheit.voll { background: currentColor; opacity: 0.9; }
.zahl { font-variant-numeric: tabular-nums; opacity: 0.8; }

.termin { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
/* Schwarz auf Orange statt Weiss: weisse Schrift auf diesem Orange erreicht
   nur 3.1:1, dunkle 5.5:1 — und es liest sich wie ein Warnband. */
.termin[data-stufe="ueberfaellig"] {
  background: var(--signal);
  color: var(--dunkel);
  padding: 3px 9px;
  font-weight: 700;
}
.termin[data-stufe="heute"] { font-weight: 700; box-shadow: inset 0 0 0 1.4px currentColor; padding: 2px 8px; }
.termin[data-stufe="leer"] { opacity: 0.45; }

.werkzeuge { gap: 3px; }
.mini {
  min-width: 28px; min-height: 28px;
  font-size: 14px;
  color: currentColor;
  opacity: 0.8;
  box-shadow: inset 0 0 0 1px transparent;
}
.mini:hover { opacity: 1; box-shadow: inset 0 0 0 1px currentColor; }

.dazu {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.8;
  padding: 14px 22px;
  border-top: 1px solid rgba(0,0,0,0.13);
}
.spalte[data-status="wartet"] .dazu { border-top-color: rgba(255,255,255,0.18); }
.dazu:hover { opacity: 1; }

.leer { font-size: 13px; opacity: 0.5; padding: 14px 22px; margin: 0; }

/* ---------- Erledigt ---------- */

.erledigt { padding: 24px 32px 60px; }
.woche { background: var(--stufe1); margin-bottom: 3px; }
.woche-kopf { padding: 15px 22px 12px; }
.woche-kopf h2 {
  margin: 0;
  font-family: var(--schmal);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.woche-summe { font-size: 12px; color: var(--matt); }

.fertig-zeile { gap: 11px; padding: 10px 22px; border-top: 1px solid rgba(0,0,0,0.12); }
.fertig-zeile .kuerzel {
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--matt);
  flex: 0 0 auto;
}
.fertig-titel { color: var(--matt); text-decoration: line-through; font-size: 14px; }
.fertig-datum { font-size: 11.5px; color: var(--matt); font-variant-numeric: tabular-nums; }

/* ---------- Knöpfe ---------- */

.knopf {
  font-family: var(--schmal);
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 22px;
  background: rgba(0,0,0,0.06);
  color: var(--dunkel);
}
.knopf:hover { background: rgba(0,0,0,0.12); }
.knopf.haupt { background: var(--dunkel); color: #fff; }
.knopf.haupt:hover { background: #000; }
.knopf.still { background: transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); color: var(--matt); }
.knopf.still:hover { color: var(--dunkel); background: rgba(0,0,0,0.05); }

/* ---------- Panel ---------- */

#schleier { background: rgba(22,22,26,0.35); }

.panel { background: var(--stufe1); border-left: 3px solid var(--dunkel); }
.panel-kopf { padding: 18px 24px; background: var(--dunkel); color: #fff; }
.panel-kopf h2 {
  margin: 0;
  font-family: var(--schmal);
  font-size: 24px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.panel-kopf .knopf.still { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); color: #fff; }
.panel-kopf .knopf.still:hover { color: #fff; background: rgba(255,255,255,0.12); }

.panel-inhalt { padding: 22px 24px; }
.panel-fuss { gap: 8px; padding: 14px 24px; background: rgba(0,0,0,0.06); }

.feld { margin-bottom: 18px; }
.feld-name {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--matt);
  margin-bottom: 5px;
}
.feld-name em { font-style: normal; }

.feld input[type="text"], .feld input[type="date"], .feld textarea, .feld select {
  padding: 9px 11px;
  border: 0;
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.25);
  background: #fff;
  border-radius: 0;
  font-size: 15px;
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--dunkel);
}

.status-wahl { gap: 5px; }
.status-knopf {
  font-size: 12.5px;
  padding: 8px 13px;
  background: rgba(0,0,0,0.06);
  color: var(--matt);
}
.status-knopf:hover { background: rgba(0,0,0,0.12); color: var(--dunkel); }
.status-knopf.aktiv { background: var(--dunkel); color: #fff; }

.task { gap: 11px; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.12); }
.task input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--signal); flex: 0 0 auto; }
.task-text { font-size: 14px; }
.task.erledigt .task-text { text-decoration: line-through; color: var(--matt); }
.task-weg { color: var(--matt); padding: 3px 7px; }
.task-weg:hover { color: var(--signal-text); }

.task-neu { gap: 6px; margin-top: 11px; }
.task-neu input { padding: 9px 11px; border: 0; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.25); background: #fff; }
#task-hinzu { padding: 8px 17px; }

/* ---------- Fuss ---------- */

.fuss {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px 40px;
  flex-wrap: wrap;
}
/* Abmelden gehört ans Ende, nicht in den Kopf: Man tut es einmal am Tag,
   und im Kopf hat es die Erfassung verdrängt. */
#abmelden { margin-left: auto; }
.fuss-notiz { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--matt); }
/* Eine ausgefallene Sicherung darf nicht im Grau untergehen. */
.fuss-notiz.warnung {
  color: var(--dunkel);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--signal);
}

/* ---------- Handy ---------- */

@media (max-width: 820px) {

  /* --- Kopf: eine Zeile statt drei ------------------------------------
     Vorher standen Titel, Ansichtswechsel, Abmelden und «Neuer Job» in drei
     Zeilen mit drei verschiedenen Ausrichtungen — zusammen 48 % des Schirms,
     bevor die erste Karte kam. Jetzt: Titel und Ansichtswechsel in einer
     Zeile, Abmelden in den Seitenfuss, Erfassen als fester Knopf unten. */
  .kopf {
    padding: calc(14px + env(safe-area-inset-top)) 16px 0;
  }
  .kopf-oben { gap: 10px; align-items: center; }
  h1 { font-size: 26px; }
  .ansicht-wechsel { margin-left: auto; }
  .ansicht-knopf { padding: 9px 13px; }

  /* «Neuer Job» wandert an den Daumen: unten rechts, immer erreichbar,
     auch wenn die Liste lang ist. Spart im Kopf eine ganze Zeile. */
  #neuer-job {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 25;
    width: auto;
    margin: 0;
    padding: 0 22px;
    min-height: 54px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.28);
  }

  /* --- Filterzeilen: beide gleich, beide seitlich scrollend ----------- */
  .firmen-zeile, .kunden-zeile {
    margin-top: 10px;
    gap: 8px;
    align-items: center;
  }
  .firma-chip, .kunden-chip {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }
  /* Damit sichtbar wird, dass die Reihe weitergeht, statt einfach abzuschneiden. */
  .firmen-leiste, .kunden-leiste {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    padding-right: 8px;
  }
  .sortierung { flex: 0 0 auto; gap: 6px; }
  .sortierung span { font-size: 10.5px; }

  /* --- Board --------------------------------------------------------- */
  /* Platz unten für den festen Erfassen-Knopf. */
  .board { padding: 0 0 96px; gap: 0; margin-top: 14px; }
  .spalte-kopf { position: sticky; top: 0; z-index: 5; background: inherit; }
  .erledigt { padding: 16px 0 96px; }

  /* --- Karte: Angaben und Bedienung sauber getrennt ------------------- */
  /* Vorher schwebten Pfeil und Haken mit bis zu 60 px Leerraum isoliert
     rechts. Jetzt stehen sie als eigene Gruppe am Rand, durch eine feine
     Linie abgesetzt — sichtbar zusammengehörig statt verstreut. */
  .job-fuss { gap: 10px; }
  .werkzeuge {
    gap: 2px;
    padding-left: 10px;
    border-left: 1px solid rgba(0,0,0,0.14);
  }
  .spalte[data-status="wartet"] .werkzeuge { border-left-color: rgba(255,255,255,0.2); }
  .mini { min-width: 44px; min-height: 44px; font-size: 16px; }

  /* --- Knöpfe, Felder ------------------------------------------------ */
  .knopf { min-height: 46px; }
  .task input[type="checkbox"] { width: 23px; height: 23px; }
  .task { padding: 12px 0; }

  /* --- Panel --------------------------------------------------------- */
  /* dvh statt vh: In iOS Safari rechnet vh ohne die Adressleiste. Das Panel
     ragte deshalb unten hinaus, die Knöpfe klebten am Rand und schnitten den
     Inhalt ab (genau der Befund vom iPhone). dvh folgt der echten Höhe. */
  .panel {
    border-left: 0;
    border-top: 3px solid var(--dunkel);
    height: 92vh;
    height: 92dvh;
  }
  /* Der Kopf hat auf dem Handy Höhe verschenkt: grosse Versalien plus ein
     46-px-Knopf für ein blosses Schliessen. Kompakter, aber weiterhin
     bequem zu treffen. */
  .panel-kopf { padding: 12px 16px; }
  .panel-kopf h2 { font-size: 17px; }
  .panel-kopf .knopf.still { min-height: 40px; padding: 6px 14px; }
  .panel-inhalt { padding: 16px 16px 8px; }
  .panel-fuss { padding-left: 16px; padding-right: 16px; }
  .panel-fuss {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  /* Sichern und Erledigt teilen sich die Zeile, Löschen sitzt darunter —
     statt dass Löschen allein und rechtsbündig herumsteht. */
  .panel-fuss #panel-sichern { flex: 1 1 40%; }
  .panel-fuss #panel-abhaken { flex: 1 1 45%; }
  .panel-fuss #panel-loeschen { flex: 1 1 100%; margin-left: 0; }

  /* --- Seitenfuss ---------------------------------------------------- */
  .fuss {
    padding: 0 16px calc(28px + env(safe-area-inset-bottom));
    gap: 12px;
  }
  #abmelden { margin-left: auto; }

  /* --- Torhalle ------------------------------------------------------ */
  .tor { padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); }
  .tor-titel { font-size: 40px; }
}

/* Die Breite darf unter keinen Umständen wandern: Eine seitlich scrollende
   Chip-Reihe zieht sonst die ganze Seite mit.

   «clip» statt «hidden»: hidden macht das Element zu einem Scroll-Container
   und bricht damit jedes position:sticky darin — die Spaltenköpfe blieben
   nicht mehr stehen. Gemessen: −203 px statt 0. clip schneidet nur ab.
   overscroll-behavior-x verhindert zusätzlich, dass sich die Seite auf dem
   Handy seitlich wegziehen lässt. */
html, body {
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

/* Druck auf einen Knopf soll sich anfühlen, nicht nur aussehen. */
@media (hover: hover) and (pointer: fine) {
  .knopf, .mini, .firma-chip, .kunden-chip { transition: background-color 140ms ease, color 140ms ease; }
}
.knopf:active, .mini:active, #neuer-job:active { transform: scale(0.97); }
.knopf, .mini { transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }

@media (prefers-reduced-motion: reduce) {
  .knopf, .mini, #neuer-job { transition: none; }
  .knopf:active, .mini:active, #neuer-job:active { transform: none; }
}