/* =========================================================
   Schneeschälle – Basistemplate
   ========================================================= */

/* Playfair ExtraBold (144pt-Optik) – nur für den Hero-Titel „Schnee Schälle“, lokal aus fonts/.
   Gilt für alle Gewichte, damit immer ExtraBold erscheint. Bold statt ExtraBold: Datei auf
   Playfair_144pt-Bold.ttf ändern. */
@font-face {
  font-family: "Playfair Headline";
  /* Teilmenge (nur Buchstaben inkl. Umlaute, Ziffern, Satzzeichen) – 11 KB statt 332 KB.
     Neu erzeugen: python -m fontTools.subset fonts/static/Playfair_144pt-ExtraBold.ttf --text="…" --flavor=woff2 */
  src: url("../fonts/playfair-extrabold-sub.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Farben – Farbkonzept von schneeschaelle.de (Weiss/Navy) + Gold der Schällen */
  --c-dark:   #2a3652;  /* Navy – Hauptfarbe von schneeschaelle.de */
  --c-deep:   #1b2338;  /* dunkleres Navy für Verläufe */
  --c-accent-ink: #55658d; /* helleres Navy für Labels auf Weiss */
  --c-accent: #d6b66a;  /* Gold der Schällen – Akzent auf Navy */
  --c-paper:  #ffffff;  /* Weiss wie auf schneeschaelle.de */
  --c-soft:   #f3f4f8;  /* zarter Navy-Ton für Flächen */
  --c-ink:    #323335;  /* Fliesstext wie auf schneeschaelle.de */
  --c-muted:  #6b6f78;
  --c-line:   rgba(42, 54, 82, .18);

  --f-display: "Anton", Impact, sans-serif;
  --f-hero: "Playfair Headline", Georgia, serif; /* nur Hero-Titel */
  --f-body: "Montserrat", system-ui, sans-serif;
  --hero-k: 1.15; /* Grössenfaktor Hero-Titel (Playfair); js/main.js fitHeroTitle() verkleinert, falls er sonst ans Logo stösst */


  --gutter: clamp(16px, 4vw, 64px);
  --max: 1400px;
  --header-h: 84px;
  --edge-h: clamp(90px, 11vw, 170px); /* Höhe der Häs-Kante zwischen den Sections */
  --ease: cubic-bezier(.65, .05, .36, 1);
}




/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } /* Platz für die Scrollbar immer reserviert → kein Sprung, wenn sie nach dem Preloader erscheint */
/* Scrollbar: Navy auf Weiss (passend zur Seite). */
html { scrollbar-color: var(--c-dark) var(--c-paper); }
/* Während des Preloaders ist die Scrollbar schon da (Scrollen sperrt js/main.js), ihre Spur aber
   durchsichtig: dahinter liegt ein Navy-Streifen (html-Hintergrund, nur neben dem weissen body sichtbar),
   dessen Höhe --curtain synchron zum Vorhang von 100 % auf 0 fährt → der Streifen „swipt“ mit nach oben. */
html:has(body.is-loading) {
  scrollbar-color: var(--c-dark) transparent;
  background: linear-gradient(var(--c-dark), var(--c-dark)) left top / 100% var(--curtain, 100%) repeat-x fixed;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
::selection { background: var(--c-accent); color: var(--c-dark); }

/* ---------- Helpers ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(80px, 12vw, 180px); position: relative; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase;
  color: var(--c-muted);
}
.rule { display: block; width: clamp(120px, 22vw, 320px); height: 1.5px; background: currentColor; transform-origin: left; }
.h2 {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(44px, 7vw, 110px); line-height: 1.18; letter-spacing: .005em;
  color: var(--c-dark);
}
.split-line { padding-bottom: .04em; }
/* Platz für Umlaute/Akzente in maskierten Zeilen */
[data-split] > div { padding-top: .22em; margin-top: -.22em; }

/* ---------- Torn edge (img/transition.svg) ---------- */
/* Häs-Kante zwischen den Sections (wird per js/main.js, Abschnitt 8, erzeugt) */
.tear {
  position: absolute; left: 0; right: 0; display: block; width: 100%; height: var(--edge-h);
  color: var(--tear, var(--c-paper)); overflow: hidden;
  z-index: 3; pointer-events: none;
}
/* Die Kante ragt um (1 - HAES.fadeStart) ihrer Höhe in die angrenzende Section hinein,
   damit der Fade genau dort beginnt, wo die nächste (weisse) Section anfängt. */
.tear { --edge-overlap: calc(var(--edge-h) * .45); }
.tear--bottom { bottom: calc(var(--edge-overlap) * -1); }
.tear--top { top: calc(var(--edge-overlap) * -1); transform: scaleY(-1); }

/* ---------- Buttons & Links ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05em 2.4em; border-radius: 999px; overflow: hidden;
  font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  border: 1.5px solid currentColor; isolation: isolate;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: currentColor; transform: translateY(101%); transition: transform .5s var(--ease);
  border-radius: inherit;
}
.btn span { transition: color .5s var(--ease); }
.btn:hover::before { transform: translateY(0); }
.btn--light { color: #fff; }
.btn--light:hover span { color: var(--c-dark); }
.btn--dark { color: var(--c-dark); }
.btn--dark:hover span { color: var(--c-paper); }

.link-line {
  display: inline-block; position: relative; font-weight: 600; font-size: 14px; padding-bottom: 4px;
}
.link-line::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: currentColor;
  transform-origin: right; transition: transform .5s var(--ease);
}
.link-line:hover::after { transform: scaleX(0); }

/* ---------- Preloader ---------- */
.preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.preloader__panel { position: absolute; inset: 0; background: var(--c-dark); z-index: -1; }
.preloader__inner { text-align: center; color: var(--c-paper); }
.preloader__logo { width: clamp(110px, 14vw, 180px); filter: invert(1); margin-inline: auto; }
.preloader__count { font-family: var(--f-display); font-size: 22px; letter-spacing: .1em; margin-top: 18px; }

/* ---------- Cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--c-accent); display: grid; place-items: center;
  mix-blend-mode: normal;
}
.cursor__label {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-dark);
  opacity: 0; transform: scale(.4);
}
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
  /* 3 Spalten: Logo | Navigation (exakt mittig) | Social-Icons bzw. Burger */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 32px;
  padding-inline: var(--gutter); color: #fff;
  transition: background .4s, color .4s, height .4s;
}
.header.is-solid { background: rgba(255, 255, 255, .94); color: var(--c-dark); backdrop-filter: blur(10px); height: 68px; }
.header__logo { justify-self: start; display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-size: 22px; text-transform: uppercase; letter-spacing: .03em; }
.header__logo img {
  width: 44px; flex-shrink: 0; filter: invert(1);
  transform-origin: left top; transition: filter .4s, transform .6s var(--ease);
}
.header__logo > span {
  font-family: var(--f-hero); font-weight: 800; /* Vereinsname in Playfair wie der Hero-Titel */
  font-size: clamp(14px, 1.3vw, 20px); line-height: 1.15; /* langer Vereinsname passt in die Kopfzeile */
  transition: opacity .45s .15s, transform .55s var(--ease) .1s;
}
.header.is-solid .header__logo img { filter: none; }

/* Ganz oben: Logo gross im Hero (neben dem Titel), ohne Text.
   Sobald gescrollt wird (Klasse "is-top" fällt weg), schrumpft es und der Text blendet ein.
   Position/Grösse (--logo-x/-y/-s) berechnet js/main.js: neben der ersten Titelzeile im Hero. */
.header.is-top .header__logo img {
  transform: translate(var(--logo-x, 0px), var(--logo-y, 0px)) scale(var(--logo-s, 3));
}
.header.is-top .header__logo > span {
  opacity: 0; transform: translateX(-14px); pointer-events: none;
  transition: opacity .25s, transform .4s var(--ease);
}
.menu-open .header.is-top .header__logo img { transform: none; }
.menu-open .header.is-top .header__logo > span { opacity: 1; transform: none; }
.nav { justify-self: center; }
.nav ul { display: flex; gap: clamp(20px, 3vw, 44px); }
.nav a {
  font-size: 13px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; position: relative; padding-block: 6px;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.header__social { grid-column: 3; justify-self: end; display: flex; gap: 14px; }
.header__social svg, .footer__social svg { width: 20px; height: 20px; }
.header__social a { opacity: .8; transition: opacity .3s; }
.header__social a:hover { opacity: 1; }

.burger { grid-column: 3; grid-row: 1; justify-self: end; display: none; width: 44px; height: 44px; position: relative; z-index: 60; }
.burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor; transition: transform .4s var(--ease); }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.menu-open .burger span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu-open .header { color: var(--c-paper); background: transparent; }
.menu-open .header .header__logo img { filter: invert(1); }

/* ---------- Fullscreen Menu ---------- */
.menu { position: fixed; inset: 0; z-index: 45; visibility: hidden; display: flex; flex-direction: column; justify-content: center; padding: var(--gutter); }
.menu__bg { position: absolute; inset: 0; background: var(--c-dark); clip-path: circle(0% at 100% 0%); }
.menu__list { position: relative; }
.menu__list li { overflow: hidden; }
.menu__list a {
  display: block; font-family: var(--f-display); text-transform: uppercase; color: var(--c-paper);
  font-size: clamp(44px, 12vw, 96px); line-height: 1.18;
}
.menu__list a span { display: inline-block; transition: color .3s; }
.menu__list a:hover span { color: var(--c-accent); }
.menu__foot { position: relative; color: var(--c-muted); margin-top: 32px; font-size: 13px; letter-spacing: .15em; text-transform: uppercase; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; color: #fff; }
.hero__bg { position: absolute; inset: 0; overflow: hidden; } /* beschneidet nur das Bild, die Kante darf herausragen */
.hero__media { position: absolute; inset: -10% 0 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,35,56,.6) 0%, rgba(27,35,56,.25) 35%, rgba(27,35,56,.75) 100%); }
/* Inhalt steht in der Mitte des sichtbaren Bildes: Bereich = Hero minus der Teil der
   Häs-Kante, der im Hero liegt. Gleiches Padding oben und unten hält ihn exakt mittig
   und sorgt dafür, dass er nie unter die Navigation rutscht. */
.hero__content {
  position: relative; z-index: 2; height: calc(100% - var(--edge-h) * .55);
  max-width: var(--max); margin-inline: auto;
  padding: calc(var(--header-h) + 16px) var(--gutter);
  /* Logo-Platzhalter links, Textblock rechts daneben – beides vertikal mittig */
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center;
  --hero-gap: clamp(36px, 6vw, 120px);
  column-gap: var(--hero-gap);
}
/* Desktop: Logo-Mitte auf Höhe der oberen Textzeile (Eyebrow, ~10px unter Oberkante des Textblocks) */
.hero__logo-slot {
  --slot-w: clamp(110px, 15vw, 260px);
  width: var(--slot-w); aspect-ratio: 44 / 34;
  align-self: start; margin-top: calc(10px - var(--slot-w) * 34 / 88);
}
.hero__text { display: flex; flex-direction: column; min-width: 0; }
/* grosse Bildschirme: Logo deutlich grösser */
@media (min-width: 1600px) {
  .hero__logo-slot { --slot-w: clamp(260px, 13vw, 480px); }
  .hero__content { max-width: max(var(--max), min(2400px, 82vw)); } /* breiterer, weiterhin mittiger Block (nie schmaler als darunter) */
}
.hero__eyebrow { color: rgba(255,255,255,.85); margin-bottom: 16px; }
.hero__title {
  font-family: var(--f-hero); font-weight: 800; text-transform: uppercase;
  font-size: calc(var(--hero-k) * clamp(64px, min(15vw, 19vh), 240px)); line-height: 1.12; letter-spacing: .005em;
}
/* Titel als Block nach links ausgerückt (vor die Textkante von Eyebrow/Spruch), höchstens so weit,
   dass zum Logo noch 8px Luft bleiben. Handy setzt das zurück (zentriert). */
@media (min-width: 601px) {
  .hero__title { margin-left: calc(-1 * min(.5em, var(--hero-gap) - 8px)); width: max-content; } /* nie abgeschnitten */

  /* Raster ab Tablet: Eyebrow und Spruch über die ganze Breite, also seitenmittig;
     Logo + Titel in der Mitte; Button zentriert darunter (über "Scroll").
     .hero__text / .hero__bottom lösen sich dafür auf (display: contents). */
  .hero__content .hero__text, .hero__content .hero__bottom { display: contents; }
  .hero__content .hero__eyebrow { grid-column: 1 / -1; grid-row: 1; justify-self: center; text-align: center; }
  .hero__content .hero__logo-slot { grid-column: 1; grid-row: 1 / span 2; }   /* Mitte weiterhin auf Höhe der Eyebrow */
  /* Titelblock (beide Zeilen inkl. Versatz) als Ganzes seitenmittig */
  .hero__content .hero__title { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-left: 0; }
  .hero__content .hero__lead { grid-column: 1 / -1; grid-row: 3; justify-self: center; text-align: center; max-width: none; margin-top: 32px; }
  /* Narrenfahrplan-Button: unter dem Spruch, rechte Kante bündig mit dem Ende von „SCHÄLLE“
     (Lage setzt js/main.js placeHeroCta(): Anker linke Mitte → Seitenmitte, halbe Höhe Spruch–Scroll) */
  /* reserviert Platz unter dem Spruch; die genaue Lage (Anker linke Mitte → Seitenmitte, 50 % zwischen Spruch und
     Scroll-Hinweis) setzt js/main.js placeHeroCta() per left/top */
  .hero__content .hero__cta { grid-column: 1 / -1; grid-row: 4; justify-self: center; margin-top: calc(14px + var(--cta-tilt-space)); margin-bottom: var(--cta-tilt-space); }
}
.hero__title .line { display: block; overflow: hidden; padding-top: .12em; white-space: nowrap; } /* nie innerhalb eines Wortes umbrechen */
.hero__title .line--indent { padding-left: clamp(40px, 12vw, 220px); }
.hero__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
.hero__lead { max-width: 360px; font-size: 16px; font-weight: 500; }
/* Zeilenumbrüche nur auf dem Handy (siehe <br class="br-mobile"> im HTML) */
.br-mobile { display: none; }
.hero__coords {
  position: absolute; z-index: 2; right: var(--gutter); top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; display: flex; gap: 24px; font-size: 24px; letter-spacing: .2em;
}
.scroll-hint {
  position: absolute; z-index: 2; left: 50%; bottom: calc(var(--edge-h) * .55 + 16px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
}
.scroll-hint i { width: 1.5px; height: 48px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
.scroll-hint i::after { content: ""; position: absolute; inset: 0; background: #fff; animation: scrollhint 1.8s var(--ease) infinite; }
@keyframes scrollhint { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }

/* ---------- Intro ---------- */
.intro__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px var(--gutter); align-items: start; }
.intro__label { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; color: var(--c-dark); }
.intro__text {
  grid-column: 1 / 9; font-weight: 500; font-size: clamp(24px, 3vw, 46px); line-height: 1.22; color: var(--c-dark);
}
.intro__mascot { grid-column: 9 / -1; justify-self: center; width: min(100%, 340px); }
.stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid var(--c-line); margin-top: 40px; }
.stats li { padding: 32px 0 0; display: flex; flex-direction: column; gap: 4px; }
.stats li + li { padding-left: var(--gutter); border-left: 1.5px solid var(--c-line); }
.stats strong { font-family: var(--f-display); font-weight: 400; font-size: clamp(44px, 6vw, 96px); line-height: 1; color: var(--c-dark); }
.stats span { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c-muted); }

/* ---------- Feature ---------- */
.feature { padding-top: 0; }
.feature__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center; }
.feature__text { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; color: var(--c-dark); }
.feature__text p:not(.feature__num) { max-width: 440px; color: var(--c-ink); }
.feature__num { font-family: var(--f-display); font-size: 18px; color: var(--c-accent-ink); letter-spacing: .1em; }
.feature__media { grid-column: 7 / -1; position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.feature__media img { width: 100%; height: 120%; object-fit: cover; margin-top: -10%; }
.feature__vertical {
  position: absolute; right: 18px; top: 24px; writing-mode: vertical-rl; color: #fff; text-shadow: 0 1px 8px rgba(27,35,56,.6);
  font-size: 12px; letter-spacing: .25em; text-transform: uppercase; z-index: 2;
}
.feature__frame { position: absolute; inset: 22px; border: 1px solid rgba(255,255,255,.7); pointer-events: none; }

.feature--round .feature__text { grid-column: 8 / -1; }
.round { grid-column: 1 / 7; position: relative; aspect-ratio: 1; margin-left: calc(var(--gutter) * -1 - 8vw); }
.round__img { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; }
.round__img picture { display: block; width: 100%; height: 100%; }
.round__img img { width: 100%; height: 100%; object-fit: cover; }
.round__text { position: absolute; inset: 0; width: 100%; height: 100%; }
.round__text text { font-size: 24px; letter-spacing: .35em; text-transform: uppercase; fill: var(--c-dark); font-weight: 600; }

/* ---------- Gallery (horizontal) ---------- */
.gallery { position: relative; background: var(--c-dark); color: var(--c-paper); }
.gallery .h2 { color: var(--c-paper); }
.gallery .eyebrow { color: var(--c-accent); }
.gallery__pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 48px; padding-block: calc(var(--edge-h) * .55 + 48px); overflow: hidden; }
.gallery__head { display: flex; flex-direction: column; gap: 12px; }
.gallery__track { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); padding-inline: var(--gutter); width: max-content; }
.gallery__item { position: relative; width: clamp(260px, 32vw, 520px); aspect-ratio: 4 / 3; overflow: hidden; flex-shrink: 0; }
.gallery__item--tall { width: clamp(220px, 24vw, 380px); aspect-ratio: 3 / 4; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }
.gallery__item { display: block; color: var(--c-paper); }
.gallery__item img { transition: filter .5s; }
.gallery__item:hover img { filter: brightness(0.35); }
.gallery__cap {
  position: absolute; left: 16px; bottom: 14px; font-family: var(--f-display); font-size: 22px; text-transform: uppercase; letter-spacing: .04em;
}
.gallery__end { width: clamp(220px, 24vw, 360px); display: grid; place-items: center; flex-shrink: 0; }

/* ---------- Intro Fliesstext ---------- */
@media (min-width: 861px) { .intro__mascot { grid-row: span 2; align-self: center; } }
.intro__body { grid-column: 1 / 9; display: flex; flex-direction: column; gap: 16px; max-width: 680px; }

/* ---------- Mitglieder ---------- */
.members { background: var(--c-soft); }
.members__title {
  font-size: 16px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase;
  color: var(--c-accent-ink); margin: 0 0 22px; padding-top: 22px; border-top: 1.5px solid var(--c-dark);
}
/* 5 Karten pro Reihe auf dem Desktop, Vorstand mit 3 grossen Karten */
/* Flex statt Grid: volle Reihen haben --cols Karten, eine unvollständige letzte Reihe steht zentriert darunter.
   Spaltenzahl je Breite über --cols (Desktop 5 / Vorstand 3, ≤860 px 3 / 3, ≤600 px 2 / 2). */
.people {
  --cols: 5; --gap-x: clamp(14px, 1.8vw, 26px);
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: var(--gap-x); margin-bottom: clamp(56px, 7vw, 96px);
  /* Fotos „mit Tesa eingeklebt“: Zeilenabstand etwas grösser, damit der Streifen oben Platz hat */
  row-gap: calc(var(--gap-x) + 22px); padding-top: 14px;
}
.people--board { --cols: 3; --gap-x: clamp(20px, 3vw, 44px); }
.person {
  color: #fff; position: relative; min-width: 0;
  /* −0,1 px gegen Rundungsfehler, damit eine volle Reihe nie ungewollt umbricht */
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols) - .1px);
}
.person__img {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-dark); margin: 0;
  /* zufällige leichte Neigung (--tilt setzt js/main.js), gedreht um die Mitte oben = Klebestelle */
  rotate: var(--tilt, 0deg); transform-origin: 50% 0;
  box-shadow: 0 1px 2px rgba(27,35,56,.18), 0 10px 22px -8px rgba(27,35,56,.35);
}
/* Tesa-Streifen oben mittig über der Kante, leicht schief und mit ausgefransten Enden */
.person::before {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  top: -15px; left: 50%; width: clamp(70px, 42%, 150px); height: 32px;
  translate: -50% 0; rotate: calc(var(--tilt, 0deg) + var(--tape, 0deg));
  /* matter, leicht gelblicher Klebestreifen: halbtransparent, mit Glanz und dunkleren Kanten */
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%, rgba(255,255,255,.25) 70%, rgba(255,255,255,0)),
    rgba(212, 212, 211, 0.46);
  box-shadow: inset 0 0 0 1px rgba(160, 150, 120, .35), inset 0 -3px 6px rgba(120, 110, 80, .12);
  clip-path: polygon(0 6%, 4% 0, 8% 9%, 12% 2%, 88% 0, 92% 8%, 96% 1%, 100% 7%,
                     100% 94%, 96% 100%, 92% 91%, 88% 99%, 12% 100%, 8% 92%, 4% 99%, 0 93%);
}
.person__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  transform: scale(1.02); transition: transform .8s var(--ease), filter .6s;
}
.person:hover .person__img img { transform: scale(1.08); }
.person--maske .person__img img { filter: grayscale(.35) brightness(.9); }

/* Name + Posten als Overlay im Bild */
.person__img::before {
  content: ""; position: absolute; inset: 45% 0 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(27,35,56,0) 0%, rgba(27,35,56,.55) 45%, rgba(27,35,56,.92) 100%);
  transition: opacity .5s;
}
.person__img::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 4px; z-index: 3; background: var(--c-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.person:hover .person__img::after { transform: scaleX(1); }
.person__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: clamp(12px, 1.4vw, 22px);
  transition: transform .5s var(--ease);
}
.person:hover .person__cap { transform: translateY(-6px); }
.person__role {
  display: inline-block; padding: .45em .8em; background: var(--c-accent); color: var(--c-dark);
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
}
.person__name {
  font-family: var(--f-display); font-size: clamp(20px, 1.9vw, 30px); text-transform: uppercase;
  line-height: 1.15; letter-spacing: .02em; text-shadow: 0 2px 12px rgba(27,35,56,.45);
}
.people--board .person__name { font-size: clamp(30px, 3.2vw, 50px); }
.people--board .person__role { font-size: 11px; }

/* ---------- Kontakt-Liste ---------- */
.contact__list { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
.contact__list li { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.contact__list span { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent-ink); }
.contact__list a { font-size: clamp(16px, 1.4vw, 20px); color: var(--c-dark); }
.contact__list small { font-size: 13px; color: var(--c-muted); }
.footer p a:hover { color: var(--c-accent); }

/* ---------- Dates ---------- */
.section-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(40px, 6vw, 80px); }
.dates__list { border-top: 1.5px solid var(--c-dark); }
.date {
  position: relative; display: grid; grid-template-columns: 140px 1fr 200px 40px; align-items: center; gap: 24px;
  padding: 28px 0; border-bottom: 1.5px solid var(--c-line); cursor: pointer; isolation: isolate;
  color: var(--c-dark); transition: color .4s, padding .4s var(--ease);
}
.date::before {
  content: ""; position: absolute; inset: 0; background: var(--c-dark); z-index: -1;
  transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease);
}
.date:hover { color: var(--c-paper); padding-inline: 24px; }
.date:hover::before { transform: scaleY(1); }
.date time { font-family: var(--f-display); font-size: 28px; }
.date__title { font-size: clamp(18px, 2vw, 26px); font-weight: 600; }
.date__place { font-size: 13px; letter-spacing: .15em; text-transform: uppercase; opacity: .7; }
.date__arrow { font-size: 22px; transition: transform .4s var(--ease); }
.date:hover .date__arrow { transform: translateX(6px); color: var(--c-accent); }

/* ---------- CTA / Marquee ---------- */
.cta { padding-bottom: clamp(80px, 10vw, 140px); overflow: hidden; }
.marquee { white-space: nowrap; overflow: hidden; border-block: 1.5px solid var(--c-dark); padding-block: 18px; }
.marquee__inner { display: inline-flex; }
.marquee span {
  font-family: var(--f-display); text-transform: uppercase; font-size: clamp(48px, 9vw, 140px); line-height: 1.15;
  color: var(--c-dark); padding-right: .3em;
}
.marquee b { font-weight: 400; color: inherit; }

/* Glöckchen (Schälle) – schaukelt per GSAP um die Öse */
/* Zentrierung: Versalhöhe von Anton = 0.87em. Die Kugelmitte liegt bei 39.3 % der
   Glöckchenhöhe (von unten). Bei 0.8em Höhe: 0.87/2 - 0.8*0.393 ≈ 0.12em über der Grundlinie. */
.bell {
  display: inline-block; width: .714em; height: .8em; margin-inline: .14em;
  vertical-align: .12em; font-style: normal;
}
.bell svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  transform-origin: 50% 13%;    /* = Scheitel der Öse (50 / ~15 im viewBox 100×112) */
}
.cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 48px; flex-wrap: wrap; }
.cta__inner p { max-width: 520px; font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; color: var(--c-dark); }

/* ---------- Contact ---------- */
.contact { padding-top: 0; }
.contact__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 8vw, 140px); align-items: start; }
.contact__grid > div { display: flex; flex-direction: column; gap: 20px; }
.contact__info { padding-top: clamp(0px, 3vw, 48px); }
.contact__info > p { font-size: clamp(16px, 1.3vw, 19px); }
/* ---------- Footer ---------- */
.footer { position: relative; background: var(--c-dark); color: var(--c-paper); padding-top: calc(var(--edge-h) * .55 + 64px); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 64px; }
.footer__brand { display: flex; flex-direction: column; gap: 16px; }
.footer__brand img { width: 90px; filter: invert(1); }
.footer .footer__big { opacity: 1; font-family: var(--f-display); font-size: clamp(40px, 5vw, 80px); line-height: 1.15; text-transform: uppercase; }
.footer h3 { font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 14px; font-weight: 600; }
.footer p { font-size: 14px; opacity: .85; }
.footer__social { display: flex; gap: 16px; }
.footer__social a { transition: color .3s; }
.footer__social a:hover { color: var(--c-accent); }
.sponsors { display: flex; gap: 12px; }
.sponsors span {
  width: 90px; height: 54px; border: 1px dashed rgba(255,255,255,.35); display: grid; place-items: center;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase; opacity: .6;
}
.footer__bottom {
  display: flex; justify-content: space-between; gap: 16px; padding-block: 24px;
  border-top: 1px solid rgba(255,255,255,.15); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .8;
}

/* ---------- Konfetti-Ebene (wird per js/main.js, Abschnitt 10, gezeichnet) ---------- */
.confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }

/* ---------- Galerie: Fotoanzahl auf den Karten ---------- */
.gallery__count {
  display: block; margin-top: 4px; font-family: var(--f-body); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent);
}

/* ---------- Galerie-Overlay (js/main.js, Abschnitt 11) ---------- */
.lightbox-open { overflow: hidden; }
.lightbox-open .sound-toggle { opacity: 0; pointer-events: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  background: var(--c-paper); color: var(--c-deep);
  padding: clamp(12px, 2vw, 28px) clamp(12px, 3vw, 40px);
}
.lightbox[hidden] { display: none; }
.lightbox__top { display: flex; align-items: center; gap: 16px; min-height: 52px; padding-right: 64px; } /* Platz für den runden X-Button */
.lightbox__count { flex: 1; font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; opacity: .8; white-space: nowrap; }
/* Schliessen-Button: gleiche Klasse wie bei Impressum/Datenschutz (.legal__close) */

.lightbox__stage {
  position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding-block: clamp(10px, 2vh, 24px); touch-action: pan-y; user-select: none;
}
.lightbox__figure { height: 100%; width: 100%; margin: 0; display: flex; align-items: center; justify-content: center; }
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.4); -webkit-user-drag: none; }
.lightbox__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: clamp(44px, 4vw, 60px); height: clamp(44px, 4vw, 60px); border-radius: 50%;
  display: grid; place-items: center; background: rgba(27,35,56,.0); border: 1.5px solid var(--c-deep);
  transition: background .3s, border-color .3s;
}
.lightbox__arrow:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-dark); }
.lightbox__arrow svg { width: 45%; height: 45%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__arrow--prev { left: 0; }
.lightbox__arrow--next { right: 0; }

.lightbox__thumbs {
  display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px 4px; scrollbar-width: thin;
  justify-content: safe center;
}
.lightbox__thumb {
  flex: 0 0 auto; width: clamp(64px, 7vw, 104px); aspect-ratio: 1; padding: 0; overflow: hidden;
  border: 2px solid transparent; opacity: .55; transition: opacity .3s, border-color .3s;
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumb:hover { opacity: .9; }
.lightbox__thumb.is-active { opacity: 1; border-color: var(--c-accent); }

@media (max-width: 600px) {
  .lightbox__arrow { width: 40px; height: 40px; }
}
/* Handy hochkant: Pfeile nicht seitlich übers Bild, sondern nebeneinander zentriert unter dem Bild.
   (Handy quer behält die Pfeile links und rechts neben dem Bild.) */
@media (orientation: portrait) and (max-width: 600px) {
  .lightbox__stage {
    /* Pfeile FEST unten (direkt über der Vorschauleiste), Bild mittig im Raum darüber –
       so springen die Pfeile nicht, wenn zwischen Hoch- und Querformat-Fotos gewechselt wird */
    display: grid; grid-template: "fig fig" minmax(0, 1fr) "prev next" auto / 1fr 1fr;
    column-gap: 56px; row-gap: 14px;
  }
  .lightbox__figure { grid-area: fig; min-height: 0; }
  .lightbox__arrow { position: static; transform: none; width: 44px; height: 44px; }
  .lightbox__arrow--prev { grid-area: prev; justify-self: end; }
  .lightbox__arrow--next { grid-area: next; justify-self: start; }
}

/* ---------- Narrenfahrplan (Overlay, js/main.js Abschnitt 13) ----------
   Weisse Fläche ohne Muster (wie Impressum/Galerie-Overlay), Navy-Schrift, Gold sparsam als Akzent.
   Datums-Schildchen in Navy, schräg (Gegenstück zum weissen Schild im Hero).
   Öffnen: Panel „hängt“ an einer Schnur und schwingt von oben ein (nur GSAP bewegt das Panel → kein CSS-transform). */
.fahrplan-open { overflow: hidden; }
.fahrplan-open .sound-toggle { opacity: 0; pointer-events: none; }
.fahrplan-open .confetti-canvas { z-index: 96; }          /* Konfetti fliegt beim Öffnen über das Overlay */
.fahrplan { position: fixed; inset: 0; z-index: 88; pointer-events: none; }
.fahrplan[hidden] { display: none; }
.fahrplan__backdrop { position: absolute; inset: 0; background: rgba(27, 35, 56, .55); pointer-events: auto; }
.fahrplan__panel {
  position: absolute; inset: 0; pointer-events: auto;
  background: var(--c-paper); color: var(--c-ink);
  box-shadow: 0 30px 80px rgba(27, 35, 56, .35);
}
.fahrplan__scroll { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.fahrplan__inner {
  max-width: 980px; margin-inline: auto;
  padding: clamp(72px, 10vh, 120px) var(--gutter) clamp(64px, 10vh, 110px);
}
.fahrplan__eyebrow { color: var(--c-accent-ink); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.fahrplan__eyebrow svg { width: 22px; height: 25px; }
.fahrplan__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; color: var(--c-dark);
  font-size: clamp(44px, 8vw, 104px); line-height: 1.12; letter-spacing: .005em;
}
.fahrplan__title em { font-style: normal; color: #c29a45; }   /* Gold, auf Weiss etwas kräftiger */
.fahrplan__motto {
  margin-top: 10px; font-size: clamp(14px, 1.4vw, 17px); font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--c-accent-ink);
}
.fahrplan__motto span { color: #c29a45; margin: 0 .5em; }

/* Filter: Alle / Umzug / Party / Brauchtum */
.fahrplan__filter { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(26px, 4vw, 40px) 0 clamp(18px, 3vw, 28px); }
.fahrplan__chip {
  padding: .7em 1.2em; border: 1.5px solid var(--c-line); color: var(--c-dark);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s;
}
.fahrplan__chip:hover { border-color: var(--c-dark); }
.fahrplan__chip[aria-pressed="true"] { background: var(--c-dark); color: var(--c-paper); border-color: var(--c-dark); }
.fahrplan__chip i { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .55em; vertical-align: .02em; }

/* Monat */
.fahrplan__month {
  display: flex; align-items: baseline; gap: 14px; margin: clamp(26px, 4vw, 40px) 0 6px;
  font-family: var(--f-display); text-transform: uppercase; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15;
  color:  var(--c-dark);
}
.fahrplan__month::after { content: ""; flex: 1; height: 1.5px; background: var(--c-line); align-self: center; }
.fahrplan__month[hidden] { display: none; }

/* Termin-Zeile */
.fahrplan__list { list-style: none; }
.fahrplan__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2.4vw, 28px);
  padding: 14px 0; border-bottom: 1.5px solid var(--c-line);
}
.fahrplan__item[hidden] { display: none; }
/* Datums-Schildchen: Navy, eckig, schräg */
.fahrplan__date {
  width: clamp(64px, 8vw, 84px); padding: 8px 0 7px; text-align: center;
  background: var(--c-dark); color: var(--c-paper); box-shadow: 0 6px 16px rgba(27, 35, 56, .25);
  rotate: var(--tilt, -4deg);
}
.fahrplan__day { display: block; font-family: var(--f-display); font-size: clamp(28px, 3.2vw, 38px); line-height: 1.12; }
.fahrplan__mon { display: block; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); }
.fahrplan__what { min-width: 0; }
.fahrplan__name { font-size: clamp(17px, 1.9vw, 22px); font-weight: 700; line-height: 1.3; color: var(--c-dark); }
.fahrplan__meta { margin-top: 3px; font-size: 13px; color: var(--c-muted); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.fahrplan__home { display: inline-flex; align-items: center; gap: 6px; color: #a8822f; font-weight: 700; }
.fahrplan__home svg { width: 15px; height: 17px; }
.fahrplan__tag {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  padding: .55em .9em; border: 1.5px solid currentColor;
}
.fahrplan__tag--umzug { color: var(--c-dark); }
.fahrplan__tag--party { color: var(--c-dark); background: var(--c-accent); border-color: var(--c-accent); }
.fahrplan__tag--brauchtum { color: #a8822f; }
.fahrplan__dot--umzug { background: var(--c-dark); }
.fahrplan__dot--party { background: var(--c-accent); }
.fahrplan__dot--brauchtum { border: 2px solid #a8822f; }
[aria-pressed="true"] .fahrplan__dot--umzug { background: var(--c-paper); }

/* nächster Termin: hervorgehoben */
.fahrplan__item.is-next { background: var(--c-soft); padding-inline: 12px; margin-inline: -12px; }
.fahrplan__next {
  display: inline-block; margin-bottom: 4px; padding: .3em .6em; background: var(--c-accent); color: var(--c-dark);
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.fahrplan__item.is-past { opacity: .45; }
.fahrplan__note { margin-top: clamp(28px, 4vw, 44px); font-size: 13px; color: var(--c-muted); }

@media (max-width: 600px) {
  .fahrplan__item { grid-template-columns: auto minmax(0, 1fr); }
  .fahrplan__tag { grid-column: 2; justify-self: start; margin-top: -4px; }
  .fahrplan__chip { padding: .65em .9em; font-size: 11px; }
}

/* ---------- Impressum & Datenschutz (Overlay von unten, js/main.js Abschnitt 12) ---------- */
.legal-open { overflow: hidden; }
.legal-open .sound-toggle { opacity: 0; pointer-events: none; }
.legal {
  position: fixed; inset: 0; z-index: 85; background: var(--c-paper); color: var(--c-ink);
  box-shadow: 0 -20px 60px rgba(27,35,56,.25); /* Position (Ein-/Ausfahren) steuert nur GSAP */
}
.legal[hidden] { display: none; }
.legal__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.legal__inner {
  max-width: 820px; margin-inline: auto;
  padding: clamp(72px, 10vh, 120px) var(--gutter) clamp(64px, 10vh, 120px);
}
.legal__inner .eyebrow { color: var(--c-accent-ink); margin-bottom: 12px; }
.legal__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; color: var(--c-dark);
  font-size: clamp(40px, 7vw, 88px); line-height: 1.12; margin-bottom: clamp(24px, 4vw, 48px);
  hyphens: manual;
}
.legal__inner h3 {
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-dark); margin: 40px 0 12px; padding-top: 24px; border-top: 1.5px solid var(--c-line);
}
.legal__inner p { margin-bottom: 14px; max-width: 68ch; }
.legal__inner a { color: var(--c-dark); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.legal__inner a:hover { color: var(--c-accent-ink); }
.legal__close {
  position: absolute; top: clamp(14px, 2.5vw, 28px); right: clamp(14px, 3vw, 40px); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%; background: var(--c-dark); color: var(--c-paper);
  transition: background .3s, transform .4s var(--ease);
}
.legal__close span {
  position: absolute; left: 15px; right: 15px; top: 25px; height: 2px; background: currentColor;
  transform: rotate(45deg);
}
.legal__close span:last-child { transform: rotate(-45deg); }
.legal__close:hover { background: var(--c-accent-ink); transform: rotate(90deg); }

/* ---------- Ton-Schalter ---------- */
.sound-toggle {
  position: fixed; right: var(--gutter); bottom: 22px; z-index: 55;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 11px; border-radius: 999px;
  background: var(--c-dark); color: var(--c-paper);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(27,35,56,.25);
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.sound-toggle svg { width: 22px; height: 25px; overflow: visible; transform-origin: 50% 13%; transition: opacity .3s, filter .3s; }
.sound-toggle[aria-pressed="false"] svg { opacity: .6; filter: grayscale(1); }
.sound-toggle[aria-pressed="true"] { background: var(--c-accent); color: var(--c-dark); }
.sound-toggle.is-loading { opacity: .7; pointer-events: none; }
.menu-open .sound-toggle { opacity: 0; pointer-events: none; }

/* ---------- Responsive ---------- */
/* niedrige Bildschirme (z. B. Laptops 1280×720): Hero-Titel kleiner,
   damit der mittig stehende Inhalt Luft zur Navigation behält */
@media (max-height: 780px) and (min-width: 601px) {
  .hero__title { font-size: calc(var(--hero-k) * clamp(56px, min(15vw, 15vh), 240px)); }
}
@media (max-width: 1024px) {
  .nav, .header__social { display: none; }
  .header { grid-template-columns: minmax(0, 1fr) auto; } /* ohne Navigation: Logo | Burger */
  .burger { grid-column: 2; }
  .burger { display: block; }
  .hero__coords { display: none; }
}
@media (max-width: 860px) {
  .intro__text, .intro__mascot, .intro__body { grid-column: 1 / -1; }
  .people { --cols: 3; } /* gilt auch für den Vorstand (wie bisher) */
  .intro__mascot { width: 220px; }
  .feature__text, .feature__media, .feature--round .feature__text, .round { grid-column: 1 / -1; }
  .feature__media { order: -1; } /* Hochformat 4:5 wie auf dem Desktop */
  .round { margin: 0 auto; width: min(100%, 460px); }
  .contact__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  /* Handy: Logo gross und zentriert oben unter der Navigation, Text darunter mittig im Rest */
  /* Handy: kompletter Hero zentriert; der Titel als Block mittig, die zweite Zeile bleibt versetzt */
  .br-mobile { display: inline; }
  .hide-mobile { display: none; }
  .hero__text { align-items: center; text-align: center; }
  /* Handy: Logo, Titel und Abstände wachsen/schrumpfen mit der SICHTBAREN Höhe (svh), damit der ganze Hero
     inkl. Button auch in Browsern mit viel Leisten (z. B. Brave auf dem iPhone, ~640 px sichtbar) hineinpasst. */
  .hero { --m-logo: clamp(72px, 15svh, 180px); --m-gap: clamp(8px, 2svh, 24px); }
  .hero__title { width: fit-content; margin-inline: auto; text-align: left; font-size: min(18vw, 8svh, 110px); } /* Handy: so breit wie möglich (Playfair), Rand ≈ 20 px */
  .hero__eyebrow { margin-bottom: min(16px, 1.6svh); }
  .hero__bottom { flex-direction: column; align-items: center; justify-content: center; margin-top: var(--m-gap); gap: var(--m-gap); align-self: stretch; }
  .hero__bottom .hero__cta {                                   /* Handy laut Skizze: ca. 52 % breit, 18° schräg */
    /* Anker sitzt in der Seitenmitte → das Schild muss in die rechte Hälfte passen (≈ 49vw − Rand) */
    --cta-w: min(calc(49vw - 14px), 230px, 26svh); --cta-rot: 16; --cta-tilt-space: calc(var(--cta-w) * .138);
    align-self: center;                                       /* Lage setzt placeHeroCta() (Anker → Zielpunkt) */
    margin-top: calc(var(--cta-tilt-space) + 4px); margin-bottom: var(--cta-tilt-space);
    font-size: calc(var(--cta-w) * .056); letter-spacing: .08em;
  }
  .hero__lead { max-width: none; }
  /* Hero darf auf sehr kleinen Handys höher als der Bildschirm werden, damit nichts kollidiert */
  .hero { height: auto; min-height: 100vh; min-height: 100svh; }
  .hero__content {
    grid-template-columns: minmax(0, 1fr);
    padding-top: calc(var(--header-h) + var(--m-gap) + var(--m-logo) * 34 / 44 + var(--m-gap));
    height: auto; min-height: 100svh;
    /* unten Platz für Häs-Kante + Scroll-Hinweis freihalten (gleicher Bezug wie .scroll-hint:
       Unterkante des Heros), damit er nie über dem Spruch liegt; bei sehr wenig Höhe wird der Hero etwas höher */
    padding-bottom: calc(var(--edge-h) * .55 + 16px + 24px + var(--m-hint) + var(--m-gap));
    /* mittig, aber bei wenig Höhe nie nach oben ins Logo hinein */
    align-content: center; align-content: safe center;
  }
  .hero { --m-hint: clamp(22px, 4svh, 48px); }          /* Länge der Scroll-Linie, kürzer bei wenig Höhe */
  .scroll-hint { gap: 8px; }
  .scroll-hint i { height: var(--m-hint); }
  .hero__logo-slot {
    position: absolute; top: calc(var(--header-h) + var(--m-gap)); left: calc(50% - var(--m-logo) / 2);
    width: var(--m-logo); margin: 0;
  }
  /* Ton-Schalter: nur rundes Glöckchen-Symbol (Beschriftung bleibt für Screenreader), liegt nicht über dem Button */
  .sound-toggle {
    width: 46px; height: 46px; padding: 0; justify-content: center;
    right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .sound-toggle__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .people, .people--board { --cols: 2; }
  .stats { grid-template-columns: 1fr; }
  .stats li + li { padding-left: 0; border-left: 0; border-top: 1.5px solid var(--c-line); margin-top: 24px; }
  .date { grid-template-columns: 80px 1fr 24px; gap: 14px; }
  .date__place { display: none; }
  .date time { font-size: 22px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
}
/* sehr schmale Handys: Narrenfahrplan-Button mittig, sonst stösst er an den runden Ton-Schalter unten rechts */
@media (max-width: 360px) {
  .hero__bottom .hero__cta {
    --cta-w: min(calc(49vw - 14px), 26svh); letter-spacing: .05em;   /* einzeilig, mittig */
  }
  .sound-toggle { width: 40px; height: 40px; right: 10px; } /* etwas kleiner, damit er neben dem Button Platz hat */
}
/* Narrenfahrplan-Button: eckiges, weisses Schild mit fetter Navy-Schrift, schräg gestellt wie ein angehefteter Zettel,
   1,5× so hoch wie die übrigen Buttons, Rand aus Konfetti-Punkten (Navy + Gold, abwechselnd versetzt).
   Schräge (--cta-rot) und Schweben setzt js/main.js per GSAP (rotation/y) – deshalb hier KEIN CSS-transform.
   Hover (js/main.js): Text wechselt zu „Schälle on Tour in …“ mit Live-Countdown, das Schild dreht sich dabei nicht. */
.hero__cta {
  /* Grösse laut Skizze: ca. 30 % der Breite (bei 1440 px ≈ 430 px), Seitenverhältnis ≈ 2,25 : 1,
     auf niedrigen Bildschirmen über die Höhe begrenzt */
  --cta-w: clamp(240px, min(30vw, 40vh), 460px);
  --cta-rot: 14;                         /* Grad, im Uhrzeigersinn (wie in der Skizze) */
  --cta-tilt-space: calc(var(--cta-w) * .121); /* = halbe Breite × sin(14°): so viel höher wird das schräge Schild */
  width: var(--cta-w); aspect-ratio: 2.6; padding: 0;   /* etwas flacher als die Skizze (2,25) */
  white-space: nowrap; border-radius: 0; font-weight: 800; border: 0;
  font-size: calc(var(--cta-w) * .046); letter-spacing: .1em;
  color: var(--c-dark); background: none; overflow: visible;
}
/* Ticket-Form (weiss, konkav ausgeschnittene Ecken) + Konfetti-Punkte innen entlang der Kontur:
   SVG wird von js/main.js (drawCtaShape) passend zur Buttongrösse gezeichnet, Schatten folgt der Form */
.hero__cta .cta-shape {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(27, 35, 56, .3));
}
.hero__cta::before { display: none; }    /* keine Farbfüllung beim Hover */
.hero__cta span { display: inline-block; }
/* Hover-Inhalt: zweizeilig „Schälle on Tour in“ + Countdown */
.hero__cta .cta-tour { display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1; }
.hero__cta .cta-tour small { font-size: .78em; font-weight: 700; letter-spacing: .14em; }
.hero__cta .cta-tour b { font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

.nowrap { white-space: nowrap; }