/* =========================================================================
   berthafest – Design System v2 "Sticker-Kollage in Bewegung"
   Farben kommen aus dem Backend und werden inline als CSS-Variablen gesetzt.
   ========================================================================= */

/* ------------------------------------------------------------ Schriften
   Josefin Sans steht für die Überschriften (geometrische Grotesk mit sehr
   niedriger x-Höhe – die freie Entsprechung zu Dunbar Low), Jost für den
   Fließtext. Beide SIL-OFL-lizenziert und lokal eingebunden, es geht also
   kein Aufruf an einen fremden Server (DSGVO).
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Josefin Sans';
  src: url('../fonts/josefin-sans-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../fonts/josefin-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  src: url('../fonts/caveat-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Weitere Handschriften – jede Bandkarte bekommt eine andere.
   Der Browser lädt eine Schrift erst, wenn sie wirklich gebraucht wird. */
@font-face {
  font-family: 'Permanent Marker';
  src: url('../fonts/permanent-marker-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Amatic SC';
  src: url('../fonts/amatic-sc-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gloria Hallelujah';
  src: url('../fonts/gloria-hallelujah-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-body);
  /* Jost läuft schmal – etwas größer setzen als eine System-Grotesk */
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.62;
  color: var(--paper);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
img { image-rendering: -webkit-optimize-contrast; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--now); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--pink); color: #fff; }

/* ------------------------------------------------------------ Tokens */
:root {
  --font-display: 'Josefin Sans', 'Century Gothic', 'Futura', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Jost', 'Futura', 'Century Gothic', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;

  --maxw: 1240px;
  --gut: clamp(1.15rem, 4vw, 3rem);
  --radius: 22px;
  --radius-lg: 34px;
  --sec-y: clamp(3.6rem, 6.5vw, 7.2rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
  --ease-elastic: cubic-bezier(.68,-.35,.27,1.35);

  --shadow-1: 0 2px 8px rgba(0,0,0,.28);
  --shadow-2: 0 18px 46px -14px rgba(0,0,0,.55);
  --shadow-3: 0 40px 90px -30px rgba(0,0,0,.75);
  --shadow-sticker: 0 10px 26px -8px rgba(0,0,0,.45);

  /* wandert beim Scrollen durch die Palette */
  --now: var(--lime);
  --now-rgb: var(--lime-rgb);
}

/* ------------------------------------------------------------ Typo */
/* Josefin Sans hat eine sehr niedrige x-Höhe: etwas größer setzen,
   enger führen und mit minimalem Tracking arbeiten. */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(3.2rem, 1.5rem + 8vw, 8.8rem); }
h2 { font-size: clamp(2.5rem, 1.25rem + 5vw, 5.5rem); }
h3 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem); line-height: 1.06; }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.08rem, 1rem + .5vw, 1.4rem); line-height: 1.55; opacity: .88; max-width: 62ch; }

.u-lime { color: var(--lime); }
.u-pink { color: var(--pink); }
.u-now  { color: var(--now); }

/* Outline-Schrift für Kontrast in Headlines */
.u-out {
  color: transparent;
  -webkit-text-stroke: 2px currentColor;
  paint-order: stroke fill;
}
.section--paper .u-out { -webkit-text-stroke-color: var(--ink); }

/* Buchstabenweise Animation */
.split-char {
  display: inline-block;
  will-change: transform, opacity;
  transform-origin: 50% 100%;
}
.split-word { display: inline-block; white-space: nowrap; }

/* Textmarker */
.mark {
  background-image: linear-gradient(transparent 56%, rgba(var(--lime-rgb), .95) 56%);
  background-repeat: no-repeat;
  background-size: 0 100%;
  color: var(--ink);
  padding: 0 .14em;
  transition: background-size .8s var(--ease) .1s;
}
.is-in .mark, .mark.is-on { background-size: 100% 100%; }

/* ------------------------------------------------------------ Layout */
/* position/z-index: sonst malen die absolut positionierten Deko-Ebenen
   (Luftballons, Wimpel) über den Inhalt, weil sie zwar z-index 0 haben,
   der Textfluss aber gar keine eigene Ebene bildet. */
.wrap { width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; position: relative; z-index: 1; }
.wrap-wide { width: min(100% - 2 * var(--gut), 1560px); margin-inline: auto; position: relative; z-index: 1; }
.section {
  position: relative; padding-block: var(--sec-y); overflow-x: hidden;
  isolation: isolate;
}
@supports (overflow: clip) { .section { overflow-x: clip; } }
.section--paper { background: var(--paper); color: var(--ink); }
.section--ink { background: var(--ink); color: var(--paper); }
.grid { display: grid; gap: clamp(1rem, 2vw, 1.9rem); }

/* Sektionskopf */
.sec-head { position: relative; margin-bottom: clamp(1.9rem, 3.8vw, 3.4rem); }
.sec-head__kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: .88rem; letter-spacing: .18em;
  text-transform: uppercase; padding: .45rem 1rem; border-radius: 999px;
  background: var(--pink); color: #fff; margin-bottom: 1.1rem;
  box-shadow: var(--shadow-1);
  transform: rotate(-1.6deg);
}
.section--paper .sec-head__kicker { background: var(--ink); }
.sec-head__title { position: relative; z-index: 1; }
.sec-head__lead { margin-top: 1.2rem; }
.sec-head__ghost {
  position: absolute; inset-inline-start: -.06em; top: -.26em; z-index: 0;
  font-family: var(--font-display); font-size: clamp(6.5rem, 21vw, 18rem);
  line-height: .8; color: currentColor; opacity: .045;
  pointer-events: none; user-select: none; white-space: nowrap;
  max-width: 100vw; overflow: hidden;
}
@media (max-width: 620px) { .sec-head__ghost { display: none; } }

/* ------------------------------------------------------------ Hintergrund-Ebenen */
/* Schwebende Konfetti-Schnipsel. Ohne Blend-Modus, damit der Compositor
   nicht bei jedem Frame die ganze Seite darunter neu mischen muss. */
.fx-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .85; contain: strict;
}

/* Farbschleier aus radialen Verläufen statt blur() – bewegt wird nur per
   transform, das läuft komplett auf der Grafikkarte. */
.aurora {
  position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46vmax 46vmax at 14% 10%,  rgba(var(--pink-rgb), .42), transparent 62%),
    radial-gradient(40vmax 40vmax at 86% 84%,  rgba(var(--lime-rgb), .34), transparent 62%),
    radial-gradient(30vmax 30vmax at 56% 46%,  rgba(255, 212, 0, .18),     transparent 60%);
  will-change: transform;
  transform: translateZ(0);
  animation: auroraDrift 46s ease-in-out infinite alternate;
}
.aurora i { display: none; }

.grain {
  position: fixed; inset: -90px; z-index: 3; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform; transform: translateZ(0); contain: strict;
  animation: grainshift 900ms steps(3) infinite;
}

.section > .wrap, .section > .wrap-wide { position: relative; z-index: 2; }

/* Deko-Sticker, die frei im Layout schweben */
.deco {
  position: absolute; pointer-events: none; z-index: 1;
  will-change: transform;
}
@media (max-width: 760px) {
  .deco { opacity: .45; transform: scale(.6); }
  .deco--ring { display: none; }
}
.deco--ring {
  border-radius: 50%; border: 2.5px dashed rgba(var(--now-rgb), .34);
}
.deco--dot { border-radius: 50%; background: rgba(var(--pink-rgb), .35); }
.deco--squig { color: rgba(var(--lime-rgb), .3); }
.deco--star { color: var(--accent); opacity: .5; }

/* ------------------------------------------------------------ Buttons */
.btn {
  --btn-bg: var(--pink); --btn-fg: #fff; font-weight: 700;
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.8rem; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: .015em;
  background: var(--btn-bg); color: var(--btn-fg); overflow: hidden; isolation: isolate;
  box-shadow: 0 12px 30px -12px rgba(var(--pink-rgb), .9);
  transition: transform .35s var(--ease-back), box-shadow .3s var(--ease), color .3s ease;
  text-align: center; will-change: transform;
}
.btn::before {
  content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  background: var(--lime); transform: translateY(101%) scale(1.4); transition: transform .5s var(--ease);
}
.btn:hover { color: var(--ink); box-shadow: 0 20px 40px -14px rgba(var(--lime-rgb), .8); }
.btn:hover::before { transform: translateY(0) scale(1); }
.btn:active { transform: scale(.97); }
.btn__t { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .55rem; }
.btn--lime { --btn-bg: var(--lime); --btn-fg: var(--ink); box-shadow: 0 12px 30px -12px rgba(var(--lime-rgb), .9); }
.btn--lime::before { background: var(--pink); }
.btn--lime:hover { color: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; box-shadow: none; border: 2px solid currentColor; }
/* Die Füllung darf NICHT currentColor sein: beim Hover wird die Textfarbe zu
   --ink, und currentColor zieht mit – dunkle Schrift auf dunkler Füllung,
   nichts mehr zu lesen. Feste Farbe, die auf hellem wie dunklem Grund trägt. */
.btn--ghost::before { background: var(--lime); }
.btn--ghost:hover { color: var(--ink); border-color: var(--lime); }
.section--ink .btn--ghost:hover { color: var(--ink); }
.btn--sm { padding: .62rem 1.15rem; font-size: .84rem; }
.btn__ico { width: 1.05em; height: 1.05em; flex: none; }

