/* ==========================================================================
   NM³H-Events – Haupt-Stylesheet
   Werte aus dem CSS des bisherigen Auftritts übernommen (Design-Variablen,
   12-Spalten-Raster mit 8-px-Einheit, Inhaltsbreite 960 px).
   Umbruchpunkte wie im Original: <768 (klein), 768–1023 (mittel), ≥1024 (groß).
   ========================================================================== */

/* ---------- Schriften (lokal, OFL) ---------- */

@font-face {
  font-family: Lato;
  src: url(../fonts/lato-400.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Lato;
  src: url(../fonts/lato-700.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Merriweather;
  src: url(../fonts/merriweather-400.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Merriweather;
  src: url(../fonts/merriweather-700.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url(../fonts/libre-baskerville-400.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Nur ein Schnitt vorhanden – Fettung wird wie im Original vom Browser erzeugt */
@font-face {
  font-family: "Racing Sans One";
  src: url(../fonts/racing-sans-one-400.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design-Variablen ---------- */

:root {
  --color-dark: #151515;
  --color-light: #f8f8f8;
  --color-muted: #eaeaea;
  --color-orange: #ff5733;
  --color-rust: #d13900;
  --color-wine: #900c3f;
  --color-plum: #581845;
  --color-pink: #fa397a;
  --color-magenta: #e24cb6;
  --color-error: #ffb0b0;
  --color-success: #aad3ab;

  --font-heading: Lato, sans-serif;
  --font-body: Merriweather, Georgia, serif;
  --font-display: "Racing Sans One", sans-serif;
  --font-serif: "Libre Baskerville", Georgia, serif;

  /* Original verkleinert Grundgrößen zweistufig um 0,875; feste Größen bleiben */
  --scale: 1;
  --fs-body: calc(16px * var(--scale));
  --fs-h1: calc(40px * var(--scale));
  --fs-h2: calc(33px * var(--scale));
  --fs-h3: calc(28px * var(--scale));
  /* Zeilenhöhe "normal" der Merriweather – trägt im Original auch kleinere Schrift */
  --lh-body: calc(var(--fs-body) * 1.257);

  --section-width: 960px;
  --section-width-wide: 1920px;
  --unit: 8px;

  --header-offset: 214px;
  --focus-outline: 2px solid #00f;
}

@media (max-width: 1024px) {
  :root {
    --scale: 0.875;
    --header-offset: 140px;
  }
}

@media (max-width: 768px) {
  :root {
    --scale: 0.765625;
    --header-offset: 130px;
  }
}

/* ---------- Grundlagen ---------- */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-padding-top: var(--header-offset);
}

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

body {
  margin: 0;
  background-color: var(--color-light);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: normal;
}

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

strong,
b {
  font-weight: 700;
}

a {
  color: inherit;
}

/* Gemeinsamer Fokus-Stil des Originals: blaue Linie mit weißem Hof – auf hellem und dunklem Grund sichtbar */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

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

/* Sprunglink: unsichtbar bis zum Fokus */
.skip-link {
  position: absolute;
  top: -100px;
  left: 6px;
  z-index: 1000;
  padding: 13px 24px;
  border-radius: 8px;
  background-color: #fff;
  color: #00f;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 6px;
}

/* Typografie im Inhalt: Abstände wie die Browser-Vorgaben des Originals,
   bezogen auf die Grundgröße der Ebene (nicht auf Sondergrößen) */
.site-main h1,
.site-main h2,
.site-main h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: normal;
  color: var(--heading-color, inherit);
}

.site-main h1 {
  margin: calc(var(--fs-h1) * 0.67) 0;
  font-size: var(--fs-h1);
}

.site-main h2 {
  margin: calc(var(--fs-h2) * 0.83) 0;
  font-size: var(--fs-h2);
}

.site-main h3 {
  margin: var(--fs-h3) 0;
  font-size: var(--fs-h3);
}

.site-main p {
  margin: var(--fs-body) 0;
}

.site-main a {
  color: var(--link-color, inherit);
}

/* ==========================================================================
   Raster: 12 Spalten, Spalten mit 16 px oben/unten und 8 px seitlich
   ========================================================================== */

.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.col {
  position: relative;
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
  padding: 16px var(--unit);
}

.col-sm-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
.col-sm-6 { flex-basis: 50%; max-width: 50%; }

@media (min-width: 768px) and (max-width: 1024px) {
  .col-md-3 { flex-basis: 25%; max-width: 25%; }
  .col-md-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
  .col-md-6 { flex-basis: 50%; max-width: 50%; }
  .col-md-9 { flex-basis: 75%; max-width: 75%; }
  .col-md-12 { flex-basis: 100%; max-width: 100%; }
}

@media (min-width: 1024px) {
  .col-lg-2 { flex-basis: 16.6667%; max-width: 16.6667%; }
  .col-lg-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
  .col-lg-6 { flex-basis: 50%; max-width: 50%; }
  .col-lg-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
  .col-lg-12 { flex-basis: 100%; max-width: 100%; }
}

.row--center { align-items: center; }
.row--end { align-items: flex-end; }

/* ==========================================================================
   Abschnitte
   ========================================================================== */

.section {
  position: relative;
  padding: 0 16px;
  background-color: var(--section-bg);
  color: var(--section-fg);
}

.section > * {
  max-width: calc(var(--section-width) - 32px);
  margin-inline: auto;
}

.section--wide > * {
  max-width: calc(var(--section-width-wide) - 32px);
}

.section--padded {
  padding-block: 16px;
}

.section--light {
  --section-bg: var(--color-light);
  --section-fg: var(--color-dark);
  --heading-color: var(--color-rust);
  --link-color: var(--color-rust);
}

.section--dark {
  --section-bg: var(--color-dark);
  --section-fg: var(--color-light);
  --heading-color: var(--color-orange);
  --link-color: var(--color-orange);
}

.section--muted {
  --section-bg: var(--color-muted);
  --section-fg: var(--color-dark);
  --heading-color: var(--color-dark);
  --link-color: var(--color-dark);
}

/* Bildspalte links mit Luft nur zur Textspalte hin (Original: 32 32 32 0) */
.col--media {
  padding: 32px 32px 32px 0;
}

.media-link {
  display: block;
  line-height: 0;
}

.site-main figure {
  margin: 0;
}

.text-small p,
p.text-small {
  font-size: 12px;
  line-height: var(--lh-body);
}

/* ---------- Kopfzeile ---------- */

.site-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
  padding: 0 16px;
  background-color: var(--color-dark);
  color: var(--color-light);
}

.site-header__inner {
  max-width: calc(var(--section-width) - 32px);
  margin-inline: auto;
  align-items: center;
}

.site-header__logo a,
.site-header__logo img {
  display: block;
  width: 100%;
}

.site-header__nav {
  display: flex;
  justify-content: flex-end;
}

/* ---------- Hauptnavigation ---------- */

.main-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav__list a {
  display: block;
  margin-right: 8px;
  padding: 8px 10px;
  border: 2px solid transparent;
  border-radius: 100px;
  color: var(--color-light);
  font-family: var(--font-display);
  font-size: 18px;
  text-decoration: none;
  white-space: nowrap;
}

.main-nav__list a:hover {
  border-color: rgba(250, 57, 122, 0.1);
}

.main-nav__list .current-menu-item > a,
.main-nav__list a[aria-current="page"] {
  border-color: var(--color-pink);
}

.main-nav__toggle,
.main-nav__backdrop {
  display: none;
}

@media (max-width: 1023.98px) {
  .site-header__nav {
    align-self: flex-start;
  }

  /* Ohne JavaScript bleibt das Menü sichtbar und untereinander */
  .main-nav__list {
    flex-direction: column;
    align-items: flex-end;
  }

  .js .main-nav__toggle {
    position: relative;
    z-index: 310;
    display: block;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-light);
    cursor: pointer;
  }

  .main-nav__toggle svg {
    display: block;
    width: 32px;
    height: 32px;
  }

  .main-nav__toggle .main-nav__icon-close,
  .main-nav--open .main-nav__toggle .main-nav__icon-open {
    display: none;
  }

  .main-nav--open .main-nav__toggle .main-nav__icon-close {
    display: block;
  }

  .js .main-nav__panel {
    display: none;
  }

  .js .main-nav--open .main-nav__panel {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    left: 0;
    z-index: 304;
    display: block;
    width: 100%;
    max-height: 568px;
    padding: 64px 0;
    overflow: auto;
    background-color: var(--color-dark);
    box-shadow: 0 12px 12px -12px rgba(0, 0, 0, 0.4);
  }

  .js .main-nav__list {
    align-items: center;
    text-align: center;
  }

  .js .main-nav__list li {
    width: 250px;
    margin: 0 auto 4px;
  }

  .js .main-nav__list a {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .js .main-nav--open .main-nav__backdrop {
    position: fixed;
    inset: 0;
    z-index: 303;
    display: block;
    background: linear-gradient(to bottom, transparent 0% 20%, rgba(0, 0, 0, 0.4) 20% 100%);
  }
}

/* ---------- Startseite: Einstieg ---------- */

.site-main .intro__title {
  font-size: 56px;
  font-weight: 700;
  text-align: center;
  --heading-color: var(--color-dark);
}

@media (min-width: 1024px) {
  .intro__text-col {
    margin-left: 16.6667%;
  }
}

/* ---------- Startseite: Ticketpartner ---------- */

.partner .row {
  padding-block: 16px;
}

.site-main .partner__title {
  font-size: var(--fs-h1);
  --heading-color: var(--color-light);
}

/* ---------- Veranstaltung mit freiem Raster (Blink Day) ---------- */

/* Original: 12 Spalten à 69 px + 12 px Abstand, 14 Zeilen à mind. 40 px.
   Hier mit 1fr, damit es auch zwischen 768 und 960 px nicht überläuft. */
.event-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 0 20px;
}

.section .event-grid {
  max-width: var(--section-width);
}

.section:has(> .event-grid) {
  padding-inline: 0;
}

.event-grid__media {
  grid-area: 1 / 1 / 2 / 2;
}

/* Original-Überschrift endet mit einem Zeilenumbruch – eine Leerzeile Abstand zum Text */
.event-grid__heading {
  grid-area: 2 / 1 / 3 / 2;
  padding-bottom: calc(var(--fs-h1) * 1.2);
}

.event-grid__text {
  grid-area: 3 / 1 / 4 / 2;
}

@media (min-width: 768px) {
  .event-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(14, minmax(40px, auto));
    padding: 0;
  }

  .event-grid__media {
    z-index: 2;
    grid-area: 1 / 1 / 10 / 7;
    align-self: start;
    max-height: 456px;
  }

  .event-grid__heading {
    z-index: 5;
    grid-area: 9 / 1 / 15 / 13;
  }

  .event-grid__text {
    z-index: 6;
    grid-area: 1 / 7 / 9 / 13;
  }
}

.site-main .event-grid__heading > * {
  margin: 0;
  color: var(--color-orange);
  font-family: var(--font-display);
  font-weight: 700;
}

.site-main .event__title {
  font-size: var(--fs-h1);
}

.site-main .event-grid__heading .event__date,
.site-main .event-grid__heading .event__venue {
  display: inline;
}

.site-main .event__date {
  font-size: 30px;
}

/* Abstand per CSS statt Leerzeichen – der Classic Editor entfernt führende Leerzeichen */
.site-main .event__venue {
  margin-left: 0.25em;
  font-size: 23px;
}

.site-main .event-grid__text p {
  margin: 0;
  text-align: justify;
}

/* ---------- Veranstaltung zweispaltig (Living Theory) ---------- */

.event-split .row {
  padding-block: 16px;
}

.event-split .media-link img {
  border-radius: 12px;
}

/* Zeilenhöhe wie im Original, wo der Titel in einer 40-px-Überschrift steckt */
.site-main .event-split__title {
  font-size: 33px;
  line-height: max(39.6px, calc(var(--fs-h1) * 1.2));
  --heading-color: var(--color-light);
}

/* Original endet mit einem leeren Absatz – dessen Höhe hier als Innenabstand */
.event-split .col:last-child {
  padding-bottom: calc(16px + var(--lh-body) + var(--fs-body));
}

.site-main .event-split a {
  color: var(--color-light);
}

/* ---------- Band mit Hintergrundbild und Social-Media-Kasten ---------- */

.social-band {
  padding: 240px 16px 0;
  background-color: var(--color-dark);
  background-position: 50% 50%;
  background-size: cover;
}

.social-band__box {
  padding: 40px;
  border-radius: 4px 4px 0 0;
  background-color: var(--color-light);
}

.social-band__box .wp-block-social-links {
  justify-content: center;
  margin: 0 0 8px;
  padding: 16px var(--unit);
}

/* ---------- Social-Media-Symbole ---------- */

.site-main .wp-block-social-links {
  gap: 0;
}

.site-main .wp-block-social-links.social-links .wp-social-link {
  margin: 8px;
  color: inherit;
}

.social-links .wp-social-link a {
  display: block;
  padding: 0;
  color: inherit;
}

.social-links .wp-social-link svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Große Variante: Symbol im abgerundeten Quadrat wie im Original (48 px) */
.social-links--large {
  color: var(--color-dark);
}

.social-links--large .wp-social-link a {
  padding: 8px;
  border: 2px solid currentColor;
  border-radius: 8px;
}

.social-links--large .wp-social-link svg {
  width: 28px;
  height: 28px;
}

.social-links--small {
  color: var(--color-light);
}

@media (max-width: 459.98px) {
  .social-links--large .wp-social-link a {
    padding: 6px;
  }

  .social-links--large .wp-social-link svg {
    width: 20px;
    height: 20px;
  }

  .social-links--small .wp-social-link svg {
    width: 18px;
    height: 18px;
  }
}

/* ---------- Über uns ---------- */

.about {
  padding-block: 80px;
}

/* Kein Flex: Abstände zwischen Überschriften sollen zusammenfallen wie im Original */
.col.about__text-col {
  padding: 32px;
  text-align: center;
}

.site-main .about__title {
  font-size: 72px;
  text-align: center;
  --heading-color: var(--color-wine);
}

.site-main .about__subtitle {
  font-size: 24px;
  font-weight: 700;
  line-height: calc(var(--fs-h3) * 1.2);
  text-align: center;
  --heading-color: var(--color-plum);
}

.site-main .about__text {
  font-family: var(--font-serif);
  text-align: center;
}

.about__text-col figure,
.about__text-col img {
  width: 100%;
}

/* Original: jedes Bild-Element mit 8 px Abstand nach unten */
.site-main .about figure {
  margin-bottom: var(--unit);
}

/* ---------- Kontakt ---------- */

.contact .col {
  padding: 32px;
}

.site-main .contact__title {
  font-size: 40px;
}

.contact .social-links {
  justify-content: flex-start;
}

/* ---------- Kontaktformular ---------- */

.contact-form {
  display: flex;
  flex-direction: column;
  padding: 8px;
  color: var(--color-light);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.contact-form__input {
  max-width: 100%;
  margin: var(--unit) 0;
  padding: 12px 16px;
  border: 2px solid var(--color-light);
  border-radius: 0;
  background: transparent;
  color: var(--color-light);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: normal;
}

.contact-form__input:hover {
  background-color: rgba(248, 248, 248, 0.2);
}

.contact-form__input:focus {
  border-color: var(--color-magenta);
  background-color: transparent;
}

.contact-form textarea.contact-form__input {
  height: 228px;
  resize: vertical;
}

.contact-form__field--consent {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
}

/* Eigenes Kästchen, bleibt aber ein echtes Kontrollkästchen (Tastatur, Screenreader) */
.contact-form__checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
  border: 2px solid var(--color-light);
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  appearance: none;
}

.contact-form__checkbox:hover {
  background-color: rgba(248, 248, 248, 0.2);
}

.contact-form__checkbox:checked {
  background: rgba(248, 248, 248, 0.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23f8f8f8' stroke-width='2'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.contact-form__consent {
  flex: 1;
  cursor: pointer;
}

.contact-form__field--consent .contact-form__error {
  flex-basis: 100%;
}

.contact-form__error,
.contact-form__summary {
  margin: 0;
  color: var(--color-error);
}

.contact-form [aria-invalid="true"] {
  border-color: var(--color-error);
}

.contact-form__summary {
  margin-bottom: 16px;
}

.contact-form__status {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 2px solid var(--color-success);
  color: var(--color-success);
}

.contact-form__status--error {
  border-color: var(--color-error);
  color: var(--color-error);
}

.contact-form__button {
  padding: 8px 16px;
  border: 2px solid transparent;
  border-radius: 0;
  background-color: var(--color-plum);
  color: var(--color-light);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: normal;
  cursor: pointer;
}

.contact-form__button:hover {
  background-color: rgba(88, 24, 69, 0.9);
}

/* Honigtopf für Spam-Bots */
.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Fußzeile ---------- */

/* 16 px Zeile + 16 px Spalte wie im Original-Raster */
.site-footer {
  padding: 32px 16px;
  background-color: var(--color-dark);
  color: var(--color-light);
}

.site-footer__inner {
  max-width: calc(var(--section-width) - 32px);
  margin-inline: auto;
}

.site-footer p {
  margin: var(--fs-body) 0;
  text-align: center;
}

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */

.page-title .row {
  padding-block: 16px;
}

.site-main .page-title__heading {
  font-size: var(--fs-h2);
  --heading-color: var(--color-light);
}

.page-content {
  padding: 80px 16px;
}

/* Kasten 40 px + Spalte 16/8 px wie im Original-Raster */
.page-content__box {
  padding: 56px 48px;
  border-radius: 16px;
  background-color: var(--color-light);
}

.site-main .page-content h2 {
  font-size: var(--fs-h3);
}

.site-main .page-content h3 {
  font-size: calc(23px * var(--scale));
}

/* Linkfarbe der Rechtstexte im Original etwas dunkler als das Rostrot */
.page-content {
  --link-color: #bc3200;
}

.page-content a {
  word-break: break-word;
}

.page-content ul,
.page-content ol {
  margin: var(--fs-body) 0;
  padding-left: 40px;
}