/* Reuniões – gleiche Gestaltungssprache wie die Clubwebsite (index.html). */

:root{
  --royal:#17458F;
  --azure:#0067C8;
  --gold:#F7A81B;

  --ground:#F7F9FC;
  --surface:#FFFFFF;
  --surface-2:#EDF2FA;
  --ink:#0C1A33;
  --ink-2:#3C4F6E;
  --ink-3:#69799A;
  --rule:#D6DFEE;
  --band:#17458F;
  --band-ink:#EAF1FC;
  --band-soft:rgba(234,241,252,.72);
  --band-rule:#2E5AA4;
  --accent:var(--royal);
  --link:var(--azure);
  --on-accent:#FFFFFF;
  --field:#FFFFFF;

  --ok:#0F7A4A;
  --ok-bg:#E4F5EC;
  --no:#B3261E;
  --no-bg:#FCE9E7;
  --pend-bg:#EEF1F6;

  --s--1:.82rem;
  --s-0:1rem;
  --s-1:1.2rem;
  --s-2:1.55rem;
  --s-3:2.1rem;

  --wrap:960px;
  --gut:clamp(1.1rem,4vw,2.25rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#08152B;
    --surface:#0E2141;
    --surface-2:#132A50;
    --ink:#E4EDFB;
    --ink-2:#B3C4DE;
    --ink-3:#8497B7;
    --rule:#1E3868;
    --band:#061024;
    --band-ink:#DCE8FA;
    --band-soft:rgba(220,232,250,.7);
    --band-rule:#1E3868;
    --accent:#7FB0F2;
    --link:#8FC0F7;
    --on-accent:#08152B;
    --field:#0A1B36;
    --ok:#5FD69B;
    --ok-bg:#0C2E20;
    --no:#FF9A90;
    --no-bg:#331512;
    --pend-bg:#132A50;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-size:var(--s-0);line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,label,th,button,input,select,textarea,.eyebrow,.chip,.tally,.mark b,.mark i,.adminnav{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
}
h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:var(--s-3);font-weight:800}
h2{font-size:var(--s-2);font-weight:800;margin-bottom:.7rem}
p{margin:0}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:2px}

.wrap{width:min(100% - (var(--gut) * 2),var(--wrap));margin-inline:auto}
.band{padding-block:clamp(1.8rem,4vw,2.8rem)}
.band.narrow{max-width:none}
.band + .band{padding-top:0}
.eyebrow{font-size:var(--s--1);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem}
.eyebrow a{color:inherit;text-decoration:none}
.eyebrow a:hover{color:var(--ink)}
.help{font-size:.93rem;color:var(--ink-2);max-width:68ch;margin-bottom:1.1rem}
.empty{font-size:.93rem;color:var(--ink-3);font-style:italic}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--surface-2);padding:.1em .35em;border-radius:2px}

/* ---------- Kopf ---------- */
.top{background:var(--band);color:var(--band-ink);border-bottom:3px solid var(--gold)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding-block:.9rem}
.mark{display:flex;align-items:center;gap:.65rem;margin-right:auto}
.mark svg{width:30px;height:30px;flex:none;color:var(--gold)}
.mark b{font-weight:800;font-size:.95rem;display:block;line-height:1.2}
.mark i{font-style:normal;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--band-soft);display:block;margin-top:.12rem}
.adminnav{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;font-size:.86rem}
.adminnav a{color:var(--band-soft);text-decoration:none;font-weight:600;padding-block:.25rem;border-bottom:2px solid transparent}
.adminnav a:hover,.adminnav a.on{color:var(--band-ink);border-bottom-color:var(--gold)}
.linkish{background:none;border:0;color:var(--band-soft);font-size:.86rem;font-weight:600;cursor:pointer;padding:0}
.linkish:hover{color:var(--gold)}
.inline{display:inline}

/* ---------- Meldungen ---------- */
.flashes{padding-top:1rem;display:grid;gap:.5rem}
.flash{font-size:.92rem;padding:.75rem .95rem;border-left:3px solid var(--ok);background:var(--ok-bg);color:var(--ink)}
.flash.bad{border-left-color:var(--no);background:var(--no-bg)}

/* ---------- Kopfbereich der öffentlichen Liste ---------- */
.hero-mini{background:var(--band);color:var(--band-ink);padding-block:clamp(1.6rem,4vw,2.6rem)}
.hero-mini .eyebrow{color:var(--band-soft)}
.hero-mini h1{color:var(--band-ink);margin-bottom:1.2rem}
.plaque{margin:0;display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
        border:1px solid var(--band-rule);border-left:4px solid var(--gold);
        background:rgba(255,255,255,.05);padding:1.1rem 1.2rem}
