@font-face {
  font-family: "Archivo";
  src: url("assets/archivo-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --color-sage: #d1b460;
  --color-paper: #efe2cc;
  --color-community: #c0b79c;
  --color-ink: #293d2a;
  --color-ink-muted: #575c47;
  --color-focus: #a84738;
  --color-selection: #a84738;
  --color-sticker-shadow: rgb(24 30 25 / 0.2);

  --font-display: "Archivo", Arial, sans-serif;
  --font-body: "Archivo", Arial, sans-serif;
  --type-label: 0.75rem;
  --type-meta: 0.8125rem;
  --type-body-small: 0.875rem;
  --type-body: 1rem;
  --type-lead: clamp(1.125rem, 1.8vw, 1.5625rem);
  --type-chapter-copy: 1.125rem;
  --type-footer-brand: clamp(1.5rem, 3vw, 2.875rem);
  --type-subheading: clamp(2.125rem, 4vw, 3.625rem);
  --type-section: clamp(3.875rem, 8vw, 7.25rem);
  --type-assortment: clamp(3rem, 7vw, 6.5rem);
  --type-display: clamp(4.25rem, 7.5vw, 7.375rem);
  --type-closing: clamp(4.625rem, 11vw, 10.25rem);
  --type-display-mobile: clamp(3rem, 14vw, 4.4rem);
  --type-section-mobile: clamp(2.55rem, 10.8vw, 2.9rem);
  --type-assortment-mobile: clamp(2.35rem, 9.8vw, 2.7rem);
  --type-active-mobile: 2.375rem;
  --type-closing-mobile: clamp(2.55rem, 10.8vw, 2.9rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 3.5rem;
  --space-11: 4rem;
  --space-12: 4.5rem;
  --space-13: 6rem;
  --space-14: 7.5rem;
  --space-15: 10rem;
  --space-tab-inset: 1.125rem;
  --space-closing-gap: 0.83em;
  --space-footer-padding-block: 2.625rem;
  --hero-copy-block: clamp(3.125rem, 6vw, 5.75rem);
  --hero-copy-end: clamp(2.875rem, 6vw, 6rem);
  --hero-copy-start: clamp(2.5rem, 5vw, 4.875rem);
  --hero-copy-mobile-top: 2.75rem;
  --hero-copy-mobile-inline: 1.75rem;
  --focus-inner-width: 3px;
  --focus-offset: 3px;
  --focus-outer-width: 6px;

  --rhythm-hero: clamp(2.125rem, 5vw, 4.375rem);
  --rhythm-chapter: clamp(5.625rem, 10vw, 9.375rem);
  --rhythm-showcase: clamp(5.9375rem, 11vw, 10.3125rem);
  --rhythm-closing: 5.625rem;
  --rhythm-mobile: 4.5rem;

  --container: 77.5rem;
  --hero-max: 85rem;
  --gutter: 1.5rem;
  --gutter-mobile: 1rem;
  --header-height: 5.25rem;
  --header-height-mobile: 4.5rem;
  --hero-min: min(40.625rem, 72vh);
  --hero-media-mobile-min: 26.875rem;
  --store-media-height: 31.25rem;
  --community-media-height: 75rem;
  --hours-max: 70rem;
  --footer-max: 82.5rem;
  --closing-min: 42.5rem;
  --closing-min-mobile: 35rem;
  --menu-width: 18.75rem;
  --control-height: 3.25rem;
  --tap-target: 2.75rem;
  --drawer-width: min(20.5rem, 84vw);
  --drawer-radius: 5rem 0 0 5rem;
  --color-scrim: rgb(24 30 25 / 0.46);

  --border-hairline: 1px solid;
  --border-standard: 2px solid;
  --radius-action: 999px;
  --radius-stadium: 330px;
  --radius-stadium-entry: 220px;
  --radius-stadium-mobile: 210px 210px 80px 80px;
  --radius-hero-media: 330px 80px 80px 330px;
  --radius-hero-media-mobile: 210px 210px 38px 38px;
  --radius-photo-arch: 250px 250px 32px 32px / 180px 180px 32px 32px;
  --radius-community-photo: 170px 32px 170px 32px;
  --radius-community-photo-mobile: 0;

  --duration-press: 140ms;
  --duration-menu: 180ms;
  --duration-drawer: 420ms;
  --duration-drawer-out: 260ms;
  --ease-drawer: cubic-bezier(0.22, 1, 0.28, 1);
  --duration-button-hover: 260ms;
  --duration-hero: 900ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-hero: cubic-bezier(0.18, 0.87, 0.2, 1);
  --icon-small: 1rem;
  --icon-medium: 1.25rem;
  --icon-large: 1.5rem;
  --sticker-size-small: clamp(4rem, 5vw, 5.75rem);
  --sticker-size-medium: clamp(5.25rem, 7vw, 7.5rem);
  --sticker-size-large: clamp(7rem, 9vw, 9.5rem);
  --sticker-outline: 4px;
  --sticker-depth: 0.45rem;
  --sticker-opacity: 0.94;

  color-scheme: light;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-sage);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--color-sage); color: var(--color-ink); font-size: var(--type-body); line-height: 1.45; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
figure, dl, dd { margin: 0; }
a { color: inherit; }
button, input, textarea, select, summary { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
h1, h2, h3, p { text-wrap: balance; }
h1, h2, h3 { margin-top: 0; font-family: var(--font-display); line-height: 0.94; letter-spacing: -0.055em; }
p { text-wrap: pretty; }
svg { display: block; }
::selection { background: var(--color-selection); color: var(--color-paper); }
* { scrollbar-color: var(--color-ink) var(--color-sage); scrollbar-width: thin; }
:focus-visible { outline: var(--focus-inner-width) solid var(--color-paper); outline-offset: var(--focus-offset); box-shadow: 0 0 0 var(--focus-outer-width) var(--color-ink); }

.icon, .menu-icon { width: var(--icon-medium); height: var(--icon-medium); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--large { width: var(--icon-large); height: var(--icon-large); }
.sticker-host { position: relative; isolation: isolate; overflow: hidden; }
.sticker-host > :not(.sticker-swarm) { position: relative; z-index: 2; }
.sticker-swarm { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; user-select: none; }
.sticker-swarm--hero, .sticker-swarm--error { z-index: 3; }
.sticker { width: var(--sticker-size-medium); height: auto; aspect-ratio: 1; position: absolute; object-fit: cover; opacity: var(--sticker-opacity); border: var(--sticker-outline) solid var(--color-paper); border-radius: 24% 14% 22% 16%; box-shadow: 0 var(--sticker-depth) calc(var(--sticker-depth) * 1.8) var(--color-sticker-shadow); transform: rotate(var(--sticker-rotation, 0deg)); transform-origin: 50% 50%; }
.skip-link { position: fixed; z-index: 100; left: var(--space-4); top: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-paper); color: var(--color-ink); border: var(--border-standard) var(--color-ink); transform: translateY(-180%); }
.skip-link:focus { transform: none; }

.site-header { min-height: var(--header-height); padding: var(--space-4) max(var(--gutter), calc((100vw - var(--hero-max)) / 2)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); position: relative; z-index: 30; background: var(--color-sage); color: var(--color-ink); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; font-size: var(--type-body-small); font-weight: 820; letter-spacing: -0.03em; line-height: 0.95; text-decoration: none; }
.brand-logo { width: var(--control-height); height: var(--control-height); object-fit: contain; }
.desktop-nav { display: flex; align-items: center; gap: var(--space-7); font-size: var(--type-body-small); font-weight: 650; }
.desktop-nav a { text-decoration: none; }
.desktop-nav a:not(.nav-action) { text-underline-offset: var(--space-2); }
.nav-action { min-height: var(--control-height); padding-inline: var(--space-5); display: inline-flex; align-items: center; gap: var(--space-3); overflow: hidden; position: relative; isolation: isolate; border: var(--border-standard) var(--color-ink); border-radius: var(--radius-action); background: var(--color-ink); color: var(--color-paper); transform: translateY(0); transform-origin: 50% 100%; transition: transform var(--duration-button-hover) var(--ease-out), color var(--duration-press) var(--ease-out); }
.nav-action::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--color-sage); transform: translateX(105%); transition: transform var(--duration-button-hover) var(--ease-out); }
.nav-action .icon { margin: calc(var(--space-1) * -1) 0 calc(var(--space-1) * -1) calc(var(--space-1) * -1); padding: var(--space-1); box-sizing: content-box; border-radius: var(--radius-action); background: var(--color-sage); color: var(--color-ink); transform: translateX(0) rotate(0); transition: transform var(--duration-button-hover) var(--ease-out), background-color var(--duration-press) var(--ease-out), color var(--duration-press) var(--ease-out); }
.nav-action:active { transform: translateY(1px) scale(0.97); }
.nav-action:focus-visible, .nav-action:focus-visible::before, .nav-action:focus-visible .icon { transform: none !important; transition-duration: 0.001ms; }
.mobile-nav { display: none; }
.menu-toggle { width: var(--control-height); height: var(--control-height); margin-right: calc(var(--space-2) * -1); list-style: none; display: grid; place-items: center; position: relative; z-index: 70; border-radius: var(--radius-action); }
.menu-toggle::-webkit-details-marker { display: none; }
/* Bei offenem Menü ist der Body gesperrt; der Kopf wandert mit. Das X bleibt an seinem Platz. */
.mobile-nav[open] .menu-toggle { margin-right: 0; position: fixed; top: calc((var(--header-height-mobile) - var(--control-height)) / 2); right: calc(var(--gutter-mobile) - var(--space-2)); }
.burger { width: 1.5rem; height: 1rem; display: grid; align-content: space-between; }
.burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transform-origin: 50% 50%; transition: transform var(--duration-menu) var(--ease-out), opacity calc(var(--duration-menu) / 1.6) linear; }
.mobile-nav[open] .burger i:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
.mobile-nav[open] .burger i:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.mobile-nav[open] .burger i:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }

