/* Hallmark · shape: Club poster (layout revised at user request) · genre: playful · theme: Sticker (original palette retained; MADE Soulmaze by user request) · job: visit
 * hero: Poster typography with loose photographs · nav: scattered paper links inside the poster · footer: mascot and oversized wordmark · imagery: user photographs and generated mascot · signature: raspberry cursor in three poses · sticker: sheet
 * axes: light/display-heavy/chromatic-magenta · posture: full-palette · brand: DIE HARTEN HIMBIS (local logo and user font) · data: illustrative financial joke without amounts · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4 · weakest: R, removed badges and sports stats so the real friends and financial joke carry the page */
/* Hallmark · layout v2: browser QA at 320 to 1920px, tablet caption overlap resolved; native normal, hover and click cursor verified */
/* Hallmark · dismissed F4 · the chart and gallery fills indicate aria-pressed selection; Die Beweislage is the single primary action, not one of five calls to action */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "MADE Soulmaze"; src: url("assets/fonts/made-soulmaze.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("assets/fonts/general-sans.ttf") format("truetype"); font-weight: 200 700; font-style: normal; font-display: swap; }

html { scroll-behavior: smooth; }
body { font-size: 17px; }
a, button { -webkit-tap-highlight-color: var(--color-paper-2); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
a:active { text-decoration-thickness: 2px; }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.skip-link { position: fixed; z-index: var(--z-toast); inset: var(--space-md) auto auto var(--space-md); padding: var(--space-sm) var(--space-lg); color: var(--color-white); background: var(--color-ink); transform: translateY(-180%); }
.skip-link:focus-visible { transform: none; }
.site-header { padding-block: var(--space-md); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 64px; }
.brand { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; flex-shrink: 0; }
.brand-fruit { position: relative; width: 66px; height: 52px; overflow: clip; mix-blend-mode: multiply; }
.brand-fruit img { position: absolute; width: 80px; height: 80px; max-width: none; left: -7px; top: -14px; }
.brand-name { font-family: var(--font-display); font-size: 16px; line-height: 1.12; letter-spacing: var(--tracking-display); }
nav { display: flex; align-items: center; gap: var(--space-xl); }
nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; }
nav a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.35em; }
.nav-events { border: 2px solid var(--color-ink); border-radius: var(--radius-pill); min-height: 44px; padding: var(--space-xs) var(--space-lg); display: inline-flex; align-items: center; }
.nav-events:hover { background: var(--color-accent-2); text-decoration: none; }
.hero { padding-block: var(--space-hero) var(--space-3xl); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr); align-items: center; gap: var(--space-2xl); min-height: 500px; }
.hero-copy { padding-bottom: var(--space-xl); }
h1 { font-size: clamp(3rem, 5.7vw, 5.15rem); line-height: 1.09; max-width: 14ch; text-wrap: initial; }
.hero .lead { max-width: 30ch; margin-top: var(--space-lg); font-size: 20px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: var(--space-sm) var(--space-lg); border: 4px solid var(--color-white); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); box-shadow: var(--shadow-card); font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; white-space: nowrap; transition: transform var(--dur-micro) var(--ease-out); cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translate(3px, 4px); box-shadow: var(--shadow-press); }
.text-link { font-size: 14px; font-weight: 600; text-underline-offset: 0.3em; white-space: nowrap; }
.text-link:hover { text-decoration-color: var(--color-accent); }
.hero-photos { position: relative; padding-bottom: var(--space-hero); }
figure { margin: 0; }
.hero-team { position: relative; display: flex; flex-direction: column; padding: var(--space-photo-border); background: var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transform: rotate(2deg); }
.hero-team img { width: 100%; height: 365px; object-fit: cover; object-position: 50% 61%; border-radius: calc(var(--radius-card) - 5px); }
.hero-team figcaption { order: -1; font-size: 13px; font-weight: 600; padding: var(--space-xs) var(--space-xs) var(--space-sm); }
.hero-party { position: absolute; right: 6%; bottom: 0; width: 58%; padding: var(--space-photo-border); padding-bottom: var(--space-sm); background: var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transform: rotate(-6deg); }
.hero-party img { aspect-ratio: 1.7; width: 100%; object-fit: cover; border-radius: calc(var(--radius-card) - 5px); }
.hero-party figcaption { font-size: 12px; font-weight: 600; padding-top: var(--space-xs); text-align: center; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--gap-columns); margin-bottom: var(--space-2xl); }
.section-heading > p { max-width: 45ch; font-size: 17px; }
h2 { font-size: clamp(2rem, 3.7vw, 3.5rem); line-height: 1.12; }
.club-section { background: var(--color-accent-2); padding-block: var(--space-2xl); }
.club-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.club-copy { max-width: 48ch; }
.club-copy p { line-height: 1.7; }
.club-priorities { margin-top: var(--space-lg); font-weight: 600; }
.finance-section { padding-block: var(--section-gap-s); background: var(--color-ink); color: var(--color-paper); }
.finance-section :focus-visible { outline-color: var(--color-accent-2); }
.finance-heading > p { color: var(--color-paper-2); }
.finance-figure { position: relative; }
.finance-chart { width: 100%; height: 300px; overflow: visible; }
.chart-grid { fill: none; stroke: var(--color-chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-zero { fill: none; stroke: var(--color-paper); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-line { fill: none; stroke: var(--color-accent-2); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-points circle { fill: var(--color-ink); stroke: var(--color-accent-2); stroke-width: 3; vector-effect: non-scaling-stroke; }
.chart-points .is-current { fill: var(--color-accent-2); stroke: var(--color-ink); stroke-width: 3; r: 11; }
.chart-labels { display: flex; flex-direction: column; position: absolute; height: 235px; justify-content: space-between; font-size: 12px; pointer-events: none; }
.chart-labels span { padding-inline: var(--space-xs); background: var(--color-ink); }
.chart-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-top: var(--space-xl); }
.chart-steps button, .gallery-filters button { min-height: 44px; border: 1px solid var(--color-chart-grid); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); color: inherit; background: var(--color-ink); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.chart-steps button:hover { border-color: var(--color-paper); }
.chart-steps button[aria-pressed="true"] { background: var(--color-accent-2); color: var(--color-ink); border-color: var(--color-accent-2); }
.chart-steps button:active, .gallery-filters button:active { transform: translateY(1px); }
.chart-commentary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); padding-block: var(--space-lg); border-block: 1px solid var(--color-chart-grid); }
.chart-commentary p { font-weight: 600; min-height: 1.55em; }
.chart-commentary > span { font-size: 14px; }
.finance-figure figcaption { margin-top: var(--space-md); font-size: 12px; color: var(--color-paper-2); }
.gallery-section { padding-block: var(--section-gap); }
.gallery-heading { margin-bottom: var(--space-xl); }
.gallery-filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.gallery-filters button { border-color: var(--color-rule); color: var(--color-ink); background: var(--color-paper); }
.gallery-filters button:hover { border-color: var(--color-ink); }
.gallery-filters button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.events-section { padding-block: var(--space-hero); background: var(--color-accent); color: var(--color-accent-ink); }
.events-section :focus-visible { outline-color: var(--color-accent-2); }
.events-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.events-empty h3 { font-family: var(--font-body); font-size: 24px; font-weight: 600; letter-spacing: 0; }
.events-empty p { max-width: 40ch; margin-top: var(--space-md); }
.events-note { display: block; margin-top: var(--space-lg); font-size: 14px; }
.event-entry { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-paper-2); }
.event-entry:first-child { padding-top: 0; }
.event-entry h3 { font-size: 23px; margin-bottom: var(--space-md); }
.event-entry time { display: block; font-weight: 600; margin-bottom: var(--space-sm); }
.event-entry p { margin-bottom: var(--space-sm); }
.event-entry a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; }
.site-footer { padding-block: var(--space-2xl); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-columns); }
.footer-wordmark { font-family: var(--font-display); font-size: clamp(1.75rem, 3.3vw, 3rem); line-height: 1.12; letter-spacing: var(--tracking-display); }
.footer-details { font-size: 14px; }
.footer-details p { margin-bottom: var(--space-lg); }
@media (min-width: 100rem) { .hero { padding-block: var(--space-3xl) var(--section-gap); } }
@media (max-width: 70rem) {
  nav { gap: var(--space-lg); }
  .hero-inner { gap: var(--space-xl); }
  .hero-actions { gap: var(--space-lg); }
  h1 { font-size: clamp(2.75rem, 5.6vw, 4.5rem); }
  .hero-team img { height: 330px; }
}
@media (max-width: 52rem) {
  .site-header { padding-block: var(--space-sm); }
  .header-inner { gap: var(--space-sm); }
  .brand-name { font-size: 13px; }
  .brand-fruit { width: 52px; }
  .brand-fruit img { left: -14px; }
  nav { gap: var(--space-md); }
  nav a:not(.nav-events) { display: none; }
  .nav-events { padding-inline: var(--space-md); }
  .hero { padding-block: var(--space-xl) var(--space-2xl); }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; }
  .hero-copy { padding-bottom: 0; }
  h1 { font-size: clamp(2.7rem, 9vw, 4.6rem); }
  .hero .lead { font-size: 18px; max-width: 34ch; }
  .hero-actions { margin-top: var(--space-lg); }
  .hero-photos { max-width: 620px; width: 100%; margin-inline: auto; padding-bottom: var(--space-2xl); }
  .hero-team img { height: auto; aspect-ratio: 1.5; }
  .hero-party { width: 51%; right: 4%; }
  .club-inner, .events-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .club-copy { max-width: 60ch; }
  .section-heading { align-items: start; flex-direction: column; gap: var(--space-lg); margin-bottom: var(--space-xl); }
  h2 { font-size: clamp(1.8rem, 5.5vw, 2.75rem); }
  .finance-chart { height: 245px; }
  .chart-labels { height: 195px; font-size: 12px; }
  .chart-steps { justify-content: start; margin-top: var(--space-lg); }
  .chart-steps button { font-size: 12px; padding-inline: var(--space-sm); }
  .chart-commentary { margin-top: var(--space-lg); }
  .footer-inner { align-items: start; flex-direction: column; gap: var(--space-xl); }
  .footer-details { display: flex; align-items: start; justify-content: space-between; gap: var(--space-lg); width: 100%; }
}
@media (max-width: 35rem) {
  .events-section { padding-block: var(--space-2xl); }
  .footer-details { flex-direction: column; gap: var(--space-xs); }
}
@media (max-width: 24rem) {
  .brand-name { font-size: 11px; }
  .brand { gap: var(--space-2xs); }
  .hero-actions { gap: var(--space-lg); }
  h1 { font-size: 10.4vw; }
  .hero-team figcaption { font-size: 12px; }
  .hero-party figcaption { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
  .button:hover, .button:active { transform: none; }
}