:root { --ink:#182a3a; --blue:#31536f; --pale:#edf3f5; --cream:#faf8f3; --gold:#b79362; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; }
.hero { min-height:94svh; position:relative; display:flex; align-items:flex-end; overflow:hidden; color:white; background:#14293a; }
.hero::before { content:""; position:absolute; inset:-36px; background:url('Willkommen.png') center/cover no-repeat; filter:blur(24px); opacity:.48; transform:scale(1.05); }
.hero-photo,.hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.hero-photo { object-fit:contain; object-position:center; }
.hero-shade { z-index:1; background:linear-gradient(90deg,rgba(7,21,34,.8) 0%,rgba(7,21,34,.38) 46%,rgba(7,21,34,.06) 76%),linear-gradient(0deg,rgba(7,21,34,.5),transparent 48%); }
.hero-content { position:relative; z-index:2; width:min(1320px,calc(100% - 48px)); margin:0 auto; padding:150px 0 104px; }
.eyebrow { margin:0 0 20px; font-size:12px; line-height:1; font-weight:700; letter-spacing:.24em; text-transform:uppercase; }
.eyebrow.dark { color:var(--gold); }
h1,h2,h3 { font-family:Georgia,'Times New Roman',serif; font-weight:400; }
h1 { max-width:780px; margin:0; font-size:clamp(50px,7vw,100px); line-height:.96; letter-spacing:-.04em; text-wrap:balance; }
.date { margin:28px 0 34px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(22px,2.3vw,32px); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:58px; padding:0 28px; border-radius:999px; font-size:15px; font-weight:700; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.button:hover { transform:translateY(-2px); }
.button:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.button-light { background:white; color:var(--ink); box-shadow:0 15px 35px rgba(0,0,0,.18); }
.button-blue { background:var(--blue); color:white; box-shadow:0 15px 35px rgba(49,83,111,.22); }
.scroll-hint { position:absolute; right:42px; bottom:36px; z-index:2; display:flex; gap:14px; font-size:12px; text-decoration:none; text-transform:uppercase; letter-spacing:.14em; }
.welcome { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:120px 0; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr); gap:clamp(60px,9vw,130px); align-items:center; }
.welcome h2 { margin:0 0 28px; font-size:clamp(44px,6vw,76px); line-height:1; letter-spacing:-.035em; }
.lead { max-width:680px; margin:0; color:#506171; font-size:18px; line-height:1.75; }
.steps { margin:48px 0 40px; border-top:1px solid #d8dedf; }
.steps>div { display:grid; grid-template-columns:58px 1fr; gap:12px; padding:19px 0; border-bottom:1px solid #d8dedf; }
.steps span { color:var(--gold); font-family:Georgia,serif; font-size:18px; }
.steps p { margin:0; color:#687681; line-height:1.45; }
.steps strong { display:block; margin-bottom:3px; color:var(--ink); }
.qr-card { background:var(--pale); padding:38px; border-radius:160px 160px 24px 24px; text-align:center; box-shadow:0 24px 70px rgba(31,57,75,.10); }
.qr-frame { width:min(250px,78%); aspect-ratio:1; margin:0 auto 38px; display:grid; place-items:center; background:white; border-radius:50%; box-shadow:0 14px 38px rgba(31,57,75,.12); }
.qr-frame img { width:68%; height:68%; }
.qr-card h3 { margin:0 0 12px; font-size:35px; }
.qr-card>p:not(.eyebrow) { margin:0 auto 24px; color:#65747f; line-height:1.6; }
.secure { display:inline-block; color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
footer { padding:42px 24px; background:var(--ink); color:white; display:flex; justify-content:space-between; gap:20px; font-family:Georgia,serif; }
footer p { margin:0; } footer span { color:#b9c5cd; letter-spacing:.18em; }
@media(max-width:760px){.hero{min-height:92svh}.hero-photo{object-position:center}.hero-shade{background:linear-gradient(0deg,rgba(7,21,34,.88) 0%,rgba(7,21,34,.2) 74%)}.hero-content{width:min(100% - 32px,1320px);padding:110px 0 80px}h1{font-size:clamp(46px,13vw,66px)}.button{width:100%}.scroll-hint{display:none}.welcome{width:min(100% - 32px,1180px);padding:78px 0;grid-template-columns:1fr;gap:72px}.lead{font-size:16px}.qr-card{padding:30px 24px 36px;border-radius:130px 130px 22px 22px}footer{flex-direction:column;text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}