.mobile-nav:not([open]) .menu-drawer, .mobile-nav:not([open]) .menu-scrim { display: none; }
.menu-scrim { position: fixed; z-index: 50; inset: 0; display: block; touch-action: none; background: var(--color-scrim); animation: scrim-in var(--duration-drawer) var(--ease-out) both; }
.menu-drawer { width: var(--drawer-width); padding: calc(var(--header-height-mobile) + var(--space-6)) var(--space-6) max(var(--space-7), env(safe-area-inset-bottom)) var(--space-8); position: fixed; z-index: 60; inset: 0 0 0 auto; display: flex; flex-direction: column; gap: var(--space-8); overflow-y: auto; overscroll-behavior: contain; border-left: var(--border-standard) var(--color-ink); border-radius: var(--drawer-radius); background: var(--color-paper); color: var(--color-ink); animation: drawer-in var(--duration-drawer) var(--ease-drawer) both; }
.menu-drawer__list { display: grid; }
.menu-drawer__list a { min-height: 3.5rem; padding-block: var(--space-3); display: flex; align-items: center; font-size: 1.5rem; font-weight: 780; letter-spacing: -0.035em; border-bottom: var(--border-hairline) var(--color-ink); text-decoration: none; }
.menu-drawer__list a:last-child { border-bottom: 0; }
.menu-drawer__foot { margin-top: auto; display: grid; gap: var(--space-4); justify-items: start; }
.menu-drawer__foot .cta { width: 100%; }
.menu-drawer__foot p { margin: 0; font-size: var(--type-label); font-weight: 760; text-transform: uppercase; letter-spacing: 0.11em; color: var(--color-ink-muted); }
.mobile-nav.is-closing .menu-drawer { animation: drawer-out var(--duration-drawer-out) var(--ease-out) both; }
.mobile-nav.is-closing .menu-scrim { animation: scrim-out var(--duration-drawer-out) linear both; }
.mobile-nav[open] .menu-drawer__list a { animation: drawer-row-in var(--duration-drawer) var(--ease-drawer) both; animation-delay: calc(90ms + var(--row, 0) * 38ms); }
.menu-drawer__list a:nth-child(2) { --row: 1; }
.menu-drawer__list a:nth-child(3) { --row: 2; }
.menu-drawer__list a:nth-child(4) { --row: 3; }
.mobile-nav[open] .menu-drawer__foot { animation: drawer-row-in var(--duration-drawer) var(--ease-drawer) both; animation-delay: 240ms; }
.mobile-nav.is-closing .menu-drawer__list a, .mobile-nav.is-closing .menu-drawer__foot { animation: none; }

/* Querformat: flacher Viewport, sonst rutscht der Fuß des Drawers unter die Falte. */
@media (max-height: 30rem) {
  .menu-drawer { padding-top: calc(var(--header-height-mobile) + var(--space-2)); padding-bottom: var(--space-5); gap: var(--space-5); }
  .menu-drawer__list a { min-height: 2.5rem; padding-block: var(--space-2); font-size: 1.1875rem; }
  .menu-drawer__foot { gap: var(--space-3); }
}

@keyframes drawer-in { from { transform: translateX(101%); } to { transform: translateX(0); } }
@keyframes drawer-out { from { transform: translateX(0); } to { transform: translateX(101%); } }
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes scrim-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes drawer-row-in { from { opacity: 0; transform: translateX(var(--space-6)); } to { opacity: 1; transform: none; } }

.eyebrow { margin: 0 0 var(--space-5); font-size: var(--type-label); font-weight: 820; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.13em; }
.cta { min-height: var(--control-height); padding-inline: var(--space-5); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6); overflow: hidden; position: relative; isolation: isolate; border: var(--border-standard) var(--color-ink); border-radius: var(--radius-action); font-weight: 760; text-decoration: none; transform: translateY(0); transform-origin: 50% 100%; transition: transform var(--duration-button-hover) var(--ease-out), color var(--duration-press) var(--ease-out); }
.cta::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; transform: translateX(105%); transition: transform var(--duration-button-hover) var(--ease-out); }
.cta .icon { margin: calc(var(--space-1) * -1) 0 calc(var(--space-1) * -1) calc(var(--space-1) * -1); padding: var(--space-1); box-sizing: content-box; border-radius: var(--radius-action); transform: translateX(0) rotate(0); transition: transform var(--duration-button-hover) var(--ease-out), background-color var(--duration-press) var(--ease-out), color var(--duration-press) var(--ease-out); }
.cta:active { transform: translateY(1px) scale(0.97); }
.cta:focus-visible, .cta:focus-visible::before, .cta:focus-visible .icon, .tab-output > a:focus-visible, .tab-output > a:focus-visible::before, .tab-output > a:focus-visible .icon { transform: none !important; transition-duration: 0.001ms; }
.cta--filled { background: var(--color-ink); color: var(--color-paper); }
.cta--filled::before { background: var(--color-sage); }
.cta--filled .icon { background: var(--color-sage); color: var(--color-ink); }
.cta--outline { background: transparent; color: var(--color-ink); }
.cta--outline::before { background: var(--color-ink); }
.cta--outline .icon { background: var(--color-ink); color: var(--color-paper); }
.cta--sage { border-color: var(--color-sage); background: var(--color-sage); color: var(--color-ink); }
.cta--sage::before { background: var(--color-selection); }
.cta--sage .icon { background: var(--color-ink); color: var(--color-paper); }
.text-link { padding-block: var(--space-2); font-weight: 720; text-underline-offset: var(--space-2); }

