/* ViVital Portal – Stylesheet für Mitglieder- & Admin-Bereich
   Farbwelt aus der öffentlichen Seite übernommen. */
:root{
  --bg:#FAF7F2; --bg-soft:#F2EBE0; --bg-deep:#E8DFD0;
  --ink:#2A3329; --ink-soft:#4F5A4D; --muted:#8A8A82;
  --sage:#9DAA8B; --sage-deep:#6F805F; --gold:#B89968; --gold-soft:#D7BE94;
  --line:#E1D9C9; --white:#FFFDF8;
  --ok:#3f6f4a; --ok-bg:#e7f0e8; --err:#a13b2c; --err-bg:#f6e7e3;
  --radius:14px; --radius-lg:22px;
  --shadow:0 24px 50px -28px rgba(60,55,40,.22),0 6px 16px -10px rgba(60,55,40,.10);
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4vw,2.8rem);font-weight:400}
h2{font-size:1.9rem}
h3{font-size:1.35rem}
.container{max-width:1120px;margin:0 auto;padding:0 28px}
.muted{color:var(--muted)}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;font-weight:600;color:var(--sage-deep);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--sage-deep)}

/* ── Topbar ── */
.topbar{position:sticky;top:0;z-index:40;background:rgba(250,247,242,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;gap:1.6rem;padding:16px 0}
.brand{font-family:var(--serif);font-size:1.5rem;font-weight:500;letter-spacing:.02em}
.brand sup{font-size:.5em;font-family:var(--sans);font-weight:600;color:var(--sage-deep)}
.topnav{display:flex;gap:1.4rem;margin-left:.5rem;flex-wrap:wrap}
.topnav a{font-size:.9rem;color:var(--ink-soft);padding:.3rem 0;border-bottom:2px solid transparent;transition:.2s}
.topnav a:hover{color:var(--sage-deep)}
.topnav a.active{color:var(--ink);border-color:var(--gold)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:1rem}
.user-chip{font-size:.85rem;color:var(--ink-soft)}
.user-chip strong{color:var(--ink);font-weight:600}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.3rem;border-radius:999px;font-family:var(--sans);font-size:.9rem;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .2s;line-height:1}
.btn-primary{background:var(--ink);color:var(--white)}
.btn-primary:hover{background:var(--sage-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--white)}
.btn-sm{padding:.45rem .85rem;font-size:.8rem}
.btn-danger{background:transparent;color:var(--err);border-color:var(--err)}
.btn-danger:hover{background:var(--err);color:var(--white)}
.btn-block{width:100%;justify-content:center}
.inline-form{display:inline}

/* ── Page layout ── */
.page{padding:48px 0 90px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:32px}
.page-head h1{margin:0}

/* ── Cards ── */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 30px;margin-bottom:24px}
.card h3{margin-top:0}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px}
.stat .num{font-family:var(--serif);font-size:2.6rem;color:var(--ink);line-height:1}
.stat .lbl{font-size:.85rem;color:var(--muted);margin-top:.3rem}

/* ── Forms ── */
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);margin-bottom:.45rem}
.field input,.field select,.field textarea{width:100%;padding:.7rem .9rem;border:1px solid var(--line);border-radius:10px;background:var(--white);font-family:var(--sans);font-size:.95rem;color:var(--ink);transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sage-deep)}
.field textarea{min-height:80px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem;max-height:280px;overflow:auto;padding:.4rem;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.check{display:flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--ink-soft);padding:.35rem .5rem;border-radius:8px}
.check:hover{background:var(--bg-soft)}
.check input{width:auto;margin:0}

/* ── Tables ── */
.table{width:100%;border-collapse:collapse;font-size:.92rem}
.table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600;padding:0 14px 12px;border-bottom:1px solid var(--line)}
.table td{padding:14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:hover td{background:var(--bg-soft)}
.table .name{font-weight:500;color:var(--ink)}
.table .sub{font-size:.8rem;color:var(--muted)}
.actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}

/* ── Badges ── */
.badge{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px}
.badge-admin{background:#efe6d4;color:#8a6d2f}
.badge-member{background:var(--bg-deep);color:var(--ink-soft)}
.badge-active{background:var(--ok-bg);color:var(--ok)}
.badge-invited{background:#fdf3e0;color:#a87a25}
.badge-disabled{background:#ececec;color:#777}

/* ── Video grid ── */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.video-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.25s}
.video-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.video-wrap{aspect-ratio:16/9;position:relative;background:var(--ink)}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-meta{padding:18px 20px}
.video-meta h4{font-family:var(--serif);font-size:1.2rem;margin:0 0 .25rem;font-weight:500}
.video-meta p{font-size:.86rem;color:var(--ink-soft);margin:0}
.thumb{width:120px;height:68px;object-fit:cover;border-radius:8px;background:var(--ink)}
.group-section{margin-bottom:46px}
.group-section .desc{color:var(--ink-soft);margin:.2rem 0 1.4rem}

/* ── Flash ── */
.flash{padding:.85rem 1.1rem;border-radius:12px;margin-bottom:22px;font-size:.92rem}
.flash-ok{background:var(--ok-bg);color:var(--ok);border:1px solid #cfe0d2}
.flash-err{background:var(--err-bg);color:var(--err);border:1px solid #e8cdc6}

/* ── Auth pages ── */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px;background:
  radial-gradient(60% 50% at 80% 10%,rgba(157,170,139,.18),transparent 70%),
  radial-gradient(50% 60% at 10% 90%,rgba(184,153,104,.12),transparent 70%),var(--bg)}
.auth-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;max-width:430px;padding:44px 40px}
.auth-card h1{font-size:2rem;margin:0 0 .2rem}
.auth-card .lead{color:var(--ink-soft);font-size:.95rem;margin-bottom:1.8rem}
.auth-brand{font-family:var(--serif);font-size:1.6rem;margin-bottom:1.6rem;display:block}
.auth-brand sup{font-size:.5em;font-family:var(--sans);font-weight:600;color:var(--sage-deep)}
.auth-foot{margin-top:1.5rem;text-align:center;font-size:.85rem;color:var(--muted)}
.auth-foot a{color:var(--sage-deep)}
.hint{font-size:.8rem;color:var(--muted);margin-top:.4rem}

@media(max-width:720px){
  .form-row{grid-template-columns:1fr}
  .topnav{gap:1rem}
  .table thead{display:none}
  .table td{display:block;border:none;padding:4px 0}
  .table tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
}