/* Anna – Erfassungs-Webapp · Haderer AI CI (Navy · Gold · Cyan)
   Arbeitswerkzeug, bewusst zurückhaltend. Dark only. Self-hosted Fonts. */

/* --- Fonts (self-hosted, eingebettet) ------------------------------------ */
@font-face { font-family:'Space Grotesk'; font-weight:400; font-display:swap;
  src:url('/static/fonts/space-grotesk-400.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:500; font-display:swap;
  src:url('/static/fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:600; font-display:swap;
  src:url('/static/fonts/space-grotesk-600.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:700; font-display:swap;
  src:url('/static/fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-weight:300; font-display:swap;
  src:url('/static/fonts/outfit-300.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-weight:400; font-display:swap;
  src:url('/static/fonts/outfit-400.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-weight:500; font-display:swap;
  src:url('/static/fonts/outfit-500.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-weight:600; font-display:swap;
  src:url('/static/fonts/outfit-600.woff2') format('woff2'); }

:root {
  --navy:#0a1428; --navy-raised:#101f3b; --navy-sunken:#050a14;
  --gold:#d4af37; --gold-soft:#e8cd7a; --gold-light:#f7e7b4; --gold-deep:#a87c1f;
  --cyan:#62e2e5; --cyan-soft:#3a8f92; --cyan-dim:#1c4144;
  --fg:#e8eef8; --muted:#8c9bb3; --faint:#57647c;
  --line:rgba(232,238,248,.10); --line-faint:rgba(232,238,248,.05);
  --line-gold:rgba(212,175,55,.35);
  --danger:#ff6b6b; --danger-dim:rgba(255,107,107,.14);
  --ok:#57d19b;
  --gradient-gold-btn:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 45%,var(--gold-deep) 100%);
  --glow-gold-btn:0 0 18px rgba(212,175,55,.40),0 0 44px rgba(212,175,55,.16);
  --glow-gold-btn-hover:0 0 26px rgba(212,175,55,.55),0 0 64px rgba(212,175,55,.24);
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Outfit',system-ui,sans-serif;
  color-scheme:dark;
}

*,*::before,*::after { box-sizing:border-box; }
/* hidden muss auch gegen display:flex/grid-Utilities gewinnen. */
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background-color:var(--navy); color:var(--fg);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--cyan); color:var(--navy); }
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; border-radius:2px; }

h1,h2,h3 { font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; margin:0; }
a { color:var(--cyan); text-decoration:none; }
a:hover { text-decoration:underline; }

/* --- Layout -------------------------------------------------------------- */
.page { width:100%; max-width:920px; margin:0 auto; padding:0 20px; }

header.app {
  position:sticky; top:0; z-index:20;
  background:rgba(10,20,40,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
header.app .bar { display:flex; align-items:center; gap:14px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand img { height:30px; width:30px; display:block; border-radius:6px; }
.brand .t { font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:-.01em; }
.brand .t span { color:var(--muted); font-weight:400; }
header.app .spacer { flex:1; }
.userbox { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--muted); }
.userbox strong { color:var(--fg); font-weight:500; }

main { padding:28px 0 96px; }

.eyebrow {
  font-family:var(--font-display); font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--cyan);
  display:inline-flex; align-items:center; gap:.5em; margin:0 0 12px;
}
.eyebrow::before { content:"\25CF"; font-size:.5em; color:var(--cyan); }

.card {
  border:1px solid var(--line); border-radius:8px; background:var(--navy-raised);
  padding:22px; margin-bottom:20px;
}
.card > h2 { font-size:19px; margin-bottom:4px; }
.card > .hint { color:var(--muted); font-size:13.5px; margin:0 0 18px; }

/* --- Formularfelder ------------------------------------------------------ */
.grid { display:grid; gap:14px; }
.grid.two { grid-template-columns:1fr 1fr; }
.grid.three { grid-template-columns:1fr 1fr 1fr; }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field.col-span-2 { grid-column:1 / -1; }
label { font-size:13px; color:var(--muted); font-weight:500; }
label .req { color:var(--gold); }

input,select,textarea {
  font-family:var(--font-body); font-size:15px; color:var(--fg);
  background:var(--navy); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; width:100%; transition:border-color .18s ease-out;
}
input::placeholder,textarea::placeholder { color:var(--faint); }
input:focus,select:focus,textarea:focus { border-color:var(--cyan-soft); outline:none; }
input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--gold); }
textarea { resize:vertical; min-height:64px; }
select { appearance:none; background-image:
  linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px; }
input.invalid,textarea.invalid,select.invalid { border-color:var(--danger); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:8px; font-family:var(--font-display);
  font-weight:600; letter-spacing:-.005em; cursor:pointer; text-decoration:none;
  transition:box-shadow .18s,background-color .18s,border-color .18s,color .18s,filter .18s;
  padding:11px 18px; font-size:14px;
}
.btn-solid { background-image:var(--gradient-gold-btn); color:var(--navy); box-shadow:var(--glow-gold-btn); }
.btn-solid:hover { box-shadow:var(--glow-gold-btn-hover); filter:brightness(1.08); text-decoration:none; }
.btn-solid:disabled { filter:grayscale(.5) brightness(.8); box-shadow:none; cursor:not-allowed; }
.btn-ghost { background:transparent; color:var(--fg); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--cyan-soft); color:var(--cyan); text-decoration:none; }
.btn-big { padding:15px 26px; font-size:15px; }
.btn-sm { padding:8px 13px; font-size:13px; }
.btn-danger { background:transparent; color:var(--muted); border-color:var(--line); }
.btn-danger:hover { color:var(--danger); border-color:var(--danger); }

.row-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* --- Autocomplete -------------------------------------------------------- */
.ac-wrap { position:relative; }
.ac-list {
  position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0;
  background:var(--navy-raised); border:1px solid var(--line-gold); border-radius:8px;
  max-height:280px; overflow-y:auto; box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.ac-item { padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--line-faint); }
.ac-item:last-child { border-bottom:none; }
.ac-item:hover,.ac-item.active { background:var(--navy); }
.ac-item .n { font-weight:500; }
.ac-item .m { font-size:12.5px; color:var(--muted); }
.ac-empty { padding:10px 12px; color:var(--faint); font-size:13.5px; }

/* --- Positionszeilen ----------------------------------------------------- */
.pos-list { display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.pos {
  border:1px solid var(--line); border-radius:8px; background:var(--navy);
  padding:14px;
}
.pos .top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.pos .title { font-family:var(--font-display); font-weight:600; font-size:15px; }
.pos .sub { color:var(--muted); font-size:12.5px; margin-top:2px; }
.pos .zeile { font-family:var(--font-display); color:var(--cyan); font-size:14px; white-space:nowrap; }
.pos .fields { display:grid; gap:10px; margin-top:12px; }
.pos .fields.kat { grid-template-columns:120px 150px; }
.pos .fields.ind { grid-template-columns:2fr 90px 90px 130px 90px; }
.pos .fields.ind-nums { grid-template-columns:repeat(4,1fr); }
.badge { display:inline-block; font-size:11px; font-weight:500; font-family:var(--font-display);
  letter-spacing:.04em; color:var(--cyan); border:1px solid var(--cyan-dim);
  border-radius:999px; padding:2px 9px; margin-left:8px; vertical-align:middle; }

.empty-note { color:var(--faint); font-size:13.5px; font-style:italic; padding:6px 0 12px; }

/* --- Summenvorschau ------------------------------------------------------ */
.summary {
  position:sticky; bottom:0; z-index:15;
  border:1px solid var(--line-gold); border-radius:8px;
  background:var(--navy-sunken); padding:16px 20px; margin-top:8px;
}
.summary .rows { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.summary .r { display:flex; justify-content:space-between; font-size:14.5px; }
.summary .r.muted { color:var(--muted); }
.summary .r.total { font-family:var(--font-display); font-weight:600; font-size:20px;
  border-top:1px solid var(--line); padding-top:10px; margin-top:4px; }
.summary .r .val { font-variant-numeric:tabular-nums; }
.summary .r.total .val { color:var(--gold-soft); }
.summary .cta { display:flex; gap:12px; align-items:center; }
.summary .cta .btn-solid { flex:1; }

/* --- Meldungen ----------------------------------------------------------- */
.flash { border-radius:8px; padding:12px 14px; font-size:14px; margin-bottom:16px; display:none; }
.flash.show { display:block; }
.flash.err { background:var(--danger-dim); border:1px solid var(--danger); color:#ffd8d8; }
.flash.ok  { background:rgba(87,209,155,.12); border:1px solid var(--ok); color:#c9f4e1; }
.flash ul { margin:8px 0 0; padding-left:18px; }
.flash .sub { color:var(--muted); font-size:13px; margin-top:6px; }

/* --- Login --------------------------------------------------------------- */
.login-wrap { min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { width:100%; max-width:380px; }
.login-card .brand { justify-content:center; margin-bottom:22px; }
.login-card .brand img { height:40px; width:40px; }
.login-card h1 { font-size:22px; text-align:center; margin-bottom:4px; }
.login-card .sub { text-align:center; color:var(--muted); font-size:14px; margin:0 0 24px; }
.login-card form { display:flex; flex-direction:column; gap:14px; }
.login-card .btn-solid { width:100%; }

.footnote { text-align:center; color:var(--faint); font-size:12.5px; margin-top:22px; }

/* --- Responsive: einspaltig am Handy ------------------------------------- */
@media (max-width:720px) {
  .grid.two,.grid.three { grid-template-columns:1fr; }
  .pos .fields.kat,.pos .fields.ind,.pos .fields.ind-nums { grid-template-columns:1fr 1fr; }
  header.app .bar { height:54px; }
  .brand .t span { display:none; }
  main { padding:20px 0 120px; }
  .card { padding:18px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition-duration:.001ms !important; animation-duration:.001ms !important; }
}