.hero { min-height: calc(100svh - var(--header-height)); padding: var(--rhythm-hero) max(var(--gutter-mobile), calc((100vw - var(--hero-max)) / 2)) var(--space-9); background: var(--color-sage); }
.stadium { min-height: var(--hero-min); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: var(--border-standard) var(--color-ink); border-radius: var(--radius-stadium); background: var(--color-paper); animation: table-in var(--duration-hero) var(--ease-hero) both; }
.stadium figure { min-height: 100%; overflow: hidden; border-radius: var(--radius-hero-media); }
.stadium figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-copy { padding: var(--hero-copy-block) var(--hero-copy-end) var(--hero-copy-block) var(--hero-copy-start); display: flex; flex-direction: column; justify-content: center; }
.hero h1 { margin-bottom: var(--space-6); font-size: var(--type-display); line-height: 0.94; }
.hero h1 span { color: var(--color-ink-muted); }
.hero-lead { max-width: 34rem; margin: 0; font-size: var(--type-lead); line-height: 1.28; letter-spacing: -0.02em; }
.hero-audience { max-width: 32rem; margin: var(--space-4) 0 0; font-size: var(--type-body-small); font-weight: 620; }
.hero-actions { margin-top: var(--space-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.hero-index { padding: var(--space-5) var(--space-11) 0; display: flex; justify-content: space-between; gap: var(--space-5); font-size: var(--type-label); font-weight: 780; }
.hero-index a { display: inline-flex; gap: var(--space-2); text-decoration: none; text-underline-offset: var(--space-2); }
.hero-index span { font-variant-numeric: tabular-nums; }

.sticker-swarm--hero .sticker:nth-child(1) { width: var(--sticker-size-large); top: var(--space-4); left: 1%; --sticker-rotation: -11deg; }
.sticker-swarm--hero .sticker:nth-child(2) { right: 1%; bottom: 16%; --sticker-rotation: 9deg; }
.sticker-swarm--hero .sticker:nth-child(3) { top: var(--space-6); left: 49%; --sticker-rotation: 14deg; }
.sticker-swarm--hero .sticker:nth-child(4) { left: 2%; bottom: 12%; --sticker-rotation: 8deg; }
.sticker-swarm--hero .sticker:nth-child(5) { width: var(--sticker-size-small); right: 47%; bottom: var(--space-3); --sticker-rotation: -8deg; }
.sticker-swarm--hero .sticker:nth-child(6) { width: var(--sticker-size-small); top: 10%; right: 2%; --sticker-rotation: -10deg; }

.store, .community, .assortment, .hours { padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.store { padding-block: var(--rhythm-chapter); display: grid; grid-template-columns: 0.8fr 1fr; gap: clamp(var(--space-10), 10vw, var(--space-14)); background: var(--color-paper); }
.store h2, .community h2, .assortment h2, .hours h2 { margin-bottom: var(--space-7); font-size: var(--type-section); line-height: 0.94; }
.store-copy > p:not(.eyebrow), .community-copy > p:not(.eyebrow), .section-intro > p, .hours > div > p:not(.eyebrow) { max-width: 32.5rem; font-size: var(--type-chapter-copy); line-height: 1.45; }
.store .cta { margin-top: var(--space-7); }
.facts > div { padding: var(--space-4) 0; display: grid; grid-template-columns: minmax(7rem, 0.5fr) 1fr; gap: var(--space-4); border-top: var(--border-hairline) var(--color-ink); }
.facts dt { font-size: var(--type-body-small); font-weight: 780; }
.facts dd { font-size: var(--type-body-small); }
.store-facts figure { height: var(--store-media-height); margin-top: var(--space-8); overflow: hidden; border-radius: var(--radius-photo-arch); }
.store-facts figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }

.sticker-swarm--store .sticker:nth-child(1) { top: 6%; left: calc(var(--space-7) * -1); --sticker-rotation: -9deg; }
.sticker-swarm--store .sticker:nth-child(2) { width: var(--sticker-size-small); top: 13%; right: calc(var(--space-6) * -1); --sticker-rotation: 12deg; }
.sticker-swarm--store .sticker:nth-child(3) { left: 46%; bottom: 3%; --sticker-rotation: 7deg; }
.sticker-swarm--store .sticker:nth-child(4) { right: var(--space-5); bottom: var(--space-5); --sticker-rotation: -12deg; }
.sticker-swarm--store .sticker:nth-child(5) { top: 48%; left: var(--space-3); --sticker-rotation: 8deg; }

.photo-story { padding: var(--rhythm-showcase) max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.home-photo-story { border-top: var(--border-hairline) var(--color-ink); background: var(--color-paper); }
.area-photo-story { background: var(--color-sage); }
.photo-story__intro { margin-bottom: var(--space-11); display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.58fr); gap: clamp(var(--space-8), 8vw, var(--space-13)); align-items: end; }
.photo-story__intro h2 { max-width: 50rem; margin-bottom: 0; font-size: var(--type-section); line-height: 0.94; }
.photo-story__intro > p { max-width: 35rem; margin: 0; font-size: var(--type-chapter-copy); line-height: 1.45; }
.photo-story__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-7), 4vw, var(--space-10)) clamp(var(--space-5), 3vw, var(--space-8)); align-items: start; }
.photo-story__item { min-width: 0; }
.photo-story__item--lead { grid-column: 1 / -1; }
.photo-story__item--solo { width: calc(50% - var(--space-4)); grid-column: 1 / -1; justify-self: center; }
.photo-story__media { overflow: hidden; border: var(--border-standard) var(--color-ink); background: var(--color-community); }
.photo-story__item:nth-child(4n + 1) .photo-story__media { border-radius: clamp(3.5rem, 9vw, 8rem) var(--space-6) clamp(3.5rem, 9vw, 8rem) var(--space-6); }
.photo-story__item:nth-child(4n + 2) .photo-story__media { border-radius: var(--space-6) clamp(3.5rem, 9vw, 8rem) var(--space-6) clamp(3.5rem, 9vw, 8rem); }
.photo-story__item:nth-child(4n + 3) .photo-story__media { border-radius: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 6rem) var(--space-6) var(--space-6); }
.photo-story__item:nth-child(4n) .photo-story__media { border-radius: var(--space-6) var(--space-6) clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 6rem); }
.photo-story__item--lead .photo-story__media { border-radius: clamp(6rem, 16vw, 13rem) var(--space-8) var(--space-8) clamp(6rem, 16vw, 13rem); }
.photo-story__media img { width: 100%; height: auto; }
.photo-story__item figcaption { min-height: var(--space-12); padding: var(--space-3) 0; display: flex; align-items: center; gap: var(--space-4); border-bottom: var(--border-hairline) var(--color-ink); font-size: var(--type-body-small); font-weight: 700; }
.photo-story__item figcaption span { width: var(--space-8); height: var(--space-8); flex: 0 0 auto; display: grid; place-items: center; border: var(--border-hairline) var(--color-ink); border-radius: var(--radius-action); font-size: var(--type-label); font-variant-numeric: tabular-nums; }

.community { padding-block: var(--rhythm-chapter); display: grid; grid-template-columns: 1.15fr 0.8fr; gap: clamp(var(--space-10), 9vw, var(--space-14)); align-items: center; background: var(--color-community); }
.community figure img { width: 100%; height: var(--community-media-height); object-fit: cover; object-position: 50% 46%; border: var(--border-standard) var(--color-ink); border-radius: var(--radius-community-photo); }
.community figcaption { padding-top: var(--space-3); font-size: var(--type-label); font-weight: 780; }
.community h3 { margin: var(--space-8) 0 var(--space-6); font-size: var(--type-subheading); line-height: 0.94; }

.sticker-swarm--community .sticker:nth-child(1) { top: var(--space-7); left: calc(var(--space-7) * -1); --sticker-rotation: 10deg; }
.sticker-swarm--community .sticker:nth-child(2) { width: var(--sticker-size-small); top: 12%; right: calc(var(--space-5) * -1); --sticker-rotation: -8deg; }
.sticker-swarm--community .sticker:nth-child(3) { left: 52%; bottom: var(--space-6); --sticker-rotation: -11deg; }
.sticker-swarm--community .sticker:nth-child(4) { top: 42%; right: var(--space-4); --sticker-rotation: 13deg; }
.sticker-swarm--community .sticker:nth-child(5) { left: var(--space-4); bottom: 18%; --sticker-rotation: -9deg; }

.assortment { padding-block: var(--rhythm-showcase); background: var(--color-sage); }
.section-intro { margin-bottom: var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 0.55fr); gap: var(--space-7); align-items: end; }
.section-intro h2 { margin-bottom: 0; }
.assortment .section-intro h2 { font-size: var(--type-assortment); }
.section-intro > p { margin: 0; }
.tab-rail { padding: 0 var(--space-4) var(--space-2) 0; display: flex; gap: var(--space-2); overflow-x: auto; scroll-padding-inline: var(--space-4); scrollbar-width: thin; }
.tab-rail [role="tab"] { min-height: 2.875rem; padding-inline: var(--space-tab-inset); flex: 0 0 auto; border: var(--border-hairline) var(--color-ink); border-radius: var(--radius-action); background: transparent; font-weight: 710; }
.tab-rail [aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }
.tab-output { min-height: 15rem; margin-top: var(--space-5); padding-block: var(--space-6); display: grid; grid-template-columns: var(--space-12) minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; border-top: var(--border-standard) var(--color-ink); border-bottom: var(--border-standard) var(--color-ink); }
.tab-output-index { font-size: var(--type-meta); font-weight: 850; font-variant-numeric: tabular-nums; }
.tab-output strong { display: block; margin-bottom: var(--space-2); font-size: var(--type-section); line-height: 0.94; letter-spacing: -0.04em; }
.tab-output p { max-width: 38.75rem; margin: 0; }
.tab-output > a { width: var(--control-height); height: var(--control-height); display: grid; place-items: center; overflow: hidden; position: relative; isolation: isolate; border: var(--border-standard) var(--color-ink); border-radius: var(--radius-action); background: var(--color-ink); color: var(--color-paper); text-decoration: none; transform: translateY(0) rotate(0); transform-origin: 50% 100%; transition: transform var(--duration-button-hover) var(--ease-out), color var(--duration-press) var(--ease-out); }
.tab-output > a::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--color-sage); transform: translateX(105%); transition: transform var(--duration-button-hover) var(--ease-out); }
.tab-output > a .icon { transition: transform var(--duration-button-hover) var(--ease-out), color var(--duration-press) var(--ease-out); }
.tab-output > a:active { transform: translateY(1px) scale(0.94); }

