/* ==========================================================================
   Harmonie "L'Echo de l'Alzette" - site styles

   Light, spacious layout. The club red is an accent rather than a background:
   white surfaces on a warm off-white page, separated by hairline borders
   instead of heavy shadows.

   Contents
     1. Tokens          6. Hero            11. Event detail   16. Quiz
     2. Base            7. Event cards     12. Sponsors       17. Footer
     3. Layout          8. Carousel        13. Support page   18. Responsive
     4. Header          9. Agenda          14. Aerdbiersmarsch
     5. Buttons        10. Gallery / news  15. Contact
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --red: #8b0000;
  --red-hover: #6d0000;
  --red-soft: #b23b3b;
  --red-tint: #f6e2e0;
  --red-line: #e3c2c0;
  --red-deep: #5e0000;

  /* Neutrals */
  --ink: #1c1917;
  --ink-soft: #44403c;
  --muted: #78716c;
  --line: #e2d0ce;
  --line-soft: #efe2e0;
  --surface: #fbf6f5;
  --bg: #f2e8e6;

  /* Type */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.2rem;
  --step-2: clamp(1.35rem, 2.2vw, 1.7rem);
  --step-3: clamp(1.7rem, 3.2vw, 2.3rem);
  --step-4: clamp(2.1rem, 5vw, 3.2rem);

  /* Space */
  --sp-1: 0.35rem;
  --sp-2: 0.65rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2.25rem;
  --sp-6: 3.5rem;
  --sp-7: 5rem;

  /* Shape */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow: 0 6px 24px rgba(28, 25, 23, 0.07);

  /* Content spans the full viewport; this gutter keeps it off the edges and
     grows on wider screens. */
  --gutter: clamp(1.25rem, 3.5vw, 4rem);
  --header-h: 72px;

  /* Comfortable line length for running text, which should not stretch the
     whole way across a wide display even though its container does. */
  --measure: 78ch;
  /* Width of a reading page's single centred column, card padding included. */
  --reading-column: 58rem;

  /* Aliases kept so any older rule or inline style still resolves. */
  --primary-color: var(--red);
  --primary-light: var(--red-soft);
  --primary-dark: var(--red-hover);
  --accent-color: var(--red-soft);
  --text-color: var(--ink);
  --text-light: var(--muted);
  --text-main: var(--ink);
  --text-on-primary: #ffffff;
  --text-on-dark: #ffffff;
  --background-light: var(--bg);
  --background-white: var(--surface);
  --background-main: var(--bg);
  --background-card: var(--surface);
  --background-dark: var(--ink);
  --border-radius-sm: var(--radius-sm);
  --border-radius: var(--radius);
  --border-radius-lg: var(--radius);
  --shadow-md: var(--shadow);
  --shadow-lg: var(--shadow);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --gap-size: var(--sp-3);
  --red-50: var(--red-tint);
  --red-100: var(--red-tint);
  --red-200: var(--red-line);
  --red-600: var(--red-soft);
  --red-700: var(--red);
  --red-800: var(--red-hover);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-hover); text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); letter-spacing: -0.01em; }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }

::selection { background: var(--red); color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.content-container,
.page-layout,
.support-page,
.aerdbier-page {
  width: 100%;
  padding: var(--sp-5) var(--gutter) var(--sp-7);
}

.section-container { width: 100%; }

.page-header {
  margin-bottom: var(--sp-6);
  max-width: 62ch;
}
.page-header h1 {
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  position: relative;
}
.page-header h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 4px;
  border-radius: 2px;
  background: var(--red);
}
.page-header p {
  margin: 0;
  color: var(--muted);
  font-size: var(--step-1);
  line-height: 1.5;
}
.page-header .btn { margin-top: var(--sp-4); }

/* Small uppercase label introducing a group of cards. */
.section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--sp-4);
}
/* Red rule running out from the label to the edge of the section. */
.section-title::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--red-line), transparent);
}

.section-empty,
.events-empty {
  margin: 0;
  padding: var(--sp-5) var(--sp-4) var(--sp-5);
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.skip-link {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translate(-50%, -160%);
  z-index: 2000;
  padding: 0.7rem 1.25rem;
  background: var(--red);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: transform var(--transition-fast);
}
.skip-link:focus {
  transform: translate(-50%, 0);
  color: #fff;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. Header / navigation
   -------------------------------------------------------------------------- */
.main-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--red);
  border-bottom: 2px solid var(--red-deep);
  transition: box-shadow var(--transition-normal);
}
.main-header.scrolled { box-shadow: 0 2px 16px rgba(94, 0, 0, 0.28); }

