:root{
  --bg:#180810;
  --bordo-900:#2B0C19;
  --bordo-800:#3A1022;
  --bordo-700:#4C142C;
  --bordo-500:#7C1B3B;
  --bordo-400:#98254A;
  --mavi-300:#8FD0FF;
  --mavi-400:#5FB5F2;
  --mavi-500:#3D97DB;
  --cream:#F7EEF1;
  --muted:#C7A3B1;
  --line:rgba(247,238,241,.10);
  --ok:#6FD8A8;
  --warn:#F2C063;
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);color:var(--cream);
  font-family:'Manrope',sans-serif;font-size:15px;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
a{color:var(--mavi-300)}

/* ===== Typo-Bausteine ===== */
.wordmark{font-family:'Anton',sans-serif;font-size:20px;text-transform:uppercase;letter-spacing:.03em;line-height:1}
.wordmark span{color:var(--mavi-300)}
.wordmark.big{font-size:34px;text-align:center}
.section-title{
  font-family:'Space Grotesk',monospace;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:26px 0 12px;
}
.mini{font-size:12px;color:var(--muted)}
.center{text-align:center}

/* ===== Auth ===== */
.auth-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-box{width:100%;max-width:420px;background:var(--bordo-900);border:1px solid var(--line);border-radius:24px;padding:30px 24px}
.auth-sub{text-align:center;color:var(--muted);font-size:13px;margin:10px 0 22px}
.auth-tabs{display:flex;gap:6px;background:var(--bg);border-radius:12px;padding:5px;margin-bottom:20px}
.auth-tabs button{
  flex:1;border:none;background:transparent;color:var(--muted);padding:10px;
  border-radius:9px;font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;cursor:pointer;
}
.auth-tabs button.on{background:var(--bordo-700);color:var(--cream)}

/* ===== Formulare ===== */
.field{margin-bottom:14px}
.field label{
  display:block;font-family:'Space Grotesk',monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;color:var(--cream);font-family:'Manrope',sans-serif;font-size:14.5px;
  color-scheme:dark;
}
.field textarea{resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--mavi-500);outline-offset:0;border-color:transparent}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted);margin:6px 0 16px;line-height:1.5;cursor:pointer}
.consent input{margin-top:2px;accent-color:var(--mavi-400)}

.btn{
  display:block;width:100%;text-align:center;background:var(--mavi-400);color:#0D2233;
  border:none;border-radius:12px;padding:13px;font-family:'Manrope',sans-serif;
  font-weight:800;font-size:14px;cursor:pointer;margin-top:8px;
}
.btn:hover{background:var(--mavi-300)}
.btn.ghost{background:transparent;color:var(--mavi-300);border:1px solid rgba(143,208,255,.4)}
.btn.ghost:hover{background:rgba(143,208,255,.08)}
.btn.small{width:auto;padding:8px 14px;font-size:12.5px;margin-top:0}
.btn:disabled{opacity:.5;cursor:default}

.msg{margin-top:14px;font-size:13px;color:var(--warn);text-align:center;line-height:1.5}

/* ===== App-Shell ===== */
#app{max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative}
.appbar{padding:18px 20px;position:relative;overflow:hidden}
.sash{
  position:absolute;top:0;right:-30px;width:120px;height:200%;
  background:linear-gradient(180deg,var(--bordo-500),var(--mavi-500));
  transform:skewX(-18deg);opacity:.16;pointer-events:none;
}
.avatar{
  position:absolute;right:20px;top:12px;width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--bordo-400),var(--mavi-400));border:none;color:var(--cream);
  font-family:'Space Grotesk',monospace;font-size:13px;font-weight:700;cursor:pointer;
}
#main{flex:1;padding:6px 20px 100px}
.greet{font-size:14px;color:var(--muted);margin:6px 0 16px}
.greet b{color:var(--cream)}
.stack{display:flex;flex-direction:column;gap:14px}
.backlink{background:none;border:none;color:var(--muted);font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;cursor:pointer;padding:6px 0 16px;display:block}