.sticker-swarm--assortment .sticker:nth-child(1) { width: var(--sticker-size-small); top: var(--space-5); left: calc(var(--space-6) * -1); --sticker-rotation: -8deg; }
.sticker-swarm--assortment .sticker:nth-child(2) { top: 18%; right: calc(var(--space-7) * -1); --sticker-rotation: 11deg; }
.sticker-swarm--assortment .sticker:nth-child(3) { left: 3%; bottom: var(--space-4); --sticker-rotation: 8deg; }
.sticker-swarm--assortment .sticker:nth-child(4) { width: var(--sticker-size-small); right: 4%; bottom: var(--space-5); --sticker-rotation: -12deg; }
.sticker-swarm--assortment .sticker:nth-child(5) { top: var(--space-6); left: 47%; --sticker-rotation: 6deg; }
.sticker-swarm--assortment .sticker:nth-child(6) { width: var(--sticker-size-small); left: 54%; bottom: var(--space-3); --sticker-rotation: -7deg; }

.hours { padding: var(--rhythm-chapter) max(var(--gutter), calc((100vw - var(--hours-max)) / 2)); display: grid; grid-template-columns: 0.8fr 1fr; gap: clamp(var(--space-10), 10vw, var(--space-14)); background: var(--color-paper); }
.hours-list > div { padding: var(--space-4) 0; display: grid; grid-template-columns: minmax(7.5rem, 0.7fr) 1fr; gap: var(--space-5); border-top: var(--border-hairline) var(--color-ink); }
.hours-list dt { font-weight: 790; }
.hours-list dd { text-align: right; font-variant-numeric: tabular-nums; }
.hours > .hours-list { width: 100%; align-self: center; }
.hours > .hours-list > div { padding-block: clamp(var(--space-5), 2.5vw, var(--space-7)); grid-template-columns: 1fr; gap: var(--space-3); text-align: center; }
.hours > .hours-list dt { font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1; }
.hours > .hours-list dd { font-size: clamp(1.35rem, 2.3vw, 2rem); font-weight: 680; line-height: 1.15; text-align: center; }

.sticker-swarm--hours .sticker:nth-child(1) { top: var(--space-6); left: calc(var(--space-7) * -1); --sticker-rotation: 10deg; }
.sticker-swarm--hours .sticker:nth-child(2) { width: var(--sticker-size-small); top: var(--space-5); right: calc(var(--space-7) * -1); --sticker-rotation: -9deg; }
.sticker-swarm--hours .sticker:nth-child(3) { left: 47%; bottom: var(--space-3); --sticker-rotation: -6deg; }
.sticker-swarm--hours .sticker:nth-child(4) { width: var(--sticker-size-small); left: var(--space-4); bottom: var(--space-5); --sticker-rotation: 12deg; }
.sticker-swarm--hours .sticker:nth-child(5) { top: 45%; right: var(--space-3); --sticker-rotation: 7deg; }
.sticker-swarm--hours .sticker:nth-child(6) { width: var(--sticker-size-small); top: 48%; left: 52%; --sticker-rotation: -11deg; }

.final-cta { min-height: var(--closing-min); padding: var(--rhythm-closing) var(--gutter); display: grid; place-content: center; justify-items: center; text-align: center; background: var(--color-ink); color: var(--color-paper); }
.final-cta h2 { max-width: var(--container); margin-bottom: var(--space-closing-gap); font-size: var(--type-closing); line-height: 0.94; }

.sticker-swarm--closing .sticker:nth-child(1) { top: var(--space-7); left: calc(var(--space-6) * -1); --sticker-rotation: -10deg; }
.sticker-swarm--closing .sticker:nth-child(2) { width: var(--sticker-size-small); top: var(--space-6); right: var(--space-5); --sticker-rotation: 12deg; }
.sticker-swarm--closing .sticker:nth-child(3) { left: var(--space-5); bottom: var(--space-6); --sticker-rotation: 8deg; }
.sticker-swarm--closing .sticker:nth-child(4) { width: var(--sticker-size-small); right: calc(var(--space-6) * -1); bottom: var(--space-7); --sticker-rotation: -9deg; }
.sticker-swarm--closing .sticker:nth-child(5) { width: var(--sticker-size-small); top: 42%; left: calc(var(--space-7) * -1); --sticker-rotation: 7deg; }
.sticker-swarm--closing .sticker:nth-child(6) { width: var(--sticker-size-small); top: 46%; right: calc(var(--space-7) * -1); --sticker-rotation: -12deg; }

.site-footer { padding: var(--space-footer-padding-block) max(var(--gutter), calc((100vw - var(--footer-max)) / 2)); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: end; border-top: var(--border-standard) var(--color-ink); background: var(--color-paper); color: var(--color-ink); }
.footer-brand { display: flex; align-items: center; gap: var(--space-3); font-size: var(--type-footer-brand); font-weight: 830; line-height: 0.94; letter-spacing: -0.05em; white-space: nowrap; }
.footer-brand img { width: var(--space-11); height: var(--space-11); object-fit: contain; }
.site-footer > p { margin: 0; }
.site-footer > nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-5); }
.site-footer a { text-underline-offset: var(--space-2); }
.footer-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-5); font-size: var(--type-meta); }
.sticker-swarm--footer .sticker:nth-child(1) { top: var(--space-3); left: 44%; --sticker-rotation: -10deg; }
.sticker-swarm--footer .sticker:nth-child(2) { right: var(--space-5); bottom: var(--space-5); --sticker-rotation: 13deg; }
.sticker-swarm--footer .sticker:nth-child(3) { top: var(--space-4); right: 29%; --sticker-rotation: 8deg; }
.sticker-swarm--footer .sticker:nth-child(4) { left: 34%; bottom: var(--space-4); --sticker-rotation: -8deg; }

/* Bereichsseiten */
.area-page { background: var(--color-sage); }
.area-hero { padding: var(--rhythm-hero) max(var(--gutter-mobile), calc((100vw - var(--hero-max)) / 2)) var(--space-13); background: var(--color-sage); }
.area-stadium { min-height: var(--hero-min); display: grid; grid-template-columns: 0.9fr 1.1fr; overflow: hidden; border: var(--border-standard) var(--color-ink); border-radius: var(--radius-stadium); background: var(--color-paper); animation: table-in var(--duration-hero) var(--ease-hero) both; }
.area-hero__media { position: relative; min-height: 100%; overflow: hidden; border-radius: var(--radius-hero-media); }
.area-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
[data-area="pokemon"] .area-hero__media > img:first-child { object-position: 50% 34%; }
[data-area="yu-gi-oh"] .area-hero__media > img:first-child, [data-area="snacks-getraenke"] .area-hero__media > img:first-child { object-position: 50% 46%; }
[data-area="weitere-tcgs"] .area-hero__media > img:first-child { object-position: 50% 44%; }
[data-area="zubehoer"] .area-hero__media > img:first-child, [data-area="community"] .area-hero__media > img:first-child { object-position: 50% 46%; }
.area-hero__media .area-hero__detail { position: absolute; right: var(--space-5); bottom: var(--space-5); width: clamp(8rem, 34%, 13rem); height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 50%; border: var(--border-standard) var(--color-paper); border-radius: var(--radius-action); box-shadow: 0.4rem 0.45rem 0 var(--color-ink); transform: rotate(3deg); }
.area-hero__copy { padding: var(--space-13); display: flex; flex-direction: column; justify-content: center; }
.back-link { margin-bottom: var(--space-6); display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; font-size: var(--type-body-small); font-weight: 720; text-underline-offset: var(--space-2); }
.area-hero h1 { margin-bottom: var(--space-6); font-size: var(--type-display); line-height: 0.91; }
.area-hero h1 span { color: var(--color-ink-muted); }
.area-hero__lead { max-width: 34rem; margin: 0; font-size: var(--type-lead); line-height: 1.28; }
.area-hero .cta { margin-top: var(--space-7); align-self: flex-start; }

