/* ==========================================================================
   SOUL Festival – Komponenten
   Benötigt tokens.css. Hier nur Werte aus den Tokens verwenden.
   ========================================================================== */

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2 { margin: 0; }
:focus-visible { outline: 2px solid var(--color-ember); outline-offset: 3px; border-radius: var(--radius-pill); }
::selection { background: var(--color-sun); color: var(--color-ink); }

.skip {
  position: absolute; left: var(--space-4); top: -60px; z-index: 100;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-bg); text-decoration: none;
}
.skip:focus { top: var(--space-3); }

/* ==========================================================================
   Buttons & Chips
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  height: var(--btn-h); padding: 0 var(--space-6);
  border: 0; border-radius: var(--radius-pill);
  font: var(--weight-medium) var(--text-sm)/1 var(--font-sans);
  letter-spacing: var(--tracking-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.btn--lg { height: var(--btn-h-lg); padding: 0 var(--space-8); font-size: var(--text-base); }

.btn--ink { background: var(--color-ink); color: var(--color-bg); padding-right: 6px; }
.btn--ink:hover { background: var(--color-ember); color: var(--color-ink); }
.btn__icon {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-ink);
}
.btn--light { background: var(--color-bg); color: var(--color-ink); }
.btn--light:hover { background: var(--color-sun); }
.btn--glass {
  background: var(--glass-bg); color: #fff;
  box-shadow: inset 0 0 0 1px var(--glass-line);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.btn--glass:hover { background: rgba(255, 255, 255, 0.28); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--chip-h); padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap;
}
.chip--sun   { background: var(--color-sun); color: var(--color-ink); }
.chip--frost { background: var(--color-frost); color: var(--color-winter-2); }

/* ==========================================================================
   Navigation: Menü links, Logo Mitte, Tickets rechts
   ========================================================================== */
.nav {
  position: relative; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  max-width: var(--page-max); margin-inline: auto;
  padding: var(--space-5) var(--gutter) var(--space-6);
}
.nav__left  { justify-self: start; position: relative; }
.nav__right { justify-self: end; }

.menu {
  display: flex; gap: var(--space-1); padding: var(--space-1);
  background: var(--color-surface); border-radius: var(--radius-pill);
}
.menu__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; color: var(--color-ink-2);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.menu__link:hover { background: var(--color-surface-2); color: var(--color-ink); }
.menu__link.is-active { background: var(--color-bg); color: var(--color-ink); }

.menu-toggle {
  display: none; align-items: center; gap: var(--space-2);
  height: var(--btn-h); padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-ink);
  font: var(--weight-medium) var(--text-sm)/1 var(--font-sans); cursor: pointer;
}

/* ---------- Logo ---------- */
.brand { display: block; --logo: 84px; }
.brand__logo {
  width: var(--logo); height: var(--logo);
  box-shadow: 0 10px 28px -12px rgba(230, 118, 25, 0.6);
}

/* ==========================================================================
   Hero: zwei Kacheln
   ========================================================================== */
.hero {
  display: grid; grid-template-columns: 1.62fr 1fr; gap: var(--gap-tiles);
  max-width: var(--page-max); margin-inline: auto;
  padding: 0 var(--gutter) var(--gutter);
  height: clamp(620px, calc(100svh - 150px), 860px);
}