/* ------------------------------------------------------------ Header */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 110;
  padding-block: clamp(.7rem, 1.6vw, 1.05rem);
  transition: transform .45s var(--ease), background-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
  will-change: transform;
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.header.is-stuck {
  background: rgba(var(--ink-rgb), .78);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 14px 38px -22px rgba(0,0,0,.9);
}
.header.is-hidden { transform: translateY(-118%); }

.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.brand__img {
  height: clamp(36px, 4.6vw, 54px); width: auto; border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  transition: transform .5s var(--ease-back);
}
.brand:hover .brand__img { transform: rotate(-4deg) scale(1.06); }
.brand__text { font-family: var(--font-display); line-height: .88; font-size: clamp(1.05rem, 2.2vw, 1.5rem); }
.brand__text small { display: block; font-size: .5em; letter-spacing: .16em; text-transform: uppercase; opacity: .75; font-family: var(--font-body); font-weight: 700; }

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; align-items: center; gap: .1rem; }
  .nav a {
    position: relative; padding: .5rem .82rem; border-radius: 999px;
    font-weight: 700; font-size: .95rem; transition: color .25s var(--ease), transform .3s var(--ease-back);
  }
  .nav a::after {
    content: ''; position: absolute; left: .82rem; right: .82rem; bottom: .28rem; height: 3px;
    border-radius: 3px; background: var(--now); transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--ease);
  }
  .nav a:hover { transform: translateY(-2px); }
  .nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
  .nav a.is-active { color: var(--now); }
}
/* Mit Lageplan sind es neun Punkte – zwischen 1000 und 1200 px wird es sonst
   knapp bis an den Rand. Etwas enger setzen, statt gleich das Menü zu kippen. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .nav a { padding: .5rem .58rem; font-size: .9rem; }
  .nav a::after { left: .58rem; right: .58rem; }
}

/* Menü-Knopf: Ring zeigt den Lesefortschritt, innen zwei ungleiche Striche,
   die sich beim Öffnen zum Kreuz drehen. */
.burger {
  position: relative; z-index: 101; width: 52px; height: 52px; flex: none;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  transition: transform .4s var(--ease-back);
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger::before {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--pink); box-shadow: 0 8px 22px -8px rgba(var(--pink-rgb), .9);
  transition: background-color .35s ease, transform .45s var(--ease-back);
}
.burger:active::before { transform: scale(.92); }
.burger__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.burger__ring circle { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.burger__track { stroke: rgba(255,255,255,.22); }
.burger__prog  {
  stroke: var(--lime);
  stroke-dasharray: 138; stroke-dashoffset: 138;
  transition: stroke-dashoffset .15s linear;
}
.burger__bars { position: relative; display: grid; gap: 5px; place-items: center; }
.burger__bars i {
  display: block; height: 2.5px; border-radius: 3px; background: #fff;
  transition: transform .45s var(--ease-back), width .35s var(--ease), opacity .2s;
}
.burger__bars i:nth-child(1) { width: 20px; }
.burger__bars i:nth-child(2) { width: 13px; justify-self: end; margin-right: 3px; }
.burger:hover .burger__bars i:nth-child(2) { width: 20px; margin-right: 0; }
.burger.is-open::before { background: var(--lime); }
.burger.is-open .burger__bars i { background: var(--ink); width: 20px; margin: 0; }
.burger.is-open .burger__bars i:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.burger.is-open .burger__bars i:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
.burger.is-open .burger__prog { stroke: var(--pink); }

/* Handy: Kopfzeile verschwindet beim Runterscrollen und kommt beim
   Hochscrollen als schwebende Leiste zurück. */
@media (max-width: 999px) {
  .header { padding-block: .55rem; }
  .header__inner {
    border-radius: 999px; padding: .35rem .35rem .35rem .8rem;
    transition: background-color .4s ease, box-shadow .4s ease,
                backdrop-filter .4s ease, padding .3s ease, transform .5s var(--ease);
  }
  .header.is-float .header__inner {
    background: rgba(var(--ink-rgb), .82);
    backdrop-filter: blur(20px) saturate(1.7);
    -webkit-backdrop-filter: blur(20px) saturate(1.7);
    box-shadow: 0 10px 34px -12px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.1);
  }
  .header.is-float { padding-inline: .35rem; }
  .header.is-stuck { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .header.is-hidden { transform: translateY(-135%); }
  .menu.is-open ~ * .header, .header.menu-open { transform: none !important; }
}

/* Fullscreen-Menü */
.menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: calc(env(safe-area-inset-top) + 5.5rem) var(--gut) calc(env(safe-area-inset-bottom) + 1.6rem);
  opacity: 0; visibility: hidden; pointer-events: none;
  clip-path: circle(0% at calc(100% - 3.2rem) 3.2rem);
  transition: clip-path .8s var(--ease), opacity .3s ease, visibility .3s;
  overflow-y: auto; overscroll-behavior: contain;
}
.menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; clip-path: circle(155% at calc(100% - 3.2rem) 3.2rem); }
.menu__glow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.menu__glow i {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  animation: floaty 14s ease-in-out infinite;
}
.menu__glow i:nth-child(1) { width: 46vmin; height: 46vmin; background: var(--pink); top: -12vmin; right: -10vmin; }
.menu__glow i:nth-child(2) { width: 40vmin; height: 40vmin; background: var(--lime); bottom: -14vmin; left: -8vmin; animation-delay: -5s; }
.menu__nav { align-self: center; padding-block: 1.5rem; position: relative; z-index: 1; }
.menu__nav ol { list-style: none; padding: 0; margin: 0; counter-reset: m; }
.menu__nav li { overflow: hidden; }
.menu__nav a {
  display: flex; align-items: baseline; gap: .8rem;
  font-family: var(--font-display); font-size: clamp(2.3rem, 10.5vw, 4rem); line-height: 1.14;
  padding-block: .08em; transform: translateY(115%);
  transition: transform .8s var(--ease), color .25s ease;
}
.menu.is-open .menu__nav a { transform: translateY(0); }
.menu__nav li:nth-child(1) a { transition-delay: .10s; }
.menu__nav li:nth-child(2) a { transition-delay: .16s; }
.menu__nav li:nth-child(3) a { transition-delay: .22s; }
.menu__nav li:nth-child(4) a { transition-delay: .28s; }
.menu__nav li:nth-child(5) a { transition-delay: .34s; }
.menu__nav li:nth-child(6) a { transition-delay: .40s; }
.menu__nav li:nth-child(7) a { transition-delay: .46s; }
.menu__nav li:nth-child(8) a { transition-delay: .52s; }
.menu__nav li:nth-child(9) a { transition-delay: .58s; }
.menu__nav a::before {
  counter-increment: m; content: counter(m, decimal-leading-zero);
  font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  color: var(--pink); letter-spacing: .1em; flex: none; transform: translateY(-.35em);
}
.menu__nav a:hover, .menu__nav a:focus-visible { color: var(--lime); transform: translateX(10px); }
.menu__foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; justify-content: space-between; font-size: .88rem; opacity: .75; border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.1rem; }
.menu__foot a:hover { color: var(--lime); }
body.is-locked { overflow: hidden; }

/* ------------------------------------------------------------ Hero */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  padding-block: clamp(6.5rem, 15vh, 10rem) clamp(4rem, 10vh, 7rem);
  overflow: hidden; isolation: isolate;
}
.hero__photo { position: absolute; inset: -6% 0 0; z-index: -4; overflow: hidden; }
.hero__photo img {
  width: 100%; height: 112%; object-fit: cover; opacity: .46;
  transform: scale(1.14); filter: grayscale(.12) contrast(1.08) saturate(1.1); will-change: transform;
}
.hero__photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 90% at 22% 55%, rgba(var(--ink-rgb),.9) 0%, rgba(var(--ink-rgb),.4) 55%, transparent 80%),
    linear-gradient(180deg, rgba(var(--ink-rgb),.55) 0%, rgba(var(--ink-rgb),.5) 45%, var(--ink) 100%);
}
.hero__grid {
  position: absolute; inset: 0; z-index: -2; opacity: .1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 45%, #000 20%, transparent 78%);
}

.hero__inner { display: grid; gap: clamp(1rem, 2.1vw, 1.7rem); position: relative; justify-items: start; z-index: 2; }
.hero__badge {
  font-weight: 700;
  display: inline-flex; align-items: center; gap: .55rem; align-self: start;
  background: var(--lime); color: var(--ink); border-radius: 999px;
  padding: .48rem 1.1rem; font-family: var(--font-display); font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 10px 26px -8px rgba(var(--lime-rgb), .9);
}
.hero__badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); animation: pulse 1.9s ease-in-out infinite; }

.hero__logowrap { position: relative; }
.hero__logo {
  max-width: min(430px, 62%); width: 100%; height: auto;
  border-radius: clamp(10px, 1.6vw, 18px);
  box-shadow: 0 26px 60px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08);
  transform: rotate(-1.8deg);
  transition: transform .6s var(--ease-back);
}
.hero__logo:hover { transform: rotate(1deg) scale(1.03); }

.hero__date {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.1rem;
  font-family: var(--font-display); line-height: .88;
}
.hero__date .day { font-size: clamp(3.9rem, 12.5vw, 8.4rem); color: var(--pink); display: inline-block; }
.hero__date .month { font-size: clamp(2rem, 5.6vw, 3.9rem); }
.hero__date .meta { font-family: var(--font-body); font-weight: 700; font-size: clamp(.95rem, 1.6vw, 1.15rem); opacity: .82; letter-spacing: .02em; }

