:root {
  --bg-base:#0d0f12; --bg-panel:#161a1f; --bg-card:#1e2329; --bg-hover:#252c35;
  --border:#2a3240; --accent:#00e5a0; --accent2:#00c8e0; --accent3:#ff6b35;
  --danger:#ff4d4d; --text:#e2e8f0; --text-muted:#6b7a90;
  --font-mono:'Share Tech Mono',monospace; --font-main:'Inter',system-ui,sans-serif;
  --radius:6px; --shadow:0 2px 12px rgba(0,0,0,.45);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--bg-base);color:var(--text);font-family:var(--font-main);font-size:15px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent2);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-mono);color:var(--accent);letter-spacing:.03em}
h1{font-size:1.6rem;margin-bottom:1rem} h2{font-size:1.25rem;margin-bottom:.75rem} h3{font-size:1rem;margin-bottom:.5rem}

/* ── Navbar ── */
.navbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:var(--bg-panel);border-bottom:1px solid var(--border);box-shadow:var(--shadow);min-width:0}
.nav-brand{display:flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:1.1rem;color:var(--accent)!important;text-decoration:none!important;white-space:nowrap;flex-shrink:0}
.nav-links{display:flex;list-style:none;gap:.25rem;flex:1;flex-wrap:wrap;min-width:0;overflow:hidden}
.nav-links a{padding:.35rem .7rem;border-radius:var(--radius);color:var(--text-muted);font-size:.85rem;transition:background .15s,color .15s}
.nav-links a:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
.nav-user{display:flex;align-items:center;gap:.6rem;white-space:nowrap}

/* Hamburger – nur Mobile */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:.4rem;width:36px;height:36px;flex-shrink:0}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s,opacity .25s}

/* Overlay */
.nav-overlay{display:none;position:fixed;inset:0;z-index:198;background:rgba(0,0,0,.6)}
.nav-overlay.open{display:block}

/* Drawer */
.nav-drawer{position:fixed;top:0;right:0;bottom:0;z-index:199;width:260px;background:var(--bg-panel);border-left:1px solid var(--border);padding:1rem;display:flex;flex-direction:column;gap:.15rem;overflow-y:auto;transform:translateX(100%);transition:transform .25s ease;pointer-events:none}
.nav-drawer.open{transform:translateX(0);pointer-events:all}
.nav-drawer a{display:block;padding:.65rem .9rem;border-radius:var(--radius);color:var(--text);font-size:.92rem;text-decoration:none;transition:background .15s}
.nav-drawer a:hover{background:var(--bg-hover);text-decoration:none}
.nav-drawer-close{align-self:flex-end;background:none;border:none;color:var(--text-muted);font-size:1.3rem;cursor:pointer;padding:.2rem .5rem;margin-bottom:.4rem;border-radius:var(--radius)}
.nav-drawer-close:hover{background:var(--bg-hover);color:var(--text)}
.nav-drawer-user{padding:.6rem .9rem;border-radius:var(--radius);background:var(--bg-hover);margin-bottom:.4rem;font-size:.85rem;color:var(--text-muted)}
.nav-drawer-divider{height:1px;background:var(--border);margin:.4rem 0;border:none}

/* ── Layout ── */
.container{flex:1;max-width:1140px;margin:0 auto;padding:1.5rem 1rem;width:100%;min-width:0}

/* ── Cards ── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem;margin-bottom:1rem;box-shadow:var(--shadow);min-width:0}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;padding-bottom:.6rem;border-bottom:1px solid var(--border);gap:.5rem;flex-wrap:wrap}

/* ── Grid ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem 1rem;border:none;border-radius:var(--radius);font-family:var(--font-main);font-size:.875rem;font-weight:600;cursor:pointer;transition:filter .15s,transform .1s;text-decoration:none!important}
.btn:hover{filter:brightness(1.12)} .btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#000} .btn-secondary{background:var(--accent2);color:#000}
.btn-danger{background:var(--danger);color:#fff} .btn-ghost{background:var(--bg-hover);color:var(--text);border:1px solid var(--border)}
.btn-sm{padding:.3rem .7rem;font-size:.8rem}

/* ── Forms ── */
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.8rem;color:var(--text-muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.06em}
.form-control{width:100%;padding:.5rem .75rem;background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-main);font-size:.9rem;transition:border-color .15s}
.form-control:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(0,200,224,.15)}
textarea.form-control{resize:vertical;min-height:90px}
.form-check{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.form-check input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px}