.tile {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  border-radius: var(--radius-tile);
  padding: clamp(22px, 2.4vw, 40px);
}
.tile__top { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tile__body { position: relative; z-index: 2; margin-top: auto; }

.display {
  font-size: var(--text-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  max-width: 14ch;
  text-wrap: balance;
  margin-bottom: var(--space-8);
}
.display--sm { font-size: var(--text-display-sm); max-width: 13ch; }

/* ---------- Sommer ---------- */
.tile--summer { color: #fff; background: var(--color-ink); }
.tile__media { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.tile--summer::after, .tile--winter::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(30, 27, 22, 0.55) 0%, rgba(30, 27, 22, 0) 45%),
    linear-gradient(rgba(30, 27, 22, 0.42), rgba(30, 27, 22, 0.42));
}
.tile__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Kachel-Text: Headline → Einleitung → Buttons, in beiden Kacheln gleich */
.tile__body .display { margin-bottom: var(--space-5); }
.tile__intro { font-size: var(--text-base); line-height: 1.5; max-width: 44ch; color: rgba(255, 255, 255, 0.9); }
.tile__intro + .tile__actions { margin-top: var(--space-8); }
.tile__actions--bottom { position: relative; z-index: 2; padding-top: var(--space-8); padding-bottom: 76px; } /* Platz für den Ausschnitt unten rechts */

/* ---------- Winter ---------- */
.tile--winter .tile__media { object-position: 50% 35%; }
.tile--winter::after {
  background:
    linear-gradient(to top, rgba(30, 27, 22, 0.8) 0%, rgba(30, 27, 22, 0.5) 45%, rgba(30, 27, 22, 0) 74%),
    linear-gradient(to bottom, rgba(30, 27, 22, 0.22), rgba(30, 27, 22, 0) 22%);
}
.tile--winter { color: #fff; background: var(--color-winter-2); }
.tile__label { margin-left: auto; font-size: var(--text-xs); font-weight: var(--weight-medium); color: rgba(255, 255, 255, 0.85); }

/* ==========================================================================
   Notch: ausgeschnittene Ecke einer Kachel
   Die Fläche hat die Seitenfarbe; zwei Pseudo-Elemente runden die
   angrenzenden Kachelkanten nach innen ab (umgekehrte Rundung).
   ========================================================================== */
.notch { --r: var(--radius-notch); position: absolute; z-index: 3; background: var(--color-bg); }
.notch::before, .notch::after { content: ""; position: absolute; width: var(--r); height: var(--r); pointer-events: none; }

/* unten rechts */
.notch--br { right: 0; bottom: 0; border-top-left-radius: var(--r); }
.notch--br::before { right: 0; bottom: 100%; background: radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), var(--color-bg) var(--r)); }
.notch--br::after  { bottom: 0; right: 100%; background: radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), var(--color-bg) var(--r)); }
.notch--br .notch__inner { padding: var(--space-4) 0 0 var(--space-5); }

/* unten links */
.notch--bl { left: 0; bottom: 0; border-top-right-radius: var(--r); }
.notch--bl::before { left: 0; bottom: 100%; background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - .5px), var(--color-bg) var(--r)); }
.notch--bl::after  { bottom: 0; left: 100%; background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - .5px), var(--color-bg) var(--r)); }
.notch--bl .notch__inner { padding: var(--space-3) var(--space-3) 0 0; }

.notch__inner--about { display: flex; align-items: center; gap: var(--space-4); width: min(440px, 40vw); }
.notch__inner--about p { font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink-2); }
.faces { display: flex; flex: none; }
.faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-bg); }
.faces img + img { margin-left: -14px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .hero { grid-template-columns: 1.35fr 1fr; }
}

@media (max-width: 960px) {
  .menu {
    position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: 20;
    flex-direction: column; min-width: 240px; padding: var(--space-2);
    background: var(--color-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-float);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s var(--dur-base);
  }
  .menu__link { height: 46px; font-size: var(--text-base); }
  .nav.is-open .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .menu-toggle { display: inline-flex; }

  .hero { grid-template-columns: 1fr; height: auto; }
  .tile--summer { min-height: min(720px, 86svh); }
  .tile--winter { min-height: 520px; }
  .notch__inner--about { width: min(340px, 72vw); }
}

@media (max-width: 560px) {
  .nav { padding-top: var(--space-4); }
  .brand { --logo: 72px; }
  .menu-toggle span, .btn--ink { font-size: var(--text-xs); }
  .menu-toggle { padding: 0 var(--space-4); }
  .btn--ink { padding-left: var(--space-4); }
  .notch__inner--about { width: calc(100vw - 2 * var(--gutter) - 56px); gap: var(--space-3); padding-right: var(--space-3); }
  .notch__inner--about p { font-size: var(--text-xs); }
  .faces img { width: 34px; height: 34px; }
  .faces img + img { margin-left: -12px; }
  .tile__actions--bottom { padding-bottom: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}