/* ── Design Tokens ──────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Suisse Works';
  src: url('/fonts/SuisseWorks-Regular-WebXL.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l";
  src: url('/fonts/SuisseIntl-Book-WebXL.woff2') format('woff2');
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l";
  src: url('/fonts/SuisseIntl-Regular-WebXL.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l";
  src: url('/fonts/SuisseIntl-SemiBold-WebXL.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l";
  src: url('/fonts/SuisseIntl-Bold-WebXL.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --chilli-black: #101010;
  --chilli-pink: #F9E6E9;
  --chilli-red: #e82a34;
  --chilli-neon: #FF3000;
  --chilli-white: #FFFFFF;
  --chilli-grey: #D9D9D6;
  --font-works: 'Suisse Works', Georgia, 'Times New Roman', serif;
  --font-intl: "Suisse Int'l", 'Helvetica Neue', Arial, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */

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

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

body {
  font-family: var(--font-intl);
  color: var(--chilli-black);
  background: var(--chilli-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, canvas, iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: inherit;
}

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

/* ── Typography ─────────────────────────────────────────────────────────────── */

.font-works { font-family: var(--font-works); }
.font-intl  { font-family: var(--font-intl); }

.text-display-1 {
  font-family: var(--font-works);
  font-size: 60px;
  line-height: 1.2;
  hyphens: auto;
}
@media (min-width: 768px) {
  .text-display-1 { font-size: 80px; }
}

.text-display-2 {
  font-family: var(--font-works);
  font-size: 38px;
  line-height: 46px;
  hyphens: auto;
}
@media (min-width: 768px) {
  .text-display-2 { font-size: 60px; line-height: 70px; }
}

.text-display-3 {
  font-family: var(--font-works);
  font-size: 32px;
  line-height: 44px;
  hyphens: auto;
}

.text-body {
  font-family: var(--font-intl);
  font-size: 18px;
  line-height: 29px;
}

.text-eyebrow {
  font-family: var(--font-intl);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ── Utility Classes (Tailwind-kompatibel) ──────────────────────────────────── */

.hidden { display: none !important; }
.block  { display: block; }
.flex   { display: flex; }
.grid   { display: grid; }
.inline-block { display: inline-block; }

.sticky     { position: sticky; }
.absolute   { position: absolute; }
.relative   { position: relative; }

.top-0  { top: 0; }
.inset-0 { inset: 0; }
.z-10   { z-index: 10; }
.z-50   { z-index: 50; }

.w-full   { width: 100%; }
.h-full   { height: 100%; }
.h-px     { height: 1px; }
.min-h-screen { min-height: 100vh; }

.mx-auto   { margin-inline: auto; }
.mt-\[10px\] { margin-top: 10px; }
.mt-\[60px\] { margin-top: 60px; }
.mb-4        { margin-bottom: 1rem; }
.mb-\[16px\] { margin-bottom: 16px; }
.mb-\[20px\] { margin-bottom: 20px; }
.mb-\[30px\] { margin-bottom: 30px; }
.mb-\[40px\] { margin-bottom: 40px; }
.mb-\[50px\] { margin-bottom: 50px; }
.mb-\[60px\] { margin-bottom: 60px; }
.pt-\[30px\] { padding-top: 30px; }

.overflow-hidden { overflow: hidden; }
.rounded-full    { border-radius: 9999px; }

.border     { border: 1px solid; }
.border-t   { border-top: 1px solid; }
.border-b   { border-bottom: 1px solid; }

.border-\[\#d9d9d6\]  { border-color: #d9d9d6; }
.border-chilli-neon   { border-color: var(--chilli-neon); }
.border-chilli-red    { border-color: var(--chilli-red); }
.border-white         { border-color: var(--chilli-white); }

.bg-white         { background-color: var(--chilli-white); }
.bg-chilli-pink   { background-color: var(--chilli-pink); }
.bg-chilli-red    { background-color: var(--chilli-red); }
.bg-chilli-black  { background-color: var(--chilli-black); }
.bg-\[\#f3f2ec\]  { background-color: #f3f2ec; }
.bg-\[\#d9d9d6\]  { background-color: #d9d9d6; }

.text-chilli-black  { color: var(--chilli-black); }
.text-chilli-red    { color: var(--chilli-red); }
.text-chilli-neon   { color: var(--chilli-neon); }
.text-white         { color: var(--chilli-white); }

.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }
.uppercase     { text-transform: uppercase; }
.underline     { text-decoration: underline; }
.whitespace-nowrap   { white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }
.opacity-60 { opacity: 0.6; }

.object-cover { object-fit: cover; }
.aspect-square { aspect-ratio: 1; }

.transition-colors  {
  transition-property: color, background-color, border-color;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}
.transition-opacity {
  transition-property: opacity;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

/* Flex helpers */
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; }
.shrink-0      { flex-shrink: 0; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-\[20px\]  { gap: 20px; }
.gap-\[40px\]  { gap: 40px; }
.gap-\[100px\] { gap: 100px; }
.gap-px { gap: 1px; }

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

/* Padding */
.px-3  { padding-inline: 0.75rem; }
.px-4  { padding-inline: 1rem; }
.px-5  { padding-inline: 1.25rem; }
.px-6  { padding-inline: 1.5rem; }
.px-8  { padding-inline: 2rem; }
.py-1  { padding-block: 0.25rem; }
.py-2  { padding-block: 0.5rem; }
.py-3  { padding-block: 0.75rem; }
.py-4  { padding-block: 1rem; }
.py-5  { padding-block: 1.25rem; }
.py-6  { padding-block: 1.5rem; }
.py-\[16px\]  { padding-block: 16px; }
.py-\[75px\]  { padding-block: 75px; }
.py-\[100px\] { padding-block: 100px; }
.py-\[120px\] { padding-block: 120px; }
.p-6 { padding: 1.5rem; }
.pt-0        { padding-top: 0; }
.pt-2        { padding-top: 0.5rem; }

/* Width / height specifics */
.w-6     { width: 1.5rem; }
.w-\[50px\]  { width: 50px; }
.w-\[60px\]  { width: 60px; }
.w-\[70px\]  { width: 70px; }
.h-\[2px\]   { height: 2px; }
.h-\[50px\]  { height: 50px; }
.h-\[70px\]  { height: 70px; }
.h-\[100px\] { height: 100px; }
.h-\[346px\] { height: 346px; }
.max-w-\[600px\]  { max-width: 600px; }
.max-w-\[673px\]  { max-width: 673px; }
.max-w-\[900px\]  { max-width: 900px; }
.max-w-\[1090px\] { max-width: 1090px; }
.max-w-\[1366px\] { max-width: 1366px; }
.max-w-\[1728px\] { max-width: 1728px; }

/* Specific sizes */
.w-\[534px\]  { width: 100%; max-width: 534px; }
.w-\[350px\]  { width: 100%; max-width: 350px; }
.w-\[396px\]  { width: 100%; max-width: 396px; }
.w-\[550px\]  { width: 100%; max-width: 550px; }

/* hover states */
@media (hover: hover) {
  .hover\:text-chilli-red:hover    { color: var(--chilli-red); }
  .hover\:text-white:hover         { color: var(--chilli-white); }
  .hover\:bg-chilli-red:hover      { background-color: var(--chilli-red); }
  .hover\:bg-white:hover           { background-color: var(--chilli-white); }
  .hover\:opacity-90:hover         { opacity: 0.9; }
  .hover\:opacity-80:hover         { opacity: 0.8; }
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:hidden       { display: none !important; }
  .md\:block        { display: block; }
  .md\:flex         { display: flex; }
  .md\:inline-block { display: inline-block; }
  .md\:flex-row     { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:gap-\[20px\] { gap: 20px; }
  .md\:gap-\[70px\] { gap: 70px; }
  .md\:gap-\[300px\]{ gap: 300px; }
  .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:px-\[42px\]  { padding-inline: 42px; }
  .md\:px-\[140px\] { padding-inline: 140px; }
  .md\:px-\[181px\] { padding-inline: 181px; }
  .md\:px-\[319px\] { padding-inline: 319px; }
  .md\:py-5         { padding-block: 1.25rem; }
  .md\:pt-\[20px\]  { padding-top: 20px; }
  .md\:text-\[14px\]{ font-size: 14px; }
  .md\:text-\[24px\]{ font-size: 24px; }
  .md\:text-\[60px\]{ font-size: 60px; }
  .md\:leading-\[18px\] { line-height: 18px; }
  .md\:leading-\[32px\] { line-height: 32px; }
  .md\:leading-\[34px\] { line-height: 34px; }
  .md\:leading-\[90px\] { line-height: 90px; }
  .md\:w-\[350px\]  { width: 350px; max-width: none; }
  .md\:w-\[396px\]  { width: 396px; max-width: none; }
  .md\:w-\[534px\]  { width: 534px; max-width: none; }
  .md\:w-\[550px\]  { width: 550px; max-width: none; }
  .md\:pt-0         { padding-top: 0; }
}

/* ── Component: Nav ─────────────────────────────────────────────────────────── */

#site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--chilli-white);
  border-bottom: 1px solid #d9d9d6;
}

#nav-inner {
  max-width: 1728px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (min-width: 768px) {
  #nav-inner { padding-inline: 42px; }
}

#nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
}

#nav-links {
  display: none;
  align-items: center;
  gap: 50px;
}

@media (min-width: 768px) {
  #nav-links { display: flex; }
}

#nav-links a,
.nav-link {
  font-family: var(--font-intl);
  font-size: 18px;
  color: var(--chilli-black);
  transition: color 0.15s;
}

#nav-links a:hover,
.nav-link:hover { color: var(--chilli-red); }

#nav-cta {
  display: none;
  font-family: var(--font-intl);
  font-size: 18px;
  color: var(--chilli-red);
  border: 1px solid var(--chilli-red);
  border-radius: 9999px;
  padding: 0.5rem 1.25rem;
  transition: background-color 0.15s, color 0.15s;
}

@media (min-width: 768px) { #nav-cta { display: inline-block; } }
#nav-cta:hover { background-color: var(--chilli-red); color: var(--chilli-white); }

#menu-btn {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) { #menu-btn { display: none; } }

#menu-btn span {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--chilli-black);
}

#mobile-menu {
  border-top: 1px solid #d9d9d6;
  background: var(--chilli-white);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#mobile-menu a {
  font-family: var(--font-intl);
  font-size: 18px;
  color: var(--chilli-black);
}

#mobile-menu a.cta { color: var(--chilli-red); }

/* ── Component: Section wrapper ─────────────────────────────────────────────── */

.section-inner {
  max-width: 1366px;
}

/* ── Component: FactsGrid ───────────────────────────────────────────────────── */

.facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #d9d9d6;
}

@media (min-width: 768px) {
  .facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.facts-grid-cell {
  background: var(--chilli-white);
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.bg-\[\#f3f2ec\] .facts-grid-cell { background: #f3f2ec; }

@media (min-width: 768px) {
  .facts-grid-cell { padding: 1.25rem 1.5rem; }
}

.facts-label {
  font-family: var(--font-intl);
  font-weight: 600;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.2px;
  color: var(--chilli-neon);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .facts-label { font-size: 14px; line-height: 18px; }
}

.facts-value {
  font-family: var(--font-works);
  font-size: 18px;
  line-height: 26px;
  color: var(--chilli-black);
  white-space: pre-line;
}

@media (min-width: 768px) {
  .facts-value { font-size: 24px; line-height: 32px; }
}

/* ── Component: Tag ─────────────────────────────────────────────────────────── */

.tag {
  font-family: var(--font-intl);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.2px;
  color: var(--chilli-neon);
  border: 1px solid var(--chilli-neon);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
}

/* ── Component: Button ──────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--font-intl);
  font-size: 18px;
  border-radius: 9999px;
  padding: 1rem 2rem;
  transition: opacity 0.15s;
}

.btn-primary {
  background: var(--chilli-red);
  color: var(--chilli-white);
}
.btn-primary:hover { opacity: 0.9; }

.btn-outline-white {
  color: var(--chilli-white);
  border: 1px solid var(--chilli-white);
  padding: 0.75rem 1.5rem;
}
.btn-outline-white:hover { background: var(--chilli-white); color: var(--chilli-red); }

.btn-outline-sm {
  font-size: 14px;
  color: var(--chilli-red);
  border: 1px solid var(--chilli-red);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  display: inline-block;
  font-family: var(--font-intl);
  transition: background-color 0.15s, color 0.15s;
}
.btn-outline-sm:hover { background: var(--chilli-red); color: var(--chilli-white); }

/* ── Component: Program list ────────────────────────────────────────────────── */

.program-list-row {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding-block: 16px;
}

.program-time {
  font-family: var(--font-intl);
  font-weight: 700;
  font-size: 18px;
  line-height: 29px;
  color: var(--chilli-black);
  width: 60px;
  flex-shrink: 0;
}

.program-title {
  font-family: var(--font-intl);
  font-size: 18px;
  line-height: 29px;
  color: var(--chilli-black);
}

/* ── Component: Slides list ─────────────────────────────────────────────────── */

.slides-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 16px;
}

/* ── Component: Audience cards ──────────────────────────────────────────────── */

.audience-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid #d9d9d6;
  padding: 1.5rem;
  background: var(--chilli-white);
}

/* ── Hero section ───────────────────────────────────────────────────────────── */

#hero {
  position: relative;
  background-color: var(--chilli-pink);
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

#particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#hero-content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 120px 1.5rem;
}

