:root{
  --cream:#f1eee4; --cream-2:#e9e5d7; --cream-card:#faf8f2;
  --ink:#16151c; --ink-soft:#54515f;
  --black:#060608; --header:rgba(8,8,11,.85);
  --pink:#ff2e9a; --pink-deep:#e21d86;
  --cyan:#24c8df; --cyan-deep:#129fb6;
  --glass:rgba(255,255,255,.42); --glass-strong:rgba(255,255,255,.6);
  --glass-border:rgba(255,255,255,.7);
  --glass-shadow:0 14px 40px -20px rgba(20,19,28,.4);
  --line:rgba(22,21,28,.12);
  --radius:16px; --radius-sm:10px;
  --font-head:"Fraunces",Georgia,serif; --font-body:"Inter",system-ui,sans-serif;
}

/* ---------- Dark Mode ----------
   Reine Umdefinition derselben Tokens wie oben. Kein zusaetzliches Markup,
   keine eigenen Klassen - dadurch 1:1 nach be-fame.me/static/css/style.css
   uebertragbar. Markenfarben (--pink/--cyan) bleiben unveraendert, nur die
   Flaechen- und Textwerte kippen. Keine Glows, keine Neon-Schatten. */
:root[data-theme="dark"]{
  --cream:#0d0d12;
  --cream-2:#131319;
  --cream-card:#16161e;
  --ink:#f1eee4;                      /* Text = Be-Fame Altweiss */
  --ink-soft:rgba(241,238,228,.56);
  --glass:rgba(255,255,255,.045);
  --glass-strong:rgba(255,255,255,.072);
  --glass-border:rgba(255,255,255,.10);
  --glass-shadow:0 14px 40px -20px rgba(0,0,0,.8);
  --line:rgba(241,238,228,.09);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font-body); color:var(--ink); background:var(--cream);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
/* Kein Verlauf, keine Farbflaechen auf der Seitenflaeche - be-fame.me setzt
   schlicht `background: var(--cream)` auf den body. Farbige Verlaeufe liegen dort
   nur auf einzelnen Sektionen, nie auf dem Seitenhintergrund. */
.site-header{
  position:sticky; top:0; z-index:100; background:var(--header);
  -webkit-backdrop-filter:saturate(160%) blur(22px); backdrop-filter:saturate(160%) blur(22px);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 8px 30px -18px rgba(0,0,0,.6);
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:0 24px; min-height:72px;
  display:flex; align-items:center; gap:28px;
}
.brand img{height:34px; width:auto; display:block}
.nav{display:flex; align-items:center; gap:24px; margin-left:12px}
.nav a{
  color:rgba(236,233,243,.62); text-decoration:none; font-size:.9rem; font-weight:600;
  letter-spacing:.01em; padding:6px 0; position:relative; transition:color .2s;
}
.nav a:hover{color:#fff}
.nav a.active{color:#fff}
.nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--pink),var(--cyan));
}
.nav{flex:1}
main{max-width:1180px; margin:0 auto; padding:34px 24px 60px}
.page-head{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap}
h1{font-family:var(--font-head); font-size:2rem; font-weight:600; letter-spacing:-.01em}
.sub{color:var(--ink-soft); font-size:.9rem; margin-top:4px}
.btn-primary{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep)); color:#fff;
  padding:12px 20px; border-radius:999px; font-size:.88rem; font-weight:700; border:0; cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(226,29,134,.75), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .2s, box-shadow .2s;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(226,29,134,.85), inset 0 1px 0 rgba(255,255,255,.3)}
