:root{
  --dunkelbraun:#4A2E1A; --waldbraun:#7A4F35; --hellbraun:#B08060;
  --beige-warm:#C8B49A; --beige-hell:#E2D5C3; --creme:#F5EFE6;
  --salbei-dunkel:#5A6E52; --salbei:#7D9470; --salbei-hell:#A8BBA0;
  --weiss:#FFFFFF; --schwarz:#000000;
  --radius:14px; --shadow:0 2px 14px rgba(74,46,26,.12);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--creme); color:var(--dunkelbraun);
  display:flex; flex-direction:column; min-height:100vh; line-height:1.5;
}

/* Kopf / Navigation */
.topbar{
  background:var(--salbei-dunkel); color:var(--creme);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; padding-top:max(12px,env(safe-area-inset-top));
}
.logo{height:40px; width:auto; background:var(--creme); border-radius:8px; padding:4px}
.topbar-empty{min-height:64px}
.navlink{margin-left:auto; color:var(--creme); text-decoration:none; font-weight:600; padding:6px 10px; border-radius:8px}
.navlink + .navlink{margin-left:8px}
.navlink:hover{background:rgba(255,255,255,.15)}

/* Layout */
.wrap{width:100%; max-width:860px; margin:0 auto; padding:16px; flex:1}
.card{background:var(--weiss); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:18px}
.login{max-width:420px; margin:0 auto}
.login-logo{display:block; width:min(320px,72%); height:auto; margin:3.5vh auto}
@media (max-width:620px){ .login-logo{margin:2.5vh auto; width:min(260px,80%)} }
h1{font-size:1.4rem; margin:.2em 0 .4em} h2{font-size:1.15rem; margin:.2em 0 .4em}
.muted{color:var(--waldbraun); font-size:.92rem}
.hint{color:var(--salbei-dunkel); font-size:.85rem; margin:.3em 0 0}
.head-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* Formularfelder */
label{display:block; font-weight:600; margin:14px 0 6px}
input[type=text],input[type=password]{
  width:100%; padding:13px 14px; font-size:1rem; border:1.5px solid var(--beige-warm);
  border-radius:10px; background:var(--creme); color:var(--dunkelbraun);
}
input[type=file]{
  width:100%; padding:12px; border:1.5px dashed var(--hellbraun);
  border-radius:10px; background:var(--creme); font-size:.95rem;
}
input:focus{outline:none; border-color:var(--salbei); box-shadow:0 0 0 3px var(--salbei-hell)}
.row{display:flex; gap:14px; flex-wrap:wrap}
.col{flex:1; min-width:140px}

.check{display:flex; align-items:flex-start; gap:10px; font-weight:500; margin-top:18px; cursor:pointer}
.check input{width:22px; height:22px; margin-top:2px; flex:none; accent-color:var(--salbei-dunkel)}

/* Buttons */
.btn{
  display:inline-block; border:none; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--beige-hell); color:var(--dunkelbraun); font-weight:600;
  padding:11px 16px; border-radius:10px; font-size:.95rem;
}
.btn:hover{filter:brightness(.97)}
.btn.primary{background:var(--salbei-dunkel); color:var(--creme); width:100%; margin-top:20px; padding:14px}
.btn.primary:disabled{background:var(--beige-warm); color:var(--waldbraun); cursor:not-allowed}
.btn.small{padding:8px 12px; font-size:.85rem}
.btn.danger{background:#9b3b2f; color:#fff}
.btn.danger:hover{background:#84301f}

/* Fortschritt */
.progress{height:10px; background:var(--beige-hell); border-radius:6px; margin-top:14px; overflow:hidden}
.bar{height:100%; width:0; background:var(--salbei); transition:width .2s}

/* Flash */
.flash{padding:12px 14px; border-radius:10px; margin-bottom:14px; font-weight:500}
.flash.success{background:var(--salbei-hell); color:var(--salbei-dunkel)}
.flash.error{background:#f3d9d4; color:#84301f}

/* Personen / Dateien */
details.person{border:1.5px solid var(--beige-hell); border-radius:12px; margin-top:12px; overflow:hidden}
details.person summary{
  list-style:none; cursor:pointer; padding:14px 16px; background:var(--beige-hell);
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
}
details.person summary::-webkit-details-marker{display:none}
.pname{font-weight:700} .pmeta{color:var(--waldbraun); font-size:.85rem}
.person-actions{display:flex; gap:10px; flex-wrap:wrap; padding:12px 16px 0}
.person-actions form{margin:0}

table.files{width:100%; border-collapse:collapse; margin-top:10px}
table.files th{text-align:left; font-size:.78rem; text-transform:uppercase; color:var(--waldbraun); padding:8px 16px; border-bottom:1px solid var(--beige-hell)}
table.files td{padding:10px 16px; border-bottom:1px solid var(--beige-hell); vertical-align:middle}
td.actions{display:flex; gap:8px; flex-wrap:wrap} td.actions form{margin:0}

.foot{text-align:center; color:var(--waldbraun); font-size:.8rem; padding:16px; padding-bottom:max(16px,env(safe-area-inset-bottom))}

/* Mobile: Tabelle als Karten */
@media (max-width:620px){
  table.files,table.files tbody,table.files tr,table.files td{display:block; width:100%}
  table.files thead{display:none}
  table.files tr{border:1px solid var(--beige-hell); border-radius:10px; margin:10px 16px; padding:6px 0}
  table.files td{border:none; padding:6px 14px}
  table.files td[data-l]::before{content:attr(data-l) ": "; font-weight:700; color:var(--waldbraun)}
  td.actions{padding-top:10px}
}