.sticker-swarm--area-hero { z-index: 3; }
.sticker-swarm--area-hero .sticker:nth-child(1) { width: var(--sticker-size-large); top: var(--space-4); left: 1%; --sticker-rotation: -10deg; }
.sticker-swarm--area-hero .sticker:nth-child(2) { right: 1%; bottom: 17%; --sticker-rotation: 11deg; }
.sticker-swarm--area-hero .sticker:nth-child(3) { width: var(--sticker-size-small); left: 48%; bottom: var(--space-4); --sticker-rotation: -8deg; }
.sticker-swarm--area-hero .sticker:nth-child(4) { width: var(--sticker-size-small); top: 12%; right: 2%; --sticker-rotation: 8deg; }

.area-overview { padding: var(--rhythm-chapter) max(var(--gutter), calc((100vw - var(--container)) / 2)); background: var(--color-paper); }
.area-overview__intro { margin-bottom: var(--space-11); display: grid; grid-template-columns: 0.8fr 1fr; gap: clamp(var(--space-10), 10vw, var(--space-14)); align-items: end; }
.section-title { margin-bottom: 0; font-size: var(--type-section); line-height: 0.94; }
.body-copy { max-width: 42rem; margin: 0; font-size: var(--type-lead); }
.press-list { margin: 0; padding: 0; list-style: none; border-top: var(--border-standard) var(--color-ink); }
.press-list__item { padding: var(--space-6) 0; display: grid; grid-template-columns: var(--space-12) minmax(0, 1fr); gap: var(--space-6); border-bottom: var(--border-hairline) var(--color-ink); }
.press-list__number { width: var(--space-8); height: var(--space-8); display: grid; place-items: center; border: var(--border-hairline) var(--color-ink); border-radius: var(--radius-action); font-size: var(--type-label); font-weight: 800; }
.press-list h3 { margin-bottom: var(--space-2); font-size: var(--type-subheading); line-height: 0.98; }
.press-list p { max-width: 52rem; margin: 0; }

.sticker-swarm--area-overview .sticker:nth-child(1) { top: var(--space-6); left: calc(var(--space-7) * -1); --sticker-rotation: 10deg; }
.sticker-swarm--area-overview .sticker:nth-child(2) { width: var(--sticker-size-small); top: var(--space-7); right: calc(var(--space-6) * -1); --sticker-rotation: -9deg; }
.sticker-swarm--area-overview .sticker:nth-child(3) { right: 3%; bottom: var(--space-4); --sticker-rotation: 7deg; }

.area-availability { padding: var(--rhythm-chapter) max(var(--gutter), calc((100vw - var(--container)) / 2)); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(var(--space-10), 10vw, var(--space-14)); background: var(--color-community); }
.availability-copy, .opening-hours { min-width: 0; }
.availability-copy h2, .opening-hours h2 { margin-bottom: var(--space-6); font-size: var(--type-subheading); line-height: 0.98; }
.category-directory__heading h2 { margin-bottom: var(--space-6); font-size: var(--type-section); line-height: 0.94; }
.availability-copy p { max-width: 34rem; font-size: var(--type-lead); }
.availability-copy .cta { margin-top: var(--space-6); }
.opening-hours .hours-list { margin-top: var(--space-7); }
.sticker-swarm--area-availability .sticker:nth-child(1) { top: var(--space-5); left: calc(var(--space-6) * -1); --sticker-rotation: -12deg; }
.sticker-swarm--area-availability .sticker:nth-child(2) { right: calc(var(--space-5) * -1); bottom: var(--space-6); --sticker-rotation: 9deg; }

.category-directory { padding: var(--rhythm-showcase) max(var(--gutter), calc((100vw - var(--container)) / 2)); background: var(--color-sage); }
.category-directory__heading { margin-bottom: var(--space-9); display: grid; grid-template-columns: 0.8fr 1fr; gap: var(--space-7); align-items: end; }
.category-directory__heading h2 { margin-bottom: 0; }
.category-directory__heading p { max-width: 34rem; margin: 0; justify-self: end; }
.poster-stack { border-top: var(--border-standard) var(--color-ink); }
.poster-link { min-height: var(--space-12); padding-block: var(--space-4); display: grid; grid-template-columns: var(--space-8) minmax(0, 0.7fr) minmax(15rem, 1fr) var(--space-8); gap: var(--space-5); align-items: center; border-bottom: var(--border-hairline) var(--color-ink); text-decoration: none; }
.poster-link > span:first-child { width: var(--space-7); height: var(--space-7); display: grid; place-items: center; border: var(--border-hairline) var(--color-ink); border-radius: var(--radius-action); font-size: var(--type-label); font-weight: 800; }
.poster-link strong { font-size: var(--type-subheading); letter-spacing: -0.04em; }
.poster-link > span:nth-child(3) { max-width: 34rem; }
.poster-link > span:last-child { justify-self: end; }
.poster-link.is-current { background: var(--color-ink); color: var(--color-paper); }
.poster-link.is-current > span:first-child { border-color: var(--color-paper); }
.sticker-swarm--area-directory .sticker:nth-child(1) { top: var(--space-6); left: calc(var(--space-6) * -1); --sticker-rotation: -9deg; }
.sticker-swarm--area-directory .sticker:nth-child(2) { top: var(--space-7); right: var(--space-5); --sticker-rotation: 11deg; }
.sticker-swarm--area-directory .sticker:nth-child(3) { left: 48%; bottom: var(--space-4); --sticker-rotation: -7deg; }
.area-closing { min-height: var(--closing-min); padding: var(--rhythm-closing) var(--gutter); display: grid; grid-template-columns: 1fr auto; gap: var(--space-9); align-items: center; background: var(--color-ink); color: var(--color-paper); }
.area-closing h2 { max-width: 60rem; margin: 0; font-size: var(--type-closing); line-height: 0.94; }
.sticker-swarm--area-closing .sticker:nth-child(1) { top: var(--space-6); left: calc(var(--space-7) * -1); --sticker-rotation: -10deg; }
.sticker-swarm--area-closing .sticker:nth-child(2) { width: var(--sticker-size-small); right: var(--space-6); bottom: var(--space-5); --sticker-rotation: 9deg; }
.sticker-swarm--area-closing .sticker:nth-child(3) { top: var(--space-5); right: 26%; --sticker-rotation: -7deg; }

.area-page .site-footer { grid-template-columns: 1fr 0.8fr; }
.area-page .site-footer > div:last-child { justify-self: end; display: grid; gap: var(--space-2); text-align: right; font-size: var(--type-meta); }
.area-page .site-footer > nav { grid-column: 1; }
.sticker-swarm--area-footer .sticker:nth-child(1) { left: 43%; bottom: var(--space-3); --sticker-rotation: -9deg; }
.sticker-swarm--area-footer .sticker:nth-child(2) { top: var(--space-3); right: var(--space-4); --sticker-rotation: 12deg; }
.sticker-swarm--area-footer .sticker:nth-child(3) { top: var(--space-4); left: 35%; --sticker-rotation: 8deg; }

/* 404 */
.error-page { min-height: 100svh; background: var(--color-sage); }
.error-main { min-height: calc(100svh - var(--header-height)); padding: var(--rhythm-hero) max(var(--gutter), calc((100vw - var(--container)) / 2)); display: grid; grid-template-columns: 1fr 0.8fr; gap: var(--space-13); align-items: center; }
.error-copy { max-width: 46rem; }
.error-code { margin: 0 0 var(--space-4); font-size: var(--type-label); font-weight: 820; letter-spacing: 0.13em; }
.error-copy h1 { margin-bottom: var(--space-6); font-size: var(--type-display); line-height: 0.91; }
.error-copy > p:not(.error-code) { max-width: 38rem; font-size: var(--type-lead); }
.error-copy .cta { margin-top: var(--space-6); }
.error-art { aspect-ratio: 1; display: grid; place-items: center; border: var(--border-standard) var(--color-ink); border-radius: var(--radius-action); background: var(--color-paper); font-size: var(--type-section); font-weight: 820; }
.sticker-swarm--error .sticker:nth-child(1) { width: var(--sticker-size-large); top: var(--space-5); left: calc(var(--space-7) * -1); --sticker-rotation: -12deg; }
.sticker-swarm--error .sticker:nth-child(2) { right: var(--space-4); bottom: var(--space-5); --sticker-rotation: 10deg; }
.sticker-swarm--error .sticker:nth-child(3) { top: var(--space-7); right: 30%; --sticker-rotation: 13deg; }
.sticker-swarm--error .sticker:nth-child(4) { left: 45%; bottom: var(--space-4); --sticker-rotation: -9deg; }
.sticker-swarm--error .sticker:nth-child(5) { top: 7%; right: 3%; --sticker-rotation: 8deg; }
.sticker-swarm--error .sticker:nth-child(6) { left: 2%; bottom: 10%; --sticker-rotation: -11deg; }

