/* =========================================================
   MAGNAT Weihnachtssingen 2026 – Landingpage
   Design: Figma „FC Eintracht Bamberg 2010 e.V.“ (1920px)
   ========================================================= */

/* Lokale Ersatzschrift (Google Fonts, SIL OFL), bis Adobe Fonts per
   Einwilligung geladen ist – siehe assets/cookieconsent-config.js */
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("assets/fonts/quicksand-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("assets/fonts/quicksand-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #080e3f;
  --blue: #253884;
  --red: #e62336;
  --cream: #f7f1e4;
  --white: #ffffff;

  --font: "all-round-gothic", "Quicksand", system-ui, sans-serif;

  --container: 994px;
  --gutter: 24px;

  /* Inhaltsbreite: 994px bei 1920px, darunter langsamer schmaler als die
     Typografie (≈ 900px bei 1440px, ≈ 815px bei 1024px) */
  --container-w: min(var(--container), 20vw + 610px);

  /* Maßeinheit aus dem 1920px-Design: 1px bei ≥ 1920px, darunter proportional
     kleiner, aber nie unter 0.72px (≈ 1380px Viewport). Unter 1024px gilt 1px. */
  --u: clamp(0.72px, 100vw / 1920, 1px);
}

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

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

body {
  margin: 0;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font);
  font-weight: 500;
  font-size: max(16px, calc(20 * var(--u)));
  line-height: max(24px, calc(30 * var(--u)));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}

p,
h1,
h2,
dl,
dd,
ol,
ul {
  margin: 0;
}

a {
  color: inherit;
}