.main-header .navbar { padding: 0; }
.main-header .container {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--header-h);
}

.navbar-brand { padding: 0; margin: 0; }
.navbar-brand:hover { text-decoration: none; }

.logo-title { display: flex; align-items: center; gap: 0.75rem; }

.logo {
  height: 44px;
  width: auto;
  transition: height var(--transition-normal);
}
.main-header.scrolled .logo { height: 38px; }

.navbar-brand .site-name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  transition: font-size var(--transition-normal);
}
.main-header.scrolled .navbar-brand .site-name { font-size: 1rem; }

.navbar-nav { gap: 0.15rem; align-items: center; }

.main-header .nav-link {
  position: relative;
  padding: 0.45rem 0.85rem !important;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  font-weight: 550;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.main-header .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  text-decoration: none;
}
.main-header .nav-link.active { color: #fff; font-weight: 650; }
.main-header .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.05rem;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}

.navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
  background: rgba(255, 255, 255, 0.1);
}
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-width='2.2' d='M4 7.5h22M4 15h22M4 22.5h22'/%3e%3c/svg%3e");
  width: 1.35em;
  height: 1.35em;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn,
.btn-large,
.read-more-btn,
.show-more-btn,
.description-toggle,
.btn-calendar,
.btn-payconiq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast);
}

.btn,
.btn-large,
.btn-payconiq,
.btn-primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.btn:hover,
.btn-large:hover,
.btn-payconiq:hover,
.btn-primary:hover {
  background: var(--red-hover);
  border-color: var(--red-hover);
  color: #fff;
  text-decoration: none;
}
.btn:active, .btn-large:active { transform: translateY(1px); }

.btn-secondary,
.read-more-btn,
.show-more-btn,
.description-toggle,
.btn-calendar {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn-secondary:hover,
.read-more-btn:hover,
.show-more-btn:hover,
.description-toggle:hover,
.btn-calendar:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-tint);
  text-decoration: none;
}

.btn-large { padding: 0.85rem 1.9rem; font-size: 1rem; }

.view-all-container {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-5);
}

.error-actions { text-align: center; }
.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-4);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
/* A compact banner rather than a full screen of photo: the next events have
   to be visible without scrolling. The calls to action sit on the image, over
   the red wash, so they cost no extra height. */
.hero {
  position: relative;
  margin-bottom: var(--sp-5);
}

/* A ch unit here would resolve against this element's own 1rem font size,
   not the heading's, which crushed the heading into a ~220px column. */
.hero-content {
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
}
.hero-content h1,
.hero-content h2 {
  margin: 0;
  font-size: var(--step-4);
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

.hero-image {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line-soft);
  border: 1px solid var(--red-line);
  /* An aspect-ratio plus a max-height shrinks the box's WIDTH to preserve the
     ratio, which stopped the banner spanning the page. A fluid height keeps it
     full width; measured so a whole event card still clears the fold. */
  width: 100%;
  height: clamp(190px, 22vw, 300px);
}
/* Red wash along the bottom of the photo, tying it to the rest of the page. */
.hero-image::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(transparent, rgba(94, 0, 0, 0.72));
  pointer-events: none;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   7. Event cards (homepage)
   -------------------------------------------------------------------------- */
.events { margin-bottom: var(--sp-7); }

.events-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}

.event-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
.event-card:hover {
  border-color: var(--red);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  text-decoration: none;
  color: inherit;
}

.event-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--line-soft);
}
/* Placeholder crest: contained and padded rather than cropped to fill. */
.event-card img.is-placeholder,
.article-banner.is-placeholder {
  object-fit: contain;
  padding: var(--sp-4);
  background: var(--red-tint);
  border-bottom: 1px solid var(--red-line);
}
.article-banner.is-placeholder { padding: var(--sp-5); }
/* The title scrim is a dark fade meant for a photo; over the light placeholder
   it turns muddy grey, so fade into the brand red there instead. */
.article-banner.is-placeholder + .article-content {
  background: linear-gradient(transparent, var(--red));
}

.event-details {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}
.event-details h3 { margin: 0; font-size: var(--step-1); }
.event-details .date {
  order: -1;
  margin: 0;
  color: var(--red);
  font-size: var(--step--1);
  font-weight: 600;
}
.event-details .place {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}
.event-details > .event-link {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap var(--transition-fast);
}
.event-card:hover .event-link { gap: 0.7rem; }

