/* NordPrax Secure File Gateway – öffentliche Oberfläche.
   Tokens übernommen aus kunden.nordprax.de (G:\KI\Portal\portal\app\globals.css,
   .portal-light). Keine Fremdschriften, keine externen Ressourcen. */
:root {
  --np-teal: #279989;
  --np-teal-dark: #1d7a6d;
  --np-teal-light: #e8f5f3;
  --np-tint-teal-text: #0d6e63;
  --np-surface: #ffffff;
  --np-surface-2: #f5f7fa;
  --np-surface-3: #eef1f6;
  --np-border: #cfd8e3;
  --np-text: #0f172a;
  --np-muted: #576579; /* dunkler als im Kundenportal (#64748b), damit ≥4,5:1 auch auf #eef1f6 */
  --np-success: #16a34a;
  --np-success-bg: #f0fdf4;
  --np-error: #dc2626;
  --np-error-bg: #fef2f2;
  --np-warning: #b45309;
  --np-warning-bg: #fffbeb;
  --np-info: #2563eb;
  --np-info-bg: #eff6ff;
  --np-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --np-radius-sm: 6px;
  --np-radius: 8px;
  --np-radius-md: 10px;
  --np-radius-lg: 12px;
  --np-radius-xl: 16px;
  --np-radius-2xl: 20px;
  --np-shadow-sm: 0 1px 3px rgba(15,23,42,0.10), 0 1px 2px rgba(15,23,42,0.06);
  --np-shadow: 0 2px 8px rgba(15,23,42,0.12), 0 1px 3px rgba(15,23,42,0.07);
  --np-focus-outline: 2px solid rgba(39,153,137,0.75);
  --np-dur: 150ms;
  --np-ease: cubic-bezier(0.4, 0, 0.2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--np-font); font-size: 1rem; line-height: 1.55;
  color: var(--np-text); background: var(--np-surface-2);
}
a { color: var(--np-tint-teal-text); text-underline-offset: 2px; }
a:hover { color: var(--np-teal-dark); }
:focus-visible { outline: var(--np-focus-outline); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--np-surface); padding: 8px 12px; border-radius: var(--np-radius); z-index: 10; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }
.np-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopf und Fuß */
.np-header { background: var(--np-surface); border-bottom: 1px solid var(--np-border); }
.np-header__inner, .np-footer__inner { max-width: 880px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.np-header__inner { min-height: 60px; }
.np-logo { display: inline-flex; min-height: 44px; align-items: center; }
.np-logo img { display: block; height: 26px; width: auto; }
.np-header__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--np-tint-teal-text); background: var(--np-teal-light); padding: 4px 10px; border-radius: 9999px; }
.np-main { flex: 1; width: 100%; max-width: 880px; margin: 0 auto; padding: 32px 16px 48px; }
.np-footer { border-top: 1px solid var(--np-border); background: var(--np-surface); font-size: 0.8125rem; color: var(--np-muted); }
.np-footer__inner { min-height: 56px; flex-wrap: wrap; }
.np-footer a { color: var(--np-muted); }

/* Typografie */
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 8px; letter-spacing: -0.01em; }
h2 { font-size: 1.0625rem; margin: 24px 0 8px; }
.np-hero { margin: 8px 0 24px; }
.np-hero h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); }
.np-lead { font-size: 1.0625rem; color: var(--np-muted); margin: 0; max-width: 60ch; }
.np-muted { color: var(--np-muted); }
.np-small { font-size: 0.875rem; }
.np-optional { color: var(--np-muted); font-weight: 400; }
.np-note { margin-top: 24px; font-size: 0.875rem; color: var(--np-muted); }

/* Auswahl auf der Startseite */
.np-choices { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .np-choices { grid-template-columns: 1fr 1fr; } }
.np-choice {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px; min-height: 44px;
  background: var(--np-surface); border: 1px solid var(--np-border); border-radius: var(--np-radius-xl);
  box-shadow: var(--np-shadow-sm); color: var(--np-text); text-decoration: none;
  transition: box-shadow var(--np-dur) var(--np-ease), border-color var(--np-dur) var(--np-ease), transform var(--np-dur) var(--np-ease);
}
a.np-choice:hover { border-color: var(--np-teal); box-shadow: var(--np-shadow); transform: translateY(-1px); color: var(--np-text); }
.np-choice--info { background: var(--np-surface-3); box-shadow: none; }
.np-choice__icon { flex: none; width: 44px; height: 44px; border-radius: var(--np-radius-lg); display: grid; place-items: center; color: var(--np-tint-teal-text); background: var(--np-teal-light); }
.np-choice__text { display: flex; flex-direction: column; gap: 2px; }
.np-choice__text span { color: var(--np-muted); font-size: 0.9rem; }

/* Karten und Formulare */
.np-card { background: var(--np-surface); border: 1px solid var(--np-border); border-radius: var(--np-radius-2xl); box-shadow: var(--np-shadow-sm); padding: 24px; }
@media (min-width: 640px) { .np-card { padding: 32px; } }
.np-card + .np-card { margin-top: 16px; }
.np-grid { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .np-grid { grid-template-columns: 1fr 1fr; } }
.np-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.np-field label, .np-check label { font-weight: 600; font-size: 0.9375rem; }
input:not([type=checkbox]):not([type=file]), textarea {
  font: inherit; color: var(--np-text); background: var(--np-surface);
  border: 1.5px solid var(--np-border); border-radius: var(--np-radius-md);
  padding: 10px 12px; min-height: 44px; width: 100%;
  transition: border-color var(--np-dur) var(--np-ease), box-shadow var(--np-dur) var(--np-ease);
}
textarea { resize: vertical; min-height: 96px; }
input:focus, textarea:focus { outline: none; border-color: var(--np-teal); box-shadow: 0 0 0 3px rgba(39,153,137,0.18); }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--np-error); }
.np-field--code input { font-size: 1.5rem; letter-spacing: 0.3em; text-align: center; max-width: 240px; font-variant-numeric: tabular-nums; }
.np-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 8px 0 16px; }
.np-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--np-teal); }
.np-check label { font-weight: 400; }
.np-check .np-error { grid-column: 2; }
.np-error { color: var(--np-error); font-size: 0.875rem; margin: 0; min-height: 0; }
.np-error:empty { display: none; }
.np-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.np-more { margin: 4px 0 16px; }
.np-more summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.np-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.np-inline input { flex: 1 1 160px; }

