/* KalenderKiez – shared stylesheet (index.html & edit.html) */
:root{
  --bg:#000; --fg:#f5f5f5; --accent:#00ffd1; --danger:#ff5252; --muted:#444;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);
  background-image:linear-gradient(180deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:100% 4px;
  color:var(--fg);
  font-family:"Inter",sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:2rem clamp(1rem,4vw,3rem);
}
header{text-align:center;margin-bottom:3rem}
h1{
  font-family:"Orbitron",sans-serif;
  font-size:clamp(2.25rem,7vw,5rem);
  font-weight:800;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.glow{color:var(--accent);text-shadow:0 0 6px var(--accent),0 0 18px var(--accent)}
.subtitle{font-size:.9rem;letter-spacing:.15em;opacity:.7;margin-top:.4rem}
main{flex:1;max-width:1000px;margin:0 auto;width:100%}

/* buttons */
.button{
  appearance:none;border:2px solid var(--accent);background:transparent;color:var(--accent);
  font-family:"Orbitron",sans-serif;font-weight:600;padding:.75rem 1.75rem;font-size:.8rem;
  text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,transform .2s;
}
.button:hover{background:var(--accent);color:var(--bg);transform:translateY(-2px)}
.button+.button{margin-left:1rem}

/* traffic‑light */
.status-light{width:1.2rem;height:1.2rem;border-radius:50%;background:var(--muted);box-shadow:0 0 8px var(--muted);transition:background .3s,box-shadow .3s}
.status-green{background:#09e85e;box-shadow:0 0 8px #09e85e}
.status-red{background:var(--danger);box-shadow:0 0 8px var(--danger)}

/* delete icon */
.icon-btn{
  appearance:none;border:2px solid transparent;background:none;color:var(--accent);
  font-family:"Orbitron",sans-serif;font-size:1rem;width:2.2rem;height:2.2rem;
  display:grid;place-items:center;cursor:pointer;transition:color .2s,transform .2s;
}
.icon-btn:hover{color:var(--bg);background:var(--accent);transform:scale(1.1)}

/* form */
#eventForm{display:none;gap:1rem;flex-wrap:wrap;margin:2rem 0}
#eventForm input{flex:1 1 200px;padding:.6rem 1rem;background:#111;border:1px solid #333;color:var(--fg);font-size:.85rem;border-radius:4px}

/* table */
table{width:100%;border-collapse:collapse}
thead{border-bottom:3px solid var(--accent)}
th,td{padding:1rem .75rem;text-align:left}
th{font-family:"Orbitron",sans-serif;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
tbody tr{border-bottom:1px solid #222}
tbody tr:hover{background:rgba(255,255,255,.05)}

/* highlights */
.highlight-today{background:rgba(0,255,209,.10)!important}
.highlight-tomorrow{background:rgba(0,255,209,.05)!important}

table a{color:var(--accent);text-decoration:none}
table a:hover{text-decoration:underline}

/* footer */
footer{margin-top:3rem;text-align:center;font-size:.75rem;opacity:.6}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;justify-content:center;align-items:center;z-index:1000}
.modal-content{
  background:#111;
  border:2px solid var(--accent);
  padding:2rem 2.5rem;
  max-width:340px;
  width:90%;
  text-align:center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-content h2{font-family:"Orbitron",sans-serif;margin-bottom:1rem;font-size:1.1rem;text-transform:uppercase}
.modal-content p{font-size:.85rem;line-height:1.4;margin-bottom:1.5rem}
.modal-content button {
  margin: 8px 0;
  width: 180px;
  text-align: center;
}

/* mobile responsive table */
@media(max-width:640px){
  table,thead,tbody,th,td,tr{display:block}
  thead{display:none}
  tbody tr{margin-bottom:1.25rem}
  td{padding:.5rem 0}
  td::before{content:attr(data-label);font-family:"Orbitron",sans-serif;font-size:.7rem;color:var(--accent);text-transform:uppercase;display:block;margin-bottom:.2rem}
}