@font-face {
  font-family: 'Inter';
  src: local('Inter'), local('Inter Variable'), url('/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* Design-Tokens aus design/F1_ABNAHME.md §2 — nichts hier ist frei erfunden.
   Termin-Gruen #16a34a nach Timms TE-12-Entscheid vom 31.08.2026 (Kontrast
   3,30:1 gegen weisse Schrift statt 2,09:1 beim Marken-Gruen #2ecb8a).
   Schrift Inter (§7-1). Aktionsknoepfe und Auswahl-Chips >= 64 px (§7-2,
   inklusive des Nachtrags fuer M15/M12). */

:root {
  --grund: #f3f4f6;
  --karte: #ffffff;
  --schatten: 0 2px 12px rgba(18, 23, 38, 0.08);
  --text: #111827;
  --sekundaer: #6b7280;
  --rand: #d9dbe0;
  --dunkel: #111827;

  --offen-flaeche: #ffffff;
  --offen-rand: #9ca3af;
  --offen-schrift: #374151;
  --offen-punkt: #c3c7ce;

  --kontaktiert: #f59e0b;
  --kontaktiert-schrift: #111827;

  --termin: #16a34a;
  --termin-chip: #dbf2e3;
  --termin-chip-schrift: #0d662e;

  --absage: #dc2626;
  --absage-chip: #fbe3e3;
  --absage-chip-schrift: #8c1c1c;

  --r-knopf: 16px;
  --r-chip: 12px;
  --r-karte: 24px;
  --pille: 999px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--grund);
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
}

#buehne { max-width: 390px; margin: 0 auto; padding: 16px 16px 40px; min-height: 100vh; }
body.breit #buehne { max-width: 1000px; }

.kopf { display: flex; justify-content: space-between; align-items: baseline;
        margin: 4px 2px 14px; }
.kopf b { font-weight: 600; }
.kopf span { color: var(--sekundaer); font-size: 14px; }

.karte { background: var(--karte); border-radius: var(--r-karte); box-shadow: var(--schatten);
         padding: 20px; margin-bottom: 14px; }

h1 { font-size: 24px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { font-size: 19px; font-weight: 600; margin: 0 0 4px; }
p  { margin: 0 0 10px; }
.sekundaer { color: var(--sekundaer); font-size: 14px; }
.klein { font-size: 13px; color: var(--sekundaer); }

/* --- Knoepfe: Aktionsknoepfe halten >= 64 px (Plan 5.5) ------------------- */
.knopf {
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; min-height: 64px; padding: 10px 18px; margin-bottom: 10px;
  border: none; border-radius: var(--r-knopf); background: var(--dunkel); color: #fff;
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.knopf small { display: block; font-weight: 400; font-size: 13px; opacity: .82; margin-top: 2px; }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
.knopf.hell { background: #fff; color: var(--offen-schrift); border: 1.5px solid var(--offen-rand); }
.knopf.termin { background: var(--termin); color: #fff; }
.knopf.kontaktiert { background: var(--kontaktiert); color: var(--kontaktiert-schrift); }
.knopf.absage { background: var(--absage); color: #fff; }
/* NA1/P1N-10: 52 px waren eine stille Ausnahme von PLAN 5.5 ("Buttons >= 64 px",
   ohne Ausnahme) — betraf "Später nochmal" und "Ist schon gespeichert". */
.knopf.leise { background: transparent; color: var(--sekundaer); border: 1px solid var(--rand);
               min-height: 64px; font-weight: 500; }
.knopf.mitte { text-align: center; align-items: center; }

/* --- Auswahl-Chips: nach TE-12-Nachtrag ebenfalls >= 64 px ---------------- */
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px;
         margin-bottom: 12px; }
.chip {
  min-height: 64px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; padding: 8px 6px;
  border: 1.5px solid var(--rand); border-radius: var(--r-chip); background: #fff;
  font: inherit; font-weight: 600; cursor: pointer; color: var(--text);
}
.chip small { font-weight: 400; font-size: 12px; color: var(--sekundaer); }
.chip[aria-pressed="true"] { border-color: var(--dunkel); background: var(--dunkel); color: #fff; }
.chip[aria-pressed="true"] small { color: rgba(255,255,255,.8); }
.chip:disabled { opacity: .35; cursor: not-allowed; }

/* --- Eingaben (P2-A) ------------------------------------------------------
   F1 zeichnet genau ZWEI Eingaben — das Notizfeld und die Datumswahl auf M15
   — und beide als Inline-Stil. Der Import-Assistent hat rund fünfzehn; ein
   Stil-Attribut je Feld wäre eine Zweitschrift, die beim ersten Umbau
   auseinanderläuft. Die Werte sind aus M15 übernommen, nichts ist neu
   erfunden: Rand `--rand` 1,5 px, Radius `--r-chip`, min-height 64 px nach
   Plan 5.5 / F1 §7-2, `font: inherit`. */
.eingabe {
  width: 100%; min-height: 64px; padding: 12px; margin-bottom: 10px;
  border: 1.5px solid var(--rand); border-radius: var(--r-chip);
  font: inherit; color: var(--text); background: #fff;
}
.eingabe.schmal { min-height: 48px; margin-bottom: 0; }
textarea.eingabe { min-height: 96px; }
.eingabe:focus-visible { outline: 2px solid var(--dunkel); outline-offset: 1px; }

/* --- Statuspunkte und Pillen --------------------------------------------- */
.pille { display: inline-block; padding: 5px 12px; border-radius: var(--pille);
         font-size: 13px; font-weight: 600; }
.pille.gruen { background: var(--termin-chip); color: var(--termin-chip-schrift); }
.pille.rot   { background: var(--absage-chip); color: var(--absage-chip-schrift); }
.pille.grau  { background: #eceef2; color: var(--offen-schrift); }
.pille.gelb  { background: #fef3c7; color: #7c4a03; }

/* --- Gate-Nachweis (T3/T10) ---------------------------------------------- */
.gate { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600;
        margin: 14px 0 8px; }
.gate .ok  { color: var(--termin-chip-schrift); }
.gate .offen { color: #92610a; }

.art14 { font-size: 12px; color: var(--sekundaer); margin-top: 8px; line-height: 1.4; }
.aufhaenger { background: #f7f8fa; border-left: 3px solid var(--termin);
              border-radius: 0 10px 10px 0; padding: 10px 12px; margin: 12px 0;
              font-size: 15px; }

/* --- Zahlen (T11, Chef) --------------------------------------------------- */
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.zahl { background: #fff; border-radius: var(--r-chip); border: 1px solid var(--rand);
        padding: 14px 10px; text-align: center; }
.zahl b { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; }
.zahl span { font-size: 13px; color: var(--sekundaer); }

.sperrhinweis { margin-top: 12px; font-size: 13px; color: var(--sekundaer);
                border-top: 1px solid var(--rand); padding-top: 10px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rand); }
th { color: var(--sekundaer); font-weight: 600; font-size: 12px;
     text-transform: uppercase; letter-spacing: .04em; }
td.zahlwert, th.zahlwert { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Toast (T10) ---------------------------------------------------------- */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
         background: var(--dunkel); color: #fff; padding: 12px 18px; border-radius: var(--pille);
         font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none;
         transition: opacity .18s ease, transform .18s ease; z-index: 20; max-width: 90vw; }
#toast.sichtbar { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Ladezustand M17: Skelett statt Spinner ------------------------------- */
.skelett { background: linear-gradient(90deg, #e9ebef 25%, #f2f3f6 37%, #e9ebef 63%);
           background-size: 400% 100%; animation: wandern 1.3s ease infinite;
           border-radius: 8px; height: 16px; margin-bottom: 10px; }
.skelett.gross { height: 28px; width: 70%; }
.skelett.knopf { height: 64px; border-radius: var(--r-knopf); }
@keyframes wandern { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

.verborgen { display: none !important; }

/* Offline- und Fehlerband (M7 / M18) */
#band { position: sticky; top: 0; z-index: 15; margin: -16px -16px 12px; padding: 10px 16px;
        font-size: 13px; font-weight: 600; text-align: center; }
#band.offline { background: #fef3c7; color: #7c4a03; }
#band.fehler  { background: var(--absage-chip); color: var(--absage-chip-schrift); }