/* Upload-Seite von SuSaSi. Token-Set: lauer.io (lauer-design). Aufbau wie BwaSi. */
:root{
  --ink:#102c3f;--text:#243b4a;--muted:#627b8d;--blue-900:#003d66;--blue-800:#004b76;
  --blue-700:#005f96;--blue-100:#eaf7ff;--blue-050:#f4fbff;--teal:#138779;--teal-soft:#d9f4ef;
  --orange:#f6a23a;--red:#b3261e;--line:#c9ddeb;--line-soft:#e2edf5;--surface:#fff;--surface-muted:#f3f5f7;
  --focus:var(--orange);
  --container:min(1180px,calc(100vw - 40px));
  --dur-press:100ms;--ease-out:cubic-bezier(0.22,0.61,0.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);background:var(--surface-muted);line-height:1.5}
.wrap{width:var(--container);margin:0 auto}
.topbar{background:var(--blue-900);color:#dff1ff}
.topbar .wrap{display:flex;gap:.875rem;align-items:center;padding:.625rem 0;font-size:.86rem;letter-spacing:.01em}
.topbar strong{color:#fff;font-weight:800;letter-spacing:.02em}
.hero{background:var(--blue-100);border:1px solid var(--line);border-radius:8px;padding:2rem;margin:1.5rem auto}
.kicker{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-800);margin:0 0 .5rem}
h1{color:var(--ink);font-weight:800;font-size:1.9rem;margin:0 0 .625rem;line-height:1.15;letter-spacing:-.01em}
h2{color:var(--ink);font-weight:800;font-size:1.15rem;margin:0 0 .75rem;line-height:1.3}
.lead{max-width:70ch;margin:0}
.grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.25rem;align-items:start;margin-bottom:1.5rem}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px rgba(0,61,102,.08);padding:1.5rem}
.field{margin:1rem 0}
label{display:block;font-weight:700;color:var(--ink);margin-bottom:.5rem}
.drop{border:1px dashed var(--line);border-radius:6px;padding:1.25rem;background:var(--blue-050);text-align:center}
.drop.drag{border-color:var(--blue-700);background:#e3f3ff}
.drop input[type=file]{display:block;margin:0 auto .5rem;max-width:100%}
.drop-hint{color:var(--muted);font-size:.88rem;margin:.375rem 0 0;overflow-wrap:anywhere}
.fieldnote{color:var(--muted);font-size:.84rem;margin:.375rem 0 0;letter-spacing:.01em}
select{width:100%;min-height:48px;padding:0 .75rem;border:1px solid var(--line);border-radius:4px;font:inherit;
  color:var(--text);background:var(--surface)}
.btn{border-radius:4px;min-height:48px;font:inherit;font-weight:800;padding:0 1.125rem;cursor:pointer;
  border:1px solid var(--blue-700);background:var(--surface);color:var(--blue-800);width:100%;
  transition:transform var(--dur-press) var(--ease-out)}
.btn.primary{background:var(--blue-800);color:#fff;border-color:var(--blue-800)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.6;cursor:progress}
.or{display:flex;align-items:center;gap:.625rem;color:var(--muted);font-size:.82rem;margin:.875rem 0;letter-spacing:.01em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.alt{margin:.75rem 0 0;text-align:center;font-size:.92rem}
a{color:var(--blue-700);font-weight:600;text-underline-offset:2px}
input:focus-visible,button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.status{margin:.75rem 0 0;font-weight:600;color:var(--ink)}
.status.err,.status.warn{color:var(--red)}
.info .points,.info .steps{margin:0 0 .25rem;padding-left:1.25rem}
.info li{margin:.375rem 0}
.mt{margin-top:1.25rem}
.foot{text-align:center;color:var(--muted);font-size:.82rem;padding:1.125rem 0 2.5rem;letter-spacing:.01em}
@media(max-width:900px){.grid{grid-template-columns:1fr}.hero{padding:1.375rem}h1{font-size:1.55rem}}
@media(max-width:520px){.panel{padding:1rem}}

/* lauer-design, Kapitel 8: reduzierte Bewegung und erhöhter Kontrast.
   Kein backdrop-filter in diesem Projekt, daher keine Regel für Transparenz. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .btn:active{transform:none}
}
@media (prefers-contrast: more){
  .panel,.hero,.drop,select{border-color:var(--ink)}
  .fieldnote,.drop-hint,.foot,.or{color:var(--text)}
}