.hero__facts { display: flex; flex-wrap: wrap; gap: .55rem; }
.fact {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1.05rem; border-radius: 999px; font-size: .9rem; font-weight: 700;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .35s var(--ease-back), background-color .3s ease, border-color .3s ease;
  will-change: transform;
}
.fact:hover { background: rgba(var(--lime-rgb), .2); border-color: rgba(var(--lime-rgb), .6); color: var(--lime); }
.fact svg { width: 1.05em; height: 1.05em; flex: none; color: var(--lime); }

.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Rotierender Kreis-Sticker */
.sticker {
  position: absolute; width: clamp(96px, 12vw, 150px); aspect-ratio: 1;
  display: grid; place-items: center; z-index: 4; pointer-events: none;
}
.sticker__ring { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.sticker__ring text { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; fill: var(--ink); }
.sticker__disc {
  position: absolute; inset: 0; border-radius: 50%; background: var(--lime);
  box-shadow: var(--shadow-sticker);
}
.sticker__mid {
  font-weight: 700;
  position: relative; width: 44%; height: 44%; border-radius: 50%;
  background: var(--pink); display: grid; place-items: center; color: #fff;
  font-family: var(--font-display); font-size: clamp(.62rem, 1.1vw, .8rem); text-align: center; line-height: 1;
}
.sticker { pointer-events: auto; }
.sticker__disc { transition: transform .5s var(--ease-back); }
.sticker:hover .sticker__disc { transform: scale(1.09); }
.sticker:active .sticker__disc { transform: scale(.95); }

.hero .sticker { right: clamp(-1rem, 3vw, 6rem); top: clamp(6rem, 18vh, 12rem); }
.sticker--floh { right: clamp(-1.5rem, 2vw, 3rem); top: clamp(2rem, 6vh, 5rem); }
.sticker--floh .sticker__disc { background: var(--pink); }
.sticker--floh .sticker__ring text { fill: #fff; }
.sticker--floh .sticker__mid { background: var(--lime); color: var(--ink); }
.sticker--kids { left: clamp(-1.5rem, 2vw, 2rem); bottom: clamp(2rem, 8vh, 6rem); }
.sticker--kids .sticker__disc { background: var(--accent); }
.sticker--kids .sticker__mid { background: var(--ink); color: var(--accent); }
@media (max-width: 900px) {
  .hero .sticker { right: .4rem; top: auto; bottom: 2.5rem; width: 86px; }
  .sticker--floh { right: .4rem; top: .5rem; width: 80px; }
  .sticker--kids { display: none; }
}

/* Scroll-Hinweis */
.scroller {
  position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 2rem); transform: translateX(-50%);
  display: grid; justify-items: center; gap: .5rem; font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; opacity: .55; z-index: 3;
}
.scroller i { display: block; width: 1px; height: 42px; background: linear-gradient(var(--lime), transparent); animation: scrolldown 2.1s ease-in-out infinite; }

/* ------------------------------------------------------------ Laufband */
.ticker {
  position: relative; overflow: hidden; padding-block: .85rem;
  background: var(--lime); color: var(--ink);
  border-block: 3px solid var(--ink);
  transform: rotate(-1.5deg) scale(1.04); z-index: 5;
  margin-block: -.6rem;
}
.ticker--pink { background: var(--pink); color: #fff; border-color: var(--pink); transform: rotate(1.1deg) scale(1.04); }
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__track > span {
  display: inline-flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem;
  font-family: var(--font-display); font-size: clamp(.95rem, 2vw, 1.5rem);
  letter-spacing: .01em; white-space: nowrap;
}
.ticker__dot { width: .45em; height: .45em; border-radius: 50%; background: currentColor; flex: none; }
/* Fallback ohne JS */
.no-js-marquee .ticker__track { animation: marquee 32s linear infinite; }

/* Foto-Laufband */
.ticker--photo {
  background: var(--ink); border-color: var(--ink); padding-block: 0;
  transform: rotate(-.9deg) scale(1.04); margin-block: -1.5rem;
}
.ticker--photo .ticker__track > span { gap: .55rem; padding-right: .55rem; }
.ticker--photo img {
  height: clamp(120px, 17vw, 210px); width: auto; border-radius: 12px;
  object-fit: cover; flex: none; filter: saturate(1.05);
  transition: transform .5s var(--ease-back), filter .4s ease;
}
.ticker--photo a:hover img { transform: scale(1.06) rotate(-1.5deg); filter: saturate(1.3); }
.no-js-marquee .ticker--photo .ticker__track { animation-duration: 55s; }

/* ------------------------------------------------------------ Karten
   Wichtig: Beim Hover bewegt sich NICHT die Karte selbst, sondern nur ihre
   Hintergrundebene. Die Trefferfläche bleibt exakt an Ort und Stelle – sonst
   rutscht sie unter dem Zeiger weg, der Hover bricht ab, kommt wieder …
   und genau das war das Zucken. */
.card {
  position: relative; border-radius: var(--radius); padding: clamp(1.35rem, 2.4vw, 2rem);
  background: transparent; border: 0; isolation: isolate;
  transform-style: preserve-3d; will-change: transform;
}
/* Ebene 1: Fläche und Rand – diese bewegt sich */
.card::before {
  content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .5s var(--ease), background-color .35s ease,
              border-color .35s ease, box-shadow .5s var(--ease);
}
.section--paper .card::before { background: rgba(0,0,0,.035); border-color: rgba(0,0,0,.09); }
.card:hover::before {
  transform: translateY(-7px) scale(1.022);
  border-color: rgba(var(--now-rgb), .55);
  box-shadow: var(--shadow-2);
}
/* Ebene 2: Lichtreflex, der dem Zeiger folgt */
.card::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--now-rgb), .22), transparent 60%);
  opacity: 0; transition: opacity .4s ease, transform .5s var(--ease);
  pointer-events: none;
}
.card:hover::after { opacity: 1; transform: translateY(-7px) scale(1.022); }

.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.card__title { font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.68rem); line-height: 1.1; }
.card__meta { font-size: .84rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .62; }
.card__text { margin-top: .7rem; opacity: .84; font-size: .97rem; }
.card__logo { width: 100%; max-width: 150px; height: 68px; object-fit: contain; object-position: left center; margin-bottom: .9rem; }
.card__link { margin-top: 1.05rem; display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .92rem; color: var(--pink); }
.section--ink .card__link { color: var(--now); }
.card__link svg { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.card__link:hover svg { transform: translateX(5px); }

.card > * { position: relative; z-index: 1; }
.card__num {
  position: absolute !important; right: .9rem; bottom: .5rem; z-index: 0 !important;
  font-family: var(--font-display); font-size: 4.6rem; line-height: 1;
  opacity: .08; pointer-events: none; user-select: none;
}
.section--paper .card__num { opacity: .11; }
.card__pin {
  position: absolute !important; top: -.4rem; right: -.4rem; z-index: 3 !important;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--pink); color: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .74rem; line-height: 1; text-align: center;
  transform: rotate(11deg) scale(.9); box-shadow: var(--shadow-sticker);
  transition: transform .5s var(--ease-back);
}
.card:hover .card__pin { transform: rotate(-7deg) scale(1.08) translateY(-4px); }

.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); }

/* ------------------------------------------------------------ Programm: Timetable
   Statt einer endlosen Liste: nach Uhrzeit gruppiert, parallel laufende
   Punkte stehen nebeneinander. Auf dem Handy wird jede Zeitgruppe zu einem
   wischbaren Kartenstapel. */
.tt { position: relative; display: grid; gap: clamp(.6rem, 1.3vw, 1rem); }

.tt__row {
  position: relative; display: grid; align-items: start;
  grid-template-columns: clamp(78px, 9vw, 118px) 1fr;
  gap: 0 clamp(1rem, 2.2vw, 2rem);
  padding-bottom: clamp(.7rem, 1.5vw, 1.1rem);
}
.tt__row + .tt__row { border-top: 1px solid rgba(255,255,255,.09); padding-top: clamp(.7rem, 1.5vw, 1.1rem); }
.section--paper .tt__row + .tt__row { border-top-color: rgba(0,0,0,.09); }

.tt__time { position: sticky; top: 92px; }
.tt__time b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 2.1rem); line-height: 1;
  color: var(--pink); font-variant-numeric: tabular-nums;
}
.tt__time span {
  display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: .5; margin-top: .3rem;
}
.tt__dot {
  position: absolute; left: calc(clamp(78px, 9vw, 118px) + clamp(1rem, 2.2vw, 2rem) / 2 - 6px);
  top: .55em; width: 12px; height: 12px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 0 4px rgba(var(--lime-rgb), .16);
}

.tt__items { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

/* Programmkarte – die Bewegung passiert im Inneren, damit der Zeiger beim
   Hover nie aus dem Element rutscht (das war das Zucken). */
.tt__card {
  position: relative; border-radius: 16px; padding: .95rem 1.1rem;
  isolation: isolate; overflow: hidden;
  transition: color .3s ease;
}
.tt__card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12);
  transition: transform .45s var(--ease), background-color .35s ease, border-color .35s ease, box-shadow .45s var(--ease);
}
.section--paper .tt__card::before { background: rgba(0,0,0,.035); border-color: rgba(0,0,0,.09); }
.tt__card:hover::before {
  transform: scale(1.035);
  background: rgba(var(--now-rgb), .1);
  border-color: rgba(var(--now-rgb), .5);
  box-shadow: var(--shadow-2);
}
.tt__card > * { position: relative; }
.tt__card--hl::before { border-color: rgba(var(--pink-rgb), .45); background: rgba(var(--pink-rgb), .08); }

