/* BaufiFix – Gestaltung
   Palette: Tannengrün + Papierton + Bernstein (bewusst kein Standard-Dunkelblau)
   Signatur: Rubriken als Aktenreiter (Registermappen-Optik) */
:root{
  --tanne:#17493F; --tanne-dunkel:#0D2E28; --tanne-hell:#1E5C4F;
  --papier:#F6F3EC; --karte:#FFFFFF; --linie:#E3DED2;
  --tinte:#22302C; --gedeckt:#6E7A74;
  --bernstein:#E39A2D; --bernstein-dunkel:#B57615;
  --ok:#2E7D4F; --ok-hell:#E4F1E8;
  --warn:#BE4F26; --warn-hell:#FAE8E0;
  --blau-grau:#5B7570; --hl-hell:#EDF2EE;
  --radius:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.wrap{max-width:980px;margin:0 auto;padding:0 18px}
a{color:var(--tanne-hell)}
h1{font-size:1.7rem;line-height:1.2;margin:.2em 0 .3em;letter-spacing:-.01em}
h2{font-size:1.25rem;margin:.2em 0 .6em}

/* Kopfzeile */
.topbar{background:var(--tanne);color:#fff;border-bottom:4px solid var(--bernstein)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:12px;flex-wrap:wrap}
.marke{color:#fff;text-decoration:none;font-weight:800;font-size:1.35rem;letter-spacing:.01em}
.marke .fix{color:var(--bernstein)}
.topbar nav{display:flex;gap:4px;flex-wrap:wrap}
.topbar nav a{color:#DCE7E1;text-decoration:none;padding:8px 12px;border-radius:8px;font-size:.95rem}
.topbar nav a.aktiv,.topbar nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.topbar nav a.logout{opacity:.8}
main{padding:26px 18px 40px}

/* Startseite */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start;padding-top:16px}
.hero h1{font-size:2.4rem;color:var(--tanne-dunkel)}
.hero h1 .fix{color:var(--bernstein-dunkel)}
.claim{font-size:1.08rem;color:var(--tinte);max-width:34em}
.vorteile{padding:0;margin:18px 0;list-style:none}
.vorteile li{padding:7px 0 7px 30px;position:relative}
.vorteile li::before{content:"";position:absolute;left:0;top:12px;width:18px;height:18px;border-radius:50%;
  background:var(--ok-hell);border:2px solid var(--ok)}
.vorteile li::after{content:"";position:absolute;left:5px;top:16px;width:7px;height:4px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}

/* Karten & Formulare */
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:22px;
  box-shadow:0 1px 3px rgba(20,40,35,.06)}
.formkarte{max-width:560px}
label{display:block;margin:0 0 14px;font-weight:600;font-size:.92rem;color:var(--tanne-dunkel)}
input,select,textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;font:inherit;font-weight:400;
  border:1px solid var(--linie);border-radius:8px;background:#fff;color:var(--tinte)}
input:focus,select:focus,textarea:focus,button:focus{outline:3px solid rgba(227,154,45,.45);outline-offset:1px}
label small{display:block;font-weight:400;color:var(--gedeckt);margin-top:4px}
.checkzeile{display:flex;align-items:center;gap:10px;font-weight:500}
.checkzeile input{width:auto;margin:0}
.btn{display:inline-block;border:1px solid var(--tanne);background:#fff;color:var(--tanne);
  padding:9px 16px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:var(--hl-hell)}
.btn.haupt{background:var(--tanne);color:#fff;border-color:var(--tanne)}
.btn.haupt:hover{background:var(--tanne-hell)}
.btn.mini{padding:5px 10px;font-size:.85rem;border-radius:7px}
.btn.gruen{border-color:var(--ok);color:var(--ok)}
.btn.gruen:hover{background:var(--ok-hell)}
.btn.rot{border-color:var(--warn);color:var(--warn)}
.btn.rot:hover{background:var(--warn-hell)}
.anmeldung h2{color:var(--tanne-dunkel)}
.wechsel{margin-top:14px;font-size:.95rem}
.hinweis,.einleitung{color:var(--gedeckt)}
.zurueck{margin:0 0 8px}

/* Meldungen */
.flash{padding:12px 16px;border-radius:10px;margin:0 0 18px;background:var(--ok-hell);
  border:1px solid var(--ok);color:#1D4A32;font-weight:500}
.flash.fehler{background:var(--warn-hell);border-color:var(--warn);color:#7A2E12}

/* Aktenkopf & Fortschritt */
.akte-kopf{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.meta{color:var(--gedeckt);margin:.2em 0}
.fortschritt-box{min-width:260px}
.fortschritt-zahl{font-weight:700;color:var(--tanne-dunkel)}
.fortschritt-detail{font-size:.85rem;color:var(--gedeckt);margin-top:4px}
.balken{height:12px;border-radius:99px;background:#E7E2D6;overflow:hidden;margin-top:6px;border:1px solid var(--linie)}
.balken.klein{height:8px;min-width:120px}
.balken-fuellung{height:100%;background:linear-gradient(90deg,var(--tanne-hell),var(--ok));border-radius:99px}

/* Rubriken als Aktenreiter (Signatur) */
.rubrik{margin:26px 0 0}
.reiter{display:inline-block;background:var(--tanne);color:#fff;font-weight:700;font-size:.95rem;
  padding:8px 18px 7px;border-radius:10px 10px 0 0;position:relative;letter-spacing:.01em}
.reiter::after{content:"";position:absolute;right:-14px;bottom:0;width:14px;height:100%;
  background:var(--tanne);clip-path:polygon(0 0,100% 100%,0 100%)}
.rubrik-karte{background:var(--karte);border:1px solid var(--linie);border-top:3px solid var(--tanne);
  border-radius:0 var(--radius) var(--radius) var(--radius);padding:6px 18px 16px}

/* Fächer */
.fach{padding:16px 0 14px;border-bottom:1px dashed var(--linie)}
.fach:last-child{border-bottom:none}
.fach-titel{font-weight:700;color:var(--tanne-dunkel);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fach-info{color:var(--gedeckt);font-size:.92rem;margin-top:2px}
.fach-kommentar{margin-top:6px;background:var(--warn-hell);border-left:3px solid var(--warn);
  padding:7px 10px;border-radius:0 8px 8px 0;font-size:.92rem}
.fach.status-nachgefordert{background:linear-gradient(90deg,rgba(190,79,38,.05),transparent);
  border-left:3px solid var(--warn);padding-left:12px;margin-left:-12px}
.chip{font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap}
.chip-offen{background:#EEEAE0;color:#6E6A5C}
.chip-hochgeladen{background:#FCF0DA;color:var(--bernstein-dunkel)}
.chip-geprueft{background:var(--ok-hell);color:var(--ok)}
.chip-nachgefordert{background:var(--warn-hell);color:var(--warn)}
.dateiliste{list-style:none;padding:0;margin:8px 0 0}
.dateiliste li{padding:4px 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dgroesse{color:var(--gedeckt);font-size:.85rem}
.uploadzeile{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;align-items:center}
.uploadzeile input[type=file]{width:auto;flex:1;min-width:220px;margin:0;background:var(--papier)}
.aktionen{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.nachfordern input{width:auto;min-width:220px;margin:0;padding:6px 10px;font-size:.9rem}
.inline{display:inline}
.inlineform{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0}
.inlineform input{width:auto;flex:1;min-width:220px;margin:0}
.formzeilen{max-width:560px;padding-top:10px}
.leer{color:var(--gedeckt)}

/* Aktenübersicht (Admin) */
.aktezeile{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;align-items:center;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:14px 18px;margin:10px 0;text-decoration:none;color:var(--tinte)}
.aktezeile:hover{border-color:var(--tanne);box-shadow:0 2px 8px rgba(20,40,35,.08)}
.az-name{font-weight:700;color:var(--tanne-dunkel)}
.az-mail{display:block;font-weight:400;color:var(--gedeckt);font-size:.85rem}
.az-meta{color:var(--gedeckt);font-size:.92rem}
.az-status{text-align:right;font-size:.9rem}
.az-zahl{font-weight:700;color:var(--tanne-dunkel)}

/* Vorlagen-Tabs */
.tabzeile{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 4px}
.tab{background:#EAE6DB;color:var(--tinte);text-decoration:none;padding:7px 14px;border-radius:9px 9px 0 0;font-weight:600;font-size:.92rem}
.tab.aktiv{background:var(--tanne);color:#fff}

.fuss{border-top:1px solid var(--linie);color:var(--gedeckt);font-size:.85rem;padding:18px 0 30px;margin-top:30px}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;gap:20px}
  .hero h1{font-size:1.9rem}
  .aktezeile{grid-template-columns:1fr;gap:6px}
  .az-status{text-align:left}
  .akte-kopf{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Selbstauskunft */
.sa-raster{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px;padding-top:14px}
.sa-raster .sa-textarea,.sa-raster .sa-feld.sa-textarea{grid-column:1/-1}
.sa-feld{margin-bottom:10px}
.euro{display:flex;align-items:center;gap:8px}
.euro input{flex:1}
.euro span{color:var(--gedeckt);font-weight:600}
.tabzahl{background:rgba(0,0,0,.12);border-radius:99px;padding:1px 8px;font-size:.75rem;margin-left:4px}
.tab.aktiv .tabzahl{background:rgba(255,255,255,.22)}
.sa-speichern{margin:10px 0 4px;text-align:right}
.sa-stand{color:var(--gedeckt);margin-left:12px;font-size:.92rem}
@media (max-width:760px){.sa-raster{grid-template-columns:1fr}}