/* Immer der dunkle Abend-Look, passend zur LinkedIn-Grafik */
:root{
  color-scheme:dark;
  --bg:#1C2540; --bg-2:#243052; --ink:#F3EDE1; --muted:#9AA3BD;
  --lamp:#F2B544; --lamp-ink:#1C2540; --line:rgba(243,237,225,.16);
  --field:#161E35; --ok:#9FD9B0;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:68rem; margin:0 auto; padding:clamp(1.5rem,5vw,4rem) clamp(1.25rem,5vw,3rem)}
header.hero{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem);
  align-items:center; min-height:min(88vh,52rem);
}
.date{font-size:1.125rem; color:var(--lamp); font-weight:600; margin:0 0 1.25rem}
h1{
  font-size:clamp(2.1rem,5.4vw,4.4rem); line-height:.98; letter-spacing:-.035em;
  font-weight:700; margin:0 0 1.5rem;
}
h1 span{display:block}
h1 .quiet{color:var(--muted); font-weight:500}
.lede{max-width:34rem; font-size:1.2rem; color:var(--ink); opacity:.9; margin:0 0 2rem}
.cta{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--lamp); color:var(--lamp-ink); text-decoration:none;
  font-weight:700; font-size:1.05rem; padding:.95rem 1.5rem; border-radius:999px;
  border:0; cursor:pointer; font-family:inherit;
}
.cta:hover{filter:brightness(1.06)}
.cta:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:3px solid var(--lamp); outline-offset:3px;
}
.seatcount{margin:1rem 0 0; color:var(--muted); font-size:.98rem}
.seatcount strong{color:var(--ink)}

/* The table */
.table-fig{margin:0; position:relative}
.table-fig svg{width:100%; max-width:26rem; height:auto; display:block; margin:0 auto; overflow:visible}
.glow{fill:var(--lamp); opacity:.14}
.tabletop{fill:var(--bg-2); stroke:var(--line); stroke-width:1.5}
.seat{fill:none; stroke:var(--muted); stroke-width:2; transition:fill .4s, stroke .4s}
.seat.taken{fill:var(--lamp); stroke:var(--lamp)}
.seat.host{fill:var(--ink); stroke:var(--ink)}
.seat-label{fill:var(--muted); font-size:13px; font-family:inherit}
.table-fig figcaption{text-align:center; color:var(--muted); font-size:.95rem; margin-top:1rem}
@media (prefers-reduced-motion:no-preference){
  .seat{opacity:0; animation:sit .5s ease-out forwards}
  @keyframes sit{from{opacity:0; transform:scale(.6)} to{opacity:1; transform:scale(1)}}
}

/* Details */
section{padding:clamp(3rem,7vw,5rem) 0; border-top:1px solid var(--line)}
h2{font-size:clamp(1.7rem,3.6vw,2.4rem); letter-spacing:-.02em; line-height:1.1; margin:0 0 2rem; font-weight:700}
dl.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin:0}
dl.facts dt{color:var(--muted); font-size:.95rem; margin-bottom:.35rem}
dl.facts dd{margin:0; font-size:1.2rem; font-weight:600; line-height:1.35}
dl.facts dd small{display:block; font-weight:400; font-size:.95rem; color:var(--muted); margin-top:.25rem}

.about{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem)}
.about p{margin:0 0 1rem; max-width:34rem}

/* Form */
.form-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.form-intro p{color:var(--muted); max-width:28rem}
form{display:grid; gap:1.1rem}
.row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
label{display:block; font-weight:600; font-size:.98rem; margin-bottom:.4rem}
label .opt{font-weight:400; color:var(--muted)}
input,textarea{
  width:100%; font:inherit; color:var(--ink); background:var(--field);
  border:1.5px solid var(--line); border-radius:.6rem; padding:.8rem .9rem;
}
textarea{min-height:6.5rem; resize:vertical}
input::placeholder,textarea::placeholder{color:var(--muted); opacity:.8}
.err{color:#FF8A7A; font-size:.92rem; margin:.35rem 0 0; min-height:0}
.consent{display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; color:var(--muted)}
.consent input{width:auto; margin-top:.25rem; accent-color:var(--lamp)}
.done{
  border:1.5px solid var(--lamp); border-radius:1rem; padding:1.75rem;
  background:var(--bg-2);
}
.done h3{margin:0 0 .75rem; font-size:1.4rem}
.done p{margin:0 0 1rem}
.done .fallback{font-size:.95rem; color:var(--muted)}
.done a{color:var(--lamp)}
[hidden]{display:none !important}

footer{padding:2.5rem 0 1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.95rem}

@media (max-width:52rem){
  header.hero{grid-template-columns:1fr; min-height:auto; padding-top:1rem}
  .table-fig{order:-1}
  .table-fig svg{max-width:18rem}
  dl.facts{grid-template-columns:1fr 1fr}
  .about,.form-grid{grid-template-columns:1fr}
}
@media (max-width:30rem){
  dl.facts,.row{grid-template-columns:1fr}
}

/* Form states */
.form-error{
  border:1.5px solid currentColor; border-radius:.6rem; padding:.8rem 1rem; margin:0;
}
button[disabled]{opacity:.6; cursor:wait}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}