.container {
  width: min(var(--container-w), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ---------- Typografie ---------- */

.h1 {
  font-weight: 700;
  font-size: calc(60 * var(--u));
  line-height: calc(70 * var(--u));
  text-transform: uppercase;
}

.h1--cream {
  color: var(--cream);
}

.h2 {
  font-weight: 700;
  font-size: calc(33.33 * var(--u));
  line-height: calc(38.89 * var(--u));
  text-transform: uppercase;
}

.lead {
  font-size: calc(30 * var(--u));
  line-height: calc(45 * var(--u));
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: calc(10 * var(--u));
  color: var(--red);
}

.eyebrow img {
  flex: none;
}

.eyebrow--white {
  color: var(--white);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 175px;
  height: 52px;
  padding: 0 4px;
  border: 0;
  color: var(--white);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.btn--navy { background: var(--navy); }
.btn--navy:hover { background: var(--red); }

.btn--blue { background: var(--blue); }
.btn--blue:hover { background: var(--red); }

.btn--red { background: var(--red); }
.btn--red:hover { background: #c81a2c; }

.btn--outline {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--red);
}
.btn--outline:hover { background: var(--red); }

.section--tickets .btn--navy:hover { background: var(--white); color: var(--navy); }
.section--programm .btn--navy:focus-visible { outline-color: var(--navy); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 19px;
}

/* =========================================================
   Hero
   ========================================================= */

/* Alle Hero-Maße stammen aus dem 1920px-Design und skalieren über --u.
   .hero__inner ist so breit wie .container, Text und Logos fluchten
   dadurch mit den Sektionen darunter. Die Partnerlogos hängen am rechten
   Rand, alles andere am linken. */
.hero {
  position: relative;
  height: calc(1154 * var(--u));
  overflow: hidden;
  /* Unten Navy wie Skyline und Vorwort, damit an der Kante kein Blau durchblitzt */
  background: linear-gradient(var(--blue) 50%, var(--navy) 50%);
}

.hero__bg {
  position: absolute;
  bottom: calc(-4 * var(--u));
  left: 50%;
  width: max(100%, 1920 * var(--u));
  max-width: none;
  transform: translateX(-50%);
}

.hero__inner {
  position: relative;
  width: var(--container-w);
  height: 100%;
  margin-inline: auto;
}

.hero__visual {
  position: absolute;
  top: calc(396 * var(--u));
  left: calc(461 * var(--u));
  width: calc(1171 * var(--u));
  aspect-ratio: 1171 / 666;
}

.hero__stadium {
  position: absolute;
  top: 9.91%;
  left: 0;
  width: 100%;
  max-width: none;
}

.hero__singer {
  position: absolute;
  top: 0;
  left: 5.124%;
  width: 40.734%;
}

.hero__logo {
  position: absolute;
  top: calc(50 * var(--u));
  /* Ragt wie im Design links über die Inhaltskante, aber nie aus dem Fenster */
  left: max(calc(-158 * var(--u)), (var(--container-w) - 100vw) / 2 + 16px);
  width: calc(691 * var(--u));
  margin: 0;
}

.hero__partners {
  position: absolute;
  top: calc(116 * var(--u));
  right: calc(3 * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(25 * var(--u));
}

.hero__partners img {
  width: auto;
  height: calc(76 * var(--u));
}

.hero__content {
  position: absolute;
  top: calc(642 * var(--u));
  left: 0;
  width: calc(482 * var(--u));
}

.hero__text {
  margin-bottom: calc(24 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: calc(45 * var(--u));
}

.hero__sponsors {
  position: absolute;
  top: calc(1083 * var(--u));
  left: 0;
  display: flex;
  align-items: flex-end;
  gap: calc(24 * var(--u));
  height: calc(39 * var(--u));
  padding: 0;
  margin: 0;
  list-style: none;
}

.hero__sponsors img {
  width: calc(var(--w) * var(--u));
}

/* =========================================================
   Sektionen
   ========================================================= */

.section--vorwort {
  padding: calc(135 * var(--u)) 0 calc(101 * var(--u));
  background: linear-gradient(180deg, var(--navy) 0, var(--blue) calc(539 * var(--u))) var(--blue);
}

.section--vorwort .h1 { margin-bottom: calc(29 * var(--u)); }
.section--vorwort .lead { margin-bottom: calc(21 * var(--u)); }
.vorwort__closing { margin-bottom: calc(29 * var(--u)); }

/* ---------- Weihnachtserlebnis ---------- */

.section--erlebnis {
  padding: calc(159 * var(--u)) 0 calc(104 * var(--u));
  background: var(--navy);
}

.erlebnis__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: calc(104 * var(--u));
}

.erlebnis__intro {
  width: max(300px, calc(380 * var(--u)));
  flex: none;
  margin-bottom: calc(6 * var(--u));
}

.facts {
  display: grid;
  /* Ort-Spalte bekommt immer ihre volle Breite, die anderen geben nach */
  grid-template-columns: minmax(auto, calc(399 * var(--u))) minmax(auto, calc(241 * var(--u))) max-content;
  margin-bottom: calc(41 * var(--u));
}

.facts dt {
  color: var(--red);
}

.facts dd {
  font-weight: 700;
  font-size: calc(33.33 * var(--u));
  line-height: calc(38.89 * var(--u));
  text-transform: uppercase;
}

.facts dd span {
  display: block;
  font-weight: 500;
  font-size: max(16px, calc(20 * var(--u)));
  line-height: max(24px, calc(30 * var(--u)));
  text-transform: none;
}

/* ---------- Tickets ---------- */

.section--tickets {
  padding: calc(85 * var(--u)) 0 calc(86 * var(--u));
  background: var(--red);
  scroll-margin-top: 0;
}

.tickets {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.section--tickets .eyebrow { margin-bottom: 0; }
.section--tickets .h2 { margin-bottom: calc(6 * var(--u)); }

.tickets__text {
  max-width: max(460px, calc(583 * var(--u)));
}

.tickets .btn { flex: none; }

/* ---------- Programm ---------- */

.section--programm {
  padding: calc(124 * var(--u)) 0 calc(110 * var(--u));
  background: var(--cream);
  color: var(--navy);
}

.programm__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: calc(52 * var(--u));
}

.programm__note {
  width: max(230px, calc(277 * var(--u)));
  flex: none;
  margin-top: calc(68 * var(--u));
  color: var(--red);
  font-size: 15px;
  line-height: 20px;
}

.timeline {
  padding: 0;
  margin-bottom: calc(59 * var(--u));
  list-style: none;
}

.timeline > li {
  display: flex;
  padding: calc(20 * var(--u)) 0 calc(19 * var(--u));
  border-top: 1px solid rgba(37, 56, 132, 0.1);
  font-weight: 700;
  font-size: calc(30 * var(--u));
  line-height: calc(40 * var(--u));
}

.timeline > li:last-child {
  border-bottom: 1px solid rgba(37, 56, 132, 0.1);
}

.timeline time {
  flex: none;
  width: calc(117 * var(--u));
  color: var(--red);
}

.timeline span {
  color: var(--blue);
}

.timeline > li > div {
  flex: 1;
}

/* Mitwirkende unter einem Programmpunkt; Trennlinien ragen 15px nach links */
.timeline__acts {
  margin: calc(20 * var(--u)) 0 calc(-5 * var(--u)) -15px;
  padding: 0;
  list-style: none;
  color: var(--blue);
  font-weight: 500;
  font-size: max(14px, calc(15 * var(--u)));
  line-height: max(26px, calc(31 * var(--u)));
}

.timeline__acts li {
  padding-left: 15px;
}

.timeline__acts li + li {
  border-top: 1px solid rgba(37, 56, 132, 0.1);
}

/* ---------- FAQ ---------- */

.section--faq {
  padding: calc(139 * var(--u)) 0 0;
  background: var(--blue);
}

.section--faq .h1 { margin-bottom: calc(47 * var(--u)); }

.faq__item {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.faq__item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq__item summary {
  position: relative;
  display: block;
  padding: calc(20 * var(--u)) 68px calc(19 * var(--u)) 0;
  font-weight: 700;
  font-size: calc(30 * var(--u));
  line-height: calc(40 * var(--u));
  list-style: none;
  cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "";
  position: absolute;
  top: calc(40 * var(--u) - 15px);
  right: 19px;
  width: 30px;
  height: 30px;
  background: url("assets/pfeil-zu.svg") no-repeat center / 30px 30px;
}

.faq__item[open] summary::after {
  background-image: url("assets/pfeil-offen.svg");
}

.faq__item summary:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

.faq__item p {
  max-width: 788px;
  padding-bottom: calc(45 * var(--u));
}

/* =========================================================
   Footer
   ========================================================= */

.footer {
  padding: calc(87 * var(--u)) 0 calc(120 * var(--u));
  background: var(--blue);
}

.footer__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 0;
  margin-bottom: calc(75 * var(--u));
  list-style: none;
}

.footer__meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 12px;
  line-height: 14px;
}

.footer__meta nav {
  display: flex;
  gap: 12px;
}

.footer__meta a {
  text-decoration: none;
}

.footer__meta a:hover,
.footer__consent:hover {
  text-decoration: underline;
}

.footer__consent {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ---------- Einwilligung (CookieConsent v3) ---------- */

#cc-main {
  --cc-font-family: var(--font);
  --cc-modal-border-radius: 0;
  --cc-btn-border-radius: 0;
  --cc-modal-margin: 24px;
  --cc-z-index: 1000;

  --cc-bg: var(--navy);
  --cc-primary-color: var(--white);
  --cc-secondary-color: rgba(255, 255, 255, 0.8);
  --cc-link-color: var(--white);

  --cc-btn-primary-bg: var(--red);
  --cc-btn-primary-color: var(--white);
  --cc-btn-primary-border-color: var(--red);
  --cc-btn-primary-hover-bg: #c81a2c;
  --cc-btn-primary-hover-color: var(--white);
  --cc-btn-primary-hover-border-color: #c81a2c;

  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--white);
  --cc-btn-secondary-border-color: rgba(255, 255, 255, 0.4);
  --cc-btn-secondary-hover-bg: var(--blue);
  --cc-btn-secondary-hover-color: var(--white);
  --cc-btn-secondary-hover-border-color: var(--blue);

  --cc-separator-border-color: rgba(255, 255, 255, 0.12);
  --cc-toggle-on-bg: var(--red);
  --cc-toggle-off-bg: rgba(255, 255, 255, 0.35);
  --cc-toggle-on-knob-bg: var(--white);
  --cc-toggle-off-knob-bg: var(--white);
  --cc-toggle-enabled-icon-color: var(--red);
  --cc-toggle-disabled-icon-color: var(--navy);
  --cc-toggle-readonly-bg: rgba(255, 255, 255, 0.2);
  --cc-toggle-readonly-knob-bg: var(--white);
  --cc-toggle-readonly-knob-icon-color: var(--navy);

  --cc-section-category-border: rgba(255, 255, 255, 0.12);
  --cc-cookie-category-block-bg: rgba(255, 255, 255, 0.05);
  --cc-cookie-category-block-border: rgba(255, 255, 255, 0.08);
  --cc-cookie-category-block-hover-bg: rgba(255, 255, 255, 0.09);
  --cc-cookie-category-block-hover-border: rgba(255, 255, 255, 0.12);
  --cc-cookie-category-expanded-block-bg: rgba(255, 255, 255, 0.03);
  --cc-cookie-category-expanded-block-hover-bg: rgba(255, 255, 255, 0.06);

  --cc-overlay-bg: rgba(8, 14, 63, 0.7);
  --cc-footer-bg: #050a30;
  --cc-footer-color: rgba(255, 255, 255, 0.8);
  --cc-footer-border-color: rgba(255, 255, 255, 0.12);
  --cc-webkit-scrollbar-bg: rgba(255, 255, 255, 0.2);
  --cc-webkit-scrollbar-hover-bg: rgba(255, 255, 255, 0.35);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1023px) {
  :root {
    --u: 1px;
    --container-w: var(--container);
  }

  .hero {
    height: auto;
    padding: 24px 0 40px;
    background: linear-gradient(transparent calc(100% - 80px), var(--navy) 0) var(--blue);
  }

  .hero__bg {
    bottom: 0;
    width: max(1344px, 160%);
  }

  .hero__inner {
    display: flex;
    flex-direction: column;
    width: min(var(--container), 100% - 2 * var(--gutter));
  }

  .hero__inner > * {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
  }

  .hero__partners {
    order: 1;
    align-self: center;
    gap: 16px;
  }

  .hero__partners img {
    height: 52px;
  }

  .hero__logo {
    order: 2;
    width: min(440px, 100%);
    margin: 16px auto 0;
  }

  .hero__content {
    order: 3;
    width: auto;
    max-width: 560px;
    margin-top: 24px;
  }

  .hero__text {
    margin-bottom: 24px;
    font-size: 24px;
    line-height: 36px;
  }

  /* Im gestapelten Layout liegt der Button auf Blau statt auf der Skyline */
  .hero .btn--blue { background: var(--red); }
  .hero .btn--blue:hover { background: var(--navy); }

  .hero__visual {
    order: 4;
    width: calc(100% + var(--gutter));
    max-width: 800px;
    margin-top: 32px;
  }

  /* Raster statt Umbruch: 4 nebeneinander, auf schmalen Screens 2 × 2 */
  .hero__sponsors {
    order: 5;
    display: grid;
    grid-template-columns: repeat(4, max-content);
    align-items: end;
    gap: 24px 28px;
    height: auto;
    margin-top: 32px;
  }
}

@media (max-width: 900px) {
  .h1 {
    font-size: 40px;
    line-height: 46px;
  }

  .h2,
  .facts dd {
    font-size: 26px;
    line-height: 32px;
  }

  .lead,
  .hero__text {
    font-size: 22px;
    line-height: 33px;
  }

  .section--vorwort { padding: 80px 0 72px; }
  .section--erlebnis { padding: 80px 0 72px; }
  .section--tickets { padding: 64px 0; }
  .section--programm { padding: 80px 0 72px; }
  .section--faq { padding-top: 80px; }
  .footer { padding: 64px 0 64px; }

  .erlebnis__head,
  .programm__head,
  .tickets {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .erlebnis__head { margin-bottom: 56px; }
  .programm__head { margin-bottom: 40px; }

  .erlebnis__intro,
  .programm__note {
    width: auto;
    max-width: 480px;
    margin: 0;
  }

  .facts {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .timeline > li,
  .faq__item summary {
    font-size: 22px;
    line-height: 30px;
  }

  .timeline > li {
    padding: 16px 0;
  }

  .timeline time {
    width: 84px;
  }

  .timeline__acts {
    margin: 12px 0 0 -15px;
    line-height: 20px;
  }

  .timeline__acts li {
    padding-block: 6px;
  }

  .faq__item summary {
    padding: 16px 48px 16px 0;
  }

  .faq__item summary::after {
    top: 16px;
    right: 0;
  }

  .faq__item p {
    padding-bottom: 28px;
  }

  .footer__logos {
    justify-content: center;
    gap: 32px 40px;
    margin-bottom: 48px;
  }
}

@media (max-width: 680px) {
  .hero__sponsors {
    grid-template-columns: repeat(2, max-content);
  }
}

@media (max-width: 480px) {
  .h1 {
    font-size: 31px;
    line-height: 38px;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}