/* Bekifft – shared styles. Most layout styles are inline in the HTML (exported from the design canvas). */

@font-face{font-family:'DKS Groovezilla';font-style:normal;font-weight:400;font-stretch:75% 140%;font-display:swap;src:url(../fonts/dks-groovezilla-vf.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/outfit-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/outfit-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/outfit-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/outfit-latin-800-normal.woff2) format('woff2')}

/* ===== Color tokens =====
   Scales: brown (dark → light surfaces), cream (light → text), orange (brand accent).
   Inline styles in the HTML still use raw hex; use these variables for new work. */
:root{
  /* Fonts: display = headlines/titles/numerals (variable, width axis 75–140%), body = Outfit */
  --bk-font-display:'DKS Groovezilla','Cooper Black',serif;
  --bk-font-body:'Outfit','Trebuchet MS',sans-serif;

  /* Brown – backgrounds, borders */
  --bk-brown-950:#1A1614;
  --bk-brown-900:#231F1C; /* footer */
  --bk-brown-800:#2B2623; /* base background, text on orange */
  --bk-brown-700:#352E2A; /* alt sections, cards */
  --bk-brown-600:#453C37; /* raised card, hover surface, subtle border */
  --bk-brown-500:#5A4E47; /* strong border, dividers */
  --bk-brown-400:#7A6B61; /* muted/disabled text, placeholder */

  /* Cream – text, inverse surfaces */
  --bk-cream-50:#FFF8F1;  /* brightest highlight */
  --bk-cream-100:#FBEDE0; /* headlines, inverse background */
  --bk-cream-200:#F4D7B9; /* smoke */
  --bk-cream-300:#E7D5C4; /* body text on dark */
  --bk-cream-400:#CDB8A6; /* secondary text */
  --bk-cream-500:#A89483; /* tertiary text, icons */

  /* Orange – brand accent */
  --bk-orange-100:#FFE3D6; /* tint bg on light surfaces */
  --bk-orange-200:#FFC2A6; /* link hover */
  --bk-orange-300:#F59A72; /* links */
  --bk-orange-400:#EE7A50; /* button hover */
  --bk-orange-500:#EA5B31; /* brand orange */
  --bk-orange-600:#C8441F; /* button pressed */
  --bk-orange-700:#9E3318; /* orange on light bg, dark accents */
  --bk-orange-800:#6E2412; /* deep tint bg behind orange text */

  /* Status (warm-tuned, use sparingly: form messages) */
  --bk-success:#8FBF73;
  --bk-danger:#FF7A6B;

  /* Alpha – overlays, shadows, glows */
  --bk-orange-a15:rgba(234,91,49,.15);  /* subtle tint bg */
  --bk-orange-a45:rgba(234,91,49,.45);  /* glow */
  --bk-orange-a50:rgba(234,91,49,.5);   /* card shadow */
  --bk-cream-a12:rgba(251,237,224,.12); /* hairline border on dark */
  --bk-cream-a25:rgba(251,237,224,.25); /* ring, outline */
  --bk-cream-a45:rgba(251,237,224,.45); /* cream glow */
  --bk-green:#26A55D;   /* info pills (date, location), "Wir sind Bekifft" hover, next-show card */
  --bk-yellow:#E9991D;  /* sticker pills and icons in the hero */
  --bk-black:#000;      /* sponsors strip, comedians mystery card, text on green */
  --bk-black-a40:rgba(15,12,10,.4);     /* neutral drop shadow, image scrim */
  --bk-black-a70:rgba(15,12,10,.7);     /* heavy scrim / overlay */

  /* Semantic aliases – use these in components */
  --bk-bg:var(--bk-brown-800);
  --bk-bg-alt:var(--bk-brown-700);
  --bk-bg-footer:var(--bk-brown-900);
  --bk-surface-raised:var(--bk-brown-600);
  --bk-border:var(--bk-cream-a12);
  --bk-border-strong:var(--bk-brown-500);
  --bk-text:var(--bk-cream-100);
  --bk-text-body:var(--bk-cream-300);
  --bk-text-muted:var(--bk-cream-400);
  --bk-accent:var(--bk-orange-500);
  --bk-on-accent:var(--bk-brown-800);   /* never white on orange */
  --bk-link:var(--bk-orange-300);
  --bk-link-hover:var(--bk-orange-200);
  --bk-inverse-bg:var(--bk-cream-100);  /* light card on dark page */
  --bk-inverse-text:var(--bk-brown-800);
  --bk-shadow-glow:0 0 60px 10px var(--bk-orange-a45);
  --bk-shadow-card:0 30px 80px -20px var(--bk-orange-a50);
  --bk-shadow-drop:0 20px 50px -15px var(--bk-black-a40);
  --bk-focus:0 0 0 3px var(--bk-orange-200);
}

/* ===== Layout tokens =====
   One 4px-based scale for space, type and radius. Same names as most design systems
   (Material/Tailwind-style steps), so it can grow without renaming. */