.filters{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px}
.input, .select{
  font:inherit; font-size:.9rem; color:var(--ink);
  background:var(--glass-strong); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1.5px solid var(--glass-border); border-radius:var(--radius-sm);
  padding:12px 15px; transition:border-color .2s, box-shadow .2s;
}
.input{flex:1; min-width:240px}
.input::placeholder{color:rgba(84,81,95,.6)}
.input:focus, .select:focus{outline:0; border-color:var(--pink); box-shadow:0 0 0 4px rgba(255,46,154,.14)}
.btn-ghost{
  font:inherit; font-size:.88rem; font-weight:600; color:var(--ink); cursor:pointer;
  background:var(--glass); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1.5px solid var(--glass-border); border-radius:var(--radius-sm); padding:12px 22px;
  transition:background .2s, transform .2s;
}
.btn-ghost:hover{background:var(--glass-strong); transform:translateY(-1px)}
.card{
  background:var(--glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--glass-border); border-radius:var(--radius);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.7);
}
table{width:100%; border-collapse:collapse; font-size:.9rem}
thead th{
  text-align:left; padding:15px 18px; font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft);
  background:rgba(255,255,255,.34); border-bottom:1px solid var(--glass-border);
}
thead th:first-child{border-top-left-radius:var(--radius)}
thead th:last-child{border-top-right-radius:var(--radius)}
tbody tr{border-bottom:1px solid var(--line); cursor:pointer; transition:background .18s}
tbody tr:last-child{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.45)}
:root[data-theme="dark"] thead th{background:rgba(255,255,255,.035)}
:root[data-theme="dark"] tbody tr:hover{background:rgba(255,255,255,.04)}
:root[data-theme="dark"] .note{background:rgba(255,255,255,.04)}
:root[data-theme="dark"] .section-label span{background:rgba(255,255,255,.05)}
:root[data-theme="dark"] .select option{background:#16161e; color:var(--ink)}
:root[data-theme="dark"] .input::placeholder{color:rgba(241,238,228,.38)}
td{padding:14px 18px; vertical-align:middle}
.who{display:flex; align-items:center; gap:12px}
.avatar{
  width:38px; height:38px; border-radius:50%; flex:0 0 38px;
  display:grid; place-items:center; font-size:.78rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--cyan));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px -6px rgba(20,19,28,.5);
}
.who .nm{font-weight:600}
.who .ph{font-size:.76rem; color:var(--ink-soft); margin-top:1px}
.muted{color:var(--ink-soft)}
.badge{
  display:inline-block; padding:5px 13px; border-radius:999px;
  font-size:.74rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;
}
.b-offen{background:rgba(255,255,255,.62); color:var(--ink-soft); border:1px solid var(--glass-border)}
.b-kontakt{background:rgba(36,200,223,.2); color:#0c7f93; border:1px solid rgba(36,200,223,.4)}
.b-gewonnen{background:rgba(255,46,154,.18); color:#b5126a; border:1px solid rgba(255,46,154,.38)}
.b-verloren{background:rgba(22,21,28,.08); color:var(--ink-soft); border:1px solid rgba(22,21,28,.14)}
:root[data-theme="dark"] .b-offen{background:rgba(255,255,255,.06); color:var(--ink-soft); border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .b-kontakt{background:rgba(36,200,223,.14); color:#7fdcec; border-color:rgba(36,200,223,.34)}
:root[data-theme="dark"] .b-gewonnen{background:rgba(255,46,154,.15); color:#ff93c8; border-color:rgba(255,46,154,.36)}
:root[data-theme="dark"] .b-verloren{background:rgba(255,255,255,.035); color:rgba(241,238,228,.4); border-color:rgba(255,255,255,.09)}
:root[data-theme="dark"] .wa{background:rgba(36,200,223,.13); color:#7fdcec; border-color:rgba(36,200,223,.34)}
:root[data-theme="dark"] .bell{background:rgba(255,46,154,.14); color:#ff93c8; border-color:rgba(255,46,154,.34)}
:root[data-theme="dark"] .thumb{background:linear-gradient(145deg, rgba(255,46,154,.22), rgba(36,200,223,.2)); color:rgba(241,238,228,.7)}
:root[data-theme="dark"] .avatar{box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
/* Dark: neutraler Tiefenschatten statt farbigem Schein */
:root[data-theme="dark"] .btn-primary{box-shadow:0 8px 20px -12px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.2)}
:root[data-theme="dark"] .btn-primary:hover{box-shadow:0 14px 28px -14px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.2)}
.lang{
  display:inline-block; padding:3px 9px; border-radius:6px; font-size:.7rem; font-weight:700;
  background:rgba(22,21,28,.07); color:var(--ink-soft); letter-spacing:.06em;
}
:root[data-theme="dark"] .lang{background:rgba(255,255,255,.07)}
/* ---- Detail-Ausschnitt ---- */
.section-label{
  font-family:var(--font-head); font-size:1.4rem; font-weight:600;
  margin:46px 0 16px; display:flex; align-items:center; gap:12px;
}
.section-label span{font-family:var(--font-body); font-size:.76rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); background:rgba(255,255,255,.5);
  border:1px solid var(--glass-border); padding:5px 11px; border-radius:999px}
.detail-grid{display:grid; gap:20px; grid-template-columns:2fr 1fr}
.card-pad{padding:26px 24px}
.card-pad h2{font-family:var(--font-head); font-size:1.5rem; font-weight:600; margin-bottom:4px}
dl{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; margin-top:20px; font-size:.9rem}
dt{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:4px}
dd{font-weight:500}
.wa{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-weight:700; font-size:.86rem;
  color:#0c7f93; background:rgba(36,200,223,.16); border:1px solid rgba(36,200,223,.42);
  padding:7px 14px; border-radius:999px; transition:background .2s;
}
.wa:hover{background:rgba(36,200,223,.28)}
label.fl{display:block; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-soft); margin-bottom:7px}
.field+.field{margin-top:18px}
.select.full{width:100%}
.gallery{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.thumb{
  width:76px; height:96px; border-radius:var(--radius-sm); overflow:hidden; position:relative;
  background:linear-gradient(145deg, rgba(255,46,154,.3), rgba(36,200,223,.3));
  border:1px solid var(--glass-border); box-shadow:0 6px 18px -10px rgba(20,19,28,.5);
  display:grid; place-items:center; font-size:1.5rem;
}
.note{
  background:rgba(255,255,255,.5); border:1px solid var(--glass-border);
  border-radius:var(--radius-sm); padding:15px 17px; font-size:.88rem;
}
.note+.note{margin-top:11px}
.note .meta{display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:.76rem; color:var(--ink-soft); margin-bottom:7px; flex-wrap:wrap}
.bell{display:inline-flex; align-items:center; gap:5px; background:rgba(255,46,154,.16);
  border:1px solid rgba(255,46,154,.36); color:#b5126a; font-weight:700;
  padding:3px 10px; border-radius:999px; font-size:.72rem}

/* ---------- Theme-Toggle ----------
   Baugleich mit .lang-toggle auf be-fame.me (glasige Pille, gleitender Thumb).
   Sitzt im dunklen Header, darum in beiden Modi identisch. */
.theme-toggle{
  position:relative; display:inline-flex; align-items:center; padding:4px; margin-left:auto;
  border-radius:999px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.theme-thumb{
  position:absolute; top:4px; bottom:4px; left:4px; width:62px; z-index:0;
  border-radius:999px; background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 3px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transform:translateX(0); transition:transform .4s cubic-bezier(.45,.05,.15,1);
}
.theme-toggle[data-active="dark"] .theme-thumb{transform:translateX(62px)}
.theme-opt{
  position:relative; z-index:1; width:62px; text-align:center; padding:7px 0;
  border:0; background:none; cursor:pointer; border-radius:999px;
  font-family:inherit; font-size:.78rem; font-weight:700; letter-spacing:.04em;
  color:rgba(236,233,243,.55); line-height:1; transition:color .25s;
}
.theme-toggle[data-active="light"] .theme-opt[data-theme-set="light"],
.theme-toggle[data-active="dark"] .theme-opt[data-theme-set="dark"]{color:#fff}
.theme-opt:hover{color:rgba(255,255,255,.85)}
@media(max-width:640px){
  .theme-thumb,.theme-opt{width:52px}
  .theme-toggle[data-active="dark"] .theme-thumb{transform:translateX(52px)}
}
@media(max-width:900px){ .detail-grid{grid-template-columns:1fr} dl{grid-template-columns:1fr} }

/* ===================================================================
   Ergaenzungen fuer Seiten, die im Design-Entwurf nicht vorkamen:
   Login, Passwort-Dialoge, Team-Verwaltung, Meldungen, leere Listen.
   Gleiche Tokens, gleiche Glass-Logik - nur neue Bausteine.
   =================================================================== */

/* ---------- Meldungen ---------- */
.flash{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--glass-strong); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--glass-border); border-left:3px solid var(--pink);
  border-radius:var(--radius-sm); padding:13px 16px; margin-bottom:16px;
  font-size:.9rem; color:var(--ink);
}
.flash.ok{border-left-color:var(--cyan)}

/* ---------- Zentrierte Karte (Login, Passwort) ---------- */
.auth-wrap{min-height:calc(100vh - 72px); display:grid; place-items:center; padding:40px 24px}
.auth-card{width:100%; max-width:410px; padding:34px 30px}
.auth-card h1{font-size:1.65rem; margin-bottom:6px}
.auth-card .sub{margin-bottom:24px}
.auth-card .field+.field{margin-top:16px}
.auth-card .input{width:100%; flex:none; min-width:0}
.auth-card .btn-primary{width:100%; justify-content:center; margin-top:22px}
.auth-links{margin-top:18px; text-align:center; font-size:.85rem}
.auth-links a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s, border-color .2s}
.auth-links a:hover{color:var(--pink); border-bottom-color:var(--pink)}
.auth-logo{display:block; margin:0 auto 26px; height:38px; width:auto}
:root[data-theme="dark"] .auth-logo{filter:none}

/* Login-Seite hat keinen Header -> Logo braucht eine dunkle Flaeche darunter,
   sonst verschwindet die schwarze PNG-Kante auf dem Altweiss. */
.auth-logo-plate{
  display:grid; place-items:center; margin:0 auto 26px; padding:14px 26px;
  background:var(--black); border-radius:var(--radius); width:fit-content;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.7);
}
.auth-logo-plate img{height:34px; width:auto; display:block}

/* ---------- Formularzeilen ---------- */
.form-grid{display:grid; gap:16px; grid-template-columns:1fr 1fr}
.form-grid .full{grid-column:1 / -1}
textarea.input{min-height:76px; resize:vertical; font-family:inherit; line-height:1.5}
.hint{font-size:.78rem; color:var(--ink-soft); margin-top:6px}

/* ---------- Tabellen-Aktionen / Team ---------- */
.btn-small{
  font:inherit; font-size:.8rem; font-weight:600; cursor:pointer;
  color:var(--ink); background:var(--glass-strong);
  border:1px solid var(--glass-border); border-radius:999px; padding:6px 14px;
  transition:background .2s, border-color .2s;
}
.btn-small:hover{background:var(--glass); border-color:var(--pink)}
.btn-small.danger:hover{border-color:#c0392b; color:#c0392b}
:root[data-theme="dark"] .btn-small.danger:hover{border-color:#ff7a6b; color:#ff7a6b}
.row-actions{display:flex; gap:8px; flex-wrap:wrap}
.b-aktiv{background:rgba(36,200,223,.2); color:#0c7f93; border:1px solid rgba(36,200,223,.4)}
.b-inaktiv{background:rgba(22,21,28,.08); color:var(--ink-soft); border:1px solid rgba(22,21,28,.14)}
:root[data-theme="dark"] .b-aktiv{background:rgba(36,200,223,.14); color:#7fdcec; border-color:rgba(36,200,223,.34)}
:root[data-theme="dark"] .b-inaktiv{background:rgba(255,255,255,.04); color:rgba(241,238,228,.4); border-color:rgba(255,255,255,.09)}

/* ---------- Leere Liste ---------- */
.empty{padding:52px 24px; text-align:center; color:var(--ink-soft)}
.empty strong{display:block; font-family:var(--font-head); font-size:1.2rem; color:var(--ink); margin-bottom:6px}

/* ---------- Fotos ---------- */
.gallery a.thumb{overflow:hidden; padding:0; text-decoration:none}
.gallery a.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb-leer{font-size:.78rem; color:var(--ink-soft)}

/* ---------- Tabelle auf schmalen Schirmen ---------- */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.table-scroll table{min-width:760px}
@media(max-width:700px){
  .page-head{align-items:flex-start}
  h1{font-size:1.6rem}
  .form-grid{grid-template-columns:1fr}
  main{padding:24px 16px 48px}
  .header-inner{padding:0 16px; gap:14px}
  .nav{gap:16px}
}

/* ---------- Offener Einladungslink in der Team-Uebersicht ----------
   Sichtbar, solange die eingeladene Person ihr Passwort nicht gesetzt hat.
   Fallback, falls eine Mail nicht ankommt - ohne ihn koennte ein Mailproblem
   alle aussperren. */
.link-offen{margin-top:10px; max-width:460px}
.link-label{display:block; font-size:.74rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-soft); margin-bottom:5px}
.link-feld{width:100%; font-size:.78rem; padding:8px 11px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.link-feld:focus{outline:0; border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,46,154,.14)}