/* ===== Cards ===== */
.card{
  background:var(--bordo-800);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;position:relative;overflow:hidden;
}
.form-card{padding-top:16px}
.card .tag{
  display:inline-block;font-family:'Space Grotesk',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mavi-300);
  border:1px solid rgba(143,208,255,.35);border-radius:999px;padding:4px 10px;margin-bottom:12px;
}
.card h3{
  font-family:'Anton',sans-serif;font-weight:400;font-size:23px;
  text-transform:uppercase;letter-spacing:.015em;line-height:1.08;
}
.card .sub{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.5}
.deadline{display:flex;align-items:baseline;gap:8px;margin-top:14px;font-family:'Space Grotesk',monospace}
.deadline b{font-size:21px;color:var(--mavi-300)}
.deadline span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}

.status-chip{
  font-family:'Space Grotesk',monospace;font-size:11px;letter-spacing:.06em;
  border-radius:999px;padding:5px 11px;white-space:nowrap;
}
.st-requested{background:rgba(143,208,255,.14);color:var(--mavi-300)}
.st-confirmed{background:rgba(242,192,99,.15);color:var(--warn)}
.st-paid{background:rgba(111,216,168,.14);color:var(--ok)}
.st-closed{background:rgba(247,238,241,.08);color:var(--muted)}

.steps{display:flex;gap:6px;margin:16px 0}
.step{
  flex:1;text-align:center;font-family:'Space Grotesk',monospace;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;padding:8px 2px;border-radius:8px;
  background:var(--bordo-900);color:var(--muted);border:1px solid var(--line);
}
.step.done{background:rgba(143,208,255,.13);color:var(--mavi-300);border-color:rgba(143,208,255,.3)}
.note{font-size:12px;color:var(--muted);line-height:1.55;margin:14px 0;border-left:2px solid var(--mavi-500);padding-left:12px}

.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.stepper button{width:52px;padding:12px 0;background:transparent;border:none;color:var(--mavi-300);font-size:20px;font-weight:700;cursor:pointer}
.stepper div{flex:1;text-align:center;font-family:'Space Grotesk',monospace;font-size:18px;font-weight:700}

