/* ==========================================================================
   KV Pölzonia e.V. - Hauptstylesheet
   Nutzt ausschließlich Tokens aus tokens.css.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body,
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
address {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

address {
  font-style: normal;
}

/* --- Basis ---------------------------------------------------------------- */
body {
  min-height: 100dvh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Körnung: fest, nicht scrollend, keine Pointer-Events */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
  background-color: var(--color-accent);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* --- Typografie ----------------------------------------------------------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-700);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.section-lead {
  max-width: var(--measure);
  margin-top: var(--space-4);
  font-size: var(--fs-400);
  line-height: 1.5;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.note {
  max-width: var(--measure);
  margin-top: var(--space-3);
  font-size: var(--fs-200);
  color: var(--color-text-muted);
}

.eyebrow {
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.time-gold {
  color: var(--color-gold-text);
}

/* Sichtbare Platzhalter für fehlende Vereinsinhalte */
.ph {
  display: inline;
  padding: 0.05em 0.4em;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 0.875em;
  letter-spacing: 0;
  line-height: 1.7;
  color: var(--placeholder-fg);
  border: 1px dashed var(--placeholder-line);
  border-radius: var(--radius-1);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ph--band {
  color: var(--color-band-text);
  border-color: var(--color-band-text);
}

/* --- Links & Buttons ------------------------------------------------------ */
.text-link {
  color: var(--link-color);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--link-underline);
  transition: text-decoration-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.text-link--band {
  color: var(--color-band-text);
  text-decoration-color: var(--color-band-line);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-weight: 600;
  font-size: var(--fs-300);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-1);
  transition: background-color var(--dur-fast) ease, transform 160ms var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

@media (hover: hover) and (pointer: fine) {
  .text-link:hover {
    text-decoration-color: currentColor;
  }

  .btn--primary:hover {
    background-color: var(--btn-primary-bg-hover);
  }
}

/* --- Bildrahmen mit Ladezustand -------------------------------------------- */
.frame {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--color-skeleton);
  border-radius: var(--radius-0);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Goldrand wie eine Luftschlange: ohne Skript gerade, mit Skript als Wellenkante entlang der Bildform. Die Galerie hat keinen. */
.frame {
  outline: 4px solid var(--gold-400);
  outline-offset: -4px;
}

.frame.is-wavy,
.galerie .frame {
  outline: 0;
}

.frame__edge {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.frame__edge path {
  fill: none;
  stroke: var(--gold-400);
  stroke-width: 8; /* nur die innere Hälfte (4px) bleibt sichtbar, die Maske schneidet den Rest ab */
  stroke-linejoin: round;
}

/* Bild blendet erst ein, wenn es geladen ist; Fläche bleibt bis dahin Skeleton */
.js .frame img[data-img] {
  opacity: 0;
  transition: opacity 240ms ease;
}

.js .frame img[data-img].is-loaded {
  opacity: 1;
}

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--header-bg);
  border-top: 3px solid var(--color-accent);
  border-bottom: 1px solid var(--header-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--header-h);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-text);
  text-decoration: none;
}

.wordmark--small {
  font-size: 1.25rem;
  color: var(--color-accent);
}

/* Logo der beiden Männlein vor dem Schriftzug */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.wordmark__logo {
  display: block;
  flex: none;
  width: auto;
  height: 2.6rem;
}

.wordmark--small .wordmark__logo {
  height: 2.1rem;
}

.site-nav {
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-nav__list a {
  font-size: var(--fs-200);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-2);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.site-nav__list a[aria-current="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

@media (hover: hover) and (pointer: fine) {
  .site-nav__list a:hover {
    color: var(--color-text);
  }
}

.site-header__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.theme-toggle,
.menu-toggle {
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  font-size: var(--fs-200);
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-1);
  transition: border-color var(--dur-fast) ease, transform 160ms var(--ease-out);
}

.theme-toggle:active,
.menu-toggle:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover,
  .menu-toggle:hover {
    border-color: var(--color-text);
  }
}

.menu-toggle {
  display: none;
}

/* Mobile Navigation */
@media (max-width: 959px) {
  .site-nav {
    margin-left: 0;
  }

  .site-header__tools {
    margin-left: auto;
  }

  .js .menu-toggle {
    display: inline-flex;
    align-items: center;
  }

  .js .site-nav__list {
    position: fixed;
    inset: calc(var(--header-h) + 4px) 0 0 0;
    z-index: var(--z-menu);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-5) var(--gutter) var(--space-8);
    background-color: var(--color-bg);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    /* Schließen schneller als Öffnen: das System reagiert, der Nutzer hat entschieden */
    transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out), visibility 0s linear 140ms;
  }

  .js .site-nav__list.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s;
  }

  .js .site-nav__list a {
    display: block;
    padding-block: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--fs-600);
    font-weight: 700;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-line);
  }

  /* Ohne JS: Navigation als umbrechende Zeile unter dem Logo */
  html:not(.js) .site-header__inner {
    flex-wrap: wrap;
    height: auto;
    padding-block: var(--space-3);
  }

  html:not(.js) .site-nav__list {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }
}

body.menu-open {
  overflow: hidden;
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  padding-top: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  padding-bottom: var(--section-pad);
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-7);
  align-items: center;
}

.hero__copy {
  grid-column: 1 / 7;
}

.hero__media {
  grid-column: 7 / 13;
}

.hero__title {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-800);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.hero__script {
  display: block;
  margin-top: 0.06em;
  padding-left: 1.5em;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: var(--fs-script);
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-accent);
  transform: rotate(-4deg);
  transform-origin: left center;
}

.hero__lead {
  max-width: 34ch;
  margin-top: var(--space-5);
  font-size: var(--fs-400);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.next-event {
  max-width: 30rem;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line-strong);
}

.next-event__label {
  font-size: var(--fs-200);
  color: var(--color-text-muted);
}

.next-event__name {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
}

.next-event__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.next-event__meta .time-gold {
  font-weight: 600;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6);
}

