/* Futterbox Kundenkartei — Anmeldung & Verwaltung
   Farbwelt und Typografie identisch zur Kartei-Oberfläche. */

:root{
  /* Corporate Design meine-futterbox.de — nur heller Modus.
     Kontraste nach WCAG AA geprueft (Fliesstext >= 4.5:1). */
  --ground:#F4F6F8; --surface:#fff; --surface-2:#EEF1F4; --line:#DDE2E7;
  --ink:#3F4448; --ink-2:#5F656C; --muted:#6B7178;
  --accent:#63B32F; --accent-strong:#467F20; --accent-ink:#fff;
  --accent-soft:#EDF7E4;
  --accent-deep:#3F7A1C;  /* Text auf hellgruenem Grund — 4.7:1 */ --accent-line:#CDE7B8;
  --amber:#A85C12; --amber-soft:#FCF2E3; --amber-line:#F0DCBE;
  --danger:#B23227; --danger-soft:#FBEAE8; --danger-line:#F1CFCB;
  --shadow-1:0 1px 2px rgba(23,28,33,.05);
  --shadow-2:0 1px 3px rgba(23,28,33,.07), 0 6px 16px rgba(23,28,33,.06);
  --r:6px; --r-card:10px;
  --t:170ms cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
html{background:var(--ground)}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:16px/1.5 "Open Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
}
h1,h2,h3{font-family:"Open Sans",system-ui,sans-serif;font-weight:700;letter-spacing:-.005em;text-wrap:balance;margin:0}
a{color:var(--accent-strong)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ── Zentrierte Karte (Anmeldung, Passwort) ───────────────────────────── */
.auth-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
.auth-card{width:100%;max-width:412px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:32px 30px;box-shadow:var(--shadow-2)}
.brand{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.brand img.logo{height:34px;width:auto;display:block;flex:none}
.brand b{font-size:15px;font-weight:600;color:var(--ink-2);padding-left:11px;border-left:1px solid var(--line)}
.brand span{display:none}

.auth-card h1{font-size:22px;margin-bottom:6px}
.auth-card .sub{color:var(--ink-2);font-size:14.5px;margin:0 0 22px}

/* ── Formular ─────────────────────────────────────────────────────────── */
.field{margin-bottom:15px}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=number],.field select,.field textarea{
  width:100%;min-height:42px;padding:11px 13px;font:inherit;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);transition:border-color var(--t),box-shadow var(--t);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:5px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:520px){.row2{grid-template-columns:1fr}}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:84px}
.pw-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);font:600 12px/1 inherit;padding:8px 9px;cursor:pointer;border-radius:7px}
.pw-toggle:hover{background:var(--surface-2);color:var(--ink)}

/* ── Schaltflächen ────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:11px 17px;transition:background var(--t),border-color var(--t);font:600 15px/1 inherit;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--accent-ink);box-shadow:var(--shadow-1)}
.btn.primary:hover{background:#3D7A1B;border-color:#3D7A1B}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.btn.danger:hover{background:var(--danger-soft)}
.btn.small{padding:7px 11px;font-size:13.5px}
.btn.block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}
.links{margin-top:18px;font-size:14px;display:flex;gap:14px;flex-wrap:wrap}

/* ── Meldungen ────────────────────────────────────────────────────────── */
.msg{padding:11px 14px;border-radius:var(--r);font-size:14.5px;margin-bottom:18px;border-left:3px solid}
.msg.err{background:var(--danger-soft);border-color:var(--danger);color:var(--ink)}
.msg.ok{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.msg.info{background:var(--surface-2);border-color:var(--muted);color:var(--ink)}
.msg.warn{background:var(--amber-soft);border-color:var(--amber);color:var(--ink)}

/* ── Verwaltung ───────────────────────────────────────────────────────── */
.admin-head{background:var(--surface);border-bottom:1px solid var(--line);padding:0 20px;padding-top:env(safe-area-inset-top)}
.admin-head .inner{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:16px;min-height:62px;flex-wrap:wrap}
.admin-head nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.admin-head nav a{padding:8px 13px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--ink-2);text-decoration:none}
.admin-head nav a:hover{background:var(--surface-2)}
.admin-head nav a.on{background:var(--accent-strong);color:var(--accent-ink)}
.wrap{max-width:960px;margin:0 auto;padding:26px 20px calc(40px + env(safe-area-inset-bottom))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:22px;margin-bottom:20px}
.card > h2{font-size:17px;margin-bottom:4px}
.card > .sub{color:var(--ink-2);font-size:14px;margin:0 0 18px}

table.list{width:100%;border-collapse:collapse;font-size:14.5px}
table.list th{text-align:left;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:0 10px 9px;border-bottom:1px solid var(--line);font-weight:700}
table.list td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.list tr:last-child td{border-bottom:0}
table.list .num{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.tag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.tag.admin{background:var(--accent-soft);color:var(--accent-deep)}
.tag.team{background:var(--surface-2);color:var(--ink-2)}
.tag.off{background:var(--danger-soft);color:var(--danger)}

@media(max-width:620px){
  table.list thead{display:none}
  table.list tr{display:block;border:1px solid var(--line);border-radius:var(--r);margin-bottom:11px;padding:6px 10px}
  table.list td{display:flex;justify-content:space-between;gap:14px;border-bottom:0;padding:7px 0}
  table.list td::before{content:attr(data-l);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
}

.inline-form{display:inline}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}
hr.sep{border:0;border-top:1px solid var(--line);margin:22px 0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}