.tt__cat {
  display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .5rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 999px;
  background: rgba(var(--lime-rgb), .16); color: var(--lime);
}
.section--paper .tt__cat { background: rgba(var(--pink-rgb), .12); color: var(--pink); }
.tt__card--hl .tt__cat { background: var(--pink); color: #fff; }
.tt__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.1; }
.tt__sub { opacity: .74; font-size: .93rem; margin-top: .2rem; }
.tt__meta {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .55rem;
  font-size: .82rem; opacity: .62;
}
.tt__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.tt__desc { margin-top: .5rem; opacity: .76; font-size: .9rem; }
.tt__desc p + p { margin-top: .4rem; }

/* Fortschrittslinie links neben der Zeitspalte */
.tt__rail {
  position: absolute; left: calc(clamp(78px, 9vw, 118px) + clamp(1rem, 2.2vw, 2rem) / 2 - 1.5px);
  top: 0; bottom: 0; width: 3px; border-radius: 3px;
  background: rgba(255,255,255,.1); overflow: hidden;
}
.section--paper .tt__rail { background: rgba(0,0,0,.09); }
.tt__rail i { position: absolute; inset: 0 0 auto 0; height: 0; background: linear-gradient(var(--lime), var(--pink)); border-radius: 3px; }

/* --- Handy: Zeitgruppe wird zum wischbaren Stapel --- */
@media (max-width: 760px) {
  .tt__row { grid-template-columns: 1fr; gap: .6rem; padding-bottom: 1.1rem; }
  .tt__row + .tt__row { padding-top: 1.1rem; }
  .tt__rail, .tt__dot { display: none; }
  .tt__time {
    position: static; display: inline-flex; align-items: baseline; gap: .55rem;
    background: var(--pink); color: #fff; border-radius: 999px;
    padding: .3rem .9rem; justify-self: start; transform: rotate(-1.2deg);
  }
  .tt__time b { font-size: 1.15rem; color: #fff; }
  .tt__time span { margin: 0; opacity: .8; font-size: .68rem; }
  .tt__items--many {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
    gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-inline: var(--gut) 30%; margin-inline: calc(-1 * var(--gut)) ;
    scrollbar-width: none; -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }
  .tt__items--many::-webkit-scrollbar { display: none; }
  .tt__items--many > * { scroll-snap-align: center; }
}

/* ------------------------------------------------------------ Filter-Chips */
.chips {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 2rem;
}
.chip {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .5rem 1.05rem; border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  background: transparent; color: inherit; border: 2px solid currentColor;
  opacity: .5; -webkit-appearance: none; appearance: none;
  transition: opacity .25s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
}
.chip svg { width: 1em; height: 1em; }
.chip:hover { opacity: 1; }
.chip.is-on {
  opacity: 1; background: var(--lime); border-color: var(--lime); color: var(--ink);
}
/* Handy: Chips laufen in einer Zeile mit Einrastpunkten */
@media (max-width: 760px) {
  .chips {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    scroll-padding-inline-start: var(--gut);
    padding: .2rem var(--gut) .8rem; margin-inline: calc(-1 * var(--gut));
    scrollbar-width: none; -ms-overflow-style: none; margin-bottom: 1.2rem;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; scroll-snap-align: start; }
}

/* ------------------------------------------------------------ Wisch-Stapel (Handy)
   Karten laufen horizontal mit Einrastpunkten statt endlos untereinander. */
@media (max-width: 760px) {
  .swipe {
    display: grid; grid-auto-flow: column; grid-auto-columns: 80%;
    gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: .3rem var(--gut) 1rem; margin-inline: calc(-1 * var(--gut));
    scrollbar-width: none; -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { scroll-snap-align: center; margin: 0; }
  .swipe--wide { grid-auto-columns: 88%; }
  .swipe--narrow { grid-auto-columns: 62%; }
  .swipe > :last-child { margin-right: calc(var(--gut) / 2); }
}
/* Fortschrittsbalken unter einem Wisch-Stapel */
.swipe-bar { display: none; }
@media (max-width: 760px) {
  .swipe-bar {
    display: block; height: 4px; border-radius: 4px; margin-top: -.3rem;
    background: rgba(255,255,255,.12); overflow: hidden; position: relative;
  }
  .section--paper .swipe-bar { background: rgba(0,0,0,.1); }
  .swipe-bar i {
    position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
    background: linear-gradient(90deg, var(--lime), var(--pink)); border-radius: 4px;
    transition: transform .12s linear;
  }
  .swipe-hint {
    display: flex; align-items: center; gap: .4rem; margin-top: .6rem;
    font-size: .78rem; opacity: .5; letter-spacing: .04em;
  }
  .swipe-hint svg { width: 15px; height: 15px; animation: nudge 1.8s ease-in-out infinite; }
}
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* ------------------------------------------------------------ Bands / Gastro */
.bands { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
/* Bei nur einem Eintrag: breite Karte im Querformat */
.bands > :only-child { max-width: 620px; }
.band__logo-box {
  position: relative; display: grid; place-items: center; height: 130px; border-radius: 16px;
  margin-bottom: 1rem; background: rgba(255,255,255,.06); padding: 1rem; overflow: hidden;
}
.section--paper .band__logo-box { background: rgba(0,0,0,.045); }
.band__logo-box img { max-height: 100%; width: auto; object-fit: contain; }
.band__logo-box::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(var(--now-rgb),.07) 0 10px, transparent 10px 20px);
  opacity: .8;
}
.band__ph { opacity: .22; }
.band__time {
  display: inline-block; font-family: var(--font-display); font-size: 1.05rem;
  background: var(--pink); color: #fff; padding: .22rem .75rem; border-radius: 8px;
  transform: rotate(-2deg);
}

/* ------------------------------------------------------------ Flohmarkt */
.floh { display: grid; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
@media (min-width: 900px) { .floh { grid-template-columns: 1.15fr .85fr; } }
.floh__box {
  position: relative; border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.6rem);
  background: var(--ink); color: var(--paper); overflow: hidden;
  box-shadow: var(--shadow-3);
}
.floh__box::before {
  content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%;
  background: var(--pink); filter: blur(70px); opacity: .45; top: -80px; right: -60px;
  animation: floaty 12s ease-in-out infinite;
}
.floh__box > * { position: relative; }
.deadline {
  display: grid; gap: .18rem; padding: 1.1rem 1.35rem; border-radius: 18px;
  background: rgba(var(--pink-rgb), .16); border: 1px dashed rgba(var(--pink-rgb), .55);
  margin-block: 1.35rem;
}
.deadline b { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.9rem); color: var(--pink); line-height: 1; }
.deadline span { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.deadline.is-over { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
.deadline.is-over b { color: var(--paper); opacity: .75; }
.mailrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  padding: .9rem 1.15rem; border-radius: 14px; background: rgba(255,255,255,.07);
  font-weight: 700; word-break: break-word;
  transition: background-color .3s ease;
}
.mailrow:hover { background: rgba(var(--lime-rgb), .12); }
.mailrow a { color: var(--lime); }
.mailrow a:hover { text-decoration: underline; }
.floh__pic { border-radius: 22px; overflow: hidden; position: relative; }
.floh__pic img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: opacity .45s ease; }

/* ------------------------------------------------------------ Kinderprogramm */
.kids { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.kid__ico {
  width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center;
  background: var(--lime); color: var(--ink); margin-bottom: 1rem;
  transition: transform .5s var(--ease-elastic), border-radius .5s var(--ease), background-color .4s ease;
}
.card:nth-child(3n+2) .kid__ico { background: var(--pink); color: #fff; }
.card:nth-child(3n+3) .kid__ico { background: var(--accent); color: var(--ink); }
.card:hover .kid__ico { transform: rotate(-12deg) scale(1.14); border-radius: 50%; }
.kid__ico svg { width: 30px; height: 30px; }

/* ------------------------------------------------------------ Zahlen-Kacheln */
.infos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.info {
  position: relative; padding: 1.6rem; border-radius: var(--radius);
  background: transparent; border: 0; isolation: isolate; cursor: pointer;
}
.info::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: transform .5s var(--ease-back), border-color .3s ease, background-color .3s ease;
}
.section--paper .info::before { background: rgba(0,0,0,.035); border-color: rgba(0,0,0,.08); }
.info:hover::before {
  transform: translateY(-7px) rotate(-1.1deg) scale(1.02);
  border-color: rgba(var(--now-rgb), .55); background: rgba(var(--now-rgb), .07);
}
.info > * { position: relative; }
.info b { display: block; font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--lime); margin-bottom: .35rem; line-height: 1; }
.section--paper .info b { color: var(--pink); }
.info span { font-size: .93rem; opacity: .8; }
.info__ico {
  position: absolute; right: 1rem; top: 1rem; width: 30px; height: 30px;
  opacity: .18; transition: transform .5s var(--ease-back), opacity .3s ease;
}
.info:hover .info__ico { transform: rotate(14deg) scale(1.25); opacity: .4; }

/* ------------------------------------------------------------ Galerie: Mosaik
   Bewusst KEIN CSS-columns-Masonry: dort bricht das Layout jedes Mal neu um,
   sobald ein nachgeladenes Bild seine Höhe bekommt – beim Scrollen springt
   dann die halbe Galerie. Ein Raster mit festen Zellen steht still, und
   einzelne größere Kacheln geben ihm trotzdem Rhythmus. */
