@font-face{font-family:"Inter";src:url(../fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --grund:#0e1726;
  --flaeche:#16223a;
  --linie:#2a3a5c;
  --text:#eef2f8;
  --leise:#a9b6cc;
  --akzent:#ffb547;
  --akzent-dunkel:#e0962a;
  --max:68rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font:400 1.0625rem/1.65 "Inter",system-ui,-apple-system,sans-serif}
a{color:var(--akzent)}
a:hover{color:#ffd08a}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--akzent);color:#000;padding:.5rem 1rem;z-index:9}

.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
header.kopf{padding:1.5rem 0}
.marke{font:700 1.35rem/1 "Fraunces",Georgia,serif;color:var(--text);text-decoration:none;letter-spacing:.01em}
.marke span{color:var(--akzent)}
.marke img{height:44px;width:auto;display:block}

.held{padding:3.5rem 0 3rem}
.zeile{display:inline-block;font-weight:600;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--akzent);margin-bottom:1.25rem}
h1{font:700 clamp(2.2rem,6vw,4.2rem)/1.08 "Fraunces",Georgia,serif;margin:0 0 1.5rem;max-width:18ch}
.einstieg{font-size:1.2rem;color:var(--leise);max-width:40rem;margin:0 0 2.5rem}

.countdown{display:grid;grid-template-columns:repeat(4,minmax(0,6.5rem));gap:.6rem;margin:0 0 1rem;padding:0;list-style:none}
.countdown li{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:1rem .4rem;text-align:center}
.countdown b{display:block;font:700 2.2rem/1 "Fraunces",Georgia,serif;font-variant-numeric:tabular-nums}
.countdown small{color:var(--leise);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.datum{color:var(--leise);margin:0}
@media(max-width:30rem){.countdown b{font-size:1.7rem}.countdown small{font-size:.65rem;letter-spacing:.04em}}

section{padding:3rem 0;border-top:1px solid var(--linie)}
h2{font:700 1.8rem/1.2 "Fraunces",Georgia,serif;margin:0 0 1.5rem}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:0;padding:0;list-style:none}
.karten li{background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;padding:1.4rem}
.karten strong{display:block;font-size:1.1rem;margin-bottom:.35rem}
.karten p{margin:0;color:var(--leise)}
.hinweis{margin:1.5rem 0 0;color:var(--leise)}

.dirigent{display:grid;gap:1.5rem;grid-template-columns:1fr;align-items:start}
@media(min-width:48rem){.dirigent{grid-template-columns:1fr 1fr}}
.dirigent p{margin:0 0 1rem}

.knopf{display:inline-block;background:var(--akzent);color:#141414;font-weight:600;text-decoration:none;padding:.9rem 1.5rem;border-radius:999px}
.knopf:hover{background:var(--akzent-dunkel);color:#141414}

footer.fuss{border-top:1px solid var(--linie);padding:2rem 0 3rem;color:var(--leise);font-size:.9rem}
footer.fuss nav{display:flex;gap:1.25rem;flex-wrap:wrap;margin-top:.5rem}
footer.fuss a{color:var(--leise)}

.recht{padding:2rem 0 4rem;max-width:46rem}
.recht h1{font-size:clamp(2rem,5vw,2.8rem);max-width:none}
.recht h2{font-size:1.3rem;margin:2rem 0 .75rem}
.recht h3{font-size:1.05rem;margin:1.5rem 0 .5rem}
.recht p,.recht li{color:#d5dce8}

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