:root{
  /* Space – use for gap, margin, padding */
  --bk-space-1:4px;   /* icon/label tight */
  --bk-space-2:8px;   /* chips, small stacks */
  --bk-space-3:12px;  /* title → intro text, list items */
  --bk-space-4:16px;  /* default gap between siblings */
  --bk-space-5:24px;  /* card padding, grid gap */
  --bk-space-6:32px;  /* between groups inside a block */
  --bk-space-7:40px;  /* section header → content */
  --bk-space-8:48px;  /* large card padding, big groups */
  --bk-space-9:64px;  /* between blocks */
  --bk-space-10:96px; /* section padding (desktop) */

  /* Layout */
  --bk-container:1280px;
  --bk-gutter:clamp(20px,5vw,32px);     /* page side padding */
  --bk-section-y:clamp(64px,9vw,96px);  /* section top/bottom padding */

  /* Type sizes (base text is --bk-text-base on the page wrapper) */
  --bk-text-xs:13px;   /* labels, captions, chips */
  --bk-text-sm:15px;   /* secondary text, card text */
  --bk-text-base:17px; /* body */
  --bk-text-md:19px;   /* lead paragraph */
  --bk-text-lg:26px;   /* card titles */
  --bk-text-xl:32px;   /* small headings */
  --bk-text-2xl:56px;  /* big numerals */
  --bk-title-size:clamp(48px,6.4vw,88px);  /* section titles (h2) */
  --bk-title-sm-size:clamp(36px,4.4vw,58px); /* h1 / compact titles */

  /* Line height */
  --bk-lh-none:1;    /* numerals */
  --bk-lh-tight:1.05;/* display titles */
  --bk-lh-snug:1.3;  /* card titles, short text */
  --bk-lh-body:1.45; /* paragraphs */
  --bk-lh-relaxed:1.55; /* page base, long legal text */

  /* Radius */
  --bk-radius-sm:16px;
  --bk-radius-md:28px;   /* cards */
  --bk-radius-lg:40px;   /* big cards, video */
  --bk-radius-xl:48px;   /* newsletter box */
  --bk-radius-pill:999px;

  /* Border width */
  --bk-border-w:1px;
  --bk-border-w-strong:3px;
}

body{margin:0;background:#2B2623}
a{color:#F59A72}a:hover{color:#FFC2A6}
.bk-title{-webkit-text-stroke:12px #EA5B31;paint-order:stroke fill;letter-spacing:0.01em}
@keyframes bk-rise-l{0%{transform:translate3d(0,60px,0) scale(.6);opacity:0}25%{opacity:.85}100%{transform:translate3d(-60px,-320px,0) scale(1.7);opacity:0}}
@keyframes bk-rise-r{0%{transform:translate3d(0,60px,0) scale(.6);opacity:0}25%{opacity:.85}100%{transform:translate3d(70px,-340px,0) scale(1.8);opacity:0}}
@keyframes bk-drift{0%,100%{transform:translate3d(-2.5%,0,0)}50%{transform:translate3d(2.5%,-6px,0)}}
@keyframes bk-reveal{0%{filter:blur(16px);opacity:0;transform:translateY(14px) scale(1.04)}100%{filter:blur(0);opacity:1;transform:none}}
@keyframes bk-wisp{0%{opacity:0;transform:translateY(10px) scaleY(.6)}30%{opacity:.9}100%{opacity:0;transform:translateY(-46px) scaleY(1.4)}}
.bk-smoke{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bk-puff{position:absolute;opacity:0;filter:blur(1.5px);animation:bk-rise-l 11s ease-out infinite}
.bk-puff.r{animation-name:bk-rise-r}
.bk-bank-g{animation:bk-drift 22s ease-in-out infinite;transform-box:fill-box}
.bk-reveal{animation:bk-reveal 1.8s cubic-bezier(.2,.7,.2,1) both}
.bk-wisp{animation:bk-wisp 3.4s ease-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.bk-tile img{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .8s}
.bk-tile:hover img{transform:scale(1.06);filter:saturate(1.1)}
@media (max-width: 760px){.bk-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:200px!important}.bk-gallery figure{grid-column:auto!important}.bk-gallery figure:nth-child(2){grid-column:span 2!important}.bk-title{-webkit-text-stroke:8px #EA5B31}}
/* countdown (hero): number boxes with German labels, finished state swaps in a message */
.bk-cd{display:flex;flex-wrap:wrap;gap:var(--bk-space-2)}
.bk-cd__unit{display:flex;flex-direction:column;align-items:center;min-width:72px;padding:var(--bk-space-5) var(--bk-space-4);background:var(--bk-brown-700);border:var(--bk-border-w) solid var(--bk-border);border-radius:var(--bk-radius-sm)}
.bk-cd__num{font-family:var(--bk-font-display);font-size:var(--bk-text-xl);line-height:var(--bk-lh-none);color:var(--bk-text);font-variant-numeric:tabular-nums}
.bk-cd__unit:last-of-type .bk-cd__num{color:var(--bk-accent)}
.bk-cd__label{margin-top:var(--bk-space-1);font-size:var(--bk-text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bk-text-muted)}
.bk-cd__done{display:none;margin:0;font-weight:800;color:var(--bk-text)}
.bk-cd[data-countdown-status="finished"] .bk-cd__unit{display:none}
.bk-cd[data-countdown-status="finished"] .bk-cd__done{display:block}
/* line-up: 6 → 3 → 2 columns */
.bk-lineup{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width: 560px){.bk-lineup{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width: 1000px){.bk-lineup{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (prefers-reduced-motion: reduce){.bk-puff,.bk-bank-g,.bk-reveal,.bk-wisp{animation:none}.bk-puff{opacity:.5}}

body{margin:0;background:#2B2623}
a{color:#F59A72}a:hover{color:#FFC2A6}

/* SplitText line masks (mask-text-reveal.js) clip descenders (g, j, p, q, y). Extra room at the bottom, cancelled by the negative margin so the layout does not move. */
.line-mask { padding-bottom: 0.1em; margin-bottom: -0.1em; }

@media (max-width: 480px){.bk-cd{gap:var(--bk-space-2)}.bk-cd__unit{flex:1 1 0;min-width:0;padding:var(--bk-space-4) var(--bk-space-2)}}