/* --------------------------------------------------------------------------
   8. Articles carousel (homepage)
   -------------------------------------------------------------------------- */
.aktualiteiten-section { margin-bottom: var(--sp-7); }

.article-card-link { display: block; text-decoration: none; color: inherit; }
.article-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.article-banner {
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 380px;
  object-fit: cover;
}
.article-card .article-content {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}
.article-card .article-content h3 {
  margin: 0;
  color: #fff;
  font-size: var(--step-2);
}
.carousel-control-prev, .carousel-control-next { width: 8%; }
.carousel-control-prev-icon, .carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  padding: 1rem;
  background-size: 45%;
}

/* --------------------------------------------------------------------------
   9. Agenda
   -------------------------------------------------------------------------- */
.agenda-container { display: flex; flex-direction: column; }

.month-divider {
  position: sticky;
  top: var(--header-h);
  background: var(--bg);
  padding: var(--sp-4) 0 var(--sp-2);
  z-index: 5;
}
.month-divider h2 {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

.month-events {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  margin-bottom: var(--sp-5);
}

.agenda-event {
  display: grid;
  grid-template-columns: 60px 84px 1fr;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.agenda-event:hover {
  background: var(--red-tint);
  text-decoration: none;
  color: inherit;
}
.agenda-event.past-event { opacity: 0.6; }
.agenda-event#today { background: var(--red-tint); }

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.event-date .day {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--red);
}
.event-date .weekday {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.event-thumbnail {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--line-soft);
  border: 1px solid var(--line);
}
.event-thumbnail img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.agenda-event .event-info h3 { margin: 0 0 0.2rem; font-size: var(--step-1); }
.agenda-event-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  color: var(--muted);
  font-size: var(--step--1);
}
.agenda-event-details span { display: inline-flex; align-items: center; gap: 0.4rem; }
.agenda-event-details i { color: var(--red-soft); }

/* --------------------------------------------------------------------------
   10. Gallery and news
   -------------------------------------------------------------------------- */
.gallery-grid { display: flex; flex-direction: column; gap: var(--sp-6); }

.gallery-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.gallery-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.gallery-section-header h2 { margin: 0; font-size: var(--step-2); }
.gallery-date {
  color: var(--muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.gallery-description-container { margin-bottom: var(--sp-4); }
.gallery-description { color: var(--ink-soft); }
.gallery-description.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.description-toggle,
.show-more-btn {
  margin-top: var(--sp-3);
  padding: 0.45rem 1rem;
  font-size: var(--step--1);
}

.image-count {
  color: var(--muted);
  font-size: var(--step--1);
  margin-bottom: var(--sp-3);
}

.gallery-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-2);
}
.gallery-item {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--line-soft);
  border: 1px solid var(--line);
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform var(--transition-normal);
}
.gallery-item:hover img { transform: scale(1.04); }

.show-more-container { display: flex; justify-content: center; }

.no-albums,
.no-articles {
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
}
.no-albums i,
.no-articles i {
  font-size: 2.5rem;
  color: var(--red-line);
  margin-bottom: var(--sp-3);
}
.no-albums h3,
.no-articles h3 { margin-bottom: var(--sp-2); }

/* News grid */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-4);
}
.news-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.news-card:hover { border-color: var(--red); box-shadow: var(--shadow); }
.news-banner {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--line-soft);
}
.news-banner.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--red-line);
}
.news-content {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.4rem;
}
.news-date {
  color: var(--red);
  font-size: var(--step--1);
  font-weight: 600;
}
.news-title { margin: 0; font-size: var(--step-1); }
.news-excerpt { color: var(--ink-soft); font-size: 0.98rem; }
.news-excerpt.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card .read-more-btn { margin-top: auto; align-self: flex-start; }

/* Article page (single article, laid out like the Aerdbiersmarsch page) */
.news-banner-link { display: block; }

.article-date {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--red) !important;
  font-size: var(--step--1) !important;
  font-weight: 600;
}

.article-banner-full {
  display: block;
  width: 100%;
  max-width: var(--reading-column);
  margin: 0 auto var(--sp-5);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.article-back { margin-top: var(--sp-5); }
.article-back a {
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
}
.article-back a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   11. Event detail
   -------------------------------------------------------------------------- */
.event-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--sp-6);
  align-items: start;
}
.main-content { min-width: 0; }