.gal {
  display: grid; grid-auto-flow: dense;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.4rem, 1vw, .8rem);
}
@media (min-width: 640px)  { .gal { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .gal { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1500px) { .gal { grid-template-columns: repeat(5, 1fr); } }

.gal__item {
  position: relative; margin: 0; padding: 0; border: 0;
  aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  cursor: zoom-in; display: block; width: 100%;
  background: rgba(255,255,255,.05);
  transition: box-shadow .4s ease;
  contain: paint;
}
.gal__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s var(--ease), filter .5s ease;
}
.gal__item--big  { grid-column: span 2; grid-row: span 2; }
.gal__item--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gal__item--tall { grid-row: span 2; aspect-ratio: 1 / 2; }
@media (max-width: 639px) {
  .gal__item--tall { grid-row: span 1; aspect-ratio: 1; }
}
.gal__item:hover { box-shadow: var(--shadow-2); z-index: 2; }
.gal__item:hover img { transform: scale(1.07); filter: saturate(1.2); }
.gal__item::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(0deg, rgba(var(--pink-rgb), .62), transparent 55%);
  transition: opacity .4s ease;
}
.gal__item:hover::after { opacity: 1; }
.gal__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.5rem .9rem .8rem;
  font-weight: 800; font-size: .86rem; color: #fff; opacity: 0; transform: translateY(12px);
  transition: opacity .4s ease, transform .45s var(--ease);
}
.gal__item:hover .gal__cap { opacity: 1; transform: translateY(0); }
.gal__zoom {
  position: absolute; top: .55rem; right: .55rem; z-index: 2; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
  display: grid; place-items: center; color: #fff;
  opacity: 0; transform: scale(.6) rotate(-45deg); transition: all .4s var(--ease-back);
}
.gal__item:hover .gal__zoom { opacity: 1; transform: scale(1) rotate(0); }

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(8,8,8,.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
  padding: clamp(.6rem, 3vw, 2.5rem);
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb__img {
  max-width: 100%; max-height: 82svh; border-radius: 12px; object-fit: contain;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.9);
  transform: scale(.92); transition: transform .5s var(--ease-back);
}
.lb.is-open .lb__img { transform: scale(1); }
.lb__cap { margin-top: 1rem; text-align: center; font-size: .92rem; opacity: .8; }
.lb__btn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.6); color: #fff; cursor: pointer;
  display: grid; place-items: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color .25s ease, transform .25s var(--ease-back);
}
.lb__btn:hover { background: var(--pink); transform: translateY(-50%) scale(1.12); }
.lb__prev { left: clamp(.5rem, 2vw, 1.6rem); }
.lb__next { right: clamp(.5rem, 2vw, 1.6rem); }
.lb__close { top: clamp(.7rem, 2vw, 1.6rem); right: clamp(.7rem, 2vw, 1.6rem); transform: none; }
.lb__close:hover { transform: scale(1.12) rotate(90deg); }
.lb__count { position: absolute; bottom: clamp(.8rem, 2vw, 1.6rem); left: 50%; transform: translateX(-50%); font-size: .82rem; letter-spacing: .14em; opacity: .6; }

/* ------------------------------------------------------------ Unterstützer */
.sup { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); align-items: stretch; }
/* Jede Karte färbt sich nach dem hochgeladenen Logo. Die Farben kommen als
   CSS-Variablen aus PHP – dunkles Logo bekommt eine helle Karte, helles Logo
   eine dunkle. So bleibt beides sicher lesbar, Bild wie Text. */
.sup__item {
  --sup-bg: #f5f5f3; --sup-bg2: #e9e9e5; --sup-line: #d8d8d2;
  --sup-ink: #1c1c1c; --sup-mut: #5d5d5d;
  position: relative; display: grid; align-content: start; justify-items: center;
  gap: .55rem; text-align: center;
  padding: 1.25rem 1rem 1.15rem; border-radius: 20px; min-height: 138px;
  background: transparent; border: 0; isolation: isolate; color: var(--sup-ink);
}
.sup__item::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(160deg, var(--sup-bg), var(--sup-bg2));
  border: 1px solid var(--sup-line);
  box-shadow: 0 10px 26px -18px rgba(0,0,0,.7);
  transition: transform .5s var(--ease-back), box-shadow .35s var(--ease);
}
.sup__item:hover::before { transform: translateY(-7px) rotate(-1.8deg) scale(1.035); box-shadow: 0 22px 40px -20px rgba(0,0,0,.8); }

/* Weiße Platte unter dem Logo: die meisten Logos sind für Weiß gezeichnet.
   Bei einer dunklen Karte entfällt sie, dort trägt der dunkle Grund. */
.sup__pic {
  display: grid; place-items: center; width: 100%; min-height: 66px;
  padding: .5rem .7rem; border-radius: 13px;
  background: rgba(255,255,255,.86);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.sup__item--dark .sup__pic { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
/* Ohne Logo: Initialen in der Kartenfarbe, damit die Reihe gleich aufgebaut bleibt */
.sup__pic--mono {
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem;
  letter-spacing: .02em; color: var(--sup-ink); opacity: .55;
  background: rgba(255,255,255,.5);
}
.sup__item--dark .sup__pic--mono { background: rgba(255,255,255,.06); }
.sup__item img { max-height: 52px; width: auto; max-width: 100%; object-fit: contain; }
.sup__item b { font-family: var(--font-display); font-size: .98rem; line-height: 1.15; color: var(--sup-ink); }
.sup__item span { font-size: .76rem; color: var(--sup-mut); line-height: 1.3; }

/* ------------------------------------------------------------ Formular */
.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .38rem; }
.field label { font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; opacity: .72; }
.field input, .field textarea, .field select {
  width: 100%; padding: .95rem 1.15rem; border-radius: 14px;
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.16); color: inherit;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease, transform .25s var(--ease);
}
.section--paper .field input, .section--paper .field textarea, .section--paper .field select {
  background: rgba(0,0,0,.045); border-color: rgba(0,0,0,.16);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0; border-color: var(--lime); box-shadow: 0 0 0 4px rgba(var(--lime-rgb), .22); transform: translateY(-1px);
}
.section--paper .field input:focus, .section--paper .field textarea:focus { background: #fff; }
.field textarea { min-height: 150px; resize: vertical; }
.field__hint { font-size: .8rem; opacity: .6; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .88rem; opacity: .82; }
.consent input { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .18rem; accent-color: var(--pink); }

.note { padding: 1rem 1.3rem; border-radius: 14px; font-weight: 700; font-size: .95rem; }
.note--ok  { background: rgba(var(--lime-rgb), .16); border: 1px solid rgba(var(--lime-rgb), .5); color: var(--lime); }
.note--err { background: rgba(var(--pink-rgb), .14); border: 1px solid rgba(var(--pink-rgb), .5); color: var(--pink); }
.section--paper .note--ok { color: #4b5c00; }

/* ------------------------------------------------------------ Footer */
.footer { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 7vw, 5rem) 2rem; position: relative; overflow: hidden; }
.footer__top { display: grid; gap: 2.4rem; }
@media (min-width: 860px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h4 { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .9rem; color: var(--lime); }
.footer ul { list-style: none; padding: 0; display: grid; gap: .45rem; font-size: .95rem; }
.footer a { transition: color .25s ease, transform .25s var(--ease); display: inline-block; }
.footer a:hover { color: var(--lime); transform: translateX(4px); }
.footer__bottom {
  margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; align-items: center;
  font-size: .85rem; opacity: .68;
}
.social { display: flex; gap: .5rem; margin-top: 1rem; }
.social a {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.09); transition: background-color .3s ease, transform .4s var(--ease-back);
}
.social a:hover { background: var(--pink); transform: translateY(-4px) scale(1.12) rotate(-8deg); color: #fff; }
.social svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------ Scroll-Reveal (Fallback ohne GSAP) */
[data-rev] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
[data-rev].is-in { opacity: 1; transform: none; }
[data-rev="left"]  { transform: translateX(-26px); }
[data-rev="right"] { transform: translateX(26px); }
@media (max-width: 759px) {
  [data-rev="left"], [data-rev="right"] { transform: translateY(14px); }
}
[data-rev="scale"] { transform: scale(.92); }
[data-rev-d="1"] { transition-delay: .07s; }
[data-rev-d="2"] { transition-delay: .14s; }
[data-rev-d="3"] { transition-delay: .21s; }
[data-rev-d="4"] { transition-delay: .28s; }
[data-rev-d="5"] { transition-delay: .35s; }
[data-rev-d="6"] { transition-delay: .42s; }
/* Wenn GSAP übernimmt, macht es die Sichtbarkeit selbst */
body.gsap-on [data-rev] { transition: none; }

.progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 120; width: 0;
  background: linear-gradient(90deg, var(--lime), var(--pink), var(--accent));
}

/* Cursor */
.cursor {
  position: fixed; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--now); pointer-events: none; z-index: 150; opacity: 0;
  transition: opacity .3s ease, width .35s var(--ease-back), height .35s var(--ease-back), background-color .3s ease, border-color .3s;
  will-change: transform;
}
.cursor.is-on { opacity: .8; }
.cursor.is-big { width: 68px; height: 68px; background: rgba(var(--now-rgb), .16); }
.cursor__dot {
  position: fixed; top: 0; left: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pink); pointer-events: none; z-index: 151; opacity: 0;
  transition: opacity .3s ease; will-change: transform;
}
.cursor__dot.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor__dot { display: none; } }

.totop {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 80;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--pink); color: #fff; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .35s ease, transform .4s var(--ease-back), visibility .35s, background-color .3s ease;
  box-shadow: var(--shadow-2);
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--lime); color: var(--ink); transform: translateY(-5px) scale(1.12) rotate(-8deg); }

/* Konfetti-Leinwand */
.confetti-canvas { position: fixed; inset: 0; z-index: 190; pointer-events: none; }

