/* Bewusst festes helles Farbschema: alle iPads sollen gleich aussehen,
   unabhaengig davon, ob am Geraet der Dunkelmodus eingeschaltet ist. */
:root {
  color-scheme: light;

  --ground:      #F1F4F0;
  --surface:     #FFFFFF;
  --surface-2:   #E8EDE7;
  --ink:         #16211C;
  --ink-muted:   #55655C;
  --ink-faint:   #8A9A90;
  --rule:        #D8E0D9;
  --rule-strong: #BDCAC0;
  --pine:        #1B3A2F;
  --pine-soft:   #E4EDE7;
  --brass:       #8F6317;
  --brick:       #98432A;
  --ok:          #24694A;
  --zebra:       #F6F9F5;   /* Zeilenstreifen in breiten Tabellen */

  --radius:   14px;
  --radius-l: 20px;
  --shadow:   0 1px 2px rgba(22,33,28,.06), 0 10px 24px -14px rgba(22,33,28,.28);

  --sans: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Nur die Kiosk-Ansicht auf dem iPad ist bildschirmhoch. Die Auswertung ist ein
   normal scrollendes Dokument — ein height:100% auf body wuerde den Hintergrund
   nach einem Bildschirm abschneiden. */
html { height: 100%; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* ---------- Grundbausteine ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.15rem;
  border-radius: var(--radius); border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: .95rem; white-space: nowrap;
  transition: background .12s ease, transform .08s ease;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.primary { background: var(--pine); border-color: var(--pine); color: #fff; }
.btn.primary:hover { filter: brightness(1.15); }
.btn.danger { color: var(--brick); border-color: var(--rule-strong); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-muted); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.small { min-height: 38px; padding: 0 .8rem; font-size: .85rem; }

.field { display: flex; flex-direction: column; gap: .35rem; }
.field > label { font-size: .78rem; font-weight: 600; color: var(--ink-muted); letter-spacing: .01em; }
.input {
  min-height: 48px; padding: 0 .85rem;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--surface); font-size: 16px; /* verhindert das Hineinzoomen unter iOS */
  width: 100%;
}
.input:focus { border-color: var(--pine); outline: none; box-shadow: 0 0 0 3px var(--pine-soft); }

.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-l); box-shadow: var(--shadow);
}

.eyebrow {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--brass); font-weight: 600;
}

.msg {
  padding: .8rem 1rem; border-radius: var(--radius); font-size: .9rem;
  border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink-muted);
}
.msg.error { border-color: #E3C2B8; background: #FBEFEB; color: var(--brick); }
.msg.ok    { border-color: #BEDCCB; background: #EAF5EF; color: var(--ok); }

/* ---------- Verbindungsanzeige ---------- */

.conn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 600; color: var(--ink-muted);
  padding: .3rem .7rem; border-radius: 100px; background: var(--surface-2);
}
.conn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.conn.offline { background: #FBEFEB; color: var(--brick); }
.conn.offline .dot { background: var(--brick); }
.conn.syncing .dot { background: var(--brass); animation: pulse 1.1s ease-in-out infinite; }

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Hinweis-Einblendung ----------
   Gehoert in die gemeinsame Datei, nicht in pad.css: die Meldung gibt es auf dem
   iPad UND im Admin. Stand sie nur in pad.css, klebte sie im Admin unformatiert
   am linken Rand, weil die Seite pad.css gar nicht laedt. */

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--pine); color: #fff; padding: .7rem 1.2rem; border-radius: 100px;
  font-size: .9rem; font-weight: 600; box-shadow: var(--shadow); z-index: 50;
  max-width: min(90vw, 32rem); text-align: center;
}
.toast.warn { background: var(--brick); }