/* Abstaende folgen durchgehend einem 8pt-Raster (4px als halber Schritt).
   Ausserhalb dieser Skala wird kein Abstand gesetzt. */
:root {
  --sp-4: 0.25rem;
  --sp-8: 0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-48: 3rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;

  --bg: #fbfaf8;
  --card: #ffffff;
  --text: #1c1b19;
  --muted: #6d6a64;
  --line: #e3e0d9;
  --accent: #3b5bdb;
  --yes: #2f9e44;
  --maybe: #e8a700;
  --no: #c23b3b;
  --radius: 10px;
  --dot-idle: .28;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17181a;
    --card: #202225;
    --text: #e9e8e5;
    --muted: #9b9892;
    --line: #34363a;
    --dot-idle: .45;
    --accent: #7a93f5;
    --yes: #5fc777;
    --maybe: #e3b341;
    --no: #e07070;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: var(--sp-16) var(--sp-16) var(--sp-48);
  max-width: 44rem;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  margin-bottom: var(--sp-24);
}
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.125rem; margin: 0 0 var(--sp-8); }
p { margin: var(--sp-8) 0; }

.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }
.error { color: var(--no); }

/* ------------------------------------------------------------- Formularteile */

label { display: block; margin: var(--sp-8) 0; }
label.check { display: flex; align-items: center; gap: var(--sp-8); }
label.check input { width: auto; margin: 0; }

input, textarea, button, select {
  font: inherit;
  color: inherit;
}

input:not([type="checkbox"]), textarea {
  width: 100%;
  margin-top: var(--sp-4);
  padding: var(--sp-8) var(--sp-12);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

textarea { resize: vertical; }

button, .button {
  display: inline-block;
  padding: var(--sp-8) var(--sp-16);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
button.ghost, summary.button {
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
}
button:disabled { opacity: .5; cursor: default; }

.row { display: flex; gap: var(--sp-12); flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 10rem; margin: 0; }
.row.actions > * { flex: 0 0 auto; }

summary { cursor: pointer; }
summary.button { list-style: none; width: 100%; text-align: center; margin-bottom: var(--sp-8); }
summary.button::-webkit-details-marker { display: none; }

details#new-event[open] summary.button { margin-bottom: var(--sp-16); }
details#admin {
  margin-top: var(--sp-32);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------------- Events */

.month {
  margin: var(--sp-24) 0 var(--sp-8);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.event {
  padding: var(--sp-12) var(--sp-16);
  margin-bottom: var(--sp-8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.event.past { opacity: .55; }

.event .when { font-size: var(--text-sm); color: var(--muted); }
.event .title { font-weight: 600; margin: var(--sp-4) 0; }
.event .where, .event .notes { font-size: var(--text-sm); }
.event .notes { white-space: pre-wrap; margin-top: var(--sp-4); overflow-wrap: anywhere; }
.event .notes a { color: var(--accent); }

/* Ampel: feste Reihenfolge rot, gelb, gruen. Darunter in derselben Spalte,
   wer das jeweils gewaehlt hat; die Spalte traegt also die Bedeutung mit. */
.rsvp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  margin-top: var(--sp-16);
}
.rsvp button {
  height: var(--sp-48);
  background: var(--card);
  border-color: var(--line);
}
.rsvp button::before {
  content: '';
  display: block;
  width: var(--sp-16);
  height: var(--sp-16);
  margin: 0 auto;
  border-radius: 50%;
  background: var(--c);
  opacity: var(--dot-idle);
}
.rsvp button:hover::before { opacity: .75; }
.rsvp button[aria-pressed="true"] {
  border-color: var(--c);
  box-shadow: inset 0 0 0 1px var(--c);
}
.rsvp button[aria-pressed="true"]::before { opacity: 1; }
.rsvp .s-no    { --c: var(--no); }
.rsvp .s-maybe { --c: var(--maybe); }
.rsvp .s-yes   { --c: var(--yes); }

.rsvp .col {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--sp-4);
  min-height: var(--sp-8);
  padding: var(--sp-8);
  border-radius: 0 0 var(--radius) var(--radius);
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
.rsvp .col:nth-of-type(1) { --c: var(--no); }
.rsvp .col:nth-of-type(2) { --c: var(--maybe); }
.rsvp .col:nth-of-type(3) { --c: var(--yes); }

/* Teilnehmer als Kreis mit Kuerzel, das spart Platz in den schmalen Spalten. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-24);
  height: var(--sp-24);
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 600;
  flex: 0 0 auto;
}

.who { font-size: var(--text-sm); margin-top: var(--sp-8); }

.event-admin {
  display: flex;
  gap: var(--sp-16);
  margin-top: var(--sp-16);
  font-size: var(--text-sm);
}
.event-admin button {
  padding: 0;
  background: none;
  border: none;
  color: var(--muted);
  text-decoration: underline;
}

/* ------------------------------------------------------------------- Profil */

/* Kreis oben rechts: Kuerzel statt Name, oeffnet das Profil. */
#whoami {
  width: var(--sp-48);
  height: var(--sp-48);
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
#whoami:hover { filter: brightness(1.12); }

.palette { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-bottom: var(--sp-16); }
.swatch {
  width: var(--sp-32);
  height: var(--sp-32);
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--line);
}
.swatch[aria-pressed="true"] {
  border-color: var(--bg);
  box-shadow: 0 0 0 2px var(--text);
}

/* Profil-Popup. Das <dialog> liegt in der Top-Layer, der Rest der Seite
   wird vom ::backdrop abgedunkelt; Escape und Klick daneben schliessen. */
#profile {
  width: min(24rem, calc(100vw - var(--sp-32)));
  max-height: 85vh;
  padding: var(--sp-16);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  overflow: auto;
}
#profile::backdrop { background: rgba(0, 0, 0, .5); }

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  margin-bottom: var(--sp-16);
}
.dialog-head h2 { margin: 0; }

button.icon {
  width: var(--sp-32);
  height: var(--sp-32);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
}
button.icon:hover { background: var(--line); color: var(--text); }

#profile .sub {
  margin: var(--sp-24) 0 var(--sp-8);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--line);
}

/* Schritt-fuer-Schritt-Anleitung im Profil-Popup. */
.steps {
  margin: var(--sp-8) 0;
  padding-left: var(--sp-24);
  font-size: var(--text-sm);
}
.steps li { margin: var(--sp-4) 0; }
.glyph {
  display: inline-flex;
  vertical-align: -3px;
  color: var(--accent);
}

/* -------------------------------------------------------------------- Admin */

#users { list-style: none; padding: 0; margin: var(--sp-16) 0 0; }
#users li {
  display: flow-root;
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--line);
}
#users li .avatar { vertical-align: middle; margin-right: var(--sp-4); }
#users .invite { display: flex; gap: var(--sp-8); margin-top: var(--sp-8); }
#users .invite input { font-size: var(--text-xs); }

/* Unauffaelliger Textschalter, die Veranstaltungen sollen die Seite tragen. */
#show-past-wrap { margin: var(--sp-16) 0 0; text-align: center; }
#show-past {
  padding: var(--sp-4) var(--sp-8);
  border: none;
  background: none;
  color: var(--muted);
  font-size: var(--text-xs);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#show-past:hover { color: var(--text); }

#status { text-align: center; min-height: var(--sp-24); margin-top: var(--sp-16); }