:root{
  --bg:#f5f5f7;
  --card:#ffffff;
  --text:#1d1d1f;
  --muted:rgba(29,29,31,.62);
  --line:rgba(0,0,0,.08);
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:18px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{ color:inherit; }

.wrap{
  width:min(1120px, 94vw);
  margin:0 auto;
  padding: 1.25rem 0 3rem;
}

.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:#000;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .9rem 1.1rem;
  gap:1rem;
}

.brand{ font-weight:900; letter-spacing:.02em; }
.brand--big{ font-size:1.35rem; margin-bottom:.25rem; }

.topbar__nav{
  display:flex;
  align-items:center;
  gap:.9rem;
  flex-wrap:wrap;
  justify-content:center;
}

.navlink{
  text-decoration:none;
  color:rgba(255,255,255,.92);
  font-weight:700;
  font-size:.95rem;
  padding:.35rem .5rem;
  border-radius:10px;
}
.navlink:hover{ background:rgba(255,255,255,.10); }
.navlink--muted{ color:rgba(255,255,255,.75); }

.hello{ font-size:.95rem; color:rgba(255,255,255,.9); white-space:nowrap; }

.burger{
  display:none;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  cursor:pointer;
}
.burger span{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  margin:4px auto;
  border-radius:2px;
}

.mobile-drawer{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:90;
}
.mobile-nav{
  display:none;
  position:fixed;
  top:64px;
  right:10px;
  left:10px;
  background:#0b0b0c;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:.65rem;
  z-index:95;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.mobile-nav a{
  display:block;
  padding:.85rem .9rem;
  border-radius:12px;
  text-decoration:none;
  color:#fff;
  font-weight:800;
}
.mobile-nav a:hover{ background:rgba(255,255,255,.08); }

.hero h1{
  margin: .4rem 0 .35rem;
  font-size:2.1rem;
  letter-spacing:-.02em;
}
.muted{ color:var(--muted); margin:0; }

.grid{
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(12, 1fr);
  margin-top:1rem;
}
.grid--mobile-first > *{ grid-column: span 12; }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.1rem 1.1rem;
  box-shadow: 0 3px 14px rgba(0,0,0,.04);
}
.card--focus{ border-color: rgba(0,0,0,.12); box-shadow: var(--shadow); }
.card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:.6rem;
}
.card h2{
  margin:0;
  font-size:1.15rem;
  letter-spacing:-.01em;
}

.chip{
  display:inline-flex;
  align-items:center;
  padding:.25rem .55rem;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  font-weight:900;
  font-size:.82rem;
}

.list{
  list-style:none;
  margin:.4rem 0 0;
  padding:0;
}
.list__item{
  padding:.85rem 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.list__item:last-child{ border-bottom:none; }

.req{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: .9rem;
}
.req__meta{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  align-items:center;
}
.req__actions{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:.25rem .55rem;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  font-weight:900;
  font-size:.82rem;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding:.2rem .5rem;
  border-radius:999px;
  font-weight:900;
  font-size:.76rem;
}
.badge--yes{ background:rgba(0,0,0,.88); color:#fff; }
.badge--no{ background:rgba(0,0,0,.10); color:rgba(29,29,31,.8); }

.btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(0,0,0,.04);
  color:var(--text);
  padding:.7rem .9rem;
  border-radius:14px;
  font-weight:900;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{ transform:scale(.98); }
.btn--primary{
  background:#000;
  border-color:#000;
  color:#fff;
}
.btn--ghost{
  background:transparent;
  border-color:rgba(0,0,0,.18);
  text-decoration:none;
}

.seg{
  display:inline-flex;
  border:1px solid rgba(0,0,0,.14);
  border-radius:14px;
  overflow:hidden;
}
.seg__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem .7rem;
  text-decoration:none;
  font-weight:900;
  font-size:.9rem;
  background:rgba(0,0,0,.03);
}
.seg__btn.is-active{
  background:rgba(0,0,0,.88);
  color:#fff;
}

.toast{
  margin-top:.7rem;
  display:inline-block;
  padding:.6rem .85rem;
  border-radius:14px;
  background:rgba(0,0,0,.88);
  color:#fff;
  font-weight:900;
  box-shadow: 0 10px 25px rgba(0,0,0,.14);
}

/* Auth */
body.auth{
  background: radial-gradient(1200px 600px at 30% -10%, rgba(0,0,0,.10), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(0,0,0,.08), transparent 55%),
              var(--bg);
}
.auth-card{
  width:min(440px, 92vw);
  margin: 10vh auto 0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow);
}
.alert{
  background: rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.10);
  padding:.75rem .85rem;
  border-radius:14px;
  font-weight:800;
  margin: .85rem 0;
}
.form{
  display:grid;
  gap:1rem;
  margin-top: 1rem;
}
.field__label{ display:block; font-weight:900; font-size:.85rem; margin-bottom:.35rem; color:rgba(0,0,0,.75); }
.input{
  width:100%;
  padding:.9rem 1rem;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  font-weight:750;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus{
  border-color:rgba(0,0,0,.35);
  box-shadow: 0 0 0 4px rgba(0,0,0,.04);
}
.hint{
  color:var(--muted);
  font-size:.9rem;
  margin-top: 1.25rem;
  text-align:center;
}

@media (max-width: 900px){
  .topbar__nav{ display:none; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; }
  body.nav-open .mobile-drawer{ display:block; }
  body.nav-open .mobile-nav{ display:block; }
}

@media (min-width: 900px){
  .grid--mobile-first{
    grid-template-columns: repeat(12, 1fr);
  }
  .grid--mobile-first .card--focus{ grid-column: span 6; }
  .grid--mobile-first .card{ grid-column: span 6; }
}

@media (max-width: 640px){
  .wrap{ padding: 1rem 0 2.5rem; }
  .hero h1{ font-size: 1.75rem; }
  .req{ flex-direction:column; align-items:stretch; }
  .req__actions .btn{ width:100%; }
}


/* Legacy pages: make old forms/tables look consistent */
h1,h2,h3{ letter-spacing:-.02em; }
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background: #fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 3px 14px rgba(0,0,0,.04);
}
th,td{
  padding: .85rem .9rem;
  border-bottom:1px solid rgba(0,0,0,.06);
  text-align:left;
  vertical-align:top;
}
tr:last-child td{ border-bottom:none; }
th{
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(29,29,31,.65);
  background: rgba(0,0,0,.03);
}

