/* ============================================================= */
/* NAVERO Mitgliederbereich – Styles (im Design der Hauptseite)  */
/* ============================================================= */
:root{
  --black:#0d0d0d; --ink:#1a1a1a; --gray-900:#2a2a2a; --gray-700:#4a4a4a;
  --gray-500:#7a7a7a; --gray-300:#c8c8c8; --gray-100:#f0f0f0; --gray-50:#f8f8f7;
  --white:#fff; --red:#e63946; --red-dark:#c92d3a; --red-soft:#fae3e5;
  --green:#2a9d5c; --max:1080px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Raleway',system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink); background:var(--gray-50); line-height:1.6;
  -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column;
}
a{color:var(--red); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Kopfzeile ---------- */
.mb-header{
  background:var(--white); border-bottom:1px solid var(--gray-100);
  padding:.9rem clamp(1rem,4vw,2.5rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.mb-header img{height:34px; width:auto; display:block}
.mb-header .mb-user{display:flex; align-items:center; gap:.9rem; font-size:.9rem; color:var(--gray-700)}
.mb-header .mb-user strong{color:var(--ink); font-weight:600}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:inherit; font-weight:600; font-size:.95rem;
  padding:.7rem 1.4rem; border-radius:8px; border:1px solid transparent;
  cursor:pointer; transition:background .15s,border-color .15s,color .15s; text-align:center;
}
.btn-primary{background:var(--red); color:var(--white)}
.btn-primary:hover{background:var(--red-dark); text-decoration:none}
.btn-primary:disabled{opacity:.6; cursor:not-allowed}
.btn-ghost{background:transparent; color:var(--gray-700); border-color:var(--gray-300)}
.btn-ghost:hover{border-color:var(--gray-500); color:var(--ink); text-decoration:none}
.btn-block{display:block; width:100%}

/* ---------- Auth-Karten (Login / Passwort) ---------- */
.auth-wrap{flex:1; display:flex; align-items:center; justify-content:center; padding:2rem 1.25rem}
.auth-card{
  background:var(--white); width:100%; max-width:410px;
  border:1px solid var(--gray-100); border-radius:16px;
  padding:clamp(1.75rem,5vw,2.5rem); box-shadow:0 12px 40px rgba(0,0,0,.06);
}
.auth-card .brand{text-align:center; margin-bottom:1.5rem}
.auth-card .brand img{height:40px}
.auth-card h1{font-size:1.4rem; font-weight:700; margin-bottom:.35rem; text-align:center}
.auth-card .sub{text-align:center; color:var(--gray-500); font-size:.92rem; margin-bottom:1.6rem}
.field{margin-bottom:1.05rem}
.field label{display:block; font-size:.85rem; font-weight:600; margin-bottom:.35rem; color:var(--gray-700)}
.field input{
  width:100%; padding:.7rem .85rem; font-family:inherit; font-size:1rem;
  border:1px solid var(--gray-300); border-radius:8px; background:var(--white); color:var(--ink);
}
.field input:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft)}
.auth-links{margin-top:1.15rem; text-align:center; font-size:.88rem}
.auth-links a{color:var(--gray-700)}

/* ---------- Meldungen ---------- */
.msg{border-radius:8px; padding:.7rem .9rem; font-size:.9rem; margin-bottom:1.1rem; display:none}
.msg.show{display:block}
.msg-error{background:var(--red-soft); color:var(--red-dark); border:1px solid #f3c3c8}
.msg-ok{background:#e5f5ec; color:#1c7a44; border:1px solid #b9e3ca}

/* ---------- Dashboard ---------- */
.mb-main{flex:1; width:100%; max-width:var(--max); margin:0 auto; padding:clamp(1.5rem,4vw,2.75rem) clamp(1rem,4vw,2rem)}
.mb-main h1{font-size:clamp(1.5rem,4vw,2rem); font-weight:700; margin-bottom:.4rem}
.mb-main .lead{color:var(--gray-500); margin-bottom:2.2rem}
.doc-section{margin-bottom:2.5rem}
.doc-section h2{
  font-size:1.15rem; font-weight:700; margin-bottom:1rem;
  padding-bottom:.5rem; border-bottom:2px solid var(--red-soft);
}
.doc-grid{display:grid; gap:.75rem}
.doc-item{
  display:flex; align-items:center; gap:1rem; background:var(--white);
  border:1px solid var(--gray-100); border-radius:12px; padding:1rem 1.15rem;
  transition:border-color .15s, box-shadow .15s;
}
.doc-item:hover{border-color:var(--gray-300); box-shadow:0 6px 20px rgba(0,0,0,.05)}
.doc-icon{
  flex:none; width:42px; height:42px; border-radius:9px; background:var(--red-soft);
  color:var(--red-dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.72rem;
}
.doc-info{flex:1; min-width:0}
.doc-info .name{font-weight:600; color:var(--ink); word-break:break-word}
.doc-info .meta{font-size:.8rem; color:var(--gray-500); margin-top:.15rem}
.doc-item .btn{flex:none; padding:.55rem 1.1rem; font-size:.88rem}
.empty{color:var(--gray-500); font-style:italic; padding:.5rem 0}
.loading{color:var(--gray-500); padding:1rem 0}

/* ---------- KPI-Karte ---------- */
.kpi-card{
  display:flex; align-items:center; gap:1.15rem;
  background:linear-gradient(135deg,#1a1a1a,#2a2a2a); color:var(--white);
  border-radius:14px; padding:1.25rem 1.4rem; text-decoration:none;
  transition:transform .15s, box-shadow .15s;
}
.kpi-card:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.18); text-decoration:none}
.kpi-card-icon{
  flex:none; width:52px; height:52px; border-radius:12px; background:rgba(230,57,70,.18);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.kpi-card-body{flex:1; min-width:0}
.kpi-card-title{font-weight:700; font-size:1.1rem; color:var(--white)}
.kpi-card-text{font-size:.88rem; color:var(--gray-300); margin-top:.2rem; line-height:1.45}
.kpi-card-cta{flex:none; font-weight:600; font-size:.92rem; color:var(--white); white-space:nowrap;
  background:var(--red); padding:.55rem 1.1rem; border-radius:8px}
.kpi-card:hover .kpi-card-cta{background:var(--red-dark)}
@media(max-width:560px){
  .kpi-card{flex-wrap:wrap}
  .kpi-card-cta{width:100%; text-align:center; margin-top:.5rem}
}

/* ---------- Fusszeile ---------- */
.mb-footer{
  border-top:1px solid var(--gray-100); background:var(--white);
  text-align:center; padding:1.4rem 1rem; font-size:.82rem; color:var(--gray-500);
}
.mb-footer a{color:var(--gray-500)}
.mb-footer a:hover{color:var(--red)}