/* Buttons (entsprechen .np-btn / .np-btn-primary / .np-btn-ghost des Kundenportals) */
.np-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.np-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: var(--np-radius-md);
  font: inherit; font-weight: 600; font-size: 0.9375rem; cursor: pointer;
  border: 1.5px solid transparent; text-decoration: none;
  transition: background var(--np-dur) var(--np-ease), transform var(--np-dur) var(--np-ease);
}
.np-btn:active { transform: scale(0.98); }
.np-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.np-btn--primary { background: var(--np-teal-dark); color: #fff; box-shadow: var(--np-shadow-sm); } /* #1d7a6d: 5,2:1 zu Weiß (WCAG AA); #279989 erreicht nur 3,5:1 */
.np-btn--primary:hover:not(:disabled) { background: #16655a; color: #fff; }
.np-btn--secondary { background: var(--np-teal-light); color: var(--np-tint-teal-text); border-color: rgba(39,153,137,0.35); }
.np-btn--secondary:hover { background: #d6eeea; }
.np-btn--ghost { background: transparent; color: var(--np-muted); border-color: var(--np-border); }
.np-btn--ghost:hover:not(:disabled) { background: var(--np-surface-3); color: var(--np-text); }
.np-btn--small { min-height: 36px; padding: 6px 12px; font-size: 0.875rem; }

/* Hinweise */
.np-alert { border-radius: var(--np-radius-lg); padding: 12px 14px; margin: 12px 0; font-size: 0.9375rem; }
.np-alert--error { background: var(--np-error-bg); color: #991b1b; border: 1px solid #fecaca; }
.np-alert--warn { background: var(--np-warning-bg); color: #92400e; border: 1px solid #fde68a; }
.np-alert--info { background: var(--np-info-bg); color: #1e3a8a; border: 1px solid #bfdbfe; }

/* Schritte */
.np-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 16px; flex-wrap: wrap; counter-reset: step; }
.np-steps li { counter-increment: step; display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--np-muted); padding: 4px 12px 4px 4px; border-radius: 9999px; background: var(--np-surface); border: 1px solid var(--np-border); }
.np-steps li::before { content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--np-surface-3); font-weight: 600; font-size: 0.8125rem; }
.np-steps li[aria-current=step] { color: var(--np-text); border-color: var(--np-teal); }
.np-steps li[aria-current=step]::before { background: var(--np-teal-dark); color: #fff; }
.np-steps li.is-done::before { background: var(--np-teal-light); color: var(--np-tint-teal-text); content: "✓"; }

/* Dropzone und Dateiliste */
.np-drop { border: 2px dashed var(--np-border); border-radius: var(--np-radius-xl); padding: 28px 16px; text-align: center; color: var(--np-muted); background: var(--np-surface-2); transition: border-color var(--np-dur) var(--np-ease), background var(--np-dur) var(--np-ease); }
.np-drop svg { color: var(--np-teal); }
.np-drop p { margin: 8px 0; }
.np-drop.is-over { border-color: var(--np-teal); background: var(--np-teal-light); }
.np-files { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.np-file { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--np-border); border-radius: var(--np-radius-lg); background: var(--np-surface); }
.np-file__name { font-weight: 600; overflow-wrap: anywhere; }
.np-file__meta { grid-column: 1; font-size: 0.8125rem; color: var(--np-muted); }
.np-file__actions { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 6px; }
.np-file progress { grid-column: 1 / -1; width: 100%; height: 6px; appearance: none; border: 0; border-radius: 9999px; background: var(--np-surface-3); overflow: hidden; }
.np-file progress::-webkit-progress-bar { background: var(--np-surface-3); }
.np-file progress::-webkit-progress-value { background: var(--np-teal); }
.np-file progress::-moz-progress-bar { background: var(--np-teal); }
.np-file[data-state=error] { border-color: #fecaca; background: var(--np-error-bg); }
.np-file[data-state=done] .np-file__meta { color: var(--np-tint-teal-text); }
.np-files--summary .np-file { grid-template-columns: 1fr; }

.np-customer { background: var(--np-teal-light); color: var(--np-tint-teal-text); border-radius: var(--np-radius-lg); padding: 10px 14px; font-weight: 600; }
.np-request { background: var(--np-surface-2); border: 1px solid var(--np-border); border-radius: var(--np-radius-lg); padding: 14px 16px; margin: 12px 0 20px; }
.np-request__label { margin: 0; font-size: 0.8125rem; color: var(--np-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.np-request__purpose { margin: 4px 0; font-weight: 600; white-space: pre-line; }
.np-success-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--np-success-bg); color: var(--np-success); margin-bottom: 12px; }
.np-reference { font-size: 1.125rem; }
.np-reference strong { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.np-prose { max-width: 72ch; }
.np-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.np-table th, .np-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--np-border); vertical-align: top; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }