/* ============================================================
   Content Safari — Landingpage
   12. November 2026, Meranti-Halle im Allwetterzoo Münster

   Aufbau:
   1. Design-Tokens
   2. Reset & Basis
   3. Layout-Bausteine
   4. Typografie
   5. Komponenten
   6. Footer
   7. Animation
   8. Rechtstexte
   ============================================================ */

/* ------------------------------------------------------------
   1. Design-Tokens
   Farben bewusst reduziert: heller Grund, dunkles Grün als
   Schriftfarbe, Emerald als einziger Akzent, Chartreuse
   ausschließlich für den Anmelde-Button.
   ------------------------------------------------------------ */
:root {
  /* Flächen */
  --c-bg:            #fbfaf7;  /* Cream / Off-White */
  --c-bg-alt:        #f4f2ec;  /* zweite Fläche für abwechselnde Sektionen */
  --c-surface:       #ffffff;

  /* Schrift */
  --c-ink:           #14261d;  /* Deep Forest Green, fast schwarz */
  --c-ink-soft:      #47584f;
  --c-ink-faint:     #7b8880;
  --c-ink-invert:    #f6f7f3;

  /* Akzente */
  --c-accent:        #1f6b4e;  /* Emerald */
  --c-accent-dark:   #16523b;
  --c-accent-soft:   #e6efe9;
  --c-cta:           #c8dc28;  /* Chartreuse, nur für den CTA */
  --c-cta-hover:     #b8cc18;

  /* Linien */
  --c-line:          #e3e0d7;
  --c-line-strong:   #cfcbbe;

  /* Hero-Overlay */
  --c-scrim-top:     rgba(14, 40, 29, .35);
  --c-scrim-bottom:  rgba(14, 40, 29, .78);

  /* Typografie — Systemschriften, damit keine externen Requests
     entstehen. Sobald eine Hausschrift vorliegt, hier tauschen. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* Maße */
  --w-container: 1140px;
  --w-narrow:    720px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;

  --space-section: clamp(4rem, 9vw, 7.5rem);
}

/* ------------------------------------------------------------
   2. Reset & Basis
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

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

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

a { color: var(--c-accent); }
a:hover { color: var(--c-accent-dark); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--c-ink);
  color: var(--c-ink-invert);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: var(--c-ink-invert);
}

/* ------------------------------------------------------------
   3. Layout-Bausteine
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.container--narrow { max-width: var(--w-narrow); }

.section { padding-block: var(--space-section); }
.section--alt {
  background: var(--c-bg-alt);
  border-block: 1px solid var(--c-line);
}
/* Alle Inhaltsbereiche laufen auf die gleiche Breite (--w-container).
   --w-narrow wird nur noch auf den Rechtstextseiten verwendet. */
.section__head {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* ------------------------------------------------------------
   4. Typografie
   ------------------------------------------------------------ */
.eyebrow {
  margin: 0 0 .75rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.h1, .h2 {
  margin: 0 0 1.25rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
  text-wrap: balance;
}
.h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
.h2 { font-size: clamp(1.65rem, 3.6vw, 2.4rem); }

.lead {
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  line-height: 1.55;
  color: var(--c-ink);
  margin: 0 0 1.5rem;
}
.lead--tight { margin-bottom: 0; }

p { margin: 0 0 1.25rem; color: var(--c-ink-soft); }
p:last-child { margin-bottom: 0; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--c-accent-soft);
  padding-bottom: 2px;
  transition: border-color .18s ease;
}
.link-arrow::after { content: "→"; transition: transform .18s ease; }
.link-arrow:hover { border-bottom-color: var(--c-accent); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------
   5. Komponenten
   ------------------------------------------------------------ */

/* --- Buttons --- */
.button {
  display: inline-block;
  padding: .95rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.button--cta {
  background: var(--c-cta);
  color: var(--c-ink);
}
.button--cta:hover {
  background: var(--c-cta-hover);
  color: var(--c-ink);
  transform: translateY(-1px);
}

/* --- Hero --- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(74vh, 680px);
  padding-block: clamp(4rem, 12vw, 7rem);
  overflow: hidden;
  background: var(--c-accent-dark);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Verlauf, damit die Schrift auf jedem Motiv lesbar bleibt */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--c-scrim-top) 0%, var(--c-scrim-bottom) 82%);
}
.hero__inner { color: var(--c-ink-invert); }

