/* Fonts are loaded via in , not @import, so they start downloading in parallel with this stylesheet instead of after it. */ /* ---- tokens ---- */ :root { --black: #000000; --card-black: #15111a; --blood-500: #f80102; --blood-600: #e01e10; --blood-700: #a11b18; --bone-100: #f2ede8; --body-text: #c9c1ba; --muted: #8b8179; --hairline: rgba(226, 218, 210, 0.18); --font-display: "Anton", "Arial Narrow", Impact, sans-serif; --font-label: "Oswald", "Arial Narrow", sans-serif; --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif; --track-caps: 0.12em; --track-body: 0.06em; --size-display-lg: clamp(56px, 6vw + 24px, 104px); --size-display-md: clamp(40px, 5vw + 16px, 64px); --size-display-sm: clamp(28px, 3vw + 16px, 40px); --container: 1240px; --gutter: 48px; --section-y: 96px; --ease: cubic-bezier(0.16, 0.84, 0.44, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 420ms; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } /* ---- reset / base ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--black); color: var(--body-text); font-family: var(--font-body); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.01em; color: var(--bone-100); margin: 0; } p { margin: 0 0 16px; } a { color: var(--blood-500); text-decoration: none; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--blood-600); } img { max-width: 100%; } ::selection { background: var(--blood-700); color: var(--bone-100); } :focus-visible { outline: 2px solid var(--blood-500); outline-offset: 2px; } .container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .grain { position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); opacity: 0.14; mix-blend-mode: overlay; } .eyebrow { font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--blood-500); margin-bottom: 16px; } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); line-height: 1; border: none; border-radius: 0; cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .btn:hover { color: var(--bone-100); } .btn:active { transform: translateY(1px); } .btn-solid { background: var(--blood-600); color: var(--bone-100); } .btn-solid:hover { background: var(--blood-500); color: var(--bone-100); } .btn-solid:active { background: var(--blood-700); } .btn-ghost { background: transparent; color: var(--bone-100); box-shadow: inset 0 0 0 1px var(--bone-100); } .btn-ghost:hover { background: rgba(242, 237, 232, 0.08); color: var(--bone-100); } .btn-sm { padding: 10px 18px; font-size: 13px; } .btn-md { padding: 15px 28px; font-size: 15px; } .btn-lg { padding: 18px 36px; font-size: 17px; } /* ---- header ---- */ .site-header { position: sticky; top: 0; z-index: 20; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); } .site-header.is-plain { position: static; background: var(--black); backdrop-filter: none; } .site-header .container { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .logo-link { display: flex; align-items: center; } .logo { display: block; width: 132px; height: auto; } .nav { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; } .nav-link { font-family: var(--font-label); font-weight: 500; font-size: 14px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--bone-100); } .nav-link:hover { color: var(--blood-500); } .nav-back { font-family: var(--font-label); font-weight: 500; font-size: 14px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--bone-100); } .nav-back:hover { color: var(--blood-500); } .menu-toggle { display: none; background: none; border: 1px solid var(--bone-100); color: var(--bone-100); width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; } .menu-toggle svg { width: 20px; height: 20px; } /* ---- hero / poster ---- */ .hero { position: relative; width: 100%; min-height: 680px; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; padding: 96px var(--gutter); overflow: hidden; background: var(--black); } .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.62) 26%, rgba(0,0,0,.22) 58%, rgba(0,0,0,0) 100%); } .hero-inner { position: relative; max-width: var(--container); margin: 0 auto; width: 100%; } .hero-headline { max-width: 960px; font-family: var(--font-display); font-size: var(--size-display-lg); line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase; margin: 0; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9); } .hero-headline span { display: block; color: var(--bone-100); } .hero-headline span.accent { color: var(--blood-500); } .hero-actions { margin-top: 48px; display: flex; gap: 48px; align-items: center; flex-wrap: wrap; } .meta-bar { display: inline-block; } .meta-bar-row { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--bone-100); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); } .meta-bar-row .dot { color: var(--blood-500); font-size: 0.7em; } .meta-bar-rule { height: 2px; background: var(--blood-600); margin-top: 10px; } .meta-bar.sm .meta-bar-row { font-size: 22px; } /* ---- festival section ---- */ .festival-section { padding: var(--section-y) var(--gutter); } .festival-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 64px; align-items: start; } .festival-heading h2 { font-size: var(--size-display-md); } .festival-heading h2 .accent { display: block; color: var(--blood-500); } .festival-copy { margin-top: 32px; font-size: 20px; color: var(--body-text); } .festival-copy.small { font-size: 17px; margin-top: 0; } .feature-label { font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--blood-500); margin-bottom: 24px; } .feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .feature-list li { display: flex; align-items: baseline; gap: 12px; } .feature-marker { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 2px; background: var(--blood-500); } .feature-text { font-family: var(--font-label); font-weight: 500; font-size: 20px; line-height: 1.1; text-transform: uppercase; letter-spacing: var(--track-body); color: var(--bone-100); } /* ---- fact cards ---- */ .facts-section { padding: 0 var(--gutter) var(--section-y); } .facts-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 24px; } .fact-card { position: relative; background: var(--card-black); border: 1px solid var(--hairline); border-radius: 0; padding: 32px 24px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); } .fact-card.tone-blood { border-top: 3px solid var(--blood-600); } .fact-label { font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--blood-500); margin-bottom: 12px; } .fact-value { font-family: var(--font-display); font-size: var(--size-display-sm); line-height: 0.9; text-transform: uppercase; color: var(--bone-100); } .fact-note { margin-top: 12px; font-size: 15px; color: var(--muted); } /* ---- photo band ---- */ .photo-band { position: relative; overflow: hidden; } .photo-band-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .photo-band img { width: 100%; height: 420px; object-fit: cover; display: block; } /* ---- atmosphere section ---- */ .atmosphere-section { padding: var(--section-y) var(--gutter); text-align: center; } .atmosphere-section h2 { font-size: var(--size-display-md); } .atmosphere-section h2 .accent { display: block; color: var(--blood-500); } .atmosphere-copy { max-width: 58ch; margin: 32px auto 48px; font-size: 20px; color: var(--body-text); } /* ---- infos section ---- */ .infos-section { padding: 0 var(--gutter) var(--section-y); } .infos-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0; } .infos-image { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; } .infos-panel { background: var(--card-black); border: 1px solid var(--hairline); padding: 64px 56px; display: flex; flex-direction: column; gap: 32px; } .infos-panel h2 { font-size: var(--size-display-sm); } .info-dl { margin: 0; display: grid; gap: 32px; } .info-dl > div { display: grid; gap: 6px; } .info-dl dt { font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--blood-500); margin: 0; } .info-dl dd { margin: 0; } .info-dl dd.caps { font-family: var(--font-label); font-size: 18px; text-transform: uppercase; letter-spacing: var(--track-body); color: var(--bone-100); } .info-dl dd.body { font-size: 17px; color: var(--body-text); } .infos-actions { margin-top: auto; display: flex; gap: 24px; flex-wrap: wrap; } /* ---- footer ---- */ .site-footer { border-top: 1px solid var(--hairline); padding: 64px var(--gutter); } .footer-inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 56px; flex-wrap: wrap; } .footer-brand { display: flex; flex-direction: column; gap: 24px; } .footer-logo { display: block; width: 200px; height: auto; } .footer-links { display: flex; flex-direction: column; gap: 12px; font-family: var(--font-label); font-size: 14px; letter-spacing: var(--track-caps); text-transform: uppercase; } .footer-links a { color: var(--bone-100); } .footer-links a:hover { color: var(--blood-500); } .footer-links .muted-line { color: var(--muted); } .footer-reduced { max-width: var(--container); margin: 0 auto; } /* ---- impressum ---- */ .impressum-main { max-width: var(--container); margin: 0 auto; padding: 96px var(--gutter); } .impressum-main h1 { font-size: var(--size-display-lg); } .impressum-card { margin-top: 48px; max-width: 820px; background: var(--card-black); border: 1px solid var(--hairline); border-top: 3px solid var(--blood-600); padding: 64px 56px; } .impressum-title { font-family: var(--font-display); font-size: var(--size-display-sm); line-height: 0.9; text-transform: uppercase; color: var(--bone-100); margin-bottom: 48px; } .impressum-legal { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--hairline); display: grid; gap: 16px; } .impressum-legal p { margin: 0; font-size: 15px; color: var(--muted); } /* ---- mobile nav overlay ---- */ .nav-overlay { display: none; } @media (max-width: 720px) { .nav-links { display: none; } .menu-toggle { display: inline-flex; } .nav-overlay { display: flex; position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.97); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease); } .nav-overlay.is-open { opacity: 1; visibility: visible; } .nav-overlay .nav-link { font-size: 20px; } .nav-overlay-close { position: absolute; top: 24px; right: 24px; background: none; border: 1px solid var(--bone-100); color: var(--bone-100); width: 44px; height: 44px; cursor: pointer; } } @media (min-width: 721px) { .nav-links { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; } } /* ---- responsive ---- */ @media (max-width: 900px) { :root { --gutter: 24px; --section-y: 64px; } .hero { min-height: 560px; padding: 64px var(--gutter); } .infos-panel { padding: 48px 32px; } .impressum-card { padding: 48px 32px; } } @media (max-width: 520px) { .hero-actions { gap: 24px; } .footer-inner { align-items: flex-start; } .meta-bar-row { font-size: 24px; } }