/* ============================================================
   IRON/VOLT — gemeinsames Design-System fuer alle Seiten.
   Vorher hatte jede Seite ihren eigenen :root-Block; alles was
   hier steht, gilt jetzt ueberall.
   ============================================================ */

@font-face{
  font-family:'Oswald';
  src:url('/fonts/oswald.woff2') format('woff2');
  font-weight:200 700;      /* variable Achse, eine Datei */
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#0B0B0D;
  --surface:#141418;
  --surface-2:#1C1C23;
  --line:rgba(255,255,255,.07);
  --text:#F4F4F6;
  --muted:#83838F;
  --volt:#D6FF3E;
  --volt-soft:rgba(214,255,62,.14);
  --volt-ink:#0B0B0D;
  --danger:#FF4A4A;
  --display:'Oswald',"Haettenschweiler","Arial Narrow",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{background:var(--bg);}
body{
  margin:0;min-height:100dvh;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:15px;line-height:1.4;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
/* WebKit haengt "position:fixed" oberhalb vom echten Bildschirmrand auf,
   wenn der Inhalt kuerzer als der Viewport ist (z.B. Log-Seite ohne Historie).
   min-height:100dvh oben reicht dafuer allein nicht -- erst wenn der Body
   auch tatsaechlich diese Hoehe einnimmt (100% statt auto), rechnet Safari
   den fixed-Kontext korrekt gegen den sichtbaren Bildschirm. */
html{height:100%;}
body{height:100%;}
a{color:inherit;}

/* ---------- Typografie ---------- */
.display{font-family:var(--display);text-transform:uppercase;letter-spacing:.01em;font-weight:700;}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;font-weight:700;letter-spacing:.01em;margin:0;}
h1{font-size:1.6rem;}
h2{font-size:1.25rem;}
.num{font-family:var(--display);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:0;}
.eyebrow{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:700;}
.muted{color:var(--muted);}
.volt{color:var(--volt);}

/* ---------- Layout ---------- */
.page{max-width:520px;margin:0 auto;padding:calc(14px + var(--safe-t)) 16px calc(96px + var(--safe-b));}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.topbar .back{font-size:.8rem;font-weight:700;color:var(--muted);text-decoration:none;letter-spacing:.04em;text-transform:uppercase;}

/* ---------- Flaechen ---------- */
.surface{background:var(--surface);border-radius:20px;padding:16px;}
.surface + .surface{margin-top:12px;}

/* ---------- Buttons ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:16px;border:none;border-radius:16px;cursor:pointer;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;
  font-size:1rem;font-weight:700;text-decoration:none;
  background:var(--surface-2);color:var(--text);
  transition:transform .08s ease;
}
.btn:active{transform:scale(.975);}
.btn-volt{background:var(--volt);color:var(--volt-ink);}
.btn-ghost{background:none;color:var(--muted);font-size:.85rem;padding:12px;}
.btn-sm{padding:11px 16px;width:auto;font-size:.82rem;border-radius:12px;}

/* ---------- Formulare ---------- */
label{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);font-weight:700;margin:14px 0 6px;}
label:first-child{margin-top:0;}
input,select,textarea{
  width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--text);font-size:1rem;font-family:var(--body);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--volt);}
input[type=number]{font-family:var(--display);font-weight:700;}
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) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--muted);font-family:var(--display);font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;
}
.chip.on{background:var(--volt);border-color:var(--volt);color:var(--volt-ink);}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:8px;
  font-family:var(--display);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.badge-pr{background:var(--volt-soft);color:var(--volt);}
.badge-quiet{background:var(--surface-2);color:var(--muted);}

/* ---------- Divider ---------- */
.hr{height:1px;background:var(--line);margin:14px 0;}

/* ---------- Bottom-Bar (mit iPhone-Safe-Area) ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  padding:14px 16px calc(14px + var(--safe-b));
  background:linear-gradient(transparent,var(--bg) 42%);
  display:flex;gap:14px;align-items:center;justify-content:center;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(104px + var(--safe-b));transform:translateX(-50%) translateY(10px);
  background:var(--surface-2);color:var(--text);padding:11px 18px;border-radius:999px;
  font-family:var(--display);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.hidden{display:none !important;}

/* ---------- Untere Tab-Leiste (Log / Kalender) ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:15;
  display:flex;background:rgba(11,11,13,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:8px 0 calc(6px + var(--safe-b));
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--muted);text-decoration:none;padding:6px 0;
  font-family:var(--display);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
}
.tab.on{color:var(--volt);}