input[type="text"],input[type="email"],input[type="password"],input[type="date"],input[type="datetime-local"],select,textarea{
  width:100%;
  padding:.8rem .9rem;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  font-weight:650;
  outline:none;
}
textarea{ min-height:110px; resize:vertical; }
label{ font-weight:800; display:block; margin:.7rem 0 .35rem; color:rgba(0,0,0,.75); }

button, input[type="submit"]{
  font-family:inherit;
}
button, input[type="submit"], .button{
  appearance:none;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(0,0,0,.88);
  color:#fff;
  padding:.7rem .95rem;
  border-radius:14px;
  font-weight:900;
  cursor:pointer;
}
button:hover, input[type="submit"]:hover{ filter:brightness(0.96); }

hr{ border:none; border-top:1px solid rgba(0,0,0,.08); margin:1.2rem 0; }

.flash-yes{ animation: flashYes .22s ease-in-out 1; }
.flash-no{ animation: flashNo .22s ease-in-out 1; }
@keyframes flashYes{
  from{ background: rgba(0,0,0,.02); }
  50%{ background: rgba(0,0,0,.10); }
  to{ background: rgba(0,0,0,.02); }
}
@keyframes flashNo{
  from{ background: rgba(0,0,0,.02); }
  50%{ background: rgba(0,0,0,.08); }
  to{ background: rgba(0,0,0,.02); }
}

/* ---------------------------
   Dashboard v2026 (nur Add-on)
---------------------------- */
.tb-hero{ margin: .6rem 0 1rem; }
.tb-hero__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.tb-title{ margin:0; font-size:2.1rem; letter-spacing:-.02em; }
.tb-sub{ margin:.25rem 0 0; color:rgba(29,29,31,.62); }

.tb-tabs{ display:flex; gap:.55rem; align-items:center; }
.tb-tab{
  text-decoration:none;
  font-weight:900;
  padding:.65rem .9rem;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(0,0,0,.03);
}
.tb-tab.is-active{
  background:rgba(0,0,0,.88);
  color:#fff;
  border-color:rgba(0,0,0,.88);
}

.tb-kpis{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:.9rem; }
.tb-kpi{
  display:flex; gap:.45rem; align-items:baseline;
  padding:.55rem .75rem;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.tb-kpi span{ color:rgba(29,29,31,.62); font-weight:800; }
.tb-kpi strong{ font-weight:950; }

.tb-ghost{
  margin-left:auto;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem .75rem;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.18);
  background:transparent;
  font-weight:900;
}

.tb-toast{
  margin-top:.7rem;
  display:inline-block;
  padding:.6rem .85rem;
  border-radius:14px;
  background:rgba(0,0,0,.88);
  color:#fff;
  font-weight:900;
  box-shadow: 0 10px 25px rgba(0,0,0,.14);
}

.tb-grid{
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(12, 1fr);
}
.tb-grid > *{ grid-column: span 12; }