/* ------------------------------------------------------------ Trenner */
.slant { position: relative; }
.slant::before {
  content: ''; position: absolute; top: -1px; left: -2%; right: -2%; height: clamp(42px, 6vw, 92px);
  background: inherit; transform: skewY(-1.7deg); transform-origin: top left; z-index: -1;
}

/* ------------------------------------------------------------ Animationen */
@keyframes morph {
  0%   { border-radius: 46% 54% 62% 38% / 52% 44% 56% 48%; transform: translate(0,0) rotate(0deg) scale(1); }
  50%  { border-radius: 64% 36% 38% 62% / 40% 62% 38% 60%; transform: translate(4%, -5%) rotate(11deg) scale(1.1); }
  100% { border-radius: 38% 62% 56% 44% / 62% 38% 64% 36%; transform: translate(-4%, 4%) rotate(-8deg) scale(.94); }
}
@keyframes auroraDrift {
  from { transform: translate3d(-1.5%, 1%, 0) scale(1); }
  to   { transform: translate3d(2.5%, -2.5%, 0) scale(1.1); }
}
@keyframes floaty { 0%,100% { transform: translate(0,0); } 50% { transform: translate(5%, -6%); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .5; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scrolldown { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes grainshift {
  0%,100% { transform: translate(0,0); } 25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -2%); }
}
@keyframes wobble {
  0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); }
}

/* ------------------------------------------------------------ Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-rev] { opacity: 1 !important; transform: none !important; }
  .gal__item { opacity: 1 !important; transform: none !important; }
  .menu__nav a { transform: none !important; }
  .mark { background-size: 100% 100% !important; }
  .cursor, .cursor__dot, .grain, .fx-canvas { display: none !important; }
}
/* Effektstufen aus dem Backend */
body[data-fx="soft"] .aurora i { animation: none; }
body[data-fx="soft"] .grain, body[data-fx="soft"] .fx-canvas,
body[data-fx="soft"] .cursor, body[data-fx="soft"] .cursor__dot { display: none; }
body[data-fx="off"] .aurora, body[data-fx="off"] .grain, body[data-fx="off"] .fx-canvas,
body[data-fx="off"] .cursor, body[data-fx="off"] .cursor__dot, body[data-fx="off"] .deco,
body[data-fx="off"] .sticker__ring { display: none; }
body[data-fx="off"] .ticker__track { animation: none; }
body[data-fx="off"] [data-rev] { opacity: 1; transform: none; transition: none; }
body[data-fx="off"] .hero__photo img { transform: none; }

/* ------------------------------------------------------------ Druck */
@media print {
  .header, .menu, .burger, .totop, .cursor, .cursor__dot, .progress, .scroller,
  .ticker, .lb, .aurora, .grain, .fx-canvas, .deco, .sticker { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; break-inside: avoid; }
  [data-rev] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
}

@media (min-resolution: 2dppx) { .grain { opacity: .035; } }

/* Hilfsklassen */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; top: -100px; left: 1rem; z-index: 300; padding: .8rem 1.2rem;
  background: var(--lime); color: var(--ink); border-radius: 0 0 12px 12px; font-weight: 800;
  transition: top .25s ease;
}
.skip:focus { top: 0; }
.center { text-align: center; }

/* ------------------------------------------------------------ Wimpelketten
   Gehört zu jedem Straßenfest. Die Wimpel hängen an einer durchhängenden
   Schnur und wehen versetzt – rein per CSS, ohne JavaScript. */
.bunting {
  position: absolute; left: -2%; right: -2%; top: 0; height: clamp(52px, 7vw, 96px);
  pointer-events: none; z-index: 4; color: rgba(255,255,255,.5);
  overflow: visible;
}
.section--paper .bunting { color: rgba(0,0,0,.35); }
.bunting svg { width: 100%; height: 100%; overflow: visible; }
.bunting__flag {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: flagWave 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.17s);
}
.bunting--bottom { top: auto; bottom: 0; transform: scaleY(-1); }
.bunting--sub { opacity: .55; }

@keyframes flagWave {
  0%, 100% { transform: rotate(-7deg) scaleX(1); }
  35%      { transform: rotate(5deg) scaleX(.86); }
  70%      { transform: rotate(-3deg) scaleX(1.04); }
}

/* Schwebende Luftballons für die dunklen Abschnitte */
.balloons { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.balloon {
  position: absolute; bottom: -22%; width: 46px; aspect-ratio: 5 / 6;
  border-radius: 50% 50% 46% 46% / 46% 46% 54% 54%;
  opacity: .22; animation: floatUp linear infinite;
  will-change: transform;
}
.balloon::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 40px;
  background: currentColor; opacity: .5;
}
@keyframes floatUp {
  from { transform: translate3d(0, 0, 0) rotate(-6deg); }
  to   { transform: translate3d(var(--drift, 40px), -125vh, 0) rotate(8deg); }
}

/* Sanft wandernde Lichtpunkte hinter den hellen Abschnitten */
.section--paper .spotlights {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background:
    radial-gradient(28vmax 28vmax at 8% 18%,  rgba(var(--pink-rgb), .1), transparent 62%),
    radial-gradient(24vmax 24vmax at 92% 76%, rgba(var(--lime-rgb), .12), transparent 62%);
  animation: spotDrift 34s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes spotDrift {
  from { transform: translate3d(-2%, 1%, 0) scale(1); }
  to   { transform: translate3d(3%, -2%, 0) scale(1.09); }
}

body[data-fx="off"] .bunting__flag,
body[data-fx="off"] .balloon,
body[data-fx="off"] .act__media,
body[data-fx="off"] .act__hand,
body[data-fx="off"] .spotlights { animation: none; }
body[data-fx="off"] .balloons { display: none; }
@media (prefers-reduced-motion: reduce) {
  .bunting__flag, .balloon, .spotlights,
  .act__media, .act__hand { animation: none !important; }
  .balloons { display: none; }
}
/* Auf schwächeren Geräten reicht der Hover-Effekt – das Dauerwandern der
   Fotos ist die teuerste Ebene in dieser Sektion. */
@media (max-width: 700px) {
  .act__media { animation: none; }
}

/* ------------------------------------------------------------ Galerie: erst ein Ausschnitt
   Auf dem Handy machten 27 Bilder untereinander die halbe Seite aus.
   Jetzt sind erst acht zu sehen, der Rest kommt auf Knopfdruck. */
.gal--limited .gal__item:nth-child(n+11) { display: none; }
@media (min-width: 900px) {
  .gal--limited .gal__item:nth-child(n+11) { display: block; }
  .gal-more { display: none; }
}
.gal-more {
  display: flex; justify-content: center; margin-top: 1.4rem;
}
.gal-more__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.6rem; border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  background: transparent; border: 2px solid currentColor; color: inherit;
  transition: background-color .3s ease, color .3s ease;
}
.gal-more__btn:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.gal-more__btn svg { width: 1.1em; height: 1.1em; transition: transform .4s var(--ease); }
.gal-more__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ------------------------------------------------------------ Live am Festtag
   Während des Festes zeigt die Seite, was gerade läuft und was als Nächstes
   kommt – im Programm, bei den Bands und in einer Leiste unter der Kopfzeile. */
.live-badge {
  position: absolute; top: .75rem; right: .75rem; z-index: 4;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .22rem .65rem .22rem .5rem; border-radius: 999px;
  background: var(--pink); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 18px -6px rgba(var(--pink-rgb), .9);
  animation: badgePop .5s var(--ease-back);
}
.live-badge i {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: pulse 1.4s ease-in-out infinite;
}
.live-badge[hidden] { display: none; }
@keyframes badgePop { from { transform: scale(.4) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* laufender Programmpunkt */
.tt__card.is-live::before {
  border-color: var(--pink);
  background: rgba(var(--pink-rgb), .14);
  box-shadow: 0 0 0 1px rgba(var(--pink-rgb), .5), 0 14px 40px -16px rgba(var(--pink-rgb), .7);
  animation: liveGlow 2.6s ease-in-out infinite;
}
.card.is-live::before {
  border-color: var(--pink);
  background: rgba(var(--pink-rgb), .12);
  animation: liveGlow 2.6s ease-in-out infinite;
}
@keyframes liveGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--pink-rgb), .5), 0 14px 40px -16px rgba(var(--pink-rgb), .55); }
  50%      { box-shadow: 0 0 0 2px rgba(var(--pink-rgb), .8), 0 18px 52px -14px rgba(var(--pink-rgb), .8); }
}
/* als Nächstes */
.tt__card.is-next::before, .card.is-next::before {
  border-color: rgba(var(--lime-rgb), .65);
  background: rgba(var(--lime-rgb), .07);
}
.is-next .live-badge { background: var(--lime); color: var(--ink); box-shadow: 0 6px 18px -6px rgba(var(--lime-rgb), .9); }
.is-next .live-badge i { background: var(--ink); }
/* vorbei */
.tt__card.is-past { opacity: .48; }
.tt__row.is-past .tt__time b { opacity: .5; }