.event-detail > h1 { margin: var(--sp-4) 0 var(--sp-4); }

.event-banner {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--line-soft);
}
.event-banner-html {
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius);
  background: var(--red-tint);
  border: 1px solid var(--red-line);
}
.event-banner-html h1 { margin-bottom: var(--sp-2); }
.event-datetime { margin: 0; color: var(--red); font-weight: 600; }

.event-content { margin-bottom: var(--sp-5); }
/* Parsedown turns a leading '# ' into an h1. The page already has one for the
   title, so keep a body heading from dwarfing it. */
.markdown-content h1 { font-size: var(--step-2); margin-top: var(--sp-5); }
.markdown-content h2 { font-size: var(--step-2); margin-top: var(--sp-5); }
.markdown-content h3 { font-size: var(--step-1); margin-top: var(--sp-4); }
.markdown-content ul, .markdown-content ol { padding-left: 1.25rem; }
.markdown-content li { margin-bottom: 0.35rem; }
.markdown-content img { border-radius: var(--radius-sm); max-width: 100%; height: auto; }
.markdown-content > :first-child { margin-top: 0; }
.markdown-content blockquote {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--red-line);
  background: var(--red-tint);
  color: var(--ink-soft);
}
.markdown-content code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--line-soft);
  font-size: 0.92em;
}
.markdown-content a { color: var(--red); }

.language-selector {
  display: flex;
  gap: 0.35rem;
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.btn-language {
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-language:hover { border-color: var(--red); color: var(--red); }
.btn-language.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.event-flyer-section { margin-top: var(--sp-5); }
.event-flyer-section h2 { font-size: var(--step-2); }
.event-flyer-image,
.aerdbier-score-img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  max-width: 100%;
}

/* Sidebar */
.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-3));
}
.sidebar-container {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.keypoints h3,
.next-events h3 {
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--sp-3);
}

.details-grid { display: flex; flex-direction: column; }
.details-grid p {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.details-grid p:last-child { border-bottom: 0; }
.details-grid strong {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 650;
}
.address-link,
.custom-property-link { display: inline-flex; align-items: center; gap: 0.35rem; }
.address-link i,
.custom-property-link i { font-size: 0.7em; }

.calendar-actions { margin-top: var(--sp-4); }
.calendar-dropdown, .calendar-dropdown .btn-calendar { width: 100%; }
.dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 0.35rem;
}
.dropdown-item {
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--ink);
}
.dropdown-item:hover { background: var(--red-tint); color: var(--red); }
.calendar-icon-google { color: #4285f4; }
.calendar-icon-outlook { color: #0078d4; }
.calendar-icon-yahoo { color: #6001d2; }
.calendar-icon-apple { color: var(--ink); }

.mini-event-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  text-decoration: none;
}
.mini-event-card:last-child { border-bottom: 0; }
.mini-event-card:hover { color: var(--red); text-decoration: none; }
.mini-event-card .event-info { flex: 1; min-width: 0; }
.mini-event-card h4 { margin: 0 0 0.1rem; font-size: 0.98rem; }
.mini-event-card p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.event-arrow { color: var(--red); font-size: 0.8rem; }

/* --------------------------------------------------------------------------
   12. Sponsors
   -------------------------------------------------------------------------- */
.sponsors-section { margin-bottom: var(--sp-6); }
.sponsors-section > h2 {
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--sp-4);
}
.sponsors-intro { color: var(--muted); margin-bottom: var(--sp-4); }

.sponsors-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.sponsor-card {
  /* Fixed tile, but never wider than the column it sits in on a phone. */
  flex: 0 1 280px;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.sponsor-card:hover { border-color: var(--red-line); }
.sponsor-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  margin-bottom: var(--sp-3);
}
.sponsor-logo {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform var(--transition-fast);
}
.sponsor-card:hover { border-color: var(--red); box-shadow: var(--shadow-sm); }
.sponsor-card:hover .sponsor-logo { transform: scale(1.04); }
.sponsor-name {
  font-size: var(--step-0);
  font-weight: 650;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   13. Support page (Ennerstetzen)
   -------------------------------------------------------------------------- */
.intro-text { font-size: var(--step-1); color: var(--muted); }
.contact-info { color: var(--muted); }

.support-sections { display: flex; flex-direction: column; gap: var(--sp-5); }

.support-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.support-section .section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--red-tint);
}
.support-section .section-header i { color: var(--red); font-size: 1.1rem; }
.support-section .section-header h2 { margin: 0; font-size: var(--step-2); }
.support-section .section-content { padding: var(--sp-5) var(--sp-4); }