.tb-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:1.1rem 1.1rem;
  box-shadow: 0 3px 14px rgba(0,0,0,.04);
}
.tb-card--focus{
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.tb-card__head{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.6rem; }
.tb-card__head--split{ flex-wrap:wrap; }

.tb-chip{
  display:inline-flex;
  align-items:center;
  padding:.25rem .55rem;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  font-weight:950;
  font-size:.82rem;
}

.tb-list{ list-style:none; margin:.4rem 0 0; padding:0; }
.tb-item{
  padding:.85rem 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.tb-item:last-child{ border-bottom:none; }

.tb-group{
  padding:.85rem 0 .55rem;
  color:rgba(29,29,31,.62);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.tb-request{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.9rem;
}
.tb-request__meta{ display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; }
.tb-request__main{ display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; }

.tb-muted{ color:rgba(29,29,31,.62); }
.tb-pill{
  display:inline-flex;
  align-items:center;
  padding:.25rem .55rem;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  font-weight:950;
  font-size:.82rem;
}
.tb-badge{
  display:inline-flex;
  align-items:center;
  padding:.2rem .5rem;
  border-radius:999px;
  font-weight:950;
  font-size:.76rem;
}
.tb-badge--yes{
  background:#e8f5e9;
  color:#1b5e20;
  border:1px solid #c8e6c9;
}
.tb-badge--no{
  background:#ffe9e9;
  color:#c62828;
  border:1px solid #f5b5b5;
}

.tb-actions{ display:flex; gap:.55rem; flex-wrap:wrap; justify-content:flex-end; }
.tb-btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(0,0,0,.04);
  color:#1d1d1f;
  padding:.75rem .95rem;
  border-radius:14px;
  font-weight:950;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.tb-btn:active{ transform:scale(.98); }
.tb-btn--yes{
  background:rgba(0,0,0,.88);
  border-color:rgba(0,0,0,.88);
  color:#fff;
}
.tb-btn--no{
  background:rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.16);
}
.tb-btn--ghost{
  background:transparent;
  border-color:rgba(0,0,0,.18);
}
.tb-ic{ display:inline-flex; width:1.2em; justify-content:center; }

.tb-seg{
  display:inline-flex;
  border:1px solid rgba(0,0,0,.14);
  border-radius:14px;
  overflow:hidden;
}
.tb-seg__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem .7rem;
  text-decoration:none;
  font-weight:950;
  font-size:.9rem;
  background:rgba(0,0,0,.03);
}
.tb-seg__btn.is-active{
  background:rgba(0,0,0,.88);
  color:#fff;
}

/* Feedback + verschwinden */
.tb-flash-yes{ animation: tbYes .22s ease-in-out 1; }
.tb-flash-no{ animation: tbNo .22s ease-in-out 1; }
@keyframes tbYes{ 0%{background:transparent} 50%{background:rgba(0,0,0,.08)} 100%{background:transparent} }
@keyframes tbNo{ 0%{background:transparent} 50%{background:rgba(0,0,0,.06)} 100%{background:transparent} }

.tb-fade{ opacity:1; }
.tb-fade.tb-flash-yes, .tb-fade.tb-flash-no{ opacity:.75; }



@media (max-width: 640px){
  .tb-title{ font-size:1.75rem; }
  .tb-ghost{ margin-left:0; }
  .tb-request{ flex-direction:column; align-items:stretch; }
  .tb-actions .tb-btn{ width:100%; }
}


/* === Dashboard: Full Width + Accordion === */

.tb-grid--single{
  grid-template-columns: 1fr;
}

.tb-card--accordion{
  cursor: pointer;
}

.tb-card--accordion .tb-card__head{
  user-select: none;
}

.tb-card--accordion .tb-card__head:hover{
  background: rgba(0,0,0,.02);
  border-radius: 14px;
}

.tb-accordion-btn{
  font-weight: 900;
  font-size: .9rem;
  opacity: .7;
}

.tb-card--accordion.is-open{
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Mobile Feinschliff */
@media (max-width: 640px){
  .tb-card{ padding: 1rem .95rem; }
  .tb-card__head h2{ font-size: 1.05rem; }
}
/* =====================================================
   Topbar User UI Refinement (Non-Destructive Add-on)
===================================================== */

.topbar__user{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.topbar__user .hello{
  font-weight:800;
  font-size:.95rem;
  color:rgba(255,255,255,.92);
  letter-spacing:.2px;
}

/* === Logout Button Refined === */
.logout-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:32px;
  border-radius:10px;
  background:#ffffff;
  color:#000000;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.12);
  transition:all .15s ease;
}

.logout-btn svg{
  stroke:#000000;
}

.logout-btn:hover{
  background:#f5f5f5;
  transform:translateY(-1px);
}

.logout-btn:active{
  transform:scale(.96);
}

@media (max-width:640px){
  .topbar__user{
    gap:.5rem;
  }
  .logout-btn{
    width:30px;
    height:30px;
  }
}