/* =========================================================
   LUCA 45 – THE GENTLEMEN'S NIGHT
   Schwarz/Anthrazit mit Gold. Mobil zuerst: praktisch alle
   Gäste kommen per QR-Code vom Telefon.
   ========================================================= */

:root{
  --ink:#0A0A0B;
  --anthrazit:#141518;
  --flaeche:#1B1D21;
  --flaeche-hoch:#22252A;

  --gold:#C8A24E;
  --gold-hell:#E4CE96;
  --gold-tief:#8C6F2E;
  --gold-linie:rgba(200,162,78,.30);

  --text:#EDEAE3;
  --gedaempft:#8E8B84;
  --leise:#63615C;

  /* Semantik im Admin – bewusst getrennt vom Gold-Akzent */
  --ja:#5C9E77;
  --nein:#B65B52;

  --display:"Bodoni Moda",'Didot','Times New Roman',serif;
  --ui:"Archivo",'Segoe UI',system-ui,sans-serif;

  --spur:.26em;   /* Sperrung für Versallabels */
  --radius:4px;   /* fast eckig – wirkt wertiger als runde Ecken */
}

*,*::before,*::after{box-sizing:border-box}

html{color-scheme:dark}

body{
  margin:0;
  min-height:100svh;
  background:var(--ink);
  color:var(--text);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Sanfter Lichtschein von oben, damit Schwarz nicht flach wirkt */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 60% at 50% -10%,rgba(200,162,78,.13) 0%,rgba(200,162,78,0) 60%),
    linear-gradient(180deg,#101114 0%,var(--ink) 45%,#08080A 100%);
}

.seite{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column}

.huelle{
  width:100%;max-width:26rem;margin-inline:auto;
  padding:1.75rem 1.35rem 2.5rem;
  flex:1;display:flex;flex-direction:column;
}

/* Eingravierter Rahmen – eine Haarlinie, kein Kasten */
.rahmen{
  border:1px solid var(--gold-linie);
  padding:2.25rem 1.4rem 2rem;
  position:relative;
  background:linear-gradient(180deg,rgba(27,29,33,.55),rgba(10,10,11,.25));
}
.rahmen::before,.rahmen::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:2.5rem;height:1px;background:var(--gold);opacity:.7;
}
.rahmen::before{top:-1px}
.rahmen::after{bottom:-1px}

/* ---------------------------------------------------------- Kopf */
.kopf{text-align:center}

.datum-oben{
  font-size:.66rem;letter-spacing:var(--spur);text-transform:uppercase;
  color:var(--gold);margin:0 0 1.5rem;
}

.titel{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(3.4rem,20vw,5.2rem);
  line-height:.9;letter-spacing:.01em;
  margin:0;color:var(--text);
}
.titel .funfundvierzig{color:var(--gold)}

.untertitel{
  font-size:.7rem;letter-spacing:.30em;text-transform:uppercase;
  color:var(--gold-hell);margin:.9rem 0 0;
}

.zierlinie{
  display:flex;align-items:center;gap:.7rem;
  margin:1.5rem auto;max-width:12rem;
}
.zierlinie::before,.zierlinie::after{
  content:"";flex:1;height:1px;background:var(--gold-linie);
}
.zierlinie span{color:var(--gold);font-size:.6rem;letter-spacing:.2em}

.eckdaten{
  margin:0;font-size:.92rem;color:var(--gedaempft);line-height:1.75;
}
.eckdaten strong{
  display:block;color:var(--text);font-weight:500;
  font-size:1rem;letter-spacing:.03em;
}
.eckdaten .dj{
  display:block;margin-top:.85rem;color:var(--gold);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
}

/* ---------------------------------------------------------- RSVP */
.rsvp{margin-top:2.25rem}

.frage{
  font-family:var(--display);
  font-weight:500;font-size:1.65rem;line-height:1.2;
  text-align:center;margin:0 0 1.5rem;color:var(--text);
}

.feld{margin-bottom:1rem}
.feld > label{
  display:block;font-size:.64rem;letter-spacing:var(--spur);
  text-transform:uppercase;color:var(--leise);margin-bottom:.5rem;
}

select,textarea,input[type="password"],input[type="text"]{
  width:100%;font-family:var(--ui);font-size:1rem;color:var(--text);
  background:var(--flaeche);
  border:1px solid rgba(200,162,78,.22);
  border-radius:var(--radius);
  padding:.95rem 1rem;
  transition:border-color .18s ease,background .18s ease;
}
select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 1.25rem) 1.35rem,calc(100% - .95rem) 1.35rem;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:2.75rem;
}
textarea{resize:vertical;min-height:5rem;line-height:1.5}
select:focus-visible,textarea:focus-visible,input:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold);
}
::placeholder{color:var(--leise)}

/* Namensfeld mit Vervollstaendigung */
.feld--name{position:relative}
.feld--name.ist-gewaehlt input{border-color:var(--gold)}
.feld--name.ist-gewaehlt::after{
  content:"✓";position:absolute;right:1rem;top:2.35rem;
  color:var(--gold);font-size:1.05rem;pointer-events:none;
}
.feld__hilfe{
  margin:.45rem 0 0;font-size:.72rem;color:var(--leise);letter-spacing:.04em;
}
.vorschlaege{display:grid;gap:.4rem;margin-top:.5rem}
.vorschlaege:empty{margin-top:0}
.vorschlaege button{
  width:100%;text-align:left;cursor:pointer;
  font-family:var(--ui);font-size:.95rem;color:var(--text);
  background:var(--flaeche-hoch);border:1px solid rgba(200,162,78,.22);
  border-radius:var(--radius);padding:.8rem 1rem;
  transition:border-color .15s ease,background .15s ease;
}
.vorschlaege button:hover,.vorschlaege button:focus-visible{
  border-color:var(--gold);background:rgba(200,162,78,.10);outline:none;
}
.vorschlaege .keine{
  font-size:.8rem;color:var(--leise);padding:.4rem .2rem;
}

/* Die zwei großen Antwort-Schalter */
.wahl{display:grid;gap:.7rem;margin:1.4rem 0}
.wahl button{
  width:100%;font-family:var(--ui);font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:1.15rem 1rem;border-radius:var(--radius);cursor:pointer;
  background:transparent;color:var(--text);
  border:1px solid rgba(237,234,227,.22);
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.wahl button:hover{border-color:var(--gold)}
.wahl button[aria-pressed="true"]{
  background:var(--gold);border-color:var(--gold);color:#14110A;font-weight:600;
}
.wahl button.nein[aria-pressed="true"]{
  background:transparent;border-color:var(--gold);color:var(--gold-hell);
}
.wahl button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.absenden{
  width:100%;margin-top:.4rem;
  font-family:var(--ui);font-size:.8rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  padding:1.15rem 1rem;border-radius:var(--radius);cursor:pointer;
  background:linear-gradient(180deg,var(--gold-hell),var(--gold));
  color:#14110A;border:0;
  transition:filter .18s ease,transform .12s ease;
}
.absenden:hover:not(:disabled){filter:brightness(1.07)}
.absenden:active:not(:disabled){transform:translateY(1px)}
.absenden:disabled{opacity:.35;cursor:not-allowed}
.absenden:focus-visible{outline:2px solid var(--gold-hell);outline-offset:3px}

.hinweis{
  margin:.9rem 0 0;font-size:.8rem;color:var(--nein);text-align:center;
  min-height:1.2em;
}
.hinweis:empty{margin:0;min-height:0}

/* ---------------------------------------------------- Bestätigung */
.fertig{text-align:center;padding:.5rem 0 .25rem}
.fertig .glas{font-size:2.4rem;line-height:1;display:block;margin-bottom:1rem}
.fertig h2{
  font-family:var(--display);font-weight:500;
  font-size:1.9rem;line-height:1.15;margin:0 0 .6rem;color:var(--gold-hell);
}
.fertig p{margin:0;color:var(--gedaempft);font-size:.95rem}
.fertig .eigene-nachricht{
  margin-top:1.25rem;padding:.85rem 1rem;
  border-left:2px solid var(--gold-linie);
  font-style:italic;color:var(--gedaempft);font-size:.88rem;text-align:left;
}
.aendern{
  margin-top:1.75rem;background:none;border:0;cursor:pointer;
  font-family:var(--ui);font-size:.68rem;letter-spacing:var(--spur);
  text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid var(--gold-linie);padding:.35rem 0;
}
.aendern:hover{color:var(--gold-hell);border-color:var(--gold)}
.aendern:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------------------------------------------------------- Fuß */
.fuss{
  text-align:center;margin-top:1.75rem;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--leise);
}
.fuss a{color:var(--leise);text-decoration:none;border-bottom:1px solid transparent}
.fuss a:hover{color:var(--gedaempft);border-color:var(--gold-linie)}

