/* SUNlife Datenraum, gemeinsame Gestaltung. Marineblau als Grund, Neongrün als Akzent. */
:root{
  --bg:#0A1120; --karte:#101A2C; --karte2:#141E31; --karte3:#18243a;
  --linie:rgba(255,255,255,.10); --linie2:rgba(255,255,255,.20);
  --gruen:#8CBE22; --gruen-hell:#A8D93F; --gruen-bg:rgba(140,190,34,.12);
  --txt:#E8EEF5; --dim:#8A97A8; --dim2:#6C7A8C;
  --warn:#E8A33D; --warn-bg:rgba(232,163,61,.12);
  --rot:#E0523D; --rot-bg:rgba(224,82,61,.12);
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gruen); text-decoration:none;}
a:hover{color:var(--gruen-hell);}
h1,h2,h3{margin:0 0 8px; font-weight:700; letter-spacing:-.2px;}
h1{font-size:22px;} h2{font-size:17px;} h3{font-size:14px;}
.dim{color:var(--dim);} .dim2{color:var(--dim2);}
.klein{font-size:12px;}
.mini{font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--dim2);}

button,.knopf{
  font:inherit; font-weight:600; cursor:pointer; border-radius:8px; padding:9px 16px;
  border:1px solid var(--linie2); background:var(--karte2); color:var(--txt); transition:.15s;
}
button:hover,.knopf:hover{background:var(--karte3); border-color:var(--gruen);}
button.haupt{background:var(--gruen); color:#0A1120; border-color:var(--gruen);}
button.haupt:hover{background:var(--gruen-hell); color:#0A1120;}
button.leise{background:transparent; border-color:var(--linie); color:var(--dim); padding:6px 11px; font-size:12.5px;}
button.leise:hover{color:var(--txt); border-color:var(--linie2); background:var(--karte2);}
button:disabled{opacity:.4; cursor:not-allowed;}

input,select,textarea{
  font:inherit; width:100%; padding:9px 11px; border-radius:8px; color:var(--txt);
  background:#0C1526; border:1px solid var(--linie2); outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--gruen); box-shadow:0 0 0 3px var(--gruen-bg);}
label{display:block; font-size:12px; color:var(--dim); margin:0 0 5px;}
.feld{margin-bottom:14px;}
select option{background:#0C1526;}

.karte{background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); padding:18px;}
.marke{display:flex; align-items:center; gap:10px;}
.marke .punkt{width:9px; height:9px; border-radius:50%; background:var(--gruen); box-shadow:0 0 12px var(--gruen);}
.marke .wort{font-weight:700; letter-spacing:.4px;}
.marke .wort span{color:var(--gruen);}

.leiste{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 20px; border-bottom:1px solid var(--linie); background:rgba(16,26,44,.85);
  backdrop-filter:blur(8px); position:sticky; top:0; z-index:20;
}
.marke-klein{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--dim2);}

table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--dim2);
   padding:8px 10px; border-bottom:1px solid var(--linie2); font-weight:600; white-space:nowrap;}
td{padding:9px 10px; border-bottom:1px solid var(--linie); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr:hover{background:rgba(255,255,255,.025);}

.marker{display:inline-block; padding:2px 8px; border-radius:99px; font-size:10.5px; font-weight:700;
        letter-spacing:.6px; text-transform:uppercase; border:1px solid transparent;}
.marker.gruen{background:var(--gruen-bg); color:var(--gruen); border-color:rgba(140,190,34,.35);}
.marker.warn{background:var(--warn-bg); color:var(--warn); border-color:rgba(232,163,61,.35);}
.marker.rot{background:var(--rot-bg); color:var(--rot); border-color:rgba(224,82,61,.35);}
.marker.grau{background:rgba(255,255,255,.06); color:var(--dim); border-color:var(--linie);}

.hinweis{border-radius:8px; padding:10px 13px; font-size:12.5px; margin:10px 0;}
.hinweis.warn{background:var(--warn-bg); border:1px solid rgba(232,163,61,.3); color:#F2C888;}
.hinweis.rot{background:var(--rot-bg); border:1px solid rgba(224,82,61,.3); color:#F0A093;}
.hinweis.gruen{background:var(--gruen-bg); border:1px solid rgba(140,190,34,.3); color:var(--gruen-hell);}

.deckel{position:fixed; inset:0; background:rgba(6,10,18,.82); backdrop-filter:blur(4px);
        display:flex; align-items:center; justify-content:center; padding:24px; z-index:60;}
.dialog{background:var(--karte); border:1px solid var(--linie2); border-radius:14px; padding:24px;
        width:min(560px,100%); max-height:88vh; overflow:auto; box-shadow:0 30px 80px rgba(0,0,0,.6);}

::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13); border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);}