/* Das Foto (776 x 371) ist oben um 14 % beschnitten: die Schrift auf dem Banner bleibt gut lesbar,
   alle Tänzerinnen sind zu sehen, und das Bild wird breiter. Verhältnis 776 : 319. */
.frame--hero {
  aspect-ratio: 776 / 319;
}

.frame--hero img {
  object-position: 50% 100%;
}

/* Lade-Choreografie im Hero: einmalig, kurz, gestaffelt */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__in {
    animation: hero-rise 560ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__in {
    animation: hero-fade 200ms ease both;
  }
}

@media (max-width: 959px) {
  .hero__copy,
  .hero__media {
    grid-column: 1 / -1;
  }

}

/* --- Abschnitte ----------------------------------------------------------- */
.section {
  padding-block: var(--section-pad) calc(var(--section-pad) * 1.1);
}

.section-head {
  margin-bottom: var(--space-8);
}

/* Scroll-Einblendung: einmalig, nur wenn JS läuft */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    transform: none;
  }

  .js .reveal.is-visible {
    transition: opacity 200ms ease;
  }
}

/* --- Programm ------------------------------------------------------------- */
/* Autor-Regeln mit display überschreiben sonst das hidden-Attribut */
[hidden] {
  display: none !important;
}

.programm__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-7);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 var(--space-2) 0 var(--space-4);
  font-size: var(--fs-200);
  font-weight: 500;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform 160ms var(--ease-out);
}

.chip:active,
.seg button:active {
  transform: scale(0.97);
}

.chip span {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding-inline: 0.4rem;
  font-size: var(--fs-100);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-950);
  background: var(--silver-gradient);
  border-radius: 999px;
}

.chip[aria-pressed="true"] {
  color: var(--color-bg);
  background-color: var(--color-text);
  border-color: transparent;
}

.seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
}

.seg button {
  min-height: 2.25rem;
  padding: 0 var(--space-5);
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  transition: color var(--dur-fast) ease, transform 160ms var(--ease-out);
}

.seg button[aria-pressed="true"] {
  color: var(--ink-950);
  background: var(--silver-gradient);
}

.programm__status {
  flex-basis: 100%;
  font-size: var(--fs-200);
  color: var(--color-text-muted);
}

.programm__status:empty {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .chip:hover:not([aria-pressed="true"]) {
    border-color: var(--color-text);
  }

  .seg button[aria-pressed="false"]:hover {
    color: var(--color-text);
  }
}

/* Wochenansicht: vier Wochen, jede Woche voller als die davor */
.programm__weeks {
  display: grid;
  gap: var(--space-8);
}

.week {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
  column-gap: var(--space-6);
  row-gap: var(--space-5);
  align-items: start;
}

.week__head {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
  padding-top: var(--space-4);
  border-top: 4px solid var(--week);
}

.week__no {
  display: inline-block;
  padding: 0.2em 0.8em;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-950);
  background-color: var(--week);
  border-radius: 999px;
}

