/* =========================================================
   ASV ClaimManagement — Designsystem
   Eine Quelle für Farben, Abstände, Typografie und Bausteine.
   ========================================================= */

:root{
  /* Flächen */
  --background:#F7F8FA;
  --surface:#FFFFFF;
  --surface-secondary:#F2F4F7;
  --surface-hover:#F7F8FA;
  --border:#E3E7EC;
  --border-strong:#D2D8DF;

  /* Text */
  --text-primary:#151A20;
  --text-secondary:#4A5560;
  --text-muted:#66707B;

  /* Marke: ASV-Blau */
  --primary:#0062B8;
  --primary-hover:#004F96;
  --primary-soft:#EAF2FB;
  --primary-ring:rgba(0,98,184,.16);
  --navy:#1B2430;

  /* Status */
  --success:#12784A;  --success-soft:#E8F5EE;
  --warning:#9A6700;  --warning-soft:#FFF6E2;
  --danger:#B3261E;   --danger-soft:#FDF2F1;
  --info:#0062B8;     --info-soft:#EAF2FB;

  /* Radien */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;

  /* Schatten — sehr zurückhaltend */
  --shadow-xs:0 1px 2px rgba(21,26,32,.04);
  --shadow-sm:0 1px 3px rgba(21,26,32,.06), 0 1px 2px rgba(21,26,32,.04);
  --shadow-md:0 4px 12px rgba(21,26,32,.07), 0 1px 3px rgba(21,26,32,.04);
  --shadow-lg:0 18px 44px rgba(21,26,32,.11), 0 4px 12px rgba(21,26,32,.05);

  /* Abstände */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:56px;

  /* Bewegung */
  --t-fast:140ms cubic-bezier(.32,.72,0,1);
  --t:200ms cubic-bezier(.32,.72,0,1);

  --sidebar-w:248px;
  --header-h:64px;
}

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

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Inter,Roboto,system-ui,sans-serif;
  font-size:15px; line-height:1.55;
  color:var(--text-primary); background:var(--background);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'kern' 1,'liga' 1,'cv11' 1;
}

h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.021em; line-height:1.22}
h1{font-size:26px} h2{font-size:20px} h3{font-size:16px} h4{font-size:14.5px}
p{margin:0}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

.mono{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:.92em; letter-spacing:-.01em}

/* Sekundärtext */
.sub{color:var(--text-secondary); font-size:14.5px}
.muted{color:var(--text-muted); font-size:13px}
.tiny{color:var(--text-muted); font-size:12px}

/* Fokus: durchgängig, sichtbar, ohne Browser-Standard */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--primary-ring); border-color:var(--primary);
  border-radius:var(--r-sm);
}

/* ===================== Buttons ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 18px; border-radius:var(--r-md);
  font:inherit; font-size:14.5px; font-weight:550; letter-spacing:-.005em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background var(--t-fast),border-color var(--t-fast),
             box-shadow var(--t-fast),transform var(--t-fast),color var(--t-fast);
  text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(.5px)}
.btn[disabled],.btn.is-loading{cursor:not-allowed; opacity:.62; transform:none}

.btn-primary{background:var(--primary); color:#fff; box-shadow:var(--shadow-xs)}
.btn-primary:hover:not([disabled]){background:var(--primary-hover); box-shadow:var(--shadow-sm)}

.btn-secondary{background:var(--surface); color:var(--text-primary);
  border-color:var(--border-strong); box-shadow:var(--shadow-xs)}
.btn-secondary:hover:not([disabled]){background:var(--surface-hover); border-color:#BFC7D0}

.btn-ghost{background:transparent; color:var(--text-secondary)}
.btn-ghost:hover:not([disabled]){background:var(--surface-secondary); color:var(--text-primary)}

.btn-danger{background:var(--surface); color:var(--danger); border-color:#F0D5D3}
.btn-danger:hover:not([disabled]){background:var(--danger-soft)}

.btn-sm{height:34px; padding:0 13px; font-size:13.5px; border-radius:var(--r-sm)}
.btn-lg{height:50px; padding:0 22px; font-size:15.5px; border-radius:var(--r-md)}
.btn-block{width:100%}

/* Ladezustand */
.spinner{width:15px; height:15px; border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%; animation:dreh .62s linear infinite; flex:none}
@keyframes dreh{to{transform:rotate(360deg)}}

/* ===================== Formular ===================== */
.feld{display:block; margin-bottom:var(--sp-5)}
.feld > label,.label{display:block; font-size:13.5px; font-weight:550;
  color:var(--text-secondary); margin-bottom:7px; letter-spacing:-.003em}

.input,input:not([type]),input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=number],input[type=date],input[type=time],input[type=search],select,textarea{
  width:100%; height:48px; padding:0 14px;
  background:var(--surface); color:var(--text-primary);
  border:1px solid var(--border-strong); border-radius:var(--r-md);
  font:inherit; font-size:15px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
  appearance:none;
}
textarea{height:auto; min-height:104px; padding:12px 14px; line-height:1.55; resize:vertical}
select{
  padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237A848F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;
}
input::placeholder,textarea::placeholder{color:#A8B1BA}
.input:hover,input:hover:not([disabled]),select:hover,textarea:hover{border-color:#BFC7D0}
.input:focus,input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring);
}
input[type=file]{
  display:block; width:100%; padding:10px 12px; font:inherit; font-size:14px; color:var(--text-secondary);
  background:var(--surface-secondary); border:1px dashed var(--border-strong); border-radius:var(--r-md);
  cursor:pointer; transition:border-color var(--t-fast),background var(--t-fast)}
