/* ============================================================
   SI NetConsult – Datei-Upload
   Farben zentral hier oben anpassen (Corporate Design).
   Keine externen Fonts/CDNs (DSGVO).
   ============================================================ */

:root{
  --brand:      #0f7bb0;
  --brand-dark: #0a5d87;
  --brand-tint: #e8f3f9;
  --accent:     #7ab648;
  --ink:        #1b2a35;
  --ink-soft:   #5c6f7d;
  --line:       #e2eaf0;
  --bg:         #ffffff;
  --bg-soft:    #f3f8fb;
  --danger:     #c0392b;
  --danger-tint:#fceceb;

  --radius: 10px;
  --shadow: 0 2px 4px rgba(27,42,53,.04), 0 12px 32px rgba(27,42,53,.07);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
}

.wrap{ width:min(1120px, 100% - 40px); margin-inline:auto; }

a{ color:var(--brand); }
a:hover{ color:var(--brand-dark); }

h1,h2,h3{ line-height:1.2; margin:0 0 .5em; font-weight:700; letter-spacing:-.01em; }
h1{ font-size:clamp(1.9rem, 4.2vw, 3rem); }
h2{ font-size:1.35rem; }
h3{ font-size:1.02rem; }

.muted{ color:var(--ink-soft); }

/* ---------------------------------------------------------- Kopfbereich */

.topbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:74px;
}
.logo img{ height:38px; width:auto; display:block; }
.logo-text{ font-weight:700; font-size:1.2rem; color:var(--ink); letter-spacing:-.02em; }
.topnav{ display:flex; align-items:center; gap:26px; font-size:.94rem; }
.topnav a{ color:var(--ink-soft); text-decoration:none; }
.topnav a:hover{ color:var(--brand); }
.topnav .tel{ font-weight:600; color:var(--brand); }

@media (max-width:640px){
  .topnav a:not(.tel){ display:none; }
}

/* ----------------------------------------------------------------- Hero */

.hero{
  background:linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
  border-bottom:1px solid var(--line);
}
.hero-inner{ padding:56px 0 64px; max-width:760px; }
.eyebrow{
  margin:0 0 12px; font-size:.8rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand);
}
.hero h1{ margin-bottom:18px; }
.lead{ margin:0; font-size:1.08rem; color:var(--ink-soft); max-width:58ch; }

/* ----------------------------------------------------------------- Main */

.main{ padding:40px 0 72px; display:grid; gap:24px; }

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
}
.card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.card-head h2{ margin:0; }
.card-head p{ margin:0; font-size:.9rem; }

/* ------------------------------------------------------------- Dropzone */

.dropzone{
  position:relative; overflow:hidden;
  border:2px dashed #bcd3e0;
  border-radius:var(--radius);
  background:var(--bg-soft);
  padding:52px 24px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.dropzone:hover,
.dropzone:focus-visible{ border-color:var(--brand); background:var(--brand-tint); outline:none; }
.dropzone:focus-visible{ box-shadow:0 0 0 3px rgba(15,123,176,.25); }
.dropzone.is-over{ border-color:var(--brand); background:var(--brand-tint); transform:scale(1.005); }

.dz-icon{ width:44px; height:44px; color:var(--brand); margin-bottom:10px; }
.dz-title{ margin:0 0 4px; font-size:1.18rem; font-weight:700; }
.dz-sub{ margin:0; color:var(--ink-soft); font-size:.94rem; }
.dz-sub .link{ color:var(--brand); text-decoration:underline; }

/* Diagonale Laufschrift während der Übertragung */
.dropzone.is-busy::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(-45deg,
    rgba(15,123,176,.07) 0 14px, rgba(15,123,176,0) 14px 28px);
  animation:slide 1.1s linear infinite;
  pointer-events:none;
}
@keyframes slide{ to{ transform:translateX(39.6px); } }
@media (prefers-reduced-motion:reduce){
  .dropzone.is-busy::after{ animation:none; }
  *{ transition:none !important; }
}

/* --------------------------------------------------------------- Felder */