.hero__logo,
.hero__logo-img {
  margin: 0 0 1rem;
}
.hero__logo {
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.03em;
  color: #fff;
}
.hero__logo-img { max-height: 120px; width: auto; }

.hero__claim {
  margin: 0 0 1.75rem;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 500;
  color: var(--c-cta);
  letter-spacing: -.01em;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0 0 2rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
}

.hero__actions { margin: 0 0 1.25rem; }

.hero__note {
  margin: 0;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .78);
}

/* --- Fakten-Leiste --- */
/* Genau zwei Zustände: vier nebeneinander oder 2 × 2.
   Bewusst kein auto-fit, damit keine Dreier- oder Einerreihe entsteht. */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.facts__item {
  background: var(--c-surface);
  padding: 1.5rem 1.5rem 1.65rem;
}
.facts__label {
  display: block;
  margin-bottom: .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.facts__value {
  display: block;
  font-weight: 600;
  line-height: 1.45;
}

/* --- Themen-Karten --- */
/* Genau zwei Zustände: 2 × 2 oder untereinander. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem;
}
.card__title {
  margin: 0 0 .85rem;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.card__title::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 1rem;
  border-radius: 2px;
  background: var(--c-accent);
}
.card p { margin: 0; font-size: 1rem; }

/* --- Agenda --- */
.agenda {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
}
.agenda__item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--c-line);
}
.agenda__item--talk { background: linear-gradient(to right, var(--c-accent-soft), transparent 65%); }

.agenda__time {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  white-space: nowrap;
}
.agenda__body { min-width: 0; }
.agenda__speaker {
  margin: 0 0 .3rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.agenda__title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.agenda__title--tbd {
  color: var(--c-ink-faint);
  font-style: italic;
  font-weight: 600;
}
.agenda__desc { margin: .4rem 0 0; font-size: .9688rem; }

.agenda__footnote {
  margin-top: 1.5rem;
  font-size: .875rem;
  color: var(--c-ink-faint);
}

/* --- Info-Box (Anfahrt) --- */
.info-box {
  margin-top: 2.5rem;
  padding: 1.75rem 2rem;
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.info-box__title {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  letter-spacing: -.01em;
}
.info-box__address {
  color: var(--c-ink);
  line-height: 1.5;
}
.info-box p { font-size: 1rem; }
.info-box__links { margin-top: 1.25rem; }

/* --- Karte (Zwei-Klick-Lösung) --- */
.map {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  margin-top: 1.5rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg-alt);
  overflow: hidden;
}
/* Ohne JavaScript lässt sich die Karte nicht nachladen — dann wird
   der Bereich ausgeblendet und nur der Routenlink angeboten. */
html:not(.js) .map { display: none; }

.map__consent {
  max-width: 30rem;
  padding: 2rem 1.5rem;
  text-align: center;
}
.map__consent-title {
  margin: 0 0 .5rem;
  font-weight: 700;
  color: var(--c-ink);
}
.map__consent-text {
  margin: 0 0 1.5rem;
  font-size: .9375rem;
}
.map__consent-action { margin: 0; }

.map.is-loaded {
  display: block;
  min-height: 0;
}
.map__frame {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* --- Veranstalter & Partner --- */
.orgs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
/* Kartenfläche bewusst reines Weiß (--c-surface), damit die opaken
   Logodateien nahtlos darauf sitzen. Siehe Kommentar bei .logo-box. */
.org, .partner {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 1.75rem;
}
.org__text, .partner__text { font-size: 1rem; }

/* Logofläche.
   Die gelieferten Logodateien sind opake PNGs mit weißem Hintergrund.
   Die Fläche steht deshalb auf reinem Weiß — genau wie die Karten
   darum herum —, damit die Dateikante unsichtbar bleibt. Würde hier
   der Cremeton der Sektion durchscheinen, sähe man um jedes Logo ein
   weißes Rechteck.

   Feste Höhe, weil die Seitenverhältnisse auseinandergehen: die
   Veranstalterlogos liegen bei 2:1, die Partnerlogos bei 3:1.
   object-fit sorgt dafür, dass nichts verzerrt wird. */
.logo-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 88px;
  margin-bottom: 1.5rem;
  background: #fff;
}
/* Partnerlogos etwas kleiner: Ihre Dateien sind flacher geschnitten,
   bei gleicher Höhe würden sie die Veranstalter überstrahlen.
   Untereinander bleiben alle drei exakt gleich groß. */
.logo-box--partner { height: 64px; }

.logo-box__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* --- Anmeldung --- */
.section--register {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-line);
}