.versteckt{display:none !important}
.nur-fuer-screenreader{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* =========================================================
   ADMIN
   ========================================================= */
.admin-huelle{width:100%;max-width:64rem;margin-inline:auto;padding:1.5rem 1.1rem 3rem}

.admin-kopf{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline;
  justify-content:space-between;
  padding-bottom:1.1rem;margin-bottom:1.75rem;
  border-bottom:1px solid var(--gold-linie);
}
.admin-kopf h1{
  font-family:var(--display);font-weight:500;font-size:1.75rem;margin:0;
}
.admin-kopf h1 span{color:var(--gold)}
.admin-kopf .werkzeuge{display:flex;gap:.6rem;flex-wrap:wrap}

.knopf-klein{
  font-family:var(--ui);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.6rem 1rem;border-radius:var(--radius);
  background:transparent;color:var(--gold);border:1px solid var(--gold-linie);
  cursor:pointer;text-decoration:none;display:inline-block;
  transition:background .18s ease,border-color .18s ease;
}
.knopf-klein:hover{background:rgba(200,162,78,.10);border-color:var(--gold)}
.knopf-klein:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Zählerstand */
.zaehler{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1.75rem;
}
.kachel{
  background:var(--flaeche);border:1px solid rgba(237,234,227,.08);
  border-radius:var(--radius);padding:1rem .75rem;text-align:center;
  border-top:2px solid var(--rand,var(--gold));
}
.kachel .zahl{
  display:block;font-family:var(--display);font-size:2.4rem;line-height:1;
  font-weight:500;font-variant-numeric:tabular-nums;color:var(--text);
}
.kachel .marke{
  display:block;margin-top:.45rem;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gedaempft);
}
.kachel--ja{--rand:var(--ja)}
.kachel--nein{--rand:var(--nein)}
.kachel--offen{--rand:var(--leise)}

/* Tabelle */
.tabellen-rahmen{overflow-x:auto;border:1px solid rgba(237,234,227,.08);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:44rem}
thead th{
  text-align:left;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--leise);font-weight:500;
  padding:.85rem 1rem;background:var(--anthrazit);
  border-bottom:1px solid var(--gold-linie);white-space:nowrap;
}
tbody td{padding:.8rem 1rem;border-bottom:1px solid rgba(237,234,227,.06);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(200,162,78,.04)}
td.name{font-weight:500;white-space:nowrap}
td.zeit{color:var(--gedaempft);white-space:nowrap;font-variant-numeric:tabular-nums}
td.nachricht{color:var(--gedaempft);min-width:14rem}
.dj-marke{
  margin-left:.5rem;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-linie);border-radius:2px;
  padding:.15rem .35rem;vertical-align:middle;
}
.durch{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--leise)}

/* Status als Auswahl – der Admin ändert direkt in der Zeile */
.status-wahl{
  font-family:var(--ui);font-size:.72rem;letter-spacing:.08em;
  padding:.45rem 2rem .45rem .7rem;min-width:9.5rem;
  background-position:calc(100% - .95rem) .95rem,calc(100% - .65rem) .95rem;
}
.status-wahl[data-status="yes"]{border-color:var(--ja);color:var(--ja)}
.status-wahl[data-status="no"]{border-color:var(--nein);color:var(--nein)}
.status-wahl[data-status="open"]{border-color:rgba(237,234,227,.18);color:var(--gedaempft)}

tr.gespeichert{animation:aufblitzen 1.1s ease}
@keyframes aufblitzen{
  0%{background:rgba(200,162,78,.22)}
  100%{background:transparent}
}

/* Anmeldung */
.anmeldung{max-width:22rem;margin:14vh auto 0;text-align:center}
.anmeldung h1{
  font-family:var(--display);font-weight:500;font-size:2rem;margin:0 0 .4rem;
}
.anmeldung h1 span{color:var(--gold)}
.anmeldung p{color:var(--leise);font-size:.68rem;letter-spacing:var(--spur);
  text-transform:uppercase;margin:0 0 2rem}
.anmeldung .feld{text-align:left}

@media (min-width:640px){
  .huelle{padding-top:3rem}
  .rahmen{padding:2.75rem 2.25rem 2.5rem}
  .wahl{grid-template-columns:1fr 1fr}
  .wahl button.absage-voll{grid-column:1 / -1}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}