@media (hover: hover) and (pointer: fine) {
  .desktop-nav a:not(.nav-action):hover, .hero-index a:hover, .text-link:hover, .site-footer a:hover, .back-link:hover { text-decoration: underline; }
  .nav-action:hover:not(:focus-visible), .cta:hover:not(:focus-visible) { transform: translateY(calc(var(--space-1) * -1)); }
  .nav-action:hover:not(:focus-visible), .cta--filled:hover:not(:focus-visible), .tab-output > a:hover:not(:focus-visible) { color: var(--color-ink); }
  .cta--outline:hover:not(:focus-visible), .cta--sage:hover:not(:focus-visible) { color: var(--color-paper); }
  .nav-action:hover:not(:focus-visible)::before, .cta:hover:not(:focus-visible)::before, .tab-output > a:hover:not(:focus-visible)::before { transform: translateX(0); }
  .nav-action:hover:not(:focus-visible) .icon, .cta:hover:not(:focus-visible) .icon { transform: translateX(0.24rem) rotate(8deg); }
  .hero .cta--filled:hover:not(:focus-visible) .icon { transform: translateY(0.24rem) rotate(8deg); }
  .cta--outline:hover:not(:focus-visible) .icon, .cta--sage:hover:not(:focus-visible) .icon { background: var(--color-paper); color: var(--color-ink); transform: translateX(0.24rem) rotate(8deg); }
  .nav-action:hover:not(:focus-visible) .icon, .cta--filled:hover:not(:focus-visible) .icon { background: var(--color-ink); color: var(--color-paper); }
  .tab-rail [role="tab"]:hover { background: var(--color-paper); }
  .tab-output > a:hover:not(:focus-visible) { transform: translateY(calc(var(--space-1) * -1)) rotate(-4deg); }
  .tab-output > a:hover:not(:focus-visible) .icon { transform: translateX(0.18rem) rotate(8deg); }
  .poster-link:not(.is-current):hover { background: var(--color-paper); }
}

@keyframes table-in {
  from { opacity: 0; transform: translateY(var(--space-8)) scale(0.97); border-radius: var(--radius-stadium-entry); }
  to { opacity: 1; transform: none; border-radius: var(--radius-stadium); }
}

/* Große Kapitel bilden auf Desktop jeweils eine vollständige Bühne. Die
   Fotostrecken bleiben länger, ihre einzelnen Motive passen aber in den Viewport. */