.week__title {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

.week__range {
  margin-top: var(--space-1);
  font-size: var(--fs-200);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.week__range:empty {
  display: none;
}

.week__events {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.event {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--week);
  border-radius: var(--radius-1);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .event:hover {
    transform: translateY(-4px);
    border-color: var(--week);
  }
}

.event__when {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "num wd"
    "num mon";
  column-gap: var(--space-3);
  align-items: center;
  width: 100%;
}

.event__date {
  display: contents;
}

.event__num {
  grid-area: num;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.25rem;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
}

.event__wd {
  grid-area: wd;
  align-self: end;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-400);
  line-height: 1.1;
  color: var(--color-accent-text);
}

.event__mon {
  grid-area: mon;
  align-self: start;
  font-size: var(--fs-200);
  color: var(--color-text-muted);
}

.event__rel {
  grid-column: 1 / -1;
  font-size: var(--fs-100);
  color: var(--color-text-muted);
}

.event__name {
  max-width: 100%;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.event__time {
  padding: 0.05em 0.7em;
  font-size: var(--fs-200);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.event__desc {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.event__tag {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-100);
  font-weight: 600;
  color: var(--color-accent-text);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-1);
}

/* Rosenmontag: der Höhepunkt */
.event--peak {
  border-color: var(--gold-400);
  background-image: linear-gradient(165deg, rgb(222 193 2 / 0.16), transparent 60%);
}

.event--peak .event__num {
  color: var(--color-gold-text);
}

/* Ohne JS gibt es keine Daten: dann nur Wochentag und Abstand zum Rosenmontag */
html:not(.js) .event__num,
html:not(.js) .event__mon {
  display: none;
}

/* Kalenderansicht: Montag bis Sonntag, eine Zeile pro Woche */
.programm__cal {
  display: none;
}

.programm[data-view="kalender"] .programm__cal {
  display: block;
}

.programm[data-view="kalender"] .programm__weeks {
  display: none;
}

.cal {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 6px;
}

.cal thead td {
  width: 6.25rem;
}

.cal th[scope="col"] {
  padding: var(--space-2);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-align: left;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cal__week {
  padding: var(--space-3) var(--space-2) 0 0;
  vertical-align: top;
  text-align: left;
  border-top: 4px solid var(--week);
}

.cal__week span {
  display: inline-block;
  padding: 0.2em 0.8em;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-950);
  background-color: var(--week);
  border-radius: 999px;
}

.cal__cell {
  height: 7.5rem;
  padding: var(--space-2);
  vertical-align: top;
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-1);
}

.cal__cell--has {
  border-color: var(--week);
}

.cal__num {
  display: block;
  font-size: var(--fs-100);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.cal__ev {
  display: block;
  margin-top: var(--space-1);
  padding: var(--space-2);
  font-size: var(--fs-100);
  line-height: 1.3;
  color: var(--ink-950);
  background-color: var(--week);
  border-radius: var(--radius-1);
}

.cal__ev strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.875rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.cal__ev span {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cal__ev--peak {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--gold-400);
}

@media (max-width: 1099px) {
  .week__events {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 959px) {
  .week {
    grid-template-columns: minmax(0, 1fr);
  }

  .week__head {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
  }

  .week__title {
    margin-top: 0;
  }

  .week__range {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .programm__weeks {
    gap: var(--space-7);
  }

  /* Kalender ist zu breit für Handys: dort immer die Wochenliste */
  .seg {
    display: none;
  }

  .programm[data-view="kalender"] .programm__cal {
    display: none;
  }

  .programm[data-view="kalender"] .programm__weeks {
    display: grid;
  }
}

@media (max-width: 599px) {
  .week__events {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Karten-Band: zwei Wege zur Karte ------------------------------------- */
.karten {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-pad);
  background-color: var(--color-band-bg);
  background-image:
    radial-gradient(70% 60% at 92% 0%, rgb(88 196 245 / 0.34), transparent 70%),
    linear-gradient(165deg, var(--navy-800), var(--blue-800) 34%, var(--blue-700) 100%);
  color: var(--color-band-text);

  /* Das Band ist in beiden Modi blau: Konfetti dort mit hellen Tönen */
  --cf-gold-1: #dec102;
  --cf-gold-2: #f0d31c;
  --cf-gold-3: #ffe45c;
  --cf-silver-1: #eceff3;
  --cf-silver-2: #c4c9d1;
  --cf-silver-3: #9ca3af;
  --cf-blue-1: #9fdcff;
  --cf-blue-2: #58c4f5;
  --cf-blue-3: #c9ecff;
  --cf-blue-4: #8db6f6;
}

.karten__photo {
  position: absolute;
  inset: 0 0 -22% 0; /* Wasserzeichen am unteren Bildrand abschneiden */
  z-index: -1;
}

.karten__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  opacity: 0.14;
  mix-blend-mode: luminosity;
  filter: grayscale(1);
}

.karten__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-8);
}

.karten__lead {
  max-width: var(--measure);
  margin-top: var(--space-4);
  font-size: var(--fs-400);
  line-height: 1.5;
  color: var(--color-band-muted);
}

/* Zeitstrahl: eine Linie, daran "Entweder" und "Oder" */
.karten__options {
  position: relative;
  display: grid;
  row-gap: var(--space-7);
  padding-left: 7rem;
}

.karten__options::before {
  content: "";
  position: absolute;
  left: 3.5rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 4px;
  margin-left: -2px;
  background: linear-gradient(to bottom, var(--sky-300), var(--gold-400));
  border-radius: 2px;
}

.option {
  position: relative;
  padding: var(--space-6);
  background-color: rgb(255 255 255 / 0.09);
  border: 1px solid var(--color-band-line);
  border-top: 4px solid var(--sky-300);
  border-radius: var(--radius-1);
}

.option--kasse {
  border-top-color: var(--gold-400);
}

.option__tag {
  position: absolute;
  top: 1.25rem;
  left: calc(-3.5rem - 1px);
  transform: translateX(-50%);
  padding: 0.35em 1.1em;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-950);
  background: var(--silver-gradient);
  border-radius: 999px;
}

.option__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-600);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
}

.option__sub {
  margin-top: var(--space-2);
  color: var(--color-band-muted);
}

.option--kasse > p:last-child {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-band-line);
}

.option__steps {
  margin-top: var(--space-6);
}

.option__step {
  position: relative;
}

.option__step + .option__step {
  margin-top: var(--space-6);
}

/* Symbol neben der Überschrift, darunter eine Trennlinie wie bei der Abendkasse, dann die Infos */
.option__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.option__info {
  /* Die Linie ist nur so lang wie der Textblock, mit etwas Luft rechts */
  width: fit-content;
  max-width: 100%;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  padding-right: var(--space-4);
  border-top: 1px solid var(--color-band-line);
}

/* Symbol mit kleiner Schrittnummer */
.option__media {
  position: relative;
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
}

.option__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.option__num {
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-200);
  line-height: 1;
  color: var(--ink-950);
  background-color: var(--sky-300);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--navy-800);
}

.option__icon {
  display: block;
  width: auto;
  height: 7rem;
  margin-top: var(--space-4);
}

.option__step h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-500);
  line-height: 1.2;
  color: var(--gold-400); /* Band ist in beiden Modi blau: Gold 3.8:1, große Schrift */
}

.option__info p {
  margin-top: var(--space-2);
  max-width: 44ch;
}

.option__info > :first-child {
  margin-top: 0;
}

.karten__phone {
  display: inline-block;
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-600);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-band-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--gold-400);
  transition: text-decoration-color var(--dur-fast) ease;
  white-space: nowrap;
}

.karten__u18 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--space-6);
  row-gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-band-line);
}

.karten__u18 h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
}

.karten__u18 p {
  max-width: var(--measure);
  color: var(--color-band-muted);
}

.karten__u18 .text-link {
  grid-column: 2;
  justify-self: start;
}

.karten :focus-visible {
  outline-color: var(--gold-400);
}

@media (hover: hover) and (pointer: fine) {
  .karten__phone:hover {
    text-decoration-color: currentColor;
  }
}

/* Breit: die beiden Schritte nebeneinander, Abendkasse mit Symbol links */
@media (min-width: 960px) {
  .option__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .option__step + .option__step {
    margin-top: 0;
  }

  /* gestrichelte Verbindung von "Bestellen" zu "Abholen" auf Höhe der Symbole */
  .option__step:not(:last-child) .option__head::after {
    content: "";
    flex: 1;
    min-width: 2rem;
    margin-right: calc(var(--space-6) * -1 + 0.5rem);
    border-top: 2px dashed var(--sky-300);
    opacity: 0.7;
  }

  .option--kasse {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    column-gap: var(--space-5);
    align-content: center;
  }

  .option--kasse > :not(.option__icon):not(.option__tag) {
    grid-column: 2;
  }

  .option--kasse .option__icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    margin: 0;
  }
}