/* --- Sticky CTA --- */
.sticky-cta {
  position: fixed;
  right: clamp(1rem, 4vw, 2rem);
  bottom: clamp(1rem, 4vw, 2rem);
  z-index: 50;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  background: var(--c-cta);
  color: var(--c-ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(20, 38, 29, .22);
  transition: opacity .25s ease, transform .25s ease, background-color .18s ease;
}
.sticky-cta[hidden] {
  display: none;
}
.sticky-cta:hover {
  background: var(--c-cta-hover);
  color: var(--c-ink);
}
.sticky-cta.is-entering {
  opacity: 0;
  transform: translateY(12px);
}

/* ------------------------------------------------------------
   6. Footer
   ------------------------------------------------------------ */
.footer {
  background: var(--c-ink);
  color: var(--c-ink-invert);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer__logo {
  margin: 0 0 .35rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
}
.footer__claim {
  margin: 0 0 1rem;
  color: var(--c-cta);
  font-weight: 500;
}
.footer__event {
  margin: 0;
  font-size: .9375rem;
  color: rgba(246, 247, 243, .7);
}
.footer__head {
  margin: 0 0 .85rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(246, 247, 243, .55);
}
.footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
}
.footer__list li { margin-bottom: .5rem; color: rgba(246, 247, 243, .85); }
.footer__list a {
  color: rgba(246, 247, 243, .85);
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 247, 243, .25);
}
.footer__list a:hover { color: #fff; border-bottom-color: var(--c-cta); }

/* ------------------------------------------------------------
   7. Animation
   Nur aktiv, wenn JavaScript läuft (.js) — ohne JS bleibt alles
   sichtbar. Bei prefers-reduced-motion wird nicht bewegt.
   ------------------------------------------------------------ */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------
   8. Rechtstexte (Impressum, Datenschutzerklärung)
   ------------------------------------------------------------ */
.legal-header {
  border-bottom: 1px solid var(--c-line);
  padding-block: 1.25rem;
  background: var(--c-surface);
}
.legal-header .container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.legal-header__back {
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  border-bottom: 1px solid var(--c-accent-soft);
}
.legal-header__back::before { content: "← "; }
.legal-header__back:hover { border-bottom-color: var(--c-accent); }
.legal-header__brand {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--c-ink);
}

.legal .h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
}
.legal__sub {
  margin: 2rem 0 .75rem;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.legal__list {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  color: var(--c-ink-soft);
}
.legal__list li { margin-bottom: .5rem; }
.legal__updated {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
  font-size: .9375rem;
  color: var(--c-ink-faint);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
/* Themenkarten: 2 × 2 wird zu untereinander */
@media (max-width: 780px) {
  .cards { grid-template-columns: 1fr; }
}

/* Fakten-Leiste: vier nebeneinander werden zu 2 × 2.
   Darunter gibt es keine weitere Stufe — die 2 × 2 bleibt bis zur
   kleinsten Breite bestehen. */
@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .hero { min-height: 0; align-items: flex-start; }
  /* Die 2 × 2 bleibt bestehen, wird aber kompakter gesetzt. */
  .facts__item { padding: 1.15rem 1rem 1.25rem; }
  .facts__value { font-size: .9375rem; }
  .info-box { padding: 1.25rem 1.25rem; }
  .map__frame { height: 300px; }
  .agenda__item {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .agenda__item--talk { background: var(--c-accent-soft); }
  .agenda__item--talk,
  .agenda__item { padding-inline: 0; }
  .agenda__item--talk { padding-inline: 1rem; border-radius: var(--r-sm); }
  .sticky-cta { left: clamp(1rem, 4vw, 2rem); text-align: center; }
  .footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ------------------------------------------------------------
   Druck
   ------------------------------------------------------------ */
@media print {
  .sticky-cta, .hero__media, .hero__scrim { display: none !important; }
  .hero { background: none; color: var(--c-ink); min-height: 0; }
  .hero__inner { color: var(--c-ink); }
  .hero__logo, .hero__claim, .hero__meta, .hero__note { color: var(--c-ink); }
  .section, .section--alt { background: none; border: 0; padding-block: 1.5rem; }
  .js .reveal { opacity: 1; transform: none; }
}