.fields{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.field-pw{ grid-column:1 / -1; max-width:280px; }
@media (max-width:680px){ .fields{ grid-template-columns:1fr; } }

.field{ display:block; font-size:.86rem; color:var(--ink-soft); }
.field span{ display:block; margin-bottom:6px; font-weight:600; color:var(--ink); }
.field em{ font-style:normal; font-weight:400; color:var(--ink-soft); }
.field input{
  width:100%; padding:11px 13px; font:inherit; font-size:.95rem; color:var(--ink);
  border:1px solid var(--line); border-radius:8px; background:#fff;
}
.field input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,123,176,.15); }

/* ----------------------------------------------------------- Dateiliste */

.list{ list-style:none; margin:0; padding:0; }
.item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 16px;
  padding:16px 0;
  border-top:1px solid var(--line);
}
.item:first-child{ border-top:0; }

.item-name{ font-weight:600; word-break:break-word; }
.item-meta{ grid-column:1; font-size:.86rem; color:var(--ink-soft); }
.item-actions{ grid-row:1 / span 2; grid-column:2; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
@media (max-width:600px){
  .item{ grid-template-columns:1fr; }
  .item-actions{ grid-row:auto; grid-column:1; margin-top:8px; }
}

.bar{ grid-column:1 / -1; height:6px; border-radius:99px; background:var(--line); overflow:hidden; }
.bar > i{ display:block; height:100%; width:0; background:var(--brand); border-radius:99px; transition:width .2s ease; }
.item.is-done .bar{ display:none; }
.item.is-error .bar > i{ background:var(--danger); }
.item.is-error .item-meta{ color:var(--danger); }

.badge{
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:2px 8px; border-radius:99px;
  background:rgba(122,182,72,.15); color:#4a7a24; margin-left:8px; vertical-align:1px;
}

/* --------------------------------------------------------------- Button */

.btn{
  display:inline-block; font:inherit; font-size:.9rem; font-weight:600;
  padding:9px 16px; border-radius:8px; border:1px solid var(--line);
  background:#fff; color:var(--ink); cursor:pointer; text-decoration:none; line-height:1.2;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ border-color:#c9d8e2; background:var(--bg-soft); color:var(--ink); }
.btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn-danger{ color:var(--danger); border-color:#eccfcc; background:#fff; }
.btn-danger:hover{ background:var(--danger-tint); border-color:var(--danger); color:var(--danger); }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--ink-soft); padding-inline:10px; }
.btn-ghost:hover{ background:var(--bg-soft); color:var(--ink); }

/* ---------------------------------------------------------------- Notes */

.notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px; }
@media (max-width:820px){ .notes{ grid-template-columns:1fr; gap:16px; } }
.note{ border-left:3px solid var(--brand); padding:2px 0 2px 16px; }
.note h3{ margin:0 0 4px; }
.note p{ margin:0; font-size:.92rem; color:var(--ink-soft); }

/* --------------------------------------------------------------- Footer */

.footer{ background:#16232e; color:#c3d0d9; margin-top:auto; padding:48px 0 28px; font-size:.92rem; }
.footer-inner{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:720px){ .footer-inner{ grid-template-columns:1fr; gap:18px; } }
.footer p{ margin:0 0 8px; }
.footer a{ color:#fff; text-decoration:none; }
.footer a:hover{ color:var(--accent); }
.footer-brand{ font-weight:700; color:#fff; font-size:1.05rem; }
.copy{ margin-top:32px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-size:.85rem; color:#8ba0ae; }

/* ---------------------------------------------------------------- Toast */

.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px);
  background:var(--ink); color:#fff; padding:11px 20px; border-radius:8px;
  font-size:.92rem; box-shadow:var(--shadow); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; z-index:50; max-width:90vw;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* -------------------------------------------------- Einfache Unterseiten */

.page-simple{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg-soft); padding:40px 20px;
}
.simple-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:36px; max-width:520px; width:100%;
}
.simple-card h1{ font-size:1.5rem; }
.simple-card p{ color:var(--ink-soft); }
.file-line{ background:var(--bg-soft); border-radius:8px; padding:14px 16px; color:var(--ink); }
.mt{ margin-top:24px; font-size:.9rem; }