@media (max-width: 959px) {
  .karten__options {
    row-gap: var(--space-5);
    padding-left: 2.25rem;
  }

  .karten__options::before {
    left: 0.6rem;
    top: 1rem;
    bottom: 1rem;
  }

  /* Knoten auf der Linie, Beschriftung wandert in die Karte */
  .option::before {
    content: "";
    position: absolute;
    top: 1.6rem;
    left: calc(-2.2rem - 1px);
    width: 1.1rem;
    height: 1.1rem;
    background: var(--silver-gradient);
    border-radius: 50%;
  }

  .option__tag {
    position: static;
    display: inline-block;
    transform: none;
  }

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

  .karten__u18 {
    grid-template-columns: minmax(0, 1fr);
  }

  .karten__u18 .text-link {
    grid-column: 1;
  }
}

@media (max-width: 479px) {
  .option {
    padding: var(--space-5);
  }

  .karten__phone {
    font-size: clamp(1.2rem, 5.6vw, 1.75rem);
  }

  .option__head {
    gap: var(--space-3);
  }

  .option__media {
    width: 4.5rem;
    height: 4.5rem;
  }

  .option__icon {
    height: 5.5rem;
  }
}

/* --- Garde & Tanz --------------------------------------------------------- */
.garde__intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-6);
  align-items: end;
}

.garde__media {
  grid-column: 1 / 8;
}

.garde__copy {
  grid-column: 8 / 13;
}

.frame--garde {
  aspect-ratio: 3 / 2;
}

.garde__text {
  margin-top: var(--space-5);
}

.groups {
  margin-top: var(--space-6);
}

.groups li {
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.tanzbaeren {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-6);
  align-items: center;
  margin-top: clamp(4rem, 2rem + 6vw, 8rem);
}

.tanzbaeren__copy {
  grid-column: 1 / 6;
}

.tanzbaeren__media {
  grid-column: 6 / 13;
}

.frame--wide {
  aspect-ratio: 16 / 10;
}

.tanzbaeren__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-600);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.tanzbaeren__quote {
  margin-top: var(--space-5);
  padding-bottom: 0.1em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-600);
  line-height: 1.15;
  color: var(--color-gold-text);
}

.tanzbaeren__text {
  max-width: 40ch;
  margin-top: var(--space-5);
  color: var(--color-text-muted);
}

@media (max-width: 959px) {
  .garde__media,
  .garde__copy,
  .tanzbaeren__copy,
  .tanzbaeren__media {
    grid-column: 1 / -1;
  }

  .tanzbaeren__media {
    order: -1;
  }
}

/* --- Galerie -------------------------------------------------------------- */
.galerie {
  background-color: var(--color-alt);
}

.years {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--color-line);
}

.years [role="tab"] {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: var(--space-3) var(--space-4);
  margin-bottom: -1px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-500);
  line-height: 1.2;
  font-variant-numeric: lining-nums;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.years [role="tab"][aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--tab-active);
}

@media (hover: hover) and (pointer: fine) {
  .years [role="tab"]:hover {
    color: var(--color-text);
  }
}

/* Ohne JS: Tabs ausblenden, alle Jahrgänge untereinander zeigen */
html:not(.js) .years {
  display: none;
}

html:not(.js) .year-panel + .year-panel {
  margin-top: var(--space-8);
}

.js .year-panel[hidden] {
  display: none;
}

.year-panel:focus-visible {
  outline-offset: 8px;
}

.year-panel__title {
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-500);
}

.albums {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--space-6) var(--space-4);
}

.album a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.album .frame {
  aspect-ratio: 4 / 3;
}

.album--feature {
  grid-column: span 2;
  grid-row: span 2;
}

.album--wide {
  grid-column: span 2;
}

.album--feature .frame,
.album--wide .frame {
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.album--feature .frame img,
.album--wide .frame img {
  position: absolute;
  inset: 0;
}

/* Name der Veranstaltung: immer gleiche Schrift, im Bild unten in einem Kasten */
.album__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  color: var(--white);
  background-color: var(--blue-700);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.album__name {
  font-weight: 700;
  font-size: var(--fs-300);
  line-height: 1.25;
}

.album__date {
  font-size: var(--fs-100);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

@media (max-width: 767px) {
  .album__cap {
    padding: var(--space-1) var(--space-2);
  }

  .album__name {
    font-size: var(--fs-200);
    line-height: 1.2;
  }
}

@media (hover: hover) and (pointer: fine) {
  .album a:hover .album__cap {
    color: var(--ink-950);
    background-color: var(--gold-400);
  }
}

.album-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1) var(--space-6);
}

.album-links a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  padding-block: var(--space-3);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--color-line-strong);
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}

.album-links span {
  font-size: var(--fs-100);
  font-weight: 400;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
  .album-links a:hover {
    color: var(--color-accent-text);
    text-decoration-color: currentColor;
  }
}

@media (max-width: 959px) {
  .album-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .albums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-3);
  }

  .album--feature {
    grid-row: span 1;
  }

  .album--feature .frame,
  .album--wide .frame {
    aspect-ratio: 16 / 10;
    flex: 0 0 auto;
  }

  .album-links {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Verein --------------------------------------------------------------- */
.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-line);
}

.figure {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
}

.figure dd {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-800);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
  color: var(--color-accent);
}

.figure dt {
  font-size: var(--fs-200);
  color: var(--color-text-muted);
}

.verein__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-7);
  margin-top: var(--space-8);
  align-items: start;
}

.verein__copy {
  grid-column: 1 / 6;
  grid-row: 1;
  display: grid;
  gap: var(--space-7);
}

.verein__media {
  grid-column: 7 / 13;
  grid-row: 1;
}

.frame--verein {
  aspect-ratio: 3 / 2;
}

.verein__block h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-3);
}

