/* Glühgarten 2026 · Markenkit „Glühgarten“ (Canva) – Schriften liegen lokal, keine externen Anfragen */
@font-face{font-family:"Anton";src:url(/fonts/anton.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Archivo Black";src:url(/fonts/archivo-black.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Caveat Brush";src:url(/fonts/caveat-brush.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/fonts/space-grotesk-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/fonts/space-grotesk-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/fonts/space-grotesk-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --navy:#1B2340;--navy-2:#232C4F;--navy-3:#2E3860;
  --creme:#F2E8D5;--orange:#E8692E;--rot:#C8322B;--weiss:#FFFFFF;--ink:#1B2340;
  --muted:rgba(242,232,213,.7);--muted-ink:rgba(27,35,64,.7);
  --line:rgba(242,232,213,.16);--line-ink:rgba(27,35,64,.16);
  --f-head:"Anton","Impact","Arial Narrow",sans-serif;
  --f-disp:"Archivo Black","Arial Black",sans-serif;
  --f-hand:"Caveat Brush","Segoe Print","Bradley Hand",cursive;
  --f-text:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px;--max:1120px;color-scheme:dark
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:var(--creme);font-family:var(--f-text);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;padding-top:env(safe-area-inset-top,0px)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header,main,section,footer{position:relative;z-index:2}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
h2{font-family:var(--f-head);font-size:clamp(44px,8vw,88px);line-height:.95;text-transform:uppercase}
h3{font-family:var(--f-disp);font-size:20px;line-height:1.15;text-transform:uppercase}
.eyebrow{font-family:var(--f-disp);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.hand{font-family:var(--f-hand);font-weight:400;line-height:1}
.hand-eyebrow{font-family:var(--f-hand);font-size:clamp(28px,3.6vw,36px);color:var(--rot);display:inline-block;transform:rotate(-2deg);transform-origin:left}
.lead{font-size:clamp(17px,2vw,20px);max-width:58ch}
.muted{color:var(--muted)}
.band{padding-block:clamp(64px,10vw,120px)}
.band.creme{background:var(--creme);color:var(--ink)}
.band.creme .muted{color:var(--muted-ink)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(32px,5vw,56px)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:8px}

/* Kopfzeile */
.top{position:sticky;top:0;z-index:50;background:rgba(27,35,64,.85);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:68px}
.top .brand img{height:46px;width:auto}
.ig{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--f-disp);font-size:13px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;background:var(--orange);color:var(--navy);padding:10px 16px;border-radius:999px;white-space:nowrap;transition:transform .15s}
.ig svg{width:18px;height:18px}
.ig:active,.btn:active{transform:scale(.95)}
@media (max-width:420px){.ig span{display:none}.ig{padding:11px}}

/* Hero */
.hero{padding-block:clamp(48px,8vw,100px) clamp(56px,8vw,96px);overflow:hidden}
.hero .wrap{display:grid;gap:clamp(26px,4vw,40px)}
.hero h1{display:grid;gap:0;justify-items:start}

.olt{font-family:var(--f-hand);color:var(--orange);font-size:clamp(48px,8.5vw,92px);line-height:.9;transform:rotate(-5deg);margin:-.1em 0 0 .15em}
.dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;background:var(--line);border-radius:var(--r);overflow:hidden;max-width:880px}
.dates>div{background:var(--navy-2);padding:20px 22px;display:grid;gap:4px;min-width:0}
.dates .k{font-family:var(--f-disp);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dates .v{font-family:var(--f-head);font-size:clamp(30px,4vw,40px);line-height:1;text-transform:uppercase}
.dates .v.o{color:var(--orange)}
.follow{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap}
.follow p{margin:0;font-size:18px}
.count{font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:0;font-family:var(--f-disp);font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .15s}
.btn.pri{background:var(--orange);color:var(--navy)}
.btn.ghost{background:rgba(27,35,64,.08);color:var(--ink)}

/* Drehender Stern hinter dem Schriftzug (wie im Entwurf) */
.hero-logo{position:relative;display:block;width:min(460px,78vw)}
.hero-logo img{position:relative;z-index:1;width:100%}
.hero-logo .burst{position:absolute;z-index:0;left:15.2%;top:-4.8%;width:82%;height:auto;fill:var(--orange);animation:spin 60s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}

/* Fotos */
.pics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pics figure{margin:0;border:8px solid var(--creme);border-radius:6px;overflow:hidden;background:var(--navy-3);aspect-ratio:2/3;max-width:100%}
.pics figure:nth-child(odd){transform:rotate(-1.2deg)}.pics figure:nth-child(even){transform:rotate(1deg) translateY(18px)}
.pics img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.pics{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pics figure{border-width:5px}}

.about{display:grid;gap:18px;max-width:780px}
.about p{margin:0}

/* Kommt bald */
.soon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.soon>div{background:var(--navy-2);border-radius:22px;padding:clamp(22px,3vw,32px);display:grid;gap:12px;align-content:start;min-width:0}
.soon .n{font-family:var(--f-head);font-size:clamp(34px,4vw,44px);line-height:.95;text-transform:uppercase}
.soon .b{font-family:var(--f-hand);font-size:32px;color:var(--orange);transform:rotate(-3deg);transform-origin:left}
.soon p{margin:0;color:var(--muted)}
@media (max-width:820px){.soon{grid-template-columns:1fr}}

/* Wann & wo */
.info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line-ink);border-radius:24px;overflow:hidden}
.info>div{background:var(--creme);padding:clamp(22px,3vw,32px);display:grid;gap:12px;align-content:start;min-width:0}
.info table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.info td{padding:8px 0;border-bottom:1px solid var(--line-ink)}
.info td:last-child{text-align:right;font-weight:700}
.info tr:last-child td{border-bottom:0}
.info p{margin:0}
@media (max-width:820px){.info{grid-template-columns:1fr}}

/* Fuß */
footer{background:var(--navy);border-top:1px solid var(--line);padding-block:48px calc(56px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:flex-start;justify-content:space-between}
footer img{height:64px;width:auto}
footer p{margin:0;font-size:14px;color:var(--muted)}
footer nav{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.barcode{height:34px;width:180px;background:repeating-linear-gradient(90deg,var(--creme) 0 2px,transparent 2px 4px,var(--creme) 4px 5px,transparent 5px 9px,var(--creme) 9px 12px,transparent 12px 14px);opacity:.75}

/* Rechtstexte */
.legal{padding-block:clamp(48px,8vw,88px)}
.legal .wrap{max-width:760px}
.legal h1{font-family:var(--f-head);font-size:clamp(48px,9vw,84px);line-height:.95;text-transform:uppercase;margin-bottom:28px}
.legal h2{font-family:var(--f-disp);font-size:20px;text-transform:uppercase;line-height:1.2;margin:36px 0 10px}
.legal p,.legal li{color:var(--muted);max-width:68ch;overflow-wrap:anywhere;hyphens:auto}
.legal h1,.legal h2{overflow-wrap:anywhere;hyphens:auto}
.legal strong{color:var(--creme)}
.legal ul{padding-left:20px}

@media (prefers-reduced-motion:reduce){.hero-logo .burst{animation:none}*{transition-duration:.01ms!important;scroll-behavior:auto!important}}