/* Leiste „Jetzt läuft“ */
.nowbar {
  position: sticky; top: 0; z-index: 95;
  background: linear-gradient(90deg, var(--pink), var(--lime));
  color: #fff; padding-block: .55rem;
  animation: nowbarIn .6s var(--ease-back);
}
.nowbar[hidden] { display: none; }
.nowbar__inner { display: flex; align-items: center; gap: .7rem; font-size: .92rem; }
.nowbar__pulse {
  width: 10px; height: 10px; border-radius: 50%; background: #fff; flex: none;
  animation: pulse 1.3s ease-in-out infinite;
}
.nowbar__label {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; font-size: .74rem; flex: none;
}
.nowbar__text { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowbar__link {
  flex: none; display: inline-flex; align-items: center; gap: .3rem;
  font-weight: 700; font-size: .84rem; padding: .25rem .7rem;
  border-radius: 999px; background: rgba(0,0,0,.25);
}
.nowbar__link:hover { background: rgba(0,0,0,.45); }
@media (max-width: 620px) { .nowbar__link span, .nowbar__label { display: none; } }
@keyframes nowbarIn { from { transform: translateY(-100%); } to { transform: none; } }

/* ------------------------------------------------------------ Unterstützer-Laufband
   Läuft endlos durch, ohne Fortschrittsanzeige. */
.sup-marquee {
  overflow: hidden; margin-inline: calc(-1 * var(--gut));
  padding-block: .4rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sup-marquee__track { display: flex; width: max-content; will-change: transform; }
.sup-marquee__set { display: flex; gap: clamp(.7rem, 1.5vw, 1.2rem); padding-right: clamp(.7rem, 1.5vw, 1.2rem); }
.sup-marquee .sup__item {
  width: clamp(168px, 20vw, 230px); flex: none; min-height: 132px;
}
.no-js-marquee .sup-marquee__track { animation: marquee 42s linear infinite; }

/* ------------------------------------------------------------ Textfluss
   Lange Ortsnamen und Überschriften brechen sonst ungünstig um. */
.info b, .card__title, .tt__title, .sup__item b {
  text-wrap: balance; hyphens: auto; overflow-wrap: break-word;
}
.info span, .tt__sub, .card__meta { text-wrap: pretty; overflow-wrap: break-word; }
/* Kacheln in einer Reihe gleich hoch, Inhalt oben ausgerichtet */
.infos { align-items: stretch; }
.info { display: flex; flex-direction: column; gap: .25rem; }

/* Mehr Luft zwischen Wisch-Stapel und Fortschrittsbalken */
@media (max-width: 760px) {
  .swipe { padding-bottom: 1.5rem; }
  .swipe-bar { margin-top: .1rem; }
  .tt__items--many { padding-bottom: .9rem; }
}

/* ------------------------------------------------------------ Wort-Rotator
   Im Hero wechselt ein Begriff durch – das Fest hat viele Seiten, und die
   Seite zeigt gleich beim Ankommen, dass sich hier etwas bewegt. */
.hero__rotate {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.1;
}
.hero__rotate-pre { opacity: .55; font-size: .62em; letter-spacing: .04em; }
.wordroll {
  position: relative; display: inline-grid; overflow: hidden;
  padding-block: .1em;
}
.wordroll__w {
  grid-area: 1 / 1; color: var(--lime); white-space: nowrap;
  opacity: 0; transform: translateY(65%) rotateX(-45deg);
  transition: opacity .5s var(--ease), transform .6s var(--ease-back);
}
.wordroll__w.is-on { opacity: 1; transform: none; }
.wordroll__w.is-out { opacity: 0; transform: translateY(-65%) rotateX(45deg); }

/* ------------------------------------------------------------ Zeiger-Hinweis
   Über der Galerie wird aus dem Kreis ein beschriftetes Feld. */
.cursor__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  opacity: 0; transition: opacity .25s ease;
}
.cursor.is-label { background: var(--lime); border-color: var(--lime); }
.cursor.is-label .cursor__label { opacity: 1; }

/* Wimpel reagieren auf die Scrollgeschwindigkeit */
.bunting { --wind: 0; }
.bunting__flag { animation-duration: calc(3.4s - var(--wind) * 1.6s); }

/* ------------------------------------------------------------ Bühnen-Karten
   Das Foto füllt die ganze Karte, mittig zugeschnitten. Beim Überfahren zoomt
   es leicht, der dunkle Schleier wird dichter und der Text fährt hoch. Die
   Karte selbst bewegt sich nicht – so bricht der Hover nie ab. */
.acts {
  display: grid; gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
@media (min-width: 1100px) { .acts { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } }
/* Ein oder zwei Acts sollen nicht über die ganze Breite laufen – sonst steht
   eine riesige, halbleere Karte da. Sie rücken stattdessen mittig zusammen. */
@media (min-width: 760px) {
  .acts--few { grid-template-columns: repeat(auto-fit, minmax(340px, 460px)); justify-content: center; }
}

/* Jede Karte hat ihre eigene Farbe (--a), Handschrift (--hand), Neigung und
   ihr eigenes Tempo. Die Werte kommen als Variablen aus PHP – siehe
   act_palette() in inc/color.php. Voreinstellung: Lindgrün wie bisher. */
.act {
  --a: var(--lime); --a2: var(--pink); --aink: #14160f; --glow: var(--lime);
  --hand: 'Caveat', cursive; --rot: -3deg; --tilt: 1.4deg;
  --dur: 20s; --delay: 0s; --dir: normal;
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: clamp(380px, 46vw, 480px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ink);
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(255,255,255,.06);
  transition: box-shadow .5s var(--ease);
}
.act:hover { box-shadow: var(--shadow-3), 0 0 0 1px color-mix(in srgb, var(--a) 45%, transparent); }

/* Farbkante links – trägt die Farbe der Karte, wächst beim Überfahren */
.act__edge {
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px; z-index: 4;
  background: linear-gradient(180deg, var(--a), var(--a2));
  transform-origin: left center; transform: scaleX(1);
  transition: transform .5s var(--ease), box-shadow .5s ease;
  pointer-events: none;
}
.act:hover .act__edge { transform: scaleX(2.1); box-shadow: 0 0 26px -2px var(--glow); }

/* Lichtwisch, der beim Überfahren einmal über das Foto läuft */
.act__sheen {
  position: absolute; inset: -30% -60%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%);
  transform: translateX(-60%); opacity: 0;
  transition: transform 1.1s var(--ease), opacity .3s ease;
}
.act:hover .act__sheen { transform: translateX(60%); opacity: 1; }

.act__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* Das Foto wandert ganz langsam – jede Karte in ihrem eigenen Takt und
   ihrer eigenen Richtung, damit die Reihe nie im Gleichschritt läuft. */
.act__media { animation: actDrift var(--dur) ease-in-out infinite alternate var(--dir); animation-delay: var(--delay); }
@keyframes actDrift {
  from { transform: scale(1.06) translate3d(-1.1%, -0.9%, 0); }
  to   { transform: scale(1.12) translate3d(1.3%, 1.1%, 0); }
}
.act__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease), filter .6s ease;
  filter: saturate(1.02) contrast(1.02);
}
.act:hover .act__media img { transform: scale(1.08); filter: saturate(1.2) contrast(1.06); }
.act__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(215deg, color-mix(in srgb, var(--a) 26%, transparent) 0%, transparent 46%),
    linear-gradient(180deg, rgba(var(--ink-rgb), .58) 0%, rgba(var(--ink-rgb), .12) 32%, rgba(var(--ink-rgb), .78) 68%, rgba(var(--ink-rgb), .96) 100%);
  transition: opacity .5s ease;
}
.act:hover .act__veil { opacity: .9; }
.act--noimg .act__media {
  background:
    repeating-linear-gradient(48deg, rgba(255,255,255,.045) 0 14px, transparent 14px 28px),
    linear-gradient(150deg, color-mix(in srgb, var(--a) 62%, transparent), color-mix(in srgb, var(--a2) 40%, transparent) 60%, rgba(var(--ink-rgb), .92));
  animation: none;
}
.act--noimg .act__ph { color: var(--a); }
.act--noimg .act__veil { opacity: .55; }
.act__ph { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: .42;
           animation: floaty 7s ease-in-out infinite; }
/* Handschrift darf nie über den Rand laufen */
.act__hand { max-width: calc(100% - 2rem); }