.support-options-grid,
.material-options,
.help-options,
.menu-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-3);
}

.option-card,
.material-item,
.help-item,
.info-note,
.action-item,
.menu-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.material-item,
.help-item,
.action-item {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 0.75rem;
}
.option-card i,
.material-item i,
.help-item i,
.action-item i,
.menu-icon { color: var(--red); font-size: 1.15rem; }
.option-card h3 { margin: 0; font-size: 1.02rem; }
.option-card p { margin: 0; color: var(--muted); font-size: var(--step--1); }

.highlight-text,
.highlight {
  display: block;
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius-sm);
  background: var(--red-tint);
  border: 1px solid var(--red-line);
  color: var(--ink-soft);
}

.payment-section { margin-top: var(--sp-5); }
.payment-section h3 { font-size: var(--step-1); text-align: center; }
.payment-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.payment-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
}
.payment-method h4 { margin: 0; font-size: 1rem; }
.payconiq-qr { width: 165px; border-radius: var(--radius-sm); }
.payconiq-logo { height: 18px; width: auto; filter: brightness(0) invert(1); }
.bank-info, .iban {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  word-break: break-all;
}
.payment-note { color: var(--muted); font-size: var(--step--1); }

.social-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-4);
}
.social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: all var(--transition-fast);
}
.social-button:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-tint);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   14. Aerdbiersmarsch / article reading column

   Reading pages are one centred column rather than full-bleed: the column is
   the measure, so running text fills the card it sits in instead of hugging
   the left edge of a very wide one.
   -------------------------------------------------------------------------- */
.reading-page > .page-header,
.aerdbier-gallery,
.aerdbier-sections,
.article-body {
  max-width: var(--reading-column);
  margin-inline: auto;
}
.reading-page > .page-header { max-width: var(--reading-column); }

