/* Fonts are loaded with a in the page's , not @import here — see zuart.eu/styles.css for why: an @import serialises the request chain and defeats the fonts.googleapis preconnect hints. */ :root { --ink: #0b0b0d; --panel: #141316; --panel-2: #19181b; --gold: #c9a24b; --gold-bright: #e6c878; --cream: #f4f0e8; --muted: #a79f8f; --line: rgba(244, 240, 232, 0.12); --serif: "Cormorant Garamond", Georgia, serif; --sans: "Inter", Arial, sans-serif; --mono: "DM Mono", monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.5; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--ink); padding: 10px 16px; z-index: 9; font-weight: 600; } .skip:focus { left: 8px; } .eyebrow { margin: 0 0 16px; color: var(--gold); text-transform: uppercase; font: 500 0.72rem var(--mono); letter-spacing: 0.14em; } h1, h2 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; color: var(--cream); } h1 { line-height: 1.05; } h2 { line-height: 1.1; } p { margin: 0; } /* Topbar */ .topbar { display: flex; align-items: center; justify-content: space-between; height: 88px; padding: 0 clamp(24px, 5vw, 76px); border-bottom: 1px solid var(--line); } .logo { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.03em; color: var(--cream); } .logo span { color: var(--gold); } nav { display: flex; gap: 34px; } nav a { border-bottom: 1px solid transparent; padding: 6px 0; font: 500 0.82rem var(--sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); transition: color 0.2s, border-color 0.2s; } nav a:hover { color: var(--gold); border-color: var(--gold); } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; border: 1px solid var(--gold); border-radius: 2px; background: transparent; color: var(--gold-bright); font-size: 0.88rem; font-weight: 500; letter-spacing: 0.02em; transition: background 0.2s, color 0.2s; } .button:hover { background: var(--gold); color: var(--ink); } .button-small { min-height: 40px; padding: 0 20px; font-size: 0.8rem; } .button-light { border-color: var(--gold); color: var(--ink); background: var(--gold); font-family: var(--mono); } .button-light:hover { background: var(--gold-bright); border-color: var(--gold-bright); } .text-link { display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--muted); padding-bottom: 3px; font-size: 0.9rem; font-weight: 500; color: var(--cream); } .text-link:hover { color: var(--gold-bright); border-color: var(--gold-bright); } /* Hero */ .hero { position: relative; display: flex; align-items: center; min-height: 640px; overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; } .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(11,11,13,0.97) 15%, rgba(11,11,13,0.72) 55%, rgba(11,11,13,0.94) 100%); } .hero-copy { position: relative; z-index: 1; max-width: 760px; padding: 120px clamp(24px, 6vw, 76px); } h1 { font-size: clamp(2.7rem, 5.4vw, 4.6rem); max-width: 640px; } .lead { display: block; max-width: 460px; margin: 28px 0 36px; line-height: 1.65; font-size: 1.08rem; color: var(--muted); } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; } /* About */ .about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; max-width: 1280px; margin: 0 auto; padding: 130px clamp(24px, 5vw, 76px); } .about-copy h2 { font-size: clamp(2.1rem, 3.4vw, 3rem); max-width: 480px; } .about-copy p { margin: 24px 0; line-height: 1.75; color: var(--muted); max-width: 500px; } .about-picture { border: 1px solid var(--line); } .about-picture img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15) contrast(1.03); } /* Board */ .board { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 76px) 130px; } .board-picture { border: 1px solid var(--line); order: 1; } .board-picture img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15) contrast(1.03); } .board-copy { order: 2; } .board-copy h2 { font-size: clamp(2.1rem, 3.4vw, 3rem); max-width: 420px; } .board-copy p { margin-top: 24px; line-height: 1.75; color: var(--muted); max-width: 440px; } /* Event */ .event { padding: 120px clamp(24px, 5vw, 76px) 140px; background: linear-gradient(180deg, var(--panel), var(--ink)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-heading { max-width: 1280px; margin: 0 auto 56px; text-align: center; } .section-heading .eyebrow { display: block; text-align: center; } .section-heading h2 { font-size: clamp(2.3rem, 4vw, 3.4rem); } .event-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(30px, 5vw, 64px); align-items: center; max-width: 1180px; margin: 0 auto; } .event-poster { border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,0.5); } .event-name { font-family: var(--serif); font-size: 1.7rem; color: var(--gold-bright); margin-bottom: 30px; } .event-details dl { display: grid; gap: 20px; margin: 0; padding: 0; border-top: 1px solid var(--line); padding-top: 24px; } .event-details dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; } .event-details dt { font: 500 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); } .event-details dd { margin: 0; font-size: 0.98rem; color: var(--cream); } .event-details dd a { border-bottom: 1px solid var(--gold); color: var(--gold-bright); } .event-details dd a:hover { color: var(--cream); } .event-note { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); line-height: 1.7; color: var(--muted); font-size: 0.94rem; } /* CTA / Kontakt */ .cta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 40px; max-width: 1280px; margin: 0 auto; padding: 130px clamp(24px, 5vw, 76px); } .cta-copy h2 { font-size: clamp(2.3rem, 4vw, 3.4rem); } .cta-details { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .address { line-height: 1.6; color: var(--muted); font-size: 0.92rem; } .light-link { border-color: var(--muted); } /* Footer */ footer { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 15px; padding: 34px clamp(24px, 5vw, 76px); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; } footer .logo { font-size: 1.15rem; } footer p { text-align: center; margin: 0; } footer .copyright { text-align: right; } @media (max-width: 900px) { .about, .board, .event-layout { grid-template-columns: 1fr; } .board-picture { order: 0; } .board-copy { order: 1; } .about-picture { order: -1; } } @media (max-width: 760px) { .topbar { height: 68px; padding: 0 20px; } nav { display: none; } .hero { min-height: 560px; } .hero-copy { padding: 90px 22px 64px; } h1 { font-size: 2.5rem; } .about { padding: 80px 22px; } .board { padding: 0 22px 80px; } .event { padding: 80px 22px 96px; } .cta { padding: 80px 22px; } .event-details dl > div { grid-template-columns: 90px 1fr; } footer { grid-template-columns: 1fr; text-align: center; padding: 30px 22px; } footer p, footer .copyright { text-align: center; } } @media (max-width: 440px) { .topbar { padding: 0 16px; } .logo { font-size: 1.25rem; } .actions { gap: 18px; } }