/* RUFF ONE – „Drop“-Startseite. Harte Kanten, große Schrift, CI-Farben. */
@font-face{font-family:"Unbounded";font-weight:600;font-display:swap;src:url(/fonts/unbounded-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Unbounded";font-weight:700;font-display:swap;src:url(/fonts/unbounded-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:400;font-display:swap;src:url(/fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:500;font-display:swap;src:url(/fonts/dm-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:600;font-display:swap;src:url(/fonts/dm-sans-latin-600-normal.woff2) format("woff2")}

:root{
 --schwarz:#111111; --creme:#FFF6F1; --koralle:#FF7A6B; --koralle-text:#C2412F; --grau:#BDB3AD;
 --display:"Unbounded","Arial Black",system-ui,sans-serif;
 --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
 --rand:clamp(16px,2.6vw,40px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--schwarz);color:var(--creme);font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--koralle);outline-offset:2px}
.klein{font:600 12px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase}
.gross{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:.88}

/* ---------- Kopfzeile ---------- */
.kopf{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:18px var(--rand);border-bottom:1px solid var(--creme)}
.kopf img{height:30px;width:auto;display:block}
.kopf .mitte{justify-self:center;color:var(--grau)}
.kopf .live{display:flex;align-items:center;gap:10px}
.kopf .live i{width:10px;height:10px;background:var(--koralle);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- Countdown (die Bühne) ---------- */
.uhr{border-bottom:1px solid var(--creme)}
.uhr-kopf{display:flex;justify-content:space-between;gap:16px;padding:18px var(--rand);border-bottom:1px solid var(--creme)}
.uhr-kopf b{font-weight:600;color:var(--koralle)}
.ziffern{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ziffer{border-right:1px solid var(--creme);padding:clamp(18px,2.4vw,36px) var(--rand) clamp(14px,1.6vw,24px);display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(200px,21vw,330px)}
.ziffer:last-child{border-right:0}
.ziffer b{display:block;font:700 clamp(56px,11.4vw,196px)/.8 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.ziffer span{color:var(--grau);margin-top:16px}
.ziffer.sek b{color:var(--koralle)}
.offen{display:none;padding:clamp(24px,4vw,64px) var(--rand);font-size:clamp(48px,10vw,170px)}
.ist-offen .ziffern{display:none}
.ist-offen .offen{display:block}

/* ---------- Laufband ---------- */
.band{background:var(--koralle);color:var(--schwarz);overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--schwarz)}
.band-inhalt{display:inline-flex;animation:laufen 28s linear infinite;padding:16px 0}
.band-inhalt span{font:700 clamp(18px,2.2vw,30px)/1 var(--display);text-transform:uppercase;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:.8em;padding-right:.8em}
.band-inhalt svg{width:.9em;height:.9em;flex:none}
@keyframes laufen{to{transform:translateX(-50%)}}

/* ---------- Ansage (hell) ---------- */
.ansage{background:var(--creme);color:var(--schwarz);padding:clamp(48px,8vw,140px) var(--rand) clamp(40px,6vw,96px)}
.ansage .klein{color:var(--koralle-text);margin-bottom:clamp(20px,3vw,40px);display:block}
.ansage h1{font-size:clamp(46px,9.6vw,168px)}
.ansage h1 em{font-style:normal;color:var(--koralle-text)}
.ansage-unten{display:grid;grid-template-columns:1fr 1fr;gap:var(--rand);margin-top:clamp(32px,5vw,80px);border-top:2px solid var(--schwarz);padding-top:24px}
.ansage-unten p{font-size:clamp(17px,1.5vw,21px);line-height:1.45;max-width:30em}
.ansage-unten .klein{margin:0;color:var(--schwarz);align-self:end;justify-self:end;text-align:right}

/* ---------- Bereiche ---------- */
.bereiche{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--creme)}
.bereich{position:relative;border-right:1px solid var(--creme);padding:var(--rand);min-height:clamp(180px,22vw,340px);display:flex;flex-direction:column;justify-content:space-between;transition:background .15s,color .15s}
.bereich:last-child{border-right:0}
.bereich .klein{color:var(--grau);transition:color .15s}
.bereich h2{font-size:clamp(22px,2.6vw,42px);line-height:.95;word-break:break-word}
.bereich:hover{background:var(--koralle);color:var(--schwarz)}
.bereich:hover .klein{color:var(--schwarz)}

/* ---------- Aufruf ---------- */
.aufruf{display:grid;grid-template-columns:1.4fr 1fr;border-bottom:1px solid var(--creme)}
.aufruf > div{padding:clamp(32px,5vw,80px) var(--rand)}
.aufruf h2{font-size:clamp(34px,5.4vw,92px)}
.aufruf .rechts{border-left:1px solid var(--creme);display:flex;flex-direction:column;justify-content:flex-end;gap:14px}
.knopf{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;font:600 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid var(--creme);transition:background .15s,color .15s,border-color .15s}
.knopf:hover{background:var(--creme);color:var(--schwarz)}
.knopf.voll{background:var(--koralle);border-color:var(--koralle);color:var(--schwarz)}
.knopf.voll:hover{background:var(--creme);border-color:var(--creme)}
.knopf svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.aufruf .hinweis{color:var(--grau);font-size:14px}

/* ---------- Fuß ---------- */
.fuss{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px var(--rand) 24px;color:var(--grau);font-size:14px}
.fuss nav{display:flex;gap:24px}
.fuss a{color:var(--creme);text-decoration:none;border-bottom:1px solid transparent}
.fuss a:hover{border-bottom-color:var(--creme)}

/* ---------- Rechtstexte ---------- */
.recht main{background:var(--creme);color:var(--schwarz);padding:clamp(40px,6vw,96px) var(--rand) clamp(56px,7vw,110px)}
.recht h1{font-size:clamp(44px,8vw,120px);margin-bottom:clamp(28px,4vw,56px)}
.recht .text{max-width:760px}
.recht h2{font:700 18px/1.2 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:40px 0 12px;padding-top:16px;border-top:2px solid var(--schwarz)}
.recht p,.recht li{font-size:17px;line-height:1.6}
.recht p+p{margin-top:12px}
.recht ul{padding-left:1.2em}
.recht li+li{margin-top:6px}
.recht a{color:var(--koralle-text)}
.recht .stand{margin-top:48px;font-size:14px;color:#5C534E}

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

/* ---------- Handy ---------- */
@media (max-width:820px){
 .kopf{grid-template-columns:1fr auto;padding:14px var(--rand)}
 .kopf img{height:24px}
 .kopf .mitte{display:none}
 .uhr-kopf{flex-direction:column;gap:6px}
 .ziffern{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ziffer{min-height:44vw;padding:16px var(--rand) 14px}
 .ziffer:nth-child(2){border-right:0}
 .ziffer:nth-child(-n+2){border-bottom:1px solid var(--creme)}
 .ziffer b{font-size:25vw}
 .ansage-unten{grid-template-columns:1fr}
 .ansage-unten .klein{justify-self:start;text-align:left}
 .bereiche{grid-template-columns:1fr 1fr}
 .bereich:nth-child(2){border-right:0}
 .bereich:nth-child(-n+2){border-bottom:1px solid var(--creme)}
 .bereich{min-height:38vw}
 .aufruf{grid-template-columns:1fr}
 .aufruf .rechts{border-left:0;border-top:1px solid var(--creme)}
 .fuss{flex-direction:column;align-items:flex-start}
}