/* Uhrzeit – der auffälligste Punkt auf der Karte */
.act__time {
  position: absolute; top: clamp(.9rem, 2vw, 1.3rem); left: clamp(.9rem, 2vw, 1.3rem); z-index: 5;
  display: flex; align-items: baseline; gap: .3rem;
  background: linear-gradient(135deg, var(--a), var(--a2));
  color: var(--aink);
  padding: .35rem .9rem .3rem; border-radius: 14px;
  transform: rotate(var(--tilt));
  box-shadow: 0 12px 30px -10px var(--glow);
  transition: transform .5s var(--ease-back), box-shadow .4s ease;
}
.act__time b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.act__time i { font-style: normal; font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.act:hover .act__time { transform: rotate(calc(var(--tilt) * -.8)) scale(1.07); box-shadow: 0 16px 38px -10px var(--glow); }
.act.is-live .act__time { background: var(--pink); color: #fff; }
.act.is-live .act__time i { opacity: .85; }

.act .live-badge { top: clamp(.9rem, 2vw, 1.3rem); right: clamp(.9rem, 2vw, 1.3rem); }

/* Textbereich – fährt beim Überfahren nach oben */
.act__body {
  position: relative; z-index: 2;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  transform: translateY(0);
  transition: transform .55s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .act__short { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
                transition: max-height .55s var(--ease), opacity .4s ease, margin-top .55s var(--ease); }
  .act:hover .act__short, .act:focus-within .act__short { max-height: 8rem; opacity: .88; margin-top: .7rem; }
  .act__actions { max-height: 0; opacity: 0; overflow: hidden;
                  transition: max-height .5s var(--ease), opacity .35s ease, margin-top .5s var(--ease); }
  .act:hover .act__actions, .act:focus-within .act__actions { max-height: 4rem; opacity: 1; margin-top: 1.1rem; }
}

/* Name als Handschrift im Hintergrund */
.act__hand {
  position: absolute; left: clamp(1.1rem, 2.2vw, 1.7rem); top: -1.15em; z-index: -1;
  font-family: var(--hand); font-weight: 700;
  font-size: clamp(3.2rem, 7vw, 5.2rem); line-height: 1;
  color: var(--a); opacity: .32; white-space: nowrap;
  pointer-events: none; user-select: none;
  transform: rotate(var(--rot));
  transition: opacity .5s ease, transform .6s var(--ease-back);
  max-width: 130%; overflow: hidden; text-overflow: clip;
  animation: actSway calc(var(--dur) * .55) ease-in-out infinite alternate var(--dir);
  animation-delay: var(--delay);
}
/* Amatic SC läuft sehr schmal und hoch – die braucht mehr Punkte */
.act__hand { font-size: clamp(3.2rem, 7vw, 5.2rem); }
@keyframes actSway {
  from { translate: 0 0; }
  to   { translate: 3% -4%; }
}
.act:hover .act__hand { opacity: .6; transform: rotate(calc(var(--rot) * .35)) translateY(-6px); }

.act__name {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.06;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.act__genre {
  margin-top: .3rem; color: var(--a);
  font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.act__short { color: rgba(255,255,255,.88); font-size: .95rem; line-height: 1.55; }
.act__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.act__more, .act__link {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: .86rem;
  border: 0; transition: transform .3s var(--ease-back), background-color .3s ease, color .3s ease;
}
.act__more { background: var(--a); color: var(--aink); }
.act__more:hover { background: #fff; color: var(--ink); transform: scale(1.05); }
.act__link { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.act__link:hover { background: var(--a); color: var(--aink); border-color: var(--a); transform: scale(1.05); }
.act__more svg, .act__link svg { width: 1em; height: 1em; }

.act.is-live { box-shadow: 0 0 0 2px var(--pink), var(--shadow-3); }
.act.is-next { box-shadow: 0 0 0 2px rgba(var(--lime-rgb), .7), var(--shadow-2); }
.act.is-past .act__media img { filter: grayscale(.65) brightness(.8); }
.act.is-past .act__time { background: rgba(255,255,255,.2); color: #fff; }

@media (max-width: 760px) {
  .act { min-height: 400px; }
  .act__short { margin-top: .7rem; }
  .act__actions { margin-top: 1rem; }
}

/* ------------------------------------------------------------ Aufklappfenster */
.modal {
  position: fixed; inset: 0; z-index: 210; display: grid; place-items: center;
  padding: clamp(.8rem, 3vw, 2.5rem);
  background: rgba(8,8,8,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box {
  position: relative; width: min(100%, 720px); max-height: 88svh; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--ink); color: var(--paper);
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.9);
  transform: translateY(24px) scale(.97);
  transition: transform .5s var(--ease-back);
  display: flex; flex-direction: column;
}
.modal.is-open .modal__box { transform: none; }
.modal__media { position: relative; height: clamp(160px, 26vh, 260px); flex: none; overflow: hidden; }
.modal__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.modal__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--ink) 100%);
}
.modal__time {
  position: absolute; left: 1.3rem; bottom: 1rem; z-index: 2;
  display: flex; align-items: baseline; gap: .3rem;
  background: var(--lime); color: var(--ink); padding: .3rem .85rem;
  border-radius: 12px; transform: rotate(-2deg);
}
.modal__time b { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1; }
.modal__time i { font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.modal__inner { padding: clamp(1.2rem, 3vw, 2rem); overflow-y: auto; }
.modal__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.05; }
.modal__genre { color: var(--lime); font-size: .84rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-top: .35rem; }
.modal__text { margin-top: 1.1rem; line-height: 1.7; opacity: .92; }
.modal__text p { margin-bottom: .8rem; }
.modal__text p:last-child { margin-bottom: 0; }
.modal__text ul, .modal__text ol { margin: 0 0 .8rem; padding-left: 1.3rem; }
.modal__text li { margin-bottom: .3rem; }
.modal__text strong, .modal__text b { color: #fff; }
.modal__text a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.modal__foot { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.modal__close {
  position: absolute; top: .8rem; right: .8rem; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(6px);
  transition: background-color .25s ease, transform .3s var(--ease-back);
}
.modal__close:hover { background: var(--pink); transform: rotate(90deg) scale(1.08); }
body.is-locked { overflow: hidden; }

/* ------------------------------------------------------------ Lageplan
   Die Kacheln kommen von OpenStreetMap und werden erst geladen, wenn jemand
   die Karte ausdrücklich öffnet – vorher geht keine Anfrage dorthin raus. */
.map {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  min-height: clamp(320px, 46vh, 520px);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 18px, transparent 18px 36px),
    linear-gradient(160deg, rgba(var(--lime-rgb), .14), rgba(var(--pink-rgb), .12));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-2);
}
.map__gate { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; text-align: center; }
.map__gate-inner { max-width: 30rem; display: grid; justify-items: center; gap: .55rem; }
.map__gate-ico { color: var(--lime); opacity: .8; animation: floaty 4s ease-in-out infinite; }
.map__gate h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem); }
.map__gate p { font-size: .92rem; opacity: .75; max-width: 34ch; }
.map__gate .btn { margin-top: .5rem; }
.map__alt { font-size: .84rem; opacity: .65; display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; }
.map__alt:hover { opacity: 1; color: var(--lime); }
.map__alt svg { width: 1em; height: 1em; }

.map__canvas { position: absolute; inset: 0; }
.map__canvas[hidden] { display: none; }
.map__full {
  position: absolute; right: .8rem; top: .8rem; z-index: 500;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(var(--ink-rgb), .82); color: #fff;
  backdrop-filter: blur(8px); font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  box-shadow: var(--shadow-1); transition: background-color .25s ease, transform .3s var(--ease-back);
}
.map__full:hover { background: var(--pink); transform: scale(1.05); }
.map__full svg { width: 1em; height: 1em; }
.map__full[hidden] { display: none; }

/* Vollbild */
.map.is-full {
  position: fixed; inset: 0; z-index: 220; border-radius: 0; min-height: 0;
  border: 0; box-shadow: none;
}
.map.is-full .map__full { right: 1rem; top: 1rem; }

/* Marker */
.pin {
  position: relative; width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--c, var(--lime)); color: #14160f;
  border-radius: 50% 50% 50% 6px; transform: rotate(-45deg);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.65), 0 0 0 3px rgba(255,255,255,.9);
  transition: transform .35s var(--ease-back), box-shadow .3s ease;
}
.pin > * { transform: rotate(45deg); }
.pin:hover, .pin.is-on { transform: rotate(-45deg) scale(1.16); box-shadow: 0 12px 28px -6px rgba(0,0,0,.75), 0 0 0 4px #fff; }
.pin::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  border: 2px solid var(--c, var(--lime)); opacity: 0;
  animation: pinPing 2.6s ease-out infinite;
  transform: rotate(45deg);
}
.pin--pulse::after { opacity: 1; }
@keyframes pinPing {
  0%   { transform: rotate(45deg) scale(.6); opacity: .7; }
  70%  { transform: rotate(45deg) scale(1.25); opacity: 0; }
  100% { opacity: 0; }
}
/* Sperrungen und Ähnliches: kleiner runder Punkt statt großer Tropfen.
   Sie sollen die Karte markieren, nicht beherrschen. */
.pin--mini {
  width: 22px; height: 22px; border-radius: 50%;
  transform: none; box-shadow: 0 3px 9px -2px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.92);
}
.pin--mini > * { transform: none; }
.pin--mini::after { content: none; }
.pin--mini:hover, .pin--mini.is-on { transform: scale(1.22); box-shadow: 0 5px 14px -3px rgba(0,0,0,.7), 0 0 0 2.5px #fff; }

.leaflet-marker-icon { background: none; border: 0; }

/* Legende */
.legend {
  list-style: none; padding: 0; margin: 1.2rem 0 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.legend__item {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: background-color .3s ease, border-color .3s ease;
}
.legend__item:hover { background: rgba(255,255,255,.09); border-color: rgba(var(--now-rgb), .5); }
.legend__ico {
  width: 34px; height: 34px; flex: none; border-radius: 11px;
  display: grid; place-items: center; background: var(--c); color: #14160f;
  transition: transform .4s var(--ease-back);
}
.legend__item:hover .legend__ico { transform: rotate(-8deg) scale(1.1); }
.legend__txt { min-width: 0; }
.legend__txt b { display: block; font-size: .94rem; font-weight: 700; }
.legend__txt i { font-style: normal; font-size: .8rem; opacity: .6; }

/* Zeichenerklärung unter der Legende: nur erklären, nicht anklicken */
.legend-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .95rem;
  margin-top: .8rem; font-size: .82rem; color: rgba(255,255,255,.68);
}
.section--paper .legend-key { color: rgba(0,0,0,.6); }
.legend-key__lbl { font-weight: 700; opacity: .8; }
.legend-key__item { display: inline-flex; align-items: center; gap: .38rem; }
.legend-key__ico {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 50%; background: var(--c, var(--lime)); color: #14160f;
  box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}
.legend-key__ico svg { width: 13px; height: 13px; }

.map__hint {
  margin-top: 1rem; font-size: .88rem; opacity: .7;
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}
.map__hint svg { width: 1em; height: 1em; flex: none; }
.map__hint a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 620px) {
  .map { min-height: 300px; }
  .legend { grid-template-columns: 1fr 1fr; }
  .legend__txt b { font-size: .86rem; }
}