input[type=file]:hover{border-color:var(--primary); background:var(--primary-soft)}
input[type=file]::file-selector-button{
  font:inherit; font-size:13.5px; font-weight:550; color:var(--text-primary);
  height:34px; padding:0 14px; margin-right:12px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-sm);
  box-shadow:var(--shadow-xs); transition:background var(--t-fast),border-color var(--t-fast)}
input[type=file]::file-selector-button:hover{background:var(--surface-hover); border-color:#BFC7D0}

.hilfe{font-size:12.5px; color:var(--text-muted); margin-top:6px}

/* Passwortfeld mit Auge */
.pw{position:relative}
.pw input{padding-right:48px}
.pw button{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; display:grid; place-items:center;
  background:transparent; border:0; border-radius:var(--r-sm);
  color:var(--text-muted); cursor:pointer; transition:color var(--t-fast),background var(--t-fast);
}
.pw button:hover{color:var(--text-primary); background:var(--surface-secondary)}

/* ===================== Karten ===================== */
.card{background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:16px 20px; border-bottom:1px solid var(--border); flex-wrap:wrap}
.card-head h3{font-size:15.5px}
.card-body{padding:20px}
.card-body.eng{padding:0}

/* ===================== Tabelle ===================== */
.tabelle-huelle{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabelle{width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px}
.tabelle th{
  text-align:left; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-muted); padding:11px 20px; background:var(--surface-secondary);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.tabelle td{padding:14px 20px; border-bottom:1px solid var(--border); vertical-align:middle}
.tabelle tbody tr:last-child td{border-bottom:0}
.tabelle tbody tr{transition:background var(--t-fast)}
.tabelle.klickbar tbody tr{cursor:pointer}
.tabelle.klickbar tbody tr:hover{background:var(--surface-hover)}
.tabelle .rechts{text-align:right}
.zellen-titel{font-weight:550; letter-spacing:-.004em}

/* ===================== Badges ===================== */
.badge{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px;
  border-radius:var(--r-full); font-size:12.5px; font-weight:550; white-space:nowrap;
  background:var(--surface-secondary); color:var(--text-secondary)}
.badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.badge.warten,.badge.eingegangen{background:var(--warning-soft); color:var(--warning)}
.badge.gesendet,.badge.ok{background:var(--success-soft); color:var(--success)}
.badge.kritisch{background:var(--danger-soft); color:var(--danger)}
.badge.info{background:var(--info-soft); color:var(--info)}
.badge.neutral::before{display:none}

/* ===================== Hinweise ===================== */
.alert{display:flex; gap:12px; padding:14px 16px; border-radius:var(--r-md);
  border:1px solid var(--border); background:var(--surface-secondary); font-size:14px;
  animation:einblenden var(--t) both}
.alert .ikon{flex:none; margin-top:1px}
.alert b{display:block; font-weight:600; margin-bottom:2px; font-size:14.5px}
.alert.warnung{background:var(--warning-soft); border-color:#F0DFB8; color:#6B4A00}
.alert.fehler{background:var(--danger-soft); border-color:#F2D4D2; color:#8C1D18}
.alert.erfolg{background:var(--success-soft); border-color:#C9E5D6; color:var(--success)}
.alert.hinweis{background:var(--primary-soft); border-color:#CFE2F5; color:#00437E}

@keyframes einblenden{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}

/* ===================== Leerzustand ===================== */
.leer{padding:52px 24px; text-align:center; color:var(--text-muted)}
.leer h3{color:var(--text-secondary); margin-bottom:6px; font-size:15px}
.leer p{font-size:14px; max-width:400px; margin:0 auto}

/* ===================== Modal ===================== */
.modal{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px;
  background:rgba(21,26,32,.42); backdrop-filter:blur(4px);
  animation:blende var(--t) both; overflow-y:auto}
.modal[hidden]{display:none}
@keyframes blende{from{opacity:0} to{opacity:1}}
.modal .box{width:100%; max-width:560px; background:var(--surface); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); overflow:hidden; margin:auto; animation:hoch var(--t) both}
.modal .box.breit{max-width:880px}
@keyframes hoch{from{opacity:0; transform:translateY(10px) scale(.99)} to{opacity:1; transform:none}}
.modal .kopf{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px 16px}
.modal .kopf h2{font-size:18px}
.modal .inhalt{padding:0 24px 4px; max-height:min(66vh,660px); overflow-y:auto}
.modal .fuss{display:flex; gap:10px; justify-content:flex-end; padding:18px 24px 22px;
  border-top:1px solid var(--border); margin-top:20px; background:var(--surface)}
.schliessen{width:34px; height:34px; display:grid; place-items:center; flex:none;
  background:transparent; border:0; border-radius:var(--r-sm); cursor:pointer; color:var(--text-muted);
  transition:background var(--t-fast),color var(--t-fast)}
.schliessen:hover{background:var(--surface-secondary); color:var(--text-primary)}

/* ===================== Raster ===================== */
.raster{display:grid; gap:var(--sp-5)}
.raster-2{grid-template-columns:repeat(2,1fr)}
.raster-4{grid-template-columns:repeat(4,1fr)}
.spanne-2{grid-column:span 2}
@media(max-width:900px){
  .raster-4{grid-template-columns:repeat(2,1fr)}
  .raster-2{grid-template-columns:1fr}
  .spanne-2{grid-column:auto}
}
@media(max-width:560px){.raster-4{grid-template-columns:1fr}}

/* Werkzeugleiste */
.werkzeuge{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:var(--sp-5)}
.werkzeuge .suche{position:relative; flex:1; min-width:230px}
.werkzeuge .suche svg{position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--text-muted); pointer-events:none}
.werkzeuge .suche input{padding-left:42px}
.werkzeuge select{width:auto; min-width:170px}

/* Trennung */
.hr{height:1px; background:var(--border); border:0; margin:var(--sp-6) 0}