@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ink:#14212D; --paper:#F4F6F5; --surface:#FFFFFF; --surface-2:#EFF2F1;
  --line:#D6DEDD; --muted:#5C6B70; --brass:#B3672B; --brass-ink:#FFFFFF; --brass-soft:#F1E1D2;
  --teal:#3E6B63; --teal-soft:#DCEAE7; --slate:#5B7A8C; --slate-soft:#E1E7EA;
  --good:#3F7D52; --good-soft:#DCEEE1; --warn:#B8862E; --warn-soft:#F3E7D0;
  --critical:#B23B3B; --critical-soft:#F5DEDE;
  --shadow: 0 1px 2px rgba(20,33,45,.06), 0 8px 24px rgba(20,33,45,.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EDF1F1; --paper:#0F171E; --surface:#17222B; --surface-2:#1D2932;
    --line:#2B3944; --muted:#90A0A6; --brass:#D98A4B; --brass-ink:#1B1108; --brass-soft:#3A2A1C;
    --teal:#7CB6AA; --teal-soft:#1C302C; --slate:#8CA6B5; --slate-soft:#243139;
    --good:#6FBE84; --good-soft:#1E3324; --warn:#E0B15C; --warn-soft:#3A2E17;
    --critical:#E07A7A; --critical-soft:#3A2020;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ink:#EDF1F1; --paper:#0F171E; --surface:#17222B; --surface-2:#1D2932;
  --line:#2B3944; --muted:#90A0A6; --brass:#D98A4B; --brass-ink:#1B1108; --brass-soft:#3A2A1C;
  --teal:#7CB6AA; --teal-soft:#1C302C; --slate:#8CA6B5; --slate-soft:#243139;
  --good:#6FBE84; --good-soft:#1E3324; --warn:#E0B15C; --warn-soft:#3A2E17;
  --critical:#E07A7A; --critical-soft:#3A2020;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html, body{ height:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Public Sans", system-ui, sans-serif; -webkit-font-smoothing:antialiased;
}
h1,h2{ font-family:"Archivo", sans-serif; }
p{ margin:0; }
a{ color:inherit; }
.wrap{ max-width:760px; margin:0 auto; padding:0 24px; }

/* ---------- Nav (matches homepage) ---------- */
.site-nav{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.site-nav .wrap{ max-width:1180px; height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.wordmark{ display:flex; align-items:center; gap:8px; text-decoration:none; flex:none; }
.wordmark svg{ width:22px; height:22px; flex:none; color:var(--brass); }
.wordmark span{ font-family:"Archivo", sans-serif; font-weight:800; font-size:1rem; letter-spacing:.01em; color:var(--ink); }
.wordmark .dom{ color:var(--muted); font-weight:600; }
.nav-links{ display:flex; align-items:center; gap:24px; font-size:.86rem; font-weight:600; }
.nav-links a{ color:var(--muted); text-decoration:none; }
.nav-links a:hover{ color:var(--ink); }
.nav-actions{ display:flex; align-items:center; gap:16px; flex:none; }
.nav-actions a.login{ font-size:.86rem; font-weight:600; color:var(--muted); text-decoration:none; }
.nav-actions a.login:hover{ color:var(--ink); }
.auth-email{ font-family:"IBM Plex Mono"; font-size:.78rem; color:var(--muted); }
@media (max-width:860px){ .nav-links{ display:none; } }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:"Public Sans"; font-weight:700; font-size:.9rem; padding:12px 20px;
  border-radius:8px; text-decoration:none; cursor:pointer; border:1px solid transparent;
  white-space:nowrap;
}
.btn-brass{ background:var(--brass); color:var(--brass-ink); }
.btn-brass:hover{ filter:brightness(1.06); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line); padding:9px 16px; font-size:.84rem; }
.btn-outline:hover{ background:var(--surface-2); }

/* ---------- Page ---------- */
.upload-wrap{ padding:44px 24px 80px; }
.upload-wrap h1{ font-size:1.9rem; font-weight:800; margin:0 0 10px; letter-spacing:-.005em; }
.lede{ display:block; font-size:1.02rem; color:var(--muted); line-height:1.55; margin-bottom:32px; }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:28px;
  box-shadow:var(--shadow); margin-bottom:20px;
}
.card h2{ font-size:1.1rem; margin:0 0 14px; }
.card h2:not(:first-child){ margin-top:26px; }
.muted{ color:var(--muted); }
.muted.small{ font-size:.82rem; }
p + p{ margin-top:8px; }