@media (min-width: 768px) {
  #hero-content { padding-inline: 181px; }
}

/* ── Divider ────────────────────────────────────────────────────────────────── */

.divider {
  height: 1px;
  background: #d9d9d6;
}

/* ── Component: Program section (label + list side by side on desktop) ──────── */

.program-section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}

.program-heading {
  flex-shrink: 0;
  width: 100%;
}

.program-time-sm {
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0.5px;
}

@media (min-width: 768px) {
  .program-section   { flex-direction: row; gap: 20px; }
  .program-heading   { width: 350px; }
}

/* ── Component: CTA row (text + button side by side on desktop) ─────────────── */

.cta-row {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .cta-row { flex-direction: row; gap: 20px; align-items: flex-start; }
}

.speaker-badge {
  display: none;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .speaker-badge { display: block; }
}

@keyframes badge-spin {
  from { transform: rotate(-51deg); }
  to   { transform: rotate(-411deg); }
}

.speaker-badge svg {
  animation: badge-spin 20s linear infinite;
}


/* ── Component: Event recap row (video + text) ──────────────────────────────── */

.event-recap-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.event-video-placeholder {
  width: 100%;
  height: 300px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .event-recap-row         { flex-direction: row; }
  .event-video-placeholder { width: 534px; height: 346px; }
}