/* ===== Üye Kartı ===== */
.membercard{
  border-radius:20px;padding:22px 20px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#5B1530 0%, #3A1022 55%, #2B0C19 100%);
  border:1px solid rgba(143,208,255,.22);
  min-height:200px;display:flex;flex-direction:column;justify-content:space-between;
  margin-top:6px;
}
.membercard .stripe{
  position:absolute;top:-20%;left:34%;width:74px;height:150%;
  background:linear-gradient(180deg,var(--mavi-400),var(--mavi-500));
  transform:skewX(-18deg);opacity:.9;
}
.membercard .stripe.b{left:calc(34% + 86px);width:26px;opacity:.55;background:var(--bordo-400)}
.membercard > *{position:relative;z-index:1}
.mc-top{display:flex;justify-content:space-between;align-items:flex-start}
.mc-logo{font-family:'Anton',sans-serif;font-size:15px;text-transform:uppercase;line-height:1.05}
.mc-logo span{color:var(--mavi-300)}
.mc-since{font-family:'Space Grotesk',monospace;font-size:10px;color:rgba(247,238,241,.75);letter-spacing:.14em;text-transform:uppercase;text-align:right}
.mc-name{font-family:'Anton',sans-serif;font-size:25px;text-transform:uppercase;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.mc-no{font-family:'Space Grotesk',monospace;font-size:14px;letter-spacing:.28em;color:var(--mavi-300);margin-top:4px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.mc-bottom{display:flex;justify-content:space-between;align-items:flex-end}
.mc-city{font-size:12px;color:rgba(247,238,241,.85)}

.privacy{font-size:11.5px;color:var(--muted);line-height:1.55;margin:16px 0}

/* ===== Admin ===== */
.admin-tabs{display:flex;gap:6px;margin-bottom:16px}
.admin-tabs button{
  border:1px solid var(--line);background:var(--bordo-900);color:var(--muted);
  padding:9px 16px;border-radius:999px;font-family:'Manrope',sans-serif;font-weight:700;
  font-size:12.5px;cursor:pointer;
}
.admin-tabs button.on{background:var(--bordo-700);color:var(--cream);border-color:transparent}
.admin-summary{cursor:pointer;font-weight:700;color:var(--mavi-300);font-size:14px;padding:2px 0 6px;list-style:none}
details[open] .admin-summary{margin-bottom:12px}
.req-row{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:13px;
}
.req-row:last-child{border-bottom:none}
.req-row select{
  background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--cream);
  padding:6px 8px;font-size:12px;font-family:'Manrope',sans-serif;color-scheme:dark;
}
.datarow{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.datarow:last-child{border-bottom:none}
.datarow span{color:var(--muted)}

/* ===== Nav ===== */
.nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:560px;display:flex;border-top:1px solid var(--line);
  background:var(--bordo-900);z-index:10;
}
.nav a{
  flex:1;text-align:center;padding:12px 4px 16px;text-decoration:none;
  color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.04em;
}
.nav a.on{color:var(--mavi-300)}
.nav .ico{display:block;font-size:18px;margin-bottom:3px}

/* ===== Modal & Toast ===== */
.modal{position:fixed;inset:0;background:rgba(10,3,7,.75);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal-box{background:var(--bordo-800);border:1px solid var(--line);border-radius:20px;padding:24px;max-width:460px;width:100%;max-height:80vh;display:flex;flex-direction:column}
.modal-box h3{font-family:'Anton',sans-serif;font-weight:400;font-size:20px;text-transform:uppercase;margin-bottom:12px}
.modal-body{overflow-y:auto;font-size:13px;color:var(--muted);line-height:1.6}
.modal-body p{margin-bottom:10px}
.modal-body b{color:var(--cream)}
.toast{
  position:fixed;bottom:86px;left:50%;transform:translateX(-50%);
  background:var(--bordo-700);border:1px solid var(--line);color:var(--cream);
  padding:11px 18px;border-radius:12px;font-size:13px;z-index:60;
  box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:90%;text-align:center;
}

@media (prefers-reduced-motion: no-preference){
  .card,.membercard{transition:transform .15s ease}
}

/* ===== Sprachumschalter ===== */
.lang{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px}
.lang button{
  border:none;background:transparent;color:var(--muted);cursor:pointer;
  font-family:'Space Grotesk',monospace;font-size:13.5px;font-weight:700;
  letter-spacing:.06em;padding:7px 14px;border-radius:999px;line-height:1;
}
.lang button.on{background:var(--bordo-700);color:var(--mavi-300)}
.lang button:hover{color:var(--cream)}

.auth-box{position:relative}
.auth-lang{position:absolute;top:16px;right:16px}

.appbar-right{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:10px;z-index:2;
}
.appbar-right .avatar{position:static}


/* ===== Teilen-Menü (Desktop-Fallback) ===== */
.share-menu{
  position:fixed;bottom:86px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;align-items:center;background:var(--bordo-800);
  border:1px solid var(--line);border-radius:14px;padding:10px;z-index:60;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.share-menu a,.share-menu button{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  color:var(--cream);text-decoration:none;font-family:'Manrope',sans-serif;
  font-size:13px;font-weight:700;padding:9px 14px;cursor:pointer;white-space:nowrap;
}
.share-menu a:hover,.share-menu button:hover{border-color:var(--mavi-500);color:var(--mavi-300)}


/* ===== Forum-Zitate ===== */
.quote{
  border-left:3px solid var(--mavi-500);
  background:rgba(143,208,255,.06);
  border-radius:0 10px 10px 0;
  padding:8px 12px;margin:6px 0;
  color:var(--muted);font-size:13px;
}


/* ===== Thread-Titel in der Übersicht ===== */
.thread-title{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:16.5px;
  line-height:1.35;color:var(--cream);
}


/* ===== Statistik-Kacheln ===== */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.stat{
  background:var(--bordo-800);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;display:flex;flex-direction:column;gap:4px;
}
.stat b{
  font-family:'Space Grotesk',monospace;font-size:28px;font-weight:700;
  color:var(--mavi-300);line-height:1;
}
.stat span{
  font-family:'Space Grotesk',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}


/* ===== Helle Beitragskarten im Forum ===== */
.post-light{
  background:#FAF5F6;
  border-color:rgba(43,12,25,.08);
}
.post-light .sub{color:#2B0C19}
.post-light .mini{color:#8A6672}
.post-light .post-author{color:#2F6E9E;font-weight:700}
.post-light .btn.ghost{color:#2F6E9E;border-color:rgba(47,110,158,.45)}
.post-light .btn.ghost:hover{background:rgba(47,110,158,.08)}
.post-light .quote{
  background:rgba(61,151,219,.10);
  border-left-color:#3D97DB;
  color:#5C3A47;
}