@media (max-width: 767px) {
  .figures {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .figure {
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: baseline;
    gap: var(--space-4);
  }

  .figure dd {
    font-size: var(--fs-700);
    min-width: 4.2ch;
  }
}

@media (max-width: 959px) {
  .verein__copy,
  .verein__media {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* --- Kontakt -------------------------------------------------------------- */
.kontakt {
  border-top: 0;
}

.kontakt__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-7);
}

.kontakt__head {
  grid-column: 1 / -1;
}

.kontakt__col {
  grid-column: span 4;
}

.kontakt__col h3 {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
}

.kontakt__col address + p {
  margin-top: var(--space-3);
}

.contact-list div {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  column-gap: var(--space-3);
  padding-block: var(--space-1);
}

.contact-list dt {
  color: var(--color-text-muted);
}

.contact-list a,
.social a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--color-line-strong);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}

.social li + li {
  margin-top: var(--space-2);
}

.social span {
  color: var(--color-text-muted);
}

@media (hover: hover) and (pointer: fine) {
  .contact-list a:hover,
  .social a:hover {
    color: var(--color-accent-text);
    text-decoration-color: currentColor;
  }
}

@media (max-width: 959px) {
  .kontakt__col {
    grid-column: span 6;
  }
}

@media (max-width: 599px) {
  .kontakt__col {
    grid-column: 1 / -1;
  }
}

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-6) var(--space-7);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-200);
  color: var(--color-text-muted);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}

.site-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.site-footer__links a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--color-line-strong);
  transition: text-decoration-color var(--dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__links a:hover {
    text-decoration-color: currentColor;
  }
}

/* --- Rechtstexte & 404 ---------------------------------------------------- */
.legal {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--section-pad);
}

.legal__inner {
  max-width: 46rem;
}

.legal .section-title {
  margin-bottom: var(--space-4);
}

.legal__meta {
  margin-bottom: var(--space-7);
  font-size: var(--fs-200);
  color: var(--color-text-muted);
}

.legal h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
}

.legal h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  font-weight: 600;
  font-size: var(--fs-300);
}

.legal p,
.legal address {
  max-width: var(--measure);
}

.legal p + p,
.legal p + address,
.legal address + p,
.legal ul + p,
.legal p + ul {
  margin-top: var(--space-3);
}

.legal ul {
  max-width: var(--measure);
  padding-left: 1.25em;
  list-style: disc;
}

.legal li + li {
  margin-top: var(--space-1);
}

.legal a {
  color: var(--link-color);
  text-underline-offset: 0.25em;
  overflow-wrap: anywhere;
}

.legal__back {
  margin-top: var(--space-8);
}

.notfound {
  min-height: 70dvh;
  display: flex;
  align-items: center;
  padding-block: var(--section-pad);
}

.notfound__script {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-script);
  font-weight: 700;
  font-size: var(--fs-script);
  line-height: 1;
  color: var(--color-accent);
  transform: rotate(-4deg);
  transform-origin: left center;
}

.notfound p {
  max-width: 40ch;
  margin-top: var(--space-5);
  color: var(--color-text-muted);
}

.notfound .text-link {
  display: inline-block;
  margin-top: var(--space-6);
}

/* --- Einspaltig unter 960px: 12er-Raster mit Abständen passt nicht auf schmale Screens --- */
@media (max-width: 959px) {
  .hero__grid,
  .karten__grid,
  .garde__intro,
  .tanzbaeren,
  .verein__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .kontakt__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kontakt__head {
    grid-column: 1 / -1;
  }

  .kontakt__col {
    grid-column: auto;
  }
}

@media (max-width: 599px) {
  .kontakt__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Unterseiten ohne Hauptnavigation: Werkzeuge rechtsbündig */
.wordmark + .site-header__tools {
  margin-left: auto;
  gap: var(--space-5);
}

/* Menü per Escape: ohne Animation schließen (Tastaturaktion) */
.js .site-nav__list.no-anim {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .site-nav__list,
  .js .site-nav__list.is-open {
    transform: none;
  }
}

/* Zweite Spalte im Programm minimal versetzt, damit Paare nicht gleichzeitig erscheinen */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .js .programm__list .event:nth-child(even).is-visible {
    transition-delay: 60ms;
  }
}

/* ==========================================================================
   Entwurf 3: Gold, Silber und viele Blautöne, Konfettiregen, Luftschlangen
   ========================================================================== */

/* --- Farbige Akzente ------------------------------------------------------ */
.eyebrow {
  color: var(--color-eyebrow);
}

.next-event {
  border-top: 2px solid var(--color-gold-line);
}

/* Kopfzeile: bunter Streifen statt einfarbiger Linie */
.site-header {
  border-top: 0;
}

.site-header::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--sky-400), var(--azure-400) 20%, var(--blue-500) 40%, var(--silver-300) 55%, var(--gold-400) 72%, var(--sky-400));
}

.karten__u18 {
  border-top-color: var(--gold-400);
}

.figure {
  padding-top: var(--space-4);
  border-top: 3px solid var(--color-gold-line);
}

.figure:nth-child(1) {
  border-top-color: var(--sky-400);
}

.figure:nth-child(2) {
  border-top-color: var(--silver-400);
}

.figure:nth-child(2) dd {
  color: var(--silver-text);
}

.figure:nth-child(3) dd {
  color: var(--color-gold-text);
}

:root {
  --tab-active: var(--color-gold-line);
}

.site-footer {
  border-top: 0;
}

.site-footer::before {
  content: "";
  display: block;
  height: 4px;
  margin-top: calc(var(--space-6) * -1);
  margin-bottom: var(--space-6);
  background: linear-gradient(90deg, var(--gold-400), var(--silver-300) 25%, var(--sky-400) 50%, var(--blue-500) 75%, var(--gold-400));
}

/* Silberner Zweitbutton, Textbutton und Link-Schalter */
.btn--silver {
  color: var(--ink-950);
  background: var(--silver-gradient);
}

.btn--text {
  padding-inline: var(--space-3);
  color: inherit;
  background: transparent;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.linklike {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--color-line-strong);
  transition: text-decoration-color var(--dur-fast) ease;
}

.site-footer__links .linklike {
  color: var(--color-text);
}