.plaque dt{font-size:.64rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--band-soft);margin-bottom:.25rem;font-family:"Archivo",sans-serif}
.plaque dd{margin:0;font-family:"Archivo",sans-serif;font-weight:600;font-size:.95rem;line-height:1.35}
.pauta{margin-top:1.1rem}
.pauta .lbl{font-family:"Archivo",sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--band-soft);margin-bottom:.2rem}
.pauta p:last-child{font-family:"Archivo",sans-serif;font-weight:600}
.closed{margin-top:1.2rem;font-size:.93rem;padding:.8rem 1rem;border-left:3px solid var(--gold);background:var(--surface-2);color:var(--ink-2)}

/* ---------- Zähler ---------- */
.tallies{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.tally{font-size:.82rem;font-weight:600;padding:.4em .8em;border:1px solid var(--rule);background:var(--surface);border-radius:2px}
.tally b{font-weight:800;font-variant-numeric:tabular-nums}
.tally.yes{color:var(--ok);border-color:var(--ok)}
.tally.no{color:var(--no);border-color:var(--no)}
.tally.pend,.tally.guest{color:var(--ink-2)}

/* ---------- Namensliste ---------- */
.people{list-style:none;margin:0;padding:0;border:1px solid var(--rule);background:var(--surface)}
.person{display:flex;align-items:center;gap:1rem;padding:.55rem .8rem;border-top:1px solid var(--rule)}
.person:first-child{border-top:0}
.person .pname{font-family:"Archivo",sans-serif;font-weight:600;font-size:.98rem;margin-right:auto}
.person.yes{background:var(--ok-bg)}
.person.no{background:var(--no-bg)}
.person.busy{opacity:.55}
.picks{display:flex;gap:.4rem;flex:none}
.pick{
  font-size:1.05rem;line-height:1;cursor:pointer;
  background:var(--ground);border:1.5px solid var(--rule);border-radius:2px;
  width:2.7rem;height:2.5rem;display:grid;place-items:center;
  filter:grayscale(1) opacity(.55);transition:filter .12s ease,border-color .12s ease,transform .12s ease;
}
.pick:hover:not(:disabled){filter:none;transform:translateY(-1px)}
.pick[aria-pressed="true"]{filter:none}
.pick.yes[aria-pressed="true"]{border-color:var(--ok);background:var(--surface)}
.pick.no[aria-pressed="true"]{border-color:var(--no);background:var(--surface)}
.pick:disabled{cursor:not-allowed;opacity:.4}

/* ---------- Gäste ---------- */
.guestlist{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.4rem}
.guestlist li{display:flex;align-items:center;gap:.8rem;font-size:.95rem;
              background:var(--surface);border:1px solid var(--rule);padding:.5rem .8rem}
.guestlist li span{margin-right:auto}
.guestlist em{color:var(--ink-3);font-size:.88em}
.guestlist.plain li{background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0}
.rm{font-family:"Archivo",sans-serif;font-size:.76rem;font-weight:600;background:none;border:0;
    color:var(--ink-3);cursor:pointer;text-decoration:underline;padding:.2rem}
.rm:hover{color:var(--no)}
.guestform{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));align-items:end;
           background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--gold);padding:1.1rem}

/* ---------- Formulare ---------- */
.card{background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--gold);
      padding:clamp(1.1rem,3vw,1.6rem);display:grid;gap:1.1rem}
.loginform{max-width:26rem}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.1rem}
.field{display:grid;gap:.35rem}
.field.short{max-width:9rem}
.gf{display:grid;gap:.35rem}
label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
label .opt{color:var(--ink-3);font-weight:600}
input,select,textarea{
  font-family:"Archivo",sans-serif;font-size:.95rem;color:var(--ink);
  background:var(--field);border:1px solid var(--rule);border-radius:2px;
  padding:.62em .75em;width:100%;
}
input:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
input[type=checkbox]{width:1.15rem;height:1.15rem;accent-color:var(--accent);padding:0}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.5;resize:vertical}
input[readonly]{background:var(--surface-2);color:var(--ink-2)}
input.tiny{max-width:4.5rem;text-align:right;font-variant-numeric:tabular-nums}

button.send{
  font-family:"Archivo",sans-serif;font-size:.88rem;font-weight:700;
  background:var(--accent);color:var(--on-accent);border:0;border-radius:2px;
  padding:.75em 1.5em;cursor:pointer;justify-self:start;
}
button.send:hover:not(:disabled){transform:translateY(-1px)}
button.send:disabled{opacity:.55;cursor:progress}
button.ghost{
  font-family:"Archivo",sans-serif;font-size:.85rem;font-weight:700;cursor:pointer;
  background:none;color:var(--ink-2);border:1.5px solid var(--rule);border-radius:2px;padding:.6em 1.1em;
}
button.ghost:hover{border-color:var(--ink-3);color:var(--ink)}
button.ghost.warn:hover{border-color:var(--no);color:var(--no)}
button.mini{
  font-family:"Archivo",sans-serif;font-size:.74rem;font-weight:700;cursor:pointer;
  background:none;border:1px solid var(--rule);border-radius:2px;padding:.35em .7em;color:var(--ink-2);
}
button.mini:hover{border-color:var(--accent);color:var(--accent)}
button.mini.warn:hover{border-color:var(--no);color:var(--no)}
.btnrow{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:.9rem}
a.more{font-family:"Archivo",sans-serif;font-size:.84rem;font-weight:700;text-decoration:none;
       color:var(--accent);border-bottom:2px solid var(--gold);padding-bottom:.06rem}