.aerdbier-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.aerdbier-gallery img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.aerdbier-sections { display: flex; flex-direction: column; gap: var(--sp-5); }
.aerdbier-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.aerdbier-section-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--sp-3);
}
.aerdbier-section-header h2 { margin: 0; font-size: var(--step-2); }
.lang-flag { font-size: 1.3rem; }
.aerdbier-section h3 { font-size: var(--step-1); margin-top: var(--sp-4); }
.aerdbier-source { font-size: var(--step--1); color: var(--muted); }

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */
.contact-container { width: 100%; }
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.info-card:hover { border-color: var(--red); box-shadow: var(--shadow); }
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
  font-size: 1.15rem;
  margin-bottom: var(--sp-3);
}
.info-card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.info-card p { margin: 0; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   16. Quiz page
   -------------------------------------------------------------------------- */
.quiz-page { padding-block: 0 var(--sp-7); }
.quiz-hero {
  background: var(--red-tint);
  border-bottom: 1px solid var(--red-line);
  padding: var(--sp-6) 0;
  margin-bottom: var(--sp-6);
}
.quiz-hero .container,
.quiz-content {
  width: 100%;
  max-width: calc(var(--reading-column) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.quiz-hero h1 { margin-bottom: var(--sp-3); }
.event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.85rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.event-meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.event-meta i { color: var(--red); }
.event-meta .separator { color: var(--red-line); }

.success-box, .closed-box {
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.success-icon, .closed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
  font-size: 1.6rem;
  margin-bottom: var(--sp-3);
}
.success-box .btn { margin-top: var(--sp-4); }

.quiz-form, .overview-card, .price-card, .registration-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.form-section { margin-bottom: var(--sp-5); }
.form-section h3 { font-size: var(--step-1); margin-bottom: var(--sp-3); }

.form-group { margin-bottom: var(--sp-4); }
.form-group label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.95rem;
}
.form-control {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-tint);
  outline: none;
}
.form-text { color: var(--muted); font-size: var(--step--1); }

.validation-message, .field-error {
  font-size: var(--step--1);
  margin-top: 0.3rem;
}
.validation-message.error, .field-error { color: #b91c1c; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.overview-section { display: flex; flex-direction: column; gap: var(--sp-4); }
.overview-table { width: 100%; border-collapse: collapse; }
.overview-table th, .overview-table td {
  text-align: left;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.overview-table th { color: var(--muted); font-weight: 600; font-size: var(--step--1); }

.price-card { text-align: center; }
.price-inline { color: var(--red); font-weight: 700; }
.info-notes { display: flex; flex-direction: column; gap: var(--sp-2); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--red-deep);
  color: #f6e7e6;
  border-top: 4px solid var(--red);
  padding-top: var(--sp-6);
  margin-top: var(--sp-7);
}
.site-footer a { color: #ffffff; }
.site-footer a:hover { color: #ffffff; text-decoration: underline; }
.footer-content {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-5);
  padding: 0 var(--gutter) var(--sp-5);
}
.footer-section h2, .footer-section h3 {
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8a9a6;
  margin-bottom: var(--sp-3);
}
.company-name { font-weight: 650; color: #fff; margin-bottom: 0.1rem; }
.company-sub, .company-info address {
  color: #e2c4c2;
  font-style: normal;
  margin-bottom: var(--sp-2);
}
.footer-link { font-weight: 550; }

.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 0.4rem; }
.footer-nav a { color: #f6e7e6; }
.footer-nav a:hover { color: #fff; }

.social-links { display: flex; flex-direction: column; gap: 0.5rem; }
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #f6e7e6;
}
.social-link:hover { color: #fff; }
.social-link i { width: 1.1rem; text-align: center; color: #e8a9a6; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: var(--sp-3) 0;
}
.copyright {
  width: 100%;
  padding-inline: var(--gutter);
}
.copyright p {
  margin: 0;
  color: #d5aeac;
  font-size: var(--step--1);
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .main-header .navbar-collapse {
    padding: var(--sp-2) 0 var(--sp-3);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    margin-top: 0.4rem;
  }
  .main-header .navbar-nav { align-items: stretch; gap: 0.1rem; }
  .main-header .nav-link { padding: 0.65rem 0.75rem !important; }
  .main-header .nav-link.active::after { left: 0.75rem; right: auto; width: 18px; }

  .event-row { grid-template-columns: 1fr; }
  .sidebar-group { position: static; }
}

@media (max-width: 767.98px) {
  :root { --sp-6: 2.5rem; --sp-7: 3.25rem; }

  .content-container,
  .page-layout,
  .support-page,
  .aerdbier-page { padding-inline: var(--gutter); }

  .hero-image { height: clamp(180px, 46vw, 260px); }
  .hero-content { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); }
  .hero-actions .btn { padding: 0.6rem 1.1rem; font-size: 0.9rem; }

  .agenda-event {
    grid-template-columns: 52px 1fr;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-1);
  }
  .agenda-event .event-thumbnail { display: none; }
  .event-date .day { font-size: 1.4rem; }

  .gallery-section { padding: var(--sp-4); }
  .gallery-images { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

  .aerdbier-gallery img { height: 220px; }
  .quiz-form, .overview-card, .price-card, .registration-section { padding: var(--sp-4); }
  .article-card .article-content h3 { font-size: var(--step-1); }
}

@media (max-width: 420px) {
  .navbar-brand .site-name { font-size: 0.9rem; white-space: normal; }
  .logo { height: 38px; }
}

/* Hero call-to-action row (homepage). */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
/* Sitting on a photo, so the outline button needs a solid ground. */
.hero-actions .btn-secondary {
  background: #fff;
  border-color: #fff;
}
.hero-actions .btn-secondary:hover {
  background: var(--red-tint);
  border-color: var(--red-tint);
  color: var(--red);
}

/* Hidden from sight, still read by assistive technology. */
.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;
}

/* --------------------------------------------------------------------------
   19. Reading measure
   The page now fills the viewport, so blocks of running text get their own
   cap; grids and card rows are free to use the full width.
   -------------------------------------------------------------------------- */
.event-description,
.gallery-description,
.news-excerpt,
.support-section .section-content > p,
.sponsors-intro { max-width: var(--measure); }

/* Inside a column that is already the measure, a second cap would strand the
   text against the left edge again. */
.reading-page .markdown-content,
.reading-page .aerdbier-section p,
.reading-page .aerdbier-section h3 { max-width: none; }

.event-banner-html { max-width: none; }

/* On a very wide display the event sidebar can sit further out. */
@media (min-width: 1600px) {
  .event-row { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* Shown in place of an event body when no description has been written yet. */
.event-description-empty {
  margin: 0;
  padding: var(--sp-5) var(--sp-4);
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}