@media (hover: hover) and (pointer: fine) {
  .btn--silver:hover {
    filter: brightness(1.06);
  }

  .linklike:hover {
    text-decoration-color: currentColor;
  }
}

.social__note {
  margin-top: var(--space-4);
  max-width: 34ch;
  font-size: var(--fs-100);
  color: var(--color-text-muted);
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Blauer und silberner Lichtschein hinter allem */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 88% 6%, var(--glow-1), transparent 70%),
    radial-gradient(55% 60% at 4% 98%, var(--glow-2), transparent 72%),
    radial-gradient(34% 40% at 46% 44%, var(--glow-3), transparent 70%);
}

.hero__copy {
  position: relative;
  z-index: 2;
}

.hero__media {
  position: relative;
  z-index: 0;
}

.hero__script {
  width: fit-content;
  margin-left: 1.5em;
  padding: 0 0.14em 0.04em 0;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__script {
    background-image: var(--helau-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.hero__slogan {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-600);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* Groß wird groß geschrieben, Klein klein */
.hl {
  font-style: normal;
  font-weight: 700;
}

.hl--big {
  font-size: 1.3em;
  line-height: 0.9;
  color: var(--color-gold-text);
}

.hl--small {
  font-size: 0.74em;
  color: var(--color-accent-text);
}

@media (max-width: 479px) {
  .hero__slogan {
    font-size: 1.45rem;
  }
}

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

.karten__grid {
  position: relative;
  z-index: 1;
}

/* --- Konfetti ------------------------------------------------------------- */
.confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.karten .confetti {
  z-index: 0;
}

.confetti i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  background: linear-gradient(115deg, rgb(255 255 255 / 0.5), transparent 55%), var(--c);
  border-radius: var(--radius-1);
  opacity: var(--o, 1);
  transform: rotate(var(--r));
}

.confetti i.dot {
  border-radius: 50%;
}

/* Konfettiregen im Hero: wird von main.js auf einer Zeichenfläche gezeichnet */
.confetti__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Luftschlangen ---------------------------------------------------------- */
/* Wellenkante zwischen Abschnitten: Höhe 0, die Schlangen liegen ruhig mittig auf der Kante */
.wave {
  position: relative;
  z-index: 3;
  height: 0;
  pointer-events: none;
}

.wave svg {
  position: absolute;
  left: 0;
  display: block;
  overflow: visible;
}

/* --- Klick-Konfetti ------------------------------------------------------- */
.burst {
  position: fixed;
  inset: 0;
  z-index: var(--z-burst);
  pointer-events: none;
}

/* --- Cookie-Auswahl ------------------------------------------------------- */
.consent {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-consent);
  width: min(35rem, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100dvh - 2 * var(--space-4));
  padding: var(--space-5);
  overflow-y: auto;
  color: var(--color-text);
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-line-strong);
  border-top: 4px solid var(--sky-400);
  border-radius: var(--radius-1);
  box-shadow: 0 20px 56px rgb(0 0 0 / 0.4);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}

.consent.is-open {
  opacity: 1;
  transform: none;
}

.consent__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
}

.consent__text {
  margin-top: var(--space-2);
  font-size: var(--fs-200);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.consent__text a {
  color: var(--link-color);
  text-underline-offset: 0.25em;
}

.consent__details {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.consent__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  font-size: var(--fs-200);
  line-height: 1.45;
  color: var(--color-text-muted);
}

.consent__row input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  accent-color: var(--blue-500);
}

.consent__row strong {
  display: block;
  color: var(--color-text);
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
}

.consent .btn {
  padding: 0.7rem 1.1rem;
  font-size: var(--fs-200);
}

.consent .btn--text {
  padding-inline: var(--space-2);
}

/* Dialog vor dem Wechsel zu Instagram oder Facebook */
.guard {
  width: min(30rem, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-6);
  color: var(--color-text);
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-line-strong);
  border-top: 4px solid var(--gold-400);
  border-radius: var(--radius-1);
  box-shadow: 0 20px 56px rgb(0 0 0 / 0.45);
}

.guard::backdrop {
  background-color: rgb(6 11 15 / 0.62);
  backdrop-filter: blur(3px);
}

.guard__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-600);
  line-height: var(--lh-snug);
}

.guard__text {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.guard__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (max-width: 599px) {
  .consent {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 88dvh;
    border-radius: var(--radius-1) var(--radius-1) 0 0;
  }

  .consent__actions .btn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent {
    transform: none;
    transition: opacity 160ms ease;
  }
}

/* --- Hut und Mütze über der Bildecke ---------------------------------------- */
/* Die Hüte liegen vor dem Bild. Ihre Krempe hat unten zwei Ecken: die linke liegt genau auf der Oberkante,
   die rechte genau auf der rechten Kante des Bildes (bündig wie bei einem über die Ecke gehängten Hut).
   --lx/--ly: linke untere Krempenecke im Hutbild, --reach: Abstand der beiden Ecken in Hutbreiten nach der Drehung. */
.hero__hat,
.verein__hat {
  --w: min(36%, 13rem); /* das Foto ist nicht so breit wie der Container: der Hut wächst nicht mit */
  --lift: 0.9rem; /* Funkenmariechen-Hut: etwas über die Kante gehoben, damit er die Tänzerinnen nicht verdeckt */
  --lx: 16.7%;
  --ly: 96.6%;
  --reach: 0.62;
  --tilt: 37deg;
  --hat-x: calc(var(--lx) * -1);
  --hat-y: calc(var(--ly) * -1);
  position: absolute;
  top: calc(4px - var(--lift, 0px));
  left: calc(100% - var(--w) * var(--reach) - 4px);
  z-index: 3;
  width: var(--w);
  height: auto;
  pointer-events: none;
  transform-origin: var(--lx) var(--ly);
  transform: translate(var(--hat-x), var(--hat-y)) rotate(var(--tilt));
  filter: drop-shadow(0 4px 5px rgb(0 0 0 / 0.4));
}

.verein__hat {
  --lift: 0px;
  --w: 32%;
  --lx: 24.5%;
  --ly: 85%;
  --reach: 0.485;
  --tilt: 22deg;
}

@keyframes hat-drop {
  from {
    opacity: 0;
    transform: translate(var(--hat-x), calc(var(--hat-y) - 140%)) rotate(calc(var(--tilt) - 28deg));
  }
  60% {
    opacity: 1;
    transform: translate(var(--hat-x), calc(var(--hat-y) + 0.6rem)) rotate(calc(var(--tilt) + 6deg));
  }
  to {
    opacity: 1;
    transform: translate(var(--hat-x), var(--hat-y)) rotate(var(--tilt));
  }
}

/* Platz rechts, damit der Hut nicht am Seitenrand abgeschnitten wird */
.hero__media,
.verein__media {
  position: relative;
  margin-right: 2.25rem;
}

.verein {
  overflow-x: clip;
}

@media (min-width: 960px) {
  .hero__media,
  .verein__media {
    margin-right: 1.75rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__hat {
    animation: hat-drop 900ms var(--ease-out) 700ms both;
  }

  .js .verein__hat {
    opacity: 0;
  }

  .js .verein__media.is-visible .verein__hat {
    animation: hat-drop 900ms var(--ease-out) 500ms both;
  }
}

/* Hero-Unterkante: Welle als Fläche in Hintergrundfarbe (statt Maske, siehe main.js) */
.wave-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 4;
  display: block;
  pointer-events: none;
}

.wave-fill path {
  fill: var(--color-bg);
}

/* Das Kartenband liegt vor der Galerie, die ein Stück hinter seine Wellenkante rückt */
.karten {
  z-index: 1;
}

/* Termin in den Gerätekalender */
.programm__ics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
}

.programm__ics span {
  font-size: var(--fs-200);
  color: var(--color-text-muted);
}

.event__cal {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--fs-200);
}

/* Programm liegt auf einer eigenen Fläche, damit Verein und Programm sich trennen. Die Karten darin sind eine Stufe heller. */
.programm {
  background-color: var(--color-alt);
}

.programm .event,
.programm .cal__cell {
  background-color: var(--color-alt-card);
}

/* --- Ausklappen langer Abschnitte (nur Handy) ----------------------------------- */
.more {
  display: none;
}

@media (max-width: 767px) {
  .more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    margin: var(--space-6) auto 0;
    padding: 0 var(--space-5);
    font-size: var(--fs-200);
    font-weight: 600;
    color: var(--color-text);
    background: transparent;
    border: 1px solid var(--color-line-strong);
    border-radius: 999px;
    transition: transform 160ms var(--ease-out);
  }

  .more:active {
    transform: scale(0.97);
  }

  .more__arrow {
    flex: none;
    transition: transform var(--dur-base) var(--ease-out);
  }

  .more[aria-expanded="true"] .more__arrow {
    transform: rotate(180deg);
  }

  /* Programm: zugeklappt nur die nächste Veranstaltung */
  .programm[data-collapsed="true"] .programm__tools,
  .programm[data-collapsed="true"] .week:not(.has-next),
  .programm[data-collapsed="true"] .week__head,
  .programm[data-collapsed="true"] .event:not(.is-next) {
    display: none;
  }

  /* Karten: zugeklappt nur die beiden Wege in Kurzform (Beschriftung, Titel, Zeile darunter) und die Telefonnummer */
  .karten[data-collapsed="true"] .option__steps,
  .karten[data-collapsed="true"] .option__icon,
  .karten[data-collapsed="true"] .option--kasse > p:last-child,
  .karten[data-collapsed="true"] .karten__u18 {
    display: none;
  }

  .karten[data-collapsed="true"] .karten__call {
    display: inline-flex;
    margin-top: var(--space-5);
  }

  .karten .more {
    color: var(--color-band-text);
    border-color: var(--color-band-line);
  }

  /* Galerie: zugeklappt nur die ersten Alben */
  .galerie[data-collapsed="true"] .albums .album:nth-child(n + 5),
  .galerie[data-collapsed="true"] .album-links li:nth-child(n + 7) {
    display: none;
  }
}

/* Telefon-Schaltfläche der Karten: nur sichtbar, wenn der Abschnitt auf dem Handy zugeklappt ist */
.karten__call {
  display: none;
}

/* --- Verein: Geschichte als lesbarer Fließtext statt Platzhalter ---------------- */
.verein__copy {
  align-self: center;
}

.verein__text {
  max-width: 58ch;
  font-size: var(--fs-300);
  line-height: 1.75;
  color: var(--color-text);
  text-wrap: pretty;
}

/* Initiale in Gold, drei Zeilen hoch */
.verein__text::first-letter {
  float: left;
  margin: 0.04em 0.1em 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5.1em;
  line-height: 0.76;
  color: var(--color-gold-text);
}

/* Hinweis zur Altersgrenze im Kopf des Kartenbands, auch zugeklappt sichtbar */
.karten__age {
  max-width: var(--measure);
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  font-size: var(--fs-200);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-band-text);
  border-left: 3px solid var(--gold-400);
}

/* --- Hero: mittig angeordnet. Titel mit Helau, Slogan, Lead, breites Foto, darunter eine Zeile mit Buttons --- */
.hero__grid {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-6);
  align-items: start;
}

.hero__media {
  grid-column: auto;
}