@media (min-width: 51.3125rem) {
  :root {
    --panel-padding-block: clamp(2.75rem, 7svh, 4.5rem);
    --panel-section-type: clamp(3.5rem, min(7vw, 11svh), 7.25rem);
    --panel-display-type: clamp(4rem, min(7.5vw, 13svh), 7.375rem);
    --panel-closing-type: clamp(4.5rem, min(10vw, 16svh), 10.25rem);
  }

  .hero,
  .area-hero {
    height: calc(100svh - var(--header-height));
    min-height: 0;
    padding-block: clamp(1.25rem, 3svh, 2.5rem) clamp(0.875rem, 2svh, 1.5rem);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .stadium,
  .area-stadium {
    height: 100%;
    min-height: 0;
  }

  .stadium figure,
  .area-hero__media {
    height: 100%;
    min-height: 0;
  }

  .hero-copy {
    min-height: 0;
    padding: clamp(1.75rem, 4.5svh, 3.5rem) clamp(2.5rem, 5vw, 5.5rem);
  }

  .hero h1,
  .area-hero h1 {
    margin-bottom: clamp(0.875rem, 2svh, var(--space-6));
    font-size: var(--panel-display-type);
  }

  .hero-actions,
  .area-hero .cta {
    margin-top: clamp(1rem, 2.5svh, var(--space-7));
  }

  .hero-index {
    padding-top: clamp(0.5rem, 1.5svh, var(--space-5));
  }

  .area-hero__copy {
    min-height: 0;
    padding: clamp(1.75rem, 4.5svh, 3.5rem) clamp(2.5rem, 5vw, 5.5rem);
  }

  .back-link {
    margin-bottom: clamp(0.75rem, 2svh, var(--space-6));
  }

  .store,
  .community,
  .assortment,
  .hours,
  .area-overview,
  .area-availability,
  .category-directory,
  .final-cta,
  .area-closing {
    height: 100svh;
    min-height: 0;
  }

  .store,
  .community,
  .hours,
  .area-availability {
    padding-block: var(--panel-padding-block);
    align-items: center;
  }

  .assortment,
  .area-overview,
  .category-directory {
    padding-block: var(--panel-padding-block);
    display: grid;
    align-content: center;
  }

  .store h2,
  .community h2,
  .assortment h2,
  .hours h2,
  .section-title,
  .category-directory__heading h2,
  .photo-story__intro h2 {
    font-size: var(--panel-section-type);
  }

  .store h2,
  .community h2,
  .assortment h2,
  .hours h2 {
    margin-bottom: clamp(1rem, 3svh, var(--space-7));
  }

  .store .cta {
    margin-top: clamp(1rem, 2.5svh, var(--space-7));
  }

  .store-facts figure {
    height: min(50svh, 26rem);
    margin-top: clamp(1rem, 2.5svh, var(--space-8));
  }

  .community figure img {
    height: min(68svh, 39rem);
  }

  .community h3 {
    margin: clamp(1.25rem, 3svh, var(--space-8)) 0 clamp(1rem, 2.5svh, var(--space-6));
  }

  .section-intro,
  .area-overview__intro,
  .category-directory__heading {
    margin-bottom: clamp(1.5rem, 4svh, var(--space-11));
  }

  .tab-output {
    min-height: min(15rem, 29svh);
    margin-top: clamp(0.75rem, 2svh, var(--space-5));
    padding-block: clamp(1rem, 2.5svh, var(--space-6));
  }

  .hours > .hours-list > div {
    padding-block: clamp(1rem, 3svh, var(--space-7));
  }

  .final-cta,
  .area-closing {
    padding-block: var(--panel-padding-block);
  }

  .final-cta h2,
  .area-closing h2 {
    font-size: var(--panel-closing-type);
  }

  .press-list__item {
    padding-block: clamp(0.75rem, 2svh, var(--space-6));
  }

  .poster-link {
    min-height: 0;
    padding-block: clamp(0.625rem, 1.5svh, var(--space-4));
  }

  .poster-link strong {
    font-size: clamp(1.75rem, min(3vw, 5svh), 2.75rem);
  }

  .photo-story {
    padding-block: var(--panel-padding-block);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: clamp(var(--space-8), 6svh, var(--space-10));
    align-items: center;
  }

  .photo-story__intro {
    margin-bottom: 0;
    display: block;
    grid-column: 1 / span 2;
  }

  .photo-story__intro h2 {
    margin-bottom: var(--space-6);
  }

  .photo-story__grid {
    display: contents;
  }

  .photo-story__item--lead {
    grid-column: 3 / -1;
    width: min(100%, calc((100svh - 10rem) * 1.3333));
    justify-self: center;
  }

  .photo-story__item:not(.photo-story__item--lead):not(.photo-story__item--solo) {
    grid-column: span 3;
  }

  .photo-story__item--portrait .photo-story__media,
  .photo-story__item--portrait figcaption {
    width: min(100%, calc((100svh - 10rem) * 0.75));
    margin-inline: auto;
  }
}

@media (max-width: 51.25rem) {
  :root {
    /* Die table-in-Animation endet auf var(--radius-stadium) und friert den Wert ein.
       Ohne diese Umdefinition gewinnt der Desktop-Radius gegen die mobile Kapselform. */
    --radius-stadium: 210px 210px 80px 80px;
    --radius-stadium-entry: 150px 150px 60px 60px;
    --sticker-size-small: clamp(3.25rem, 15vw, 4.25rem);
    --sticker-size-medium: clamp(4rem, 18vw, 5rem);
    --sticker-size-large: clamp(5rem, 23vw, 6rem);
    --sticker-depth: 0.3rem;
  }
  html { scroll-behavior: auto; }
  .site-header { min-height: var(--header-height-mobile); padding: var(--space-2) var(--gutter-mobile); position: sticky; top: 0; }
  .brand-logo { width: 2.875rem; height: 2.875rem; }
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  body.menu-open { position: fixed; width: 100%; }
  /* Der Kopf klebt jetzt oben; Sprungziele dürfen nicht dahinter verschwinden. */
  main > section, section[id], #inhalt { scroll-margin-top: var(--header-height-mobile); }

  .hero { min-height: 0; padding: var(--space-3) var(--gutter-mobile) var(--space-7); }
  .stadium { min-height: 0; display: flex; flex-direction: column; border-radius: var(--radius-stadium-mobile); }
  .stadium figure { min-height: var(--hero-media-mobile-min); aspect-ratio: 4 / 5; border-radius: var(--radius-hero-media-mobile); }
  .hero-copy { padding: var(--hero-copy-mobile-top) var(--hero-copy-mobile-inline) var(--space-9); }
  .hero h1, .area-hero h1 { font-size: var(--type-display-mobile); line-height: 0.94; }
  /* Mobil füllen die Hauptaktionen ihre Spalte, die Beschriftung sitzt mittig —
     sonst klebt die Pille schmal am linken Rand und der Abschnitt wirkt unfertig. */
  .hero-actions .cta, .hero-actions .text-link, .store-copy .cta, .community-copy .cta,
  .final-cta .cta, .area-hero .cta, .availability-copy .cta, .area-closing .cta,
  .error-copy .cta { width: 100%; align-self: stretch; justify-self: stretch; }
  .hero-actions { margin-top: var(--space-6); flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .hero-actions .text-link { justify-content: center; }
  .hero-index { padding-inline: 0; justify-content: flex-start; overflow-x: auto; scroll-padding-inline: var(--gutter-mobile); }
  .hero-index a { min-height: var(--tap-target); padding-block: var(--space-3); flex: 0 0 auto; align-items: center; }
  .text-link { min-height: var(--tap-target); display: inline-flex; align-items: center; }
  .back-link { min-height: var(--tap-target); padding-block: var(--space-2); }
  .site-footer > nav a { min-height: var(--tap-target); display: inline-flex; align-items: center; }
  .sticker-swarm .sticker:nth-child(n + 4) { display: none; }
  .sticker-swarm--hero .sticker:nth-child(1) { top: var(--space-5); left: calc(var(--space-5) * -1); }
  .sticker-swarm--hero .sticker:nth-child(2) { top: 20rem; right: calc(var(--space-4) * -1); bottom: auto; }
  .sticker-swarm--hero .sticker:nth-child(3) { top: var(--space-5); right: var(--space-4); left: auto; }

  .store, .community, .assortment, .hours, .photo-story { padding: var(--rhythm-mobile) var(--gutter-mobile); grid-template-columns: 1fr; gap: var(--space-8); }
  .store h2, .community h2, .assortment h2, .hours h2, .section-title, .category-directory__heading h2, .photo-story__intro h2 { font-size: var(--type-section-mobile); }
  .photo-story__intro { margin-bottom: var(--space-8); grid-template-columns: 1fr; gap: var(--space-5); }
  .photo-story__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .photo-story__item--lead, .photo-story__item--solo { width: 100%; grid-column: auto; }
  .photo-story__item .photo-story__media, .photo-story__item--lead .photo-story__media { border-radius: var(--space-7) var(--space-7) var(--space-4) var(--space-4); }
  .assortment .section-intro h2 { font-size: var(--type-assortment-mobile); }
  .store-facts figure { height: auto; aspect-ratio: 4 / 5; }
  .community figure { margin-inline: calc(var(--gutter-mobile) * -1); }
  .community figure img { height: auto; aspect-ratio: 4 / 5; border-left: 0; border-right: 0; border-radius: var(--radius-community-photo-mobile); }
  .sticker-swarm--store .sticker:nth-child(1), .sticker-swarm--community .sticker:nth-child(1), .sticker-swarm--hours .sticker:nth-child(1) { top: var(--space-4); left: calc(var(--space-4) * -1); }
  .sticker-swarm--store .sticker:nth-child(2), .sticker-swarm--community .sticker:nth-child(2), .sticker-swarm--hours .sticker:nth-child(2) { top: 42%; right: calc(var(--space-4) * -1); }
  .sticker-swarm--store .sticker:nth-child(3), .sticker-swarm--community .sticker:nth-child(3), .sticker-swarm--hours .sticker:nth-child(3) { left: calc(var(--space-3) * -1); bottom: var(--space-4); }
  .section-intro { grid-template-columns: 1fr; gap: var(--space-4); }
  .tab-output { min-height: 10.625rem; grid-template-columns: var(--space-8) minmax(0, 1fr) var(--control-height); gap: var(--space-3); }
  .tab-output strong { font-size: var(--type-active-mobile); }
  .sticker-swarm--assortment .sticker:nth-child(1) { top: var(--space-4); right: calc(var(--space-4) * -1); left: auto; }
  .sticker-swarm--assortment .sticker:nth-child(2) { top: 48%; right: auto; left: calc(var(--space-4) * -1); }
  .sticker-swarm--assortment .sticker:nth-child(3) { right: calc(var(--space-3) * -1); bottom: var(--space-4); left: auto; }
  .hours-list > div { grid-template-columns: minmax(6rem, 0.7fr) 1fr; }
  .hours-list dd { text-align: left; }
  .final-cta { min-height: var(--closing-min-mobile); padding: var(--rhythm-mobile) var(--gutter-mobile); grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .final-cta h2 { font-size: var(--type-closing-mobile); line-height: 0.94; }
  .sticker-swarm--closing .sticker:nth-child(1), .sticker-swarm--area-closing .sticker:nth-child(1) { top: var(--space-4); left: calc(var(--space-4) * -1); }
  .sticker-swarm--closing .sticker:nth-child(2), .sticker-swarm--area-closing .sticker:nth-child(2) { right: calc(var(--space-4) * -1); bottom: var(--space-4); }
  .sticker-swarm--closing .sticker:nth-child(3), .sticker-swarm--area-closing .sticker:nth-child(3) { top: 44%; right: auto; left: calc(var(--space-5) * -1); }
  .site-footer, .area-page .site-footer { grid-template-columns: 1fr; padding: var(--space-7) var(--gutter-mobile); }
  .site-footer > nav { grid-column: 1; }
  .footer-meta { grid-column: 1; flex-direction: column; }
  .area-page .site-footer > div:last-child { justify-self: start; text-align: left; }

  .area-hero { padding: var(--space-3) var(--gutter-mobile) var(--rhythm-mobile); }
  .area-stadium { min-height: 0; display: flex; flex-direction: column; border-radius: var(--radius-stadium-mobile); }
  .area-hero__media { order: -1; min-height: var(--hero-media-mobile-min); aspect-ratio: 4 / 5; border-radius: var(--radius-hero-media-mobile); }
  .area-hero__media .area-hero__detail { right: var(--space-4); bottom: var(--space-4); width: min(34%, 8.5rem); box-shadow: 0.28rem 0.3rem 0 var(--color-ink); }
  .area-hero__copy { padding: var(--space-8) var(--space-7) var(--space-10); }
  .sticker-swarm--area-hero .sticker:nth-child(1) { top: var(--space-5); left: calc(var(--space-5) * -1); }
  .sticker-swarm--area-hero .sticker:nth-child(2) { top: 20rem; right: calc(var(--space-4) * -1); bottom: auto; }
  .sticker-swarm--area-hero .sticker:nth-child(3) { top: var(--space-5); right: var(--space-4); left: auto; }
  .area-overview, .area-availability, .category-directory { padding: var(--rhythm-mobile) var(--gutter-mobile); }
  .sticker-swarm--area-overview .sticker:nth-child(1), .sticker-swarm--area-availability .sticker:nth-child(1), .sticker-swarm--area-directory .sticker:nth-child(1) { top: var(--space-4); left: calc(var(--space-4) * -1); }
  .sticker-swarm--area-overview .sticker:nth-child(2), .sticker-swarm--area-availability .sticker:nth-child(2), .sticker-swarm--area-directory .sticker:nth-child(2) { top: 46%; right: calc(var(--space-4) * -1); }
  .sticker-swarm--area-overview .sticker:nth-child(3), .sticker-swarm--area-directory .sticker:nth-child(3) { left: calc(var(--space-4) * -1); bottom: var(--space-4); }
  .area-overview__intro, .area-availability, .category-directory__heading { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .category-directory__heading p { justify-self: start; }
  .press-list__item { grid-template-columns: var(--space-8) minmax(0, 1fr); gap: var(--space-4); }
  .poster-link { grid-template-columns: var(--space-8) minmax(0, 1fr) var(--space-7); gap: var(--space-3); }
  .poster-link > span:nth-child(3) { grid-column: 2 / -1; }
  .poster-link > span:last-child { grid-row: 1; grid-column: 3; }
  .area-closing { min-height: var(--closing-min-mobile); padding: var(--rhythm-mobile) var(--gutter-mobile); grid-template-columns: 1fr; }
  .area-closing h2 { font-size: var(--type-closing-mobile); line-height: 0.94; }

  .error-main { min-height: calc(100svh - var(--header-height-mobile)); padding: var(--rhythm-mobile) var(--gutter-mobile); grid-template-columns: 1fr; gap: var(--space-8); }
  .error-copy h1 { font-size: var(--type-display-mobile); }
  .error-art { width: min(100%, 22rem); }
  .sticker-swarm--error .sticker:nth-child(1) { top: var(--space-5); left: calc(var(--space-5) * -1); }
  .sticker-swarm--error .sticker:nth-child(2) { right: calc(var(--space-4) * -1); bottom: var(--space-4); }
  .sticker-swarm--error .sticker:nth-child(3) { top: 48%; right: var(--space-3); }

  .sticker-swarm--store .sticker:nth-child(1) { top: 52%; left: calc(var(--space-4) * -1); }
  .sticker-swarm--store .sticker:nth-child(2) { top: 30%; right: calc(var(--space-4) * -1); }
  .sticker-swarm--community .sticker:nth-child(1) { top: calc(var(--space-4) * -1); }
  .sticker-swarm--community .sticker:nth-child(2) { top: 30%; }
  .sticker-swarm--community .sticker:nth-child(3) { right: calc(var(--space-3) * -1); left: auto; }
  .sticker-swarm--assortment .sticker:nth-child(2) { top: auto; bottom: 31%; left: calc(var(--space-5) * -1); }
  .sticker-swarm--hours .sticker:nth-child(1) { top: calc(var(--space-7) * -1); left: calc(var(--space-4) * -1); }
  .sticker-swarm--hours .sticker:nth-child(2) { top: var(--space-4); right: calc(var(--space-5) * -1); }
  .sticker-swarm--hours .sticker:nth-child(3) { left: calc(var(--space-3) * -1); bottom: var(--space-3); }
  .sticker-swarm--closing .sticker:nth-child(3), .sticker-swarm--area-closing .sticker:nth-child(3) { display: none; }
  .sticker-swarm--area-overview .sticker:nth-child(1) { top: auto; bottom: var(--space-4); left: calc(var(--space-4) * -1); }
  .sticker-swarm--area-overview .sticker:nth-child(2) { top: var(--space-3); right: calc(var(--space-5) * -1); }
  .sticker-swarm--area-overview .sticker:nth-child(3) { right: calc(var(--space-4) * -1); bottom: var(--space-4); left: auto; }
  .sticker-swarm--area-availability .sticker:nth-child(1) { top: var(--space-3); right: calc(var(--space-4) * -1); left: auto; }
  .sticker-swarm--area-availability .sticker:nth-child(2) { top: auto; right: calc(var(--space-4) * -1); bottom: var(--space-3); }
  .sticker-swarm--area-directory .sticker:nth-child(1) { top: var(--space-3); left: calc(var(--space-4) * -1); }
  .sticker-swarm--area-directory .sticker:nth-child(2) { top: var(--space-3); right: calc(var(--space-4) * -1); }
  .sticker-swarm--area-directory .sticker:nth-child(3) { display: none; }
  .sticker-swarm--error .sticker:nth-child(1) { top: 28rem; left: calc(var(--space-7) * -1); }

  /* Auf kleinen Screens bleibt jedes inhaltliche Kapitel ebenfalls eine Bühne.
     Die Inhalte werden dichter, ohne Text oder Aktionen auszublenden. */
  .hero,
  .area-hero {
    height: calc(100svh - var(--header-height-mobile));
    min-height: 0;
    padding: var(--space-3) var(--gutter-mobile) var(--space-4);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .stadium,
  .area-stadium {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(12rem, 36%) minmax(0, 1fr);
  }

  .stadium figure,
  .area-hero__media {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  .hero-copy,
  .area-hero__copy {
    min-height: 0;
    padding: var(--space-4) var(--space-6);
  }

  .eyebrow {
    margin-bottom: var(--space-3);
  }

  .hero h1,
  .area-hero h1 {
    margin-bottom: var(--space-3);
    font-size: clamp(2.45rem, 11.5vw, 3.4rem);
  }

  .hero-lead,
  .area-hero__lead {
    font-size: 1rem;
    line-height: 1.25;
  }

  .hero-audience {
    margin-top: var(--space-2);
    font-size: var(--type-meta);
  }

  .hero-actions {
    margin-top: var(--space-3);
    flex-flow: row nowrap;
    align-items: center;
    gap: var(--space-3);
  }

  .hero-actions .cta,
  .hero-actions .text-link {
    width: auto;
    align-self: auto;
  }

  .hero-actions .cta {
    flex: 1 1 auto;
  }

  .hero-actions .text-link {
    flex: 0 0 auto;
  }

  .hero-index {
    padding-top: var(--space-1);
    gap: var(--space-2);
    overflow-x: visible;
    font-size: 0.65rem;
  }

  .hero-index a {
    min-height: 2.25rem;
    padding-block: var(--space-2);
    gap: var(--space-1);
  }

  .back-link {
    min-height: 2.25rem;
    margin-bottom: var(--space-2);
    padding-block: var(--space-1);
  }

  .area-hero .cta {
    width: auto;
    min-height: 2.875rem;
    margin-top: var(--space-3);
    align-self: flex-start;
    padding-inline: var(--space-4);
  }

  .store,
  .community,
  .assortment,
  .hours,
  .area-overview,
  .area-availability,
  .category-directory,
  .final-cta,
  .area-closing {
    height: calc(100svh - var(--header-height-mobile));
    min-height: 0;
    padding-block: var(--space-7);
    align-content: center;
    gap: var(--space-8);
  }

  .area-closing .cta {
    min-height: var(--control-height);
    align-self: auto;
  }

  .store,
  .community,
  .assortment,
  .hours,
  .area-overview,
  .category-directory {
    align-content: center;
  }

  .store,
  .community,
  .area-availability {
    gap: var(--space-5);
  }

  .store h2,
  .community h2,
  .assortment h2,
  .hours h2 {
    margin-bottom: var(--space-4);
  }

  .store .cta {
    margin-top: var(--space-4);
  }

  .facts > div,
  .hours-list > div {
    padding-block: var(--space-2);
  }

  .store-facts figure {
    height: clamp(9.5rem, 22svh, 12rem);
    margin-top: var(--space-4);
    aspect-ratio: auto;
  }

  .community figure img {
    height: clamp(10rem, 24svh, 12.5rem);
    aspect-ratio: auto;
  }

  .community h3 {
    margin: var(--space-4) 0 var(--space-3);
  }

  .section-intro {
    margin-bottom: var(--space-5);
  }

  .tab-output {
    min-height: 9.5rem;
    margin-top: var(--space-3);
    padding-block: var(--space-4);
  }

  .hours > .hours-list > div {
    padding-block: var(--space-4);
  }

  .area-overview__intro,
  .category-directory__heading {
    margin-bottom: var(--space-5);
    gap: var(--space-4);
  }

  .press-list__item {
    padding-block: var(--space-3);
  }

  .poster-link {
    min-height: 0;
    padding-block: var(--space-2);
  }

  .poster-link strong {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
}

/* Bei extrem flachen Fenstern hat vollständiger Inhalt Vorrang vor der
   Ein-Bühnen-Höhe: Das Kapitel darf wachsen, statt Text abzuschneiden. */
@media (min-width: 51.3125rem) and (max-height: 36rem) {
  .hero,
  .area-hero {
    height: auto;
    min-height: calc(100svh - var(--header-height));
  }

  .store,
  .community,
  .assortment,
  .hours,
  .area-overview,
  .area-availability,
  .category-directory,
  .final-cta,
  .area-closing {
    height: auto;
    min-height: 100svh;
  }
}

@media (max-width: 51.25rem) and (max-height: 43rem) {
  .store,
  .community,
  .assortment,
  .hours,
  .area-overview,
  .area-availability,
  .category-directory,
  .final-cta,
  .area-closing {
    height: auto;
    min-height: calc(100svh - var(--header-height-mobile));
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: 0.001ms !important; }
  .nav-action, .cta, .tab-output > a, .nav-action .icon, .cta .icon, .tab-output > a .icon { transform: none !important; }
}