a.more:hover{color:var(--ink)}

.copyrow{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.copyrow input{flex:1 1 20rem;font-size:.85rem}
.linkband textarea{margin-top:.2rem}

/* ---------- Tabellen ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:34rem}
th,td{text-align:left;padding:.55rem .7rem;border-top:1px solid var(--rule);font-size:.92rem}
thead th{border-top:0;background:var(--surface-2);font-size:.68rem;font-weight:700;
         letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.mid{text-align:center}
td.yes{color:var(--ok);font-weight:700}
td.no{color:var(--no);font-weight:700}
td.pend{color:var(--ink-3)}
td.pauta-cell{max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.editable input{font-size:.88rem;padding:.4em .5em}
table.editable td{vertical-align:middle}
td.actions{white-space:nowrap;display:flex;gap:.35rem;align-items:center}

.chip{display:inline-block;font-size:.72rem;font-weight:700;padding:.28em .65em;border-radius:2px;white-space:nowrap}
.chip.open,.chip.yes{background:var(--ok-bg);color:var(--ok)}
.chip.closed,.chip.no{background:var(--no-bg);color:var(--no)}
.chip.pend{background:var(--pend-bg);color:var(--ink-3)}

/* ---------- Pedidos de convite ---------- */
.pedidos{display:grid;gap:1.1rem}
.pedido{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--gold);padding:1.2rem 1.3rem;display:grid;gap:.9rem}
.pedido.done{border-left-color:var(--rule);opacity:.72}
.pedido header{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem .9rem}
.pedido h3{font-size:1.12rem;font-weight:800;margin:0;margin-right:auto}
.pedido .when{font-family:"Archivo",sans-serif;font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.kv{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.7rem 1.4rem}
.kv dt{font-family:"Archivo",sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.15rem}
.kv dd{margin:0;font-size:.94rem;color:var(--ink)}
.kv dd a{color:var(--link)}
.msgbox{margin:0;padding:.8rem 1rem;background:var(--surface-2);border-left:2px solid var(--rule);
        font-size:.94rem;line-height:1.55;color:var(--ink-2);white-space:pre-wrap}
.pedido footer{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.3rem;border-top:1px solid var(--rule)}

/* Monatsgruppen der beantworteten Anfragen */
details.mes{border:1px solid var(--rule);background:var(--surface);margin-bottom:.7rem}
details.mes > summary{
  cursor:pointer;list-style:none;padding:.75rem 1rem;
  display:flex;align-items:center;gap:.7rem;
  font-family:"Archivo",sans-serif;font-size:.9rem;font-weight:700;color:var(--ink);
}
details.mes > summary::-webkit-details-marker{display:none}
details.mes > summary::before{
  content:"";width:.42rem;height:.42rem;flex:none;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  rotate:-45deg;transition:rotate .15s ease;
}
details.mes[open] > summary::before{rotate:45deg}
details.mes > summary:hover{background:var(--surface-2)}
.mes-name{margin-right:auto;text-transform:capitalize}
.mes-count{
  font-size:.74rem;font-weight:700;color:var(--ink-3);
  background:var(--surface-2);border:1px solid var(--rule);
  padding:.15em .55em;border-radius:2px;font-variant-numeric:tabular-nums;
}
details.mes .pedidos{padding:.2rem 1rem 1rem;gap:.8rem}
details.mes .pedido{border-left-width:2px}

.status{font-size:.92rem;padding:.75rem .95rem;border-left:3px solid var(--gold);
        background:var(--surface-2);color:var(--ink-2);margin-top:1rem}
.status.bad{border-left-color:var(--no);color:var(--ink)}
.status[hidden]{display:none}

.danger .wrap{border-top:1px solid var(--rule);padding-top:1.6rem}

/* ---------- Fuß ---------- */
footer{background:var(--band);color:var(--band-soft);margin-top:2.5rem}
.foot{padding-block:1.2rem;display:flex;align-items:center;gap:.7rem;
      font-family:"Archivo",sans-serif;font-size:.8rem}
.foot svg{width:20px;height:20px;color:var(--gold);flex:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:520px){
  .person{gap:.6rem}
  .person .pname{font-size:.92rem}
  .pick{width:2.9rem;height:2.7rem}
}