@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

body[data-site-page] {
  --night: #111822;
  --night-light: #1a2734;
  --paper: #f4ead7;
  --white: #fff5e6;
  --warm: #ffc078;
  --quiet: #ced6de;
  --ink: #182029;
  --line: #e0e9f32e;
  --serif: "Instrument Serif", Georgia, serif;
  --edge: clamp(18px, 5vw, 108px);
  --nav-height: 76px;
  background: var(--night);
}
body[data-site-page]::before { display: none; }
body[data-site-page] .shell { width: auto; margin-inline: var(--edge); }
.skip-link { z-index: 40; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  min-height: var(--nav-height);
  padding: 8px max(var(--edge), env(safe-area-inset-right)) 8px max(var(--edge), env(safe-area-inset-left));
  border-bottom: 1px solid #ffffff26;
  background: #111822e8;
  backdrop-filter: blur(16px);
}
.home .site-header { margin-bottom: calc(-1 * var(--nav-height)); }
.brand { justify-self: start; }
.brand img { width: clamp(104px, 10vw, 128px); filter: none; }
.desktop-nav { display: flex; gap: clamp(12px, 2vw, 36px); }
.desktop-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: .88rem;
  font-weight: 650;
  text-decoration: none;
}
.desktop-nav a:hover, .desktop-nav a[aria-current] { color: var(--warm); }
.header-actions { justify-self: end; }
.site-menu summary, .music-button {
  background: #121921;
  border-color: #ffefd559;
  border-radius: 100px;
}
.site-menu nav {
  width: min(320px, calc(100vw - 36px));
  max-height: calc(100dvh - var(--nav-height) - 16px);
  overflow: auto;
  border-radius: 16px;
}
.site-menu nav a { border-radius: 8px; }
.site-menu nav a:hover, .site-menu nav a[aria-current] { background: #e6d7c3; }
.site-footer {
  padding: 12px var(--edge) max(12px, env(safe-area-inset-bottom));
  background: #0e141d;
}
.site-footer .social-icon { width: 44px; height: 44px; border-radius: 50%; }
.site-footer .social-icon svg { width: 23px; height: 23px; }
.page-section, .impressionen { scroll-margin-top: calc(var(--nav-height) + 10px); }
.home main > .page-section + .page-section, .home main > .page-section:last-child { margin-block: 0; }

.home .home-hero {
  position: relative;
  display: block;
  padding: 0;
  isolation: isolate;
}
.hero-stage {
  position: relative;
  display: grid;
  min-height: max(630px, 100svh);
  background: #191e24;
  touch-action: pan-y pinch-zoom;
}
.hero-panel {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: end;
  min-width: 0;
  padding: calc(var(--nav-height) + 24px) var(--edge) clamp(120px, 15vh, 170px);
  overflow: hidden;
  isolation: isolate;
}
.hero-panel::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(0deg, #111822 0%, #10141c99 23%, transparent 71%),
    linear-gradient(90deg, #0a101be8 0%, #0a101b57 47%, transparent 80%);
  content: "";
}
.hero-image, .hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { z-index: -2; overflow: hidden; }
.hero-image img { object-fit: cover; object-position: 50% 54%; }
.hero-workshop .hero-image img { object-position: 60% 57%; }
.hero-chilbi .hero-image img { object-position: 50% 44%; }
.hero-panel.is-entering .hero-image img { animation: hero-picture-in 1.1s cubic-bezier(.2,.65,.25,1) both; }
.hero-panel.is-entering .hero-content { animation: hero-content-in .55s ease-out both; }
@keyframes hero-picture-in { from { opacity: .58; transform: scale(1.045); } }
@keyframes hero-content-in { from { opacity: 0; transform: translateY(8px); } }

.hero-content { position: relative; width: min(630px, 64%); }
.chapter-kicker, .home .overline {
  margin: 0 0 13px;
  color: var(--warm);
  font-size: .77rem;
  font-weight: 750;
  letter-spacing: .105em;
  line-height: 1.35;
  text-transform: uppercase;
}
.home .hero-content h1, .hero-content h2 {
  margin: 0 0 20px;
  color: var(--white);
  font: 400 clamp(86px, 11.8vw, 205px)/.75 var(--serif);
  letter-spacing: -.032em;
  text-transform: none;
}
.home .hero-content h1 br { display: initial; }
.home .hero-content h1 em, .hero-content h2 em, .chapter-title em, .club-section .section-title em {
  color: var(--warm);
  font-style: italic;
}
.hero-content > p:not(.chapter-kicker) {
  max-width: 33ch;
  margin-top: 23px;
  color: #fff2df;
  font-size: clamp(.96rem, 1.6vw, 1.18rem);
  line-height: 1.45;
}
.round-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: fit-content;
  max-width: 100%;
  min-height: 48px;
  margin-top: 18px;
  padding: 6px 7px 6px 16px;
  border: 1px solid var(--paper);
  border-radius: 100px;
  background: var(--paper);
  color: var(--ink);
  font-size: .85rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  transition: background .2s;
}
.round-link:hover { background: var(--warm); }
.round-link .out-arrow {
  width: 33px;
  height: 33px;
  padding: 8px;
  border: 1px solid #17202a55;
  border-radius: 50%;
}

.hero-tabs {
  position: absolute;
  z-index: 2;
  left: var(--edge);
  bottom: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: min(442px, calc(100% - var(--edge) * 2));
}
.hero-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 47px;
  padding: 5px;
  border: 1px solid #f2e6d63e;
  border-radius: 7px;
  background: #111822b8;
  color: var(--white);
  font: 650 .76rem/1 var(--body);
  text-align: left;
  cursor: pointer;
}
.hero-tab img {
  flex: 0 0 35%;
  width: 35%;
  height: 34px;
  border-radius: 3px;
  object-fit: cover;
}
.hero-tab:hover, .hero-tab[aria-pressed="true"] { border-color: var(--warm); }
.hero-tab[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

.hero-links {
  position: absolute;
  z-index: 2;
  right: var(--edge);
  bottom: clamp(125px, 16vh, 188px);
  display: grid;
  gap: 8px;
  width: clamp(211px, 23vw, 354px);
}
.hero-shortcut {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 75px;
  padding: 10px 15px;
  overflow: hidden;
  border: 1px solid #fff3e063;
  border-radius: 9px;
  background: #172332;
  color: #fff5e6;
  text-decoration: none;
}
.hero-shortcut:hover { border-color: var(--warm); background-color: #263f55; }
.hero-shortcut span { font: 800 clamp(1.25rem, 2vw, 1.8rem)/.96 var(--display); text-transform: uppercase; }
.hero-shortcut small { display: block; margin-top: 7px; color: #e4e8ef; font: 650 .73rem/1.15 var(--body); text-transform: none; }
.hero-shortcut img { position: absolute; z-index: -1; }
.hero-shortcut-game img { right: 25px; bottom: -17px; width: auto; height: 100px; opacity: .61; }
.hero-shortcut-game::after, .hero-shortcut-map::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #18283af0 20%, #18283a18 100%);
  content: "";
}
.hero-shortcut-map img { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .66; }
.hero-shortcut > svg { color: var(--warm); width: 20px; height: 20px; }

.chapter-title, body[data-site-page] .section-title,
.innen #inhalt h1 {
  margin: 0;
  font: 400 clamp(54px, 8.3vw, 140px)/.87 var(--serif);
  letter-spacing: -.025em;
  text-transform: none;
}
body[data-site-page] .section-copy { font-size: clamp(.96rem, 1.55vw, 1.16rem); line-height: 1.6; }

.home .club-section {
  padding: clamp(56px, 8vw, 125px) var(--edge) clamp(48px, 7vw, 112px);
  border: 0;
  background: var(--night);
}
.club-overview { grid-template-columns: minmax(0, .79fr) minmax(0, 1.21fr); gap: clamp(24px, 5vw, 100px); }
.club-photo { padding: 0; border: 0; border-radius: 6px; background: #202d3a; }
.club-photo-crop { aspect-ratio: 1.48; }
.home .club-photo-crop img { transform: none; object-position: 50% 59%; }
.club-photo figcaption { padding: 6px 10px; }
.club-team { gap: clamp(16px, 3vw, 54px); margin-top: clamp(34px, 6vw, 82px); }
.team-group { padding: clamp(12px, 2.7vw, 36px); border-color: var(--line); background: #17222e; }
.team-group h3, .club-partners h3 {
  margin-bottom: 17px;
  color: var(--white);
  font: 400 clamp(25px, 3.4vw, 47px)/.98 var(--serif);
  text-transform: none;
}
.team-member img { width: min(100%, 138px); border: 1px solid #faf0df54; }
.team-member strong { margin-top: 9px; font-size: clamp(.88rem, 1.5vw, 1rem); }
.team-member span { margin-top: 4px; font-size: clamp(.68rem, 1.2vw, .8rem); }
.club-outing {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: stretch;
  min-height: 190px;
  margin-top: clamp(20px, 3vw, 42px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #17222e;
}
.club-outing div { align-self: center; padding: clamp(20px, 4vw, 60px); }
.club-outing h3 { margin: 0 0 8px; font: 400 clamp(36px, 5vw, 73px)/.94 var(--serif); }
.club-outing p:not(.chapter-kicker) { color: var(--quiet); font-size: .94rem; line-height: 1.5; }
.club-outing img { width: 100%; height: 100%; max-height: 275px; object-fit: cover; object-position: 50% 48%; }
.club-partners { margin-top: clamp(28px, 4vw, 55px); }
.club-partners ul { gap: 10px; }
.club-partners li a { min-height: 64px; padding: 10px 14px; background: #17222e; border-color: var(--line); }
.club-partners li a:hover { background: #263a4c; }
.club-partners li small { margin-top: 4px; font-size: .75rem; }
.club-history-link { margin-top: 6px; }

.workshop-chapter, .chilbi-chapter { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.chapter-photo { position: relative; min-height: 430px; overflow: hidden; }
.chapter-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.workshop-photo img { object-position: 58% 58%; }
.chapter-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(35px, 5vw, 100px) var(--edge);
}
.chapter-copy p:not(.chapter-kicker), .support-chapter p:not(.overline) {
  max-width: 43ch;
  margin-top: 20px;
  font-size: clamp(.98rem, 1.55vw, 1.15rem);
  line-height: 1.6;
}
.workshop-chapter { background: #263946; }
.workshop-chapter .chapter-title { font-size: clamp(59px, 7.2vw, 110px); }
.workshop-detail { margin-top: 22px; width: min(100%, 310px); }
.workshop-detail img { width: 100%; height: auto; aspect-ratio: 2; object-fit: cover; border-radius: 5px; }
.workshop-detail figcaption { margin-top: 5px; color: var(--quiet); font-size: .74rem; }
.chilbi-chapter { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); background: #e9dfc8; color: var(--ink); }
.chilbi-chapter .chapter-kicker, .chilbi-chapter .chapter-title em { color: #694424; }
.chilbi-photo img { object-position: 50% 46%; }
.chilbi-photo { min-height: clamp(315px, 43vw, 620px); }
.chilbi-chapter .chapter-title { font-size: clamp(58px, 7.15vw, 108px); }

.guide-chapter {
  --tip-gap: 14px;
  padding: clamp(53px, 7.4vw, 115px) var(--edge);
  background: #131d29;
}
.guide-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: clamp(23px, 4vw, 48px); }
.guide-chapter .chapter-title { font-size: clamp(46px, 8.05vw, 124px); }
.guide-controls { display: flex; gap: 7px; }
.round-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #ffead56b;
  border-radius: 50%;
  background: #182331;
  color: var(--white);
  cursor: pointer;
}
.round-icon:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.round-icon:disabled { opacity: .35; cursor: default; }
.round-icon svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tips-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--tip-gap) * 3) / 4);
  gap: var(--tip-gap);
  margin: 0;
  padding: 0 0 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-color: #92836f #17222e;
  scrollbar-width: thin;
  list-style: none;
}
.tip-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 247px;
  padding: clamp(16px, 2vw, 30px);
  border: 1px solid #f1e7cf50;
  border-radius: 8px;
  background: #243346;
  scroll-snap-align: start;
}
.tip-card:nth-child(4n + 2) { background: #33313d; }
.tip-card:nth-child(4n + 3) { background: #313c37; }
.tip-card:nth-child(4n + 4) { background: #39312d; }
.tip-person { display: flex; align-items: center; gap: 10px; color: #ffdfb6; font-size: .87rem; font-weight: 750; }
.tip-person img { width: 48px; height: 48px; border: 1px solid #ffe8d160; border-radius: 50%; }
.tip-card h3 { margin: 18px 0 9px; color: var(--white); font: 400 clamp(29px, 3.2vw, 45px)/.94 var(--serif); }
.tip-card p { color: #f0e9dc; font-size: .95rem; line-height: 1.52; }
.tip-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding-top: 7px;
  color: #ffdfb6;
  font-size: .78rem;
  text-underline-offset: 3px;
}
.tip-link svg { width: 13px; height: 13px; }

.home .bar-section {
  padding: clamp(27px, 4vw, 58px) var(--edge);
  border: 0;
  border-radius: 0;
  background: #f0e1c8;
}
.home .bar-section .section-title { font-size: clamp(48px, 6vw, 86px); }
.home .bar-section .section-copy { font-size: clamp(.9rem, 1.3vw, 1rem); }
.home .impressionen {
  padding: clamp(50px, 7.2vw, 105px) 0 0;
  background: #111822;
}
.impressionen .impressions-heading { margin-bottom: clamp(16px, 3vw, 34px); }
.home .impressions-heading { padding-inline: var(--edge); }
.film { background: #172330; }
.home .film { border-radius: 0; }
.film-image {
  height: clamp(290px, 67svh, 820px);
  background: radial-gradient(ellipse at 50% 55%, #313c43, #19232e 76%);
}
.film-caption { min-height: 60px; }
.home .film-caption, .home .film-strip { padding-inline: var(--edge); }
.film-sujet { color: var(--warm); }
.film-strip { padding-block: 10px 18px; }
.film-thumb { flex-basis: clamp(68px, 8vw, 120px); height: clamp(48px, 5.6vw, 80px); }
.film-thumb[aria-current="true"] { border-color: var(--warm); }

.support-chapter {
  display: grid;
  align-items: center;
  min-height: clamp(340px, 51vw, 660px);
  padding: clamp(42px, 7vw, 103px) var(--edge);
  background: linear-gradient(90deg, #1c2638 5%, #1c2638f2 26%, #1923348c 64%, #19233437),
    url("assets/impressionen/zugraeuber-unterwegs.webp") 68% 48% / cover no-repeat, #1c2638;
}
.support-chapter .chapter-title { max-width: 11ch; }
.support-chapter p:not(.overline) { color: #fff5e6; }

.innen #inhalt { padding-block: clamp(24px, 5vw, 76px); }
.innen #inhalt h1 { font-size: clamp(52px, 8vw, 116px); }
.innen #inhalt h1:not(.section-title) { margin-bottom: clamp(14px, 2vw, 25px); }
.innen .standplatz-page, .innen .impressionen, .innen .impressum { max-width: none; }
.innen .inner-sheet { padding: clamp(22px, 5vw, 80px); }
.innen .inner-sheet:not(.impressum) { background: #e9dfc8; }
.innen .support-sheet h1 { color: var(--ink); }
.innen .club-photo-crop { aspect-ratio: 1.43; }
.innen .club-photo-crop img { transform: scale(1.44); transform-origin: 50% 52%; }

@media (max-width: 1050px) {
  .tips-grid { grid-auto-columns: calc((100% - var(--tip-gap) * 2) / 3); }
  .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chapter-copy { padding-inline: clamp(22px, 4vw, 72px); }
}
@media (max-width: 760px) {
  body[data-site-page] { --edge: 20px; --nav-height: 64px; }
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .brand img { width: 105px; }
  .hero-stage { min-height: clamp(510px, calc(100svh - 94px), 760px); }
  .hero-panel { padding: calc(var(--nav-height) + 19px) var(--edge) 92px; }
  .hero-panel::after {
    background: linear-gradient(0deg, #111822 0%, #0c1420bc 32%, #0c142010 74%),
      linear-gradient(90deg, #1118224d, transparent 68%);
  }
  .hero-content { width: 100%; }
  .home .hero-content h1, .hero-content h2 { font-size: clamp(70px, 13.4vw, 105px); margin-bottom: 14px; }
  .hero-content > p:not(.chapter-kicker) { margin-top: 16px; }
  .hero-content .chapter-kicker { margin-bottom: 10px; }
  .hero-tabs { bottom: 17px; }
  .hero-links { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; width: auto; padding: 0 var(--edge) 13px; }
  .hero-shortcut { min-height: 76px; padding: 8px 9px; }
  .hero-shortcut span { font-size: clamp(1.13rem, 4.1vw, 1.5rem); }
  .hero-shortcut-game img { height: 83px; right: 12px; bottom: -10px; opacity: .42; }
  .hero-shortcut > svg { width: 16px; height: 16px; }
  .club-overview, .workshop-chapter, .chilbi-chapter { grid-template-columns: minmax(0, 1fr); }
  .chapter-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .workshop-photo { order: 2; }
  .chilbi-photo { aspect-ratio: 1.29; }
  .chapter-copy { padding: 37px var(--edge) 34px; }
  .club-outing img { max-height: 240px; }
  .tips-grid { grid-auto-columns: min(76%, 315px); }
  .guide-heading { align-items: center; }
  .guide-chapter .chapter-title { font-size: clamp(41px, 9.2vw, 72px); }
  .guide-controls { align-self: end; }
  .film-image { height: clamp(305px, 55svh, 560px); }
  .support-chapter {
    background-image: linear-gradient(90deg, #1c2638ed 0%, #192334aa 75%, #19233466), url("assets/impressionen/zugraeuber-unterwegs.webp");
  }
}
@media (max-width: 475px) {
  body[data-site-page] { --edge: 16px; }
  .home .hero-content h1, .hero-content h2 { font-size: clamp(63px, 16.6vw, 80px); }
  .hero-chilbi .hero-image img { object-position: 49% 46%; }
  .hero-workshop .hero-image img { object-position: 64% 51%; }
  .hero-tab { gap: 5px; font-size: .7rem; }
  .hero-tab img { flex-basis: 29%; width: 29%; height: 32px; }
  .hero-shortcut { gap: 4px; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .club-outing { grid-template-columns: 1fr; }
  .club-outing img { max-height: 158px; }
  .guide-heading { flex-wrap: wrap; gap: 10px; }
  .guide-controls { margin-left: auto; }
  .guide-chapter .chapter-title { font-size: clamp(43px, 12vw, 61px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-panel.is-entering .hero-image img, .hero-panel.is-entering .hero-content { animation: none; }
}

@media (min-width: 761px) {
  .film-image.is-wide img { object-fit: cover; object-position: 50% 55%; }
}
@media (max-width: 620px) {
  .hero-chilbi .hero-image img { height: 56%; object-position: center 45%; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .chapter-copy, .guide-heading {
      animation: chapter-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 68%;
    }
    @keyframes chapter-in { from { transform: translateY(19px); opacity: .68; } }
  }
}

@media (max-width: 660px) {
  .impressions-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  body[data-site-page] .impressions-heading :is(h1, h2) { font-size: clamp(42px, 13.8vw, 80px); }
  .impressions-heading .sujet-filter { align-self: flex-end; }
}