.access-banner p{ font-size:.96rem; line-height:1.55; }
.access-banner p + p{ margin-top:10px; }
.access-banner a{ color:var(--brass); font-weight:600; text-decoration:none; }
.access-banner a:hover{ text-decoration:underline; }

.field{ margin-top:0; }
.field + .field{ margin-top:14px; }
.field label{ display:block; font-size:.78rem; color:var(--muted); margin-bottom:5px; }
.field input[type="text"], .field input[type="email"], .field input[type="password"], .field select{
  width:100%; font-family:"Public Sans"; font-size:.9rem; padding:9px 10px;
  border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink);
}
input:focus-visible, select:focus-visible{ outline:2px solid var(--brass); outline-offset:1px; }
.field-error{ font-size:.82rem; color:var(--critical); margin-top:10px; min-height:1.1em; }
.field-ok{ font-size:.82rem; color:var(--good); margin-top:10px; min-height:1.1em; }

.field-row-inline{ display:flex; gap:8px; align-items:flex-start; margin-top:6px; flex-wrap:wrap; }
.field-row-inline input[type="text"]{
  flex:1; min-width:140px; font-family:"Public Sans"; font-size:.9rem; padding:9px 10px;
  border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink);
}

.checkbox-label{ display:flex; align-items:flex-start; gap:9px; font-size:.86rem; color:var(--ink);
  margin-top:14px; cursor:pointer; line-height:1.45; }
.checkbox-label input{ margin-top:3px; flex:none; }

.btn-primary{
  padding:11px 22px; border:none; border-radius:8px;
  background:var(--brass); color:var(--brass-ink); font-family:"Public Sans"; font-weight:700;
  font-size:.88rem; cursor:pointer;
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }
.btn-ghost{
  padding:9px 16px; border:1px solid var(--line); background:transparent; color:var(--ink);
  font-family:"Public Sans"; font-weight:600; font-size:.84rem; border-radius:8px; cursor:pointer; white-space:nowrap;
}
.btn-ghost:hover{ background:var(--surface-2); }

input[type="file"]{
  display:block; width:100%; font-family:"Public Sans"; font-size:.86rem; color:var(--ink);
  padding:10px; border:1px dashed var(--line); border-radius:8px; background:var(--paper); margin-top:10px;
}

.mapping-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px; margin-top:6px; }

.chip-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; background:var(--teal-soft); color:var(--teal);
  font-size:.82rem; font-weight:600; padding:6px 8px 6px 12px; border-radius:999px;
}
.chip button{
  border:none; background:rgba(0,0,0,.08); color:inherit; width:18px; height:18px; border-radius:50%;
  cursor:pointer; font-size:.7rem; line-height:1; display:flex; align-items:center; justify-content:center;
}

.price-line{ font-size:1rem; margin:14px 0 4px; }
.price-line b{ font-family:"IBM Plex Mono"; }

.paypal-btn-slot{ margin-top:16px; min-height:44px; }

.kontingent-banner{
  background:var(--teal-soft); color:var(--teal); border-radius:10px; padding:12px 18px;
  font-size:.88rem; margin-bottom:20px;
}
.kontingent-banner b{ font-family:"IBM Plex Mono"; }

.progress-bar{ height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin:10px 0 12px; }
.progress-bar .fill{ height:100%; background:var(--brass); border-radius:999px; transition:width .3s ease; }

/* ---------- Modal (same pattern as umkreisrechner) ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:1000; background:rgba(15,23,30,.5);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal{
  position:relative; width:100%; max-width:360px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:24px 22px 20px;
}
.modal h2{ font-family:"Archivo", sans-serif; font-weight:800; font-size:1.1rem; margin:0 0 4px; }
.modal-sub{ font-size:.8rem; color:var(--muted); margin:0 0 18px; }
.modal-close{
  position:absolute; top:14px; right:14px; border:none; background:none; color:var(--muted);
  font-size:.9rem; cursor:pointer; padding:4px;
}
.modal-close:hover{ color:var(--ink); }
.modal .field + .field{ margin-top:12px; }
.modal .btn-primary{ width:100%; margin-top:16px; }
.modal-switch{ text-align:center; font-size:.8rem; color:var(--muted); margin:16px 0 0; }
.modal-switch a{ color:var(--brass); font-weight:600; text-decoration:none; margin-left:4px; }
.modal-switch a:hover{ text-decoration:underline; }