/* ── Tables ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;display:block}
table{width:100%;border-collapse:collapse;font-size:.875rem}
thead tr{background:var(--bg-panel)}
th{padding:.6rem .8rem;text-align:left;color:var(--text-muted);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--border)}
td{padding:.55rem .8rem;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:hover{background:var(--bg-hover)}

/* ── Badges ── */
.badge{display:inline-block;padding:.2rem .55rem;border-radius:20px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.badge-admin{background:rgba(255,107,53,.2);color:var(--accent3)}
.badge-mitglied{background:rgba(0,229,160,.15);color:var(--accent)}
.badge-gast{background:rgba(107,122,144,.15);color:var(--text-muted)}
.badge-ton{background:rgba(0,200,224,.15);color:var(--accent2)}
.badge-licht{background:rgba(255,215,0,.15);color:#ffd700}
.badge-video{background:rgba(180,100,255,.15);color:#b464ff}
.badge-sonstiges{background:var(--bg-hover);color:var(--text-muted)}
.badge-strom{background:rgba(255,230,0,.15);color:#ffe600}
.badge-angefragt{background:rgba(255,215,0,.15);color:#ffd700}
.badge-bestaetigt{background:rgba(0,229,160,.15);color:var(--accent)}
.badge-abgesagt{background:rgba(255,77,77,.15);color:var(--danger)}

/* ── Alerts ── */
.alert{padding:.75rem 1rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.9rem;border-left:4px solid}
.alert-success{background:rgba(0,229,160,.1);border-color:var(--accent)}
.alert-error{background:rgba(255,77,77,.1);border-color:var(--danger)}
.alert-info{background:rgba(0,200,224,.1);border-color:var(--accent2)}

/* ── Stat-Grid ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.25rem;box-shadow:var(--shadow)}
.stat-card .stat-icon{font-size:1.6rem}
.stat-card .stat-value{font-family:var(--font-mono);font-size:2rem;color:var(--accent);line-height:1.1}
.stat-card .stat-label{font-size:.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em}

/* ── Cable Widget ── */
.cable-widget{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center;box-shadow:var(--shadow)}
.cable-widget .cable-days{font-family:var(--font-mono);font-size:3.5rem;color:var(--accent);text-shadow:0 0 20px var(--accent);line-height:1}
.cable-widget.danger .cable-days{color:var(--danger);text-shadow:0 0 20px var(--danger);animation:shake .3s ease-in-out 3}
.cable-widget .cable-label{color:var(--text-muted);font-size:.85rem;margin:.3rem 0 1rem}
.cable-widget .btn{margin:.3rem}

/* ── DMX ── */
.dmx-display{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;padding:1rem}
.dip-switch{display:flex;flex-direction:column;align-items:center;gap:.3rem;width:44px}
.dip-label{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted)}
.dip-pill{width:30px;height:50px;background:var(--bg-base);border:2px solid var(--border);border-radius:20px;position:relative;transition:border-color .15s}
.dip-pill.on{border-color:var(--accent)}
.dip-pill::after{content:'';width:22px;height:22px;background:var(--text-muted);border-radius:50%;position:absolute;left:2px;bottom:4px;transition:background .15s,transform .2s}
.dip-pill.on::after{background:var(--accent);transform:translateY(-20px)}
.dmx-input-row{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap}

/* ── Misc ── */
.gewerk-tags{display:flex;gap:.3rem;flex-wrap:wrap}
.auth-wrap{max-width:400px;margin:4rem auto}
.site-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding:.75rem 1.5rem;background:var(--bg-panel);border-top:1px solid var(--border);color:var(--text-muted);font-size:.8rem}


/* ── Desktop/Mobile Sichtbarkeit ── */
.mobile-only { display: none !important; }
.desktop-only { display: block; }

/* ════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════ */
@media(max-width:700px){

  /* Navbar */
  .navbar{padding:.6rem 1rem}
  .nav-links{display:none}
  .nav-user{display:none}
  .nav-toggle{display:flex}

  /* Layout */
  .container{padding:1rem .75rem}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  h1{font-size:1.25rem}
  .card{padding:.9rem 1rem}


  /* Sichtbarkeit */
  .mobile-only { display: block !important; }
  .desktop-only { display: none !important; }

  /* Hamburger rechts */
  .nav-toggle { display: flex; margin-left: auto; }
  .nav-user { display: none; }
  .nav-links { display: none; }

  /* Buttons touchfreundlicher */
  .btn{padding:.5rem 1rem}
  .btn-sm{padding:.4rem .75rem}

  /* Auth */
  .auth-wrap{margin:1.5rem auto}

  /* Tabellen → gestapelte Karten */
  .table-wrap{overflow-x:visible}
  table.mobile-cards{width:100%;border-collapse:collapse}
  table.mobile-cards thead{display:none}
  table.mobile-cards tbody tr{
    display:block;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    margin-bottom:.75rem;
    padding:.75rem;
  }
  table.mobile-cards tbody tr:hover{background:var(--bg-hover)}
  table.mobile-cards td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:.35rem 0;
    border:none;
    border-bottom:1px solid var(--border);
    font-size:.875rem;
    gap:.5rem;
    flex-wrap:wrap;
  }
  table.mobile-cards td:last-child{border-bottom:none;padding-top:.5rem;justify-content:flex-end;flex-wrap:wrap;gap:.3rem}
  table.mobile-cards td[data-label]::before{
    content:attr(data-label);
    color:var(--text-muted);
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    flex-shrink:0;
    margin-right:.5rem;
  }
  table.mobile-cards td:last-child::before{display:none}
}

/* ── Keyframes ── */
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ── Collapsible Form Cards ── */
.collapsible-toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.collapsible-toggle::after {
  content: '▼';
  font-size: .75rem;
  color: var(--text-muted);
  transition: transform .25s;
  margin-left: .5rem;
}
.collapsible-toggle.open::after {
  transform: rotate(180deg);
}
.collapsible-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease, padding .25s;
  padding-top: 0;
}
.collapsible-body.open {
  max-height: 2000px;
  padding-top: .75rem;
}

/* Collapsible hidden state */
.cb-hidden { display: none !important; }

/* ── Details/Summary Collapsible ── */
details.card > summary { list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::marker { display: none; }
details.card > summary .arrow { transition: transform .25s; display: inline-block; }
details.card[open] > summary .arrow { transform: rotate(180deg); }
details.card > summary:hover h2 { color: var(--accent2); }