.hero__top {
  --hero-title: clamp(3rem, 1rem + 5.4vw, 6.25rem);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Der Titel bestimmt die Breite, "Helau!" sitzt rechts unten und überlappt ihn leicht.
   Die Abstände rechnet --hero-title in der Schriftgröße des Titels. */
.hero__brand {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

.hero__title {
  font-size: var(--hero-title);
}

.hero__helau {
  position: absolute;
  right: -0.1em;
  bottom: -0.62em;
  font-size: var(--hero-title);
  text-align: left;
}

.hero__script {
  margin: 0;
  padding: 0 0.14em 0.04em 0;
  font-size: clamp(3.25rem, 1.6rem + 5.4vw, 6.5rem);
  transform-origin: center;
}

.hero__slogan {
  margin-top: calc(var(--hero-title) * 0.8); /* Platz für das überhängende Helau! */
}

.hero__lead {
  max-width: 40ch;
  margin: var(--space-3) auto 0;
  font-size: var(--fs-300);
}

/* Zeile unter dem Foto: Karteninfo, nächste Veranstaltung, Zum Programm */
.hero__cta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  text-align: center;
}

.hero__cta .next-event {
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: 0;
}

.hero__cta .next-event__meta-line {
  margin: 0;
}

.hero__cta .next-event__label {
  font-size: var(--fs-200);
  color: var(--color-text-muted);
}

.hero__cta .next-event__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-400);
  line-height: 1.2;
}

.hero__cta .next-event__meta {
  justify-content: center;
  margin-top: var(--space-1);
  font-size: var(--fs-200);
}

/* Schmal: Der Hut ragt über das Foto, dafür bekommt das Foto oben mehr Abstand zum Lead-Text */
@media (max-width: 959px) {
  .hero__media {
    margin-top: 2.25rem;
  }
}

/* Handy: die nächste Veranstaltung steht über den beiden Buttons */
@media (max-width: 767px) {
  .hero__cta .next-event {
    flex-basis: 100%;
    order: -1;
  }
}

@media (min-width: 960px) {
  .hero {
    padding-top: 2.5rem;
  }

  .hero__grid {
    row-gap: 2.25rem;
  }

  /* Breit: "Helau!" beginnt unter "nia" und ragt rechts über den Titel hinaus, der Slogan steht in einer Zeile */
  .hero__helau {
    left: 62%;
    right: auto;
    bottom: -0.8em;
  }

  .hero__slogan {
    margin-top: calc(var(--hero-title) * 0.85);
    font-size: clamp(1.6rem, 0.85rem + 1.4vw, 2.3rem);
  }

  .hero__slogan br {
    display: none;
  }

  /* Die Breite des Fotos richtet sich nach der Fensterhöhe, damit es mit der Buttonzeile ganz ins Fenster
     passt (main.js rechnet das genau aus, dies ist der Ersatzwert ohne Skript). */
  .hero__media {
    --hero-reserve: 39rem;
    width: min(calc(100% - 1.75rem), max(30rem, calc((100vh - var(--hero-reserve)) * 2.4326)));
    margin-inline: auto;
  }
}

@supports (height: 100svh) {
  @media (min-width: 960px) {
    .hero__media {
      width: min(calc(100% - 1.75rem), max(30rem, calc((100svh - var(--hero-reserve)) * 2.4326)));
    }
  }
}

/* Kleiner Hinweis unter der Geschichte */
.verein__note {
  max-width: 58ch;
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  font-size: var(--fs-200);
  line-height: 1.5;
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-gold-line);
}

/* --- Social Media: vier Kacheln im Kontaktbereich ---------------------------------- */
.kontakt__social {
  grid-column: 1 / -1;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.kontakt__social h3 {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
}

.social-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.social-grid li {
  flex: 0 1 auto;
}

.social-tile {
  --tile-c: #d6249f;
  --tile-ink: #fff;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon name" "icon sub";
  align-items: center;
  column-gap: var(--space-3);
  width: 15.5rem;
  max-width: 100%;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--tile-c) 16%, transparent), transparent 60%),
    var(--color-surface);
  border: 2px solid var(--tile-c);
  border-radius: var(--radius-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

/* Hauptfarbe der jeweiligen Marke: Instagram, Facebook, WhatsApp, TikTok */
.social-grid li:nth-child(1) .social-tile {
  --tile-c: #d6249f;
}

.social-grid li:nth-child(2) .social-tile {
  --tile-c: #1877f2;
}

.social-grid li:nth-child(3) .social-tile {
  --tile-c: #25d366;
}

.social-grid li:nth-child(4) .social-tile {
  --tile-c: #f4f6f9;
  --tile-ink: #000;
}

:root[data-theme="light"] .social-grid li:nth-child(4) .social-tile {
  --tile-c: #000;
  --tile-ink: #fff;
}

/* TikTok-Note mit dem typischen Versatz in Cyan und Rot */
.social-grid li:nth-child(4) .social-tile__icon svg {
  filter: drop-shadow(-1px -0.5px 0 #25f4ee) drop-shadow(1px 0.5px 0 #fe2c55);
}

.social-tile__icon {
  display: grid;
  place-items: center;
  grid-area: icon;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--tile-ink);
  background-color: var(--tile-c);
  border-radius: 50%;
}

.social-tile__name {
  grid-area: name;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-300);
  line-height: 1.2;
}

.social-tile__sub {
  grid-area: sub;
  font-size: var(--fs-200);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  a.social-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px -10px var(--tile-c);
  }
}

/* Adresse und Telefon teilen sich die Breite, Social Media steht darunter */
@media (min-width: 960px) {
  .kontakt__col {
    grid-column: span 6;
  }
}

/* Footer: Logo, Schriftzug und Vereinsname auf einer Linie */
.site-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.legal__source {
  margin-top: var(--space-6);
  font-size: var(--fs-200);
  color: var(--color-text-muted);
}

/* Hinweis auf die Gestalterin, ganz unten im Footer */
.site-footer__credit {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  font-size: var(--fs-200);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-line);
}

.site-footer__credit::before {
  content: "";
  flex: none;
  width: 2.1rem;
  height: 0.5rem;
  background:
    radial-gradient(circle at 0.25rem 50%, var(--gold-400) 0.2rem, transparent 0.21rem),
    radial-gradient(circle at 1.05rem 50%, var(--sky-400) 0.2rem, transparent 0.21rem),
    radial-gradient(circle at 1.85rem 50%, var(--silver-400) 0.2rem, transparent 0.21rem);
}

.site-footer__credit a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--color-gold-line);
}