/* ── Component: Photo grid ──────────────────────────────────────────────────── */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Component: Für wen layout ──────────────────────────────────────────────── */

.fuer-wen-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fuer-wen-intro { width: 100%; }

.audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  flex: 1;
}

@media (min-width: 640px) {
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .fuer-wen-layout { flex-direction: row; }
  .fuer-wen-intro  { width: 396px; flex-shrink: 0; }
}

/* ── Component: Über uns layout ─────────────────────────────────────────────── */

.ueber-uns-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.ueber-uns-heading { width: 100%; }

@media (min-width: 768px) {
  .ueber-uns-layout  { flex-direction: row; }
  .ueber-uns-heading { width: 550px; flex-shrink: 0; }
}

/* ── Component: Footer ──────────────────────────────────────────────────────── */

.footer-address-row {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer-address {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 30px;
  color: #fff;
}

.footer-legal-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-link {
  font-family: var(--font-intl);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 30px;
  color: #fff;
  text-decoration: underline;
}

.footer-link:hover { opacity: 0.8; }

@media (min-width: 768px) {
  .footer-address-row { flex-direction: row; gap: 300px; }
  .footer-legal-row   { flex-direction: row; align-items: center; justify-content: space-between; }
  #nav-inner          { padding-inline: 42px; }
}

/* ── Section padding classes ────────────────────────────────────────────────── */

.sp   { padding-inline: 1.5rem; }
.sp-l { padding-inline: 1.5rem; }  /* testimonial — larger on desktop */
.fp   { padding-inline: 1.5rem; }  /* footer */

@media (min-width: 768px) {
  .sp   { padding-inline: 181px; }
  .sp-l { padding-inline: 319px; }
  .fp   { padding-inline: 140px; }
}