@font-face { font-family: 'Berkshire Swash'; src: url('fonts/BerkshireSwash-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('fonts/Cinzel-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #1b1530; --surface: #261e3d; --surface-high: #30274a;
  --hairline: rgba(242, 193, 78, .2); --gold: #f2c14e; --gold-light: #ffe08a;
  --text: #f5ebdd; --muted: rgba(245, 235, 221, .72);
  --radius: 18px; --wrap: 1120px;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.65 var(--sans);
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-underline-offset: .18em; }
a:hover { color: var(--gold-light); }
:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -60px; padding: 10px 16px; background: var(--gold); color: #120c04; border-radius: 10px; z-index: 10; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.top { position: absolute; inset: 0 0 auto 0; z-index: 5; }
.top.solid { position: static; background: var(--surface); border-bottom: 1px solid var(--hairline); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gold); }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand span { font: 26px/1 'Berkshire Swash', Georgia, serif; }
.lang { font: 600 13px/1 Cinzel, Georgia, serif; letter-spacing: .08em; text-decoration: none; padding: 9px 14px; border: 1px solid var(--hairline); border-radius: 999px; background: rgba(27, 21, 48, .55); }

.hero { position: relative; min-height: min(92vh, 760px); display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; overflow: hidden; }
.hero > picture { position: absolute; inset: 0; }
.hero > picture img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(27,21,48,.35) 0%, rgba(27,21,48,.15) 35%, rgba(27,21,48,.85) 75%, var(--bg) 100%); }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-bottom: 72px; padding-top: 120px; }
/* Ein Wort ohne Leerzeichen kann nicht umbrechen: 14vw hält es bis 300 px Breite im Rahmen. */
.wordmark { margin: 0; font: clamp(40px, 14vw, 112px)/1 'Berkshire Swash', Georgia, serif; color: var(--gold);
  text-shadow: 0 0 28px rgba(255, 197, 107, .55), 0 3px 0 #3a2410; letter-spacing: .01em; }
.tagline { margin: 14px 0 0; font: 600 clamp(17px, 2.4vw, 22px)/1.35 Cinzel, Georgia, serif; letter-spacing: .04em; color: var(--text); }
.lead { max-width: 34em; margin: 18px 0 0; font-size: clamp(17px, 2vw, 19px); color: var(--muted); }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.stores li { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: rgba(38, 30, 61, .85);
  border: 1px solid var(--hairline); font-weight: 600; font-size: 15px; }
.stores svg { width: 20px; height: 20px; fill: var(--gold); flex: none; }

section { padding: 88px 0; }
section.alt { background: linear-gradient(180deg, var(--bg), var(--surface) 30%, var(--surface) 70%, var(--bg)); }
h2 { margin: 0 0 40px; font: 600 clamp(24px, 3.4vw, 34px)/1.25 Cinzel, Georgia, serif; color: var(--gold); letter-spacing: .03em; text-align: center; }

.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin: 0; padding: 0; list-style: none; }
.shots figure { margin: 0; }
.shots img { width: 100%; aspect-ratio: 1125 / 2001; object-fit: cover; border-radius: 28px; border: 1px solid var(--hairline);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 6px rgba(48, 39, 74, .9); background: var(--surface); }
.shots figcaption { margin-top: 22px; color: var(--muted); text-align: center; font-size: 16px; }

.usp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.usp li { padding: 28px; background: var(--surface-high); border: 1px solid var(--hairline); border-radius: var(--radius); }
.usp h3 { margin: 0 0 10px; font: 600 19px/1.3 Cinzel, Georgia, serif; color: var(--gold-light); letter-spacing: .03em; }
.usp p { margin: 0; color: var(--muted); }
.pals { display: flex; justify-content: center; gap: clamp(8px, 3vw, 32px); margin: 56px 0 0; }
.pals img { height: clamp(96px, 16vw, 150px); width: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }

.noacc { text-align: center; }
.noacc p { max-width: 36em; margin: 0 auto 16px; color: var(--muted); font-size: 18px; }

.legal { padding: 56px 0 88px; }
.prose { max-width: 70ch; margin: 0 auto; }
/* Rechtstexte in normaler Schrift: Cinzel kennt nur Versalien und macht aus ß ein SS (Murat, 12.11.). */
.prose h1 { margin: 0 0 8px; font: 700 clamp(28px, 4vw, 36px)/1.2 var(--sans); color: var(--gold); letter-spacing: -.01em; }
.prose h2 { text-align: left; margin: 40px 0 10px; font: 700 clamp(19px, 2.4vw, 22px)/1.3 var(--sans); letter-spacing: 0; }
.prose p, .prose li { color: var(--muted); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose a { word-break: break-word; }

.foot { border-top: 1px solid var(--hairline); background: var(--surface); padding: 36px 0 44px; font-size: 15px; color: var(--muted); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
.foot ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.foot a { color: var(--text); text-decoration: none; }
.foot a:hover { color: var(--gold-light); text-decoration: underline; }

.nf { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.nf h1 { font: 600 34px/1.2 Cinzel, Georgia, serif; color: var(--gold); margin: 0 0 12px; }

@media (max-width: 860px) {
  .shots { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; gap: 48px; }
  .usp { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  section { padding: 64px 0; }
  .hero .wrap { padding-bottom: 48px; }
}
@media (max-width: 420px) {
  .brand span { font-size: 22px; }
  .stores li { width: 100%; }
}