/* ============================================================
   rufusells.com — Stylesheet
   Baut auf dem RufuSells Design System auf (assets/tokens.css):
   Farben, Typo-Skala, Abstände, Radius, Schatten, Motion.
   ============================================================ */

@import url("tokens.css?v=20260815c");

:root {
  /* Bewusste Abweichung vom Token --container-max (1140px):
     Rufus möchte die volle Breite nutzen. */
  --maxw: 1440px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--text-h1); font-weight: var(--fw-extrabold); line-height: var(--leading-tight); }
h1.xl { font-size: var(--text-hero); }
h2 { font-size: var(--text-h2); font-weight: var(--fw-bold); line-height: var(--leading-heading); }
h3 { font-size: var(--text-h4); font-weight: var(--fw-bold); }

p  { max-width: 62ch; }
a  { color: var(--text-link); transition: var(--transition-interactive); }
a:hover { color: var(--text-link-hover); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(24px, 4vw, 64px); }

section { padding: var(--section-y) 0; }
section.tight { padding: var(--section-y-tight) 0; }

/* Sektions-Label / Eyebrow — klein, versal, weit gesperrt, Akzentfarbe */
.label {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
}

.lead { font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--ink-500); max-width: 58ch; }

.center { text-align: center; }
.center p, .center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Header ---------- */
header {
  background: var(--surface-page);
  border-bottom: var(--border-width) solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 14px clamp(24px, 4vw, 64px);
  max-width: var(--maxw);
  margin: 0 auto;
}
.brand { display: flex; align-items: center; margin-right: auto; }
.brand img { height: 48px; width: auto; }
.nav a.link {
  font-family: var(--font-display);
  text-decoration: none;
  color: var(--periwinkle-800);
  font-weight: var(--fw-semibold);
  font-size: var(--text-body-md);
  white-space: nowrap;
  transition: var(--transition-interactive);
}
.nav a.link:hover, .nav a.link.active { color: var(--ink-900); }
.lang { font-size: var(--text-body-sm); color: var(--warm-700); font-weight: var(--fw-semibold); white-space: nowrap; }
.lang a { color: var(--warm-700); text-decoration: none; }
.lang a.on { color: var(--ink-900); }

@media (max-width: 820px) {
  .nav { flex-wrap: wrap; gap: 14px; }
  .brand { flex-basis: 100%; }
  .brand img { height: 40px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-body-md);
  text-decoration: none;
  transition: var(--transition-interactive);
}
.btn:hover { transform: var(--hover-lift); }
.btn:active { transform: var(--press-scale); }
.btn.primary { background: var(--accent); color: var(--text-on-accent); }
.btn.primary:hover { background: var(--accent-hover); color: var(--text-on-accent); box-shadow: var(--shadow-accent); }
.btn.primary:active { background: var(--accent-press); }
.btn.ghost {
  background: transparent;
  color: var(--ink-900);
  border: var(--border-width-strong) solid var(--periwinkle-800);
}
.btn.ghost:hover { border-color: var(--ink-900); color: var(--ink-900); }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--space-8); }
.center .cta-row { justify-content: center; }

/* ---------- Hero-Varianten ---------- */
.hero { padding: var(--space-16) 0 var(--section-y); }

/* Voll-Bild-Hero (Home): Foto beginnt ganz oben — die Menüleiste
   schwebt transparent darüber — und blendet unten in den
   Seitenhintergrund über. Der Claim folgt unter dem Bild. */
/* Der Hero füllt genau eine Bildschirmhöhe: Menü, Bild, Claim und
   Buttons sind ohne Scrollen sichtbar. Das Bild nimmt dabei automatisch den
   Platz, der nach dem Text übrig bleibt. */
.hero-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* zarte Ambience in den kühlen Wandtönen des Fotos */
  background:
    radial-gradient(90% 80% at 50% 12%, #FFFFFF 0%, #F4F5F9 60%, var(--surface-page) 100%);
}
.hero-shell .hero-copy,
.hero-shell .marquee { flex: 0 0 auto; }

/* Menü liegt transparent über dem Bild — ohne Aufhellung, denn Rufus' Kopf
   beginnt erst darunter (im Bild bei 15,4 % der Höhe). */
.hero-canvas header {
  position: relative;
  z-index: 2;
  background: transparent;
  border-bottom: none;
}

.hero-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  overflow: hidden;
}
.hero-canvas .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
/* Seitliche Fortsetzung: dasselbe Foto, sehr stark weichgezeichnet und
   aufgehellt. Bewusst so zurückhaltend, dass es als Lichtschimmer wirkt
   und nicht als erkennbar unscharfes Bild. */
.hero-canvas .hero-media::before {
  content: "";
  position: absolute;
  inset: -80px;
  background: url("img/hero-v7.jpg") 56% 30% / cover no-repeat;
  filter: blur(90px) brightness(1.14) saturate(0.7);
  opacity: 0.5;
  transform: scale(1.12);
}
/* Das Foto wird komplett gezeigt (contain) — kein Anschnitt, Rufus ist bis
   zur Hose zu sehen. Die weichen Kanten verschmelzen mit der weichgezeichneten
   Fortsetzung dahinter. */
.hero-canvas .hero-media img {
  position: relative;
  /* Etwas größer als das Bildfeld: Rufus wird dadurch größer UND sein Kopf
     rutscht weiter nach unten (er sitzt bei 15,4 % der Bildhöhe). Unten
     werden nur wenige Prozent abgeschnitten — die Hose bleibt sichtbar. */
  /* Mindesthöhe, damit der Kopf auch auf niedrigen Fenstern unter dem
     Menü bleibt (Kopf liegt bei 15,4 % der Bildhöhe). */
  height: max(110%, 570px);
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: center top;
  /* Rufus steht im Foto bei 56,3 % der Breite — diese Verschiebung
     rückt ihn in die optische Mitte der Bühne. */
  transform: translateX(-6.3%);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
/* Zusätzlicher Abschluss nach unten in den Seitenhintergrund */
.hero-canvas .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(251,251,254,0) 80%,
      var(--surface-page) 100%);
}
.hero-copy { padding: var(--space-6) 0 var(--space-10); }
.hero-copy .lead { margin-left: auto; margin-right: auto; }
.hero-copy .cta-row { margin-top: var(--space-6); }
/* Auf niedrigen Fenstern den Textblock etwas kompakter, damit das Bild
   nicht zusammengedrückt wird. */
@media (max-height: 1000px) {
  .hero-copy { padding: var(--space-4) 0 var(--space-5); }
  .hero-copy .lead { font-size: var(--text-body-md); margin-top: 12px !important; }
  .hero-copy .cta-row { margin-top: var(--space-4); }
  .hero-hd { font-size: clamp(26px, 3vw, 40px); }
  .hero-shell .marquee { padding: var(--space-2) 0; }
  .hero-shell .marquee-track span { font-size: var(--text-body-sm); padding-right: 48px; }
}

/* Claim bleibt auf breiten Screens einzeilig */
.hero-hd {
  font-size: clamp(30px, 3.9vw, 56px);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
}
@media (min-width: 760px) {
  .hero-hd { white-space: nowrap; }
}

/* Überschrift zentriert ÜBER dem Video, Video volle Breite */
.hero-stack .video-hero { margin-top: var(--space-12); }
.video-hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface-soft);
  position: relative;
}
.video-hero video, .video-hero img {
  width: 100%;
  aspect-ratio: 16 / 7.5;
  object-fit: cover;
}
@media (max-width: 720px) {
  .video-hero video, .video-hero img { aspect-ratio: 4 / 3; }
}
.video-note {
  position: absolute;
  left: 16px; bottom: 16px;
  background: var(--overlay-scrim);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semibold);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
}

/* Zweispaltiger Hero (Unterseiten) */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

.claim { text-transform: lowercase; }
.claim em { font-style: italic; color: var(--accent); }

.video-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface-soft);
  position: relative;
}
.video-frame video, .video-frame img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* Zahlenzeile: 5 wochen · 6 sessions · ... */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-top: var(--space-8);
}
.center .facts { justify-content: center; }
.facts div { font-family: var(--font-display); }
.facts b { display: block; font-size: var(--text-h2); font-weight: var(--fw-extrabold); color: var(--ink-900); line-height: 1.1; }
.facts span { font-size: var(--text-body-sm); color: var(--warm-700); font-weight: var(--fw-semibold); }

/* ---------- Chips (Challenge-Wand) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-8); }
.chip {
  font-family: var(--font-display);
  background: var(--surface-soft);
  color: var(--ink-900);
  font-weight: var(--fw-semibold);
  font-size: var(--text-body-sm);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
}

/* ---------- Karten mit dunklem Header (Deck-Stil) ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}
.card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-soft);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-interactive);
}
.card:hover { box-shadow: var(--shadow-md); transform: var(--hover-lift); }
.card h3 {
  background: var(--periwinkle-800);
  color: var(--white);
  font-size: var(--text-body-md);
  padding: 12px 20px;
  font-style: italic;
  font-weight: var(--fw-bold);
}
.card p { padding: 18px 20px 22px; font-size: var(--text-body-md); }

/* ---------- Programm-Zeilen ---------- */
.programme { margin-top: var(--space-10); display: grid; gap: 10px; }
.session {
  display: grid;
  grid-template-columns: 100px 1fr 1.1fr;
  gap: var(--space-5);
  align-items: center;
  background: var(--surface-soft);
  border-left: 6px solid var(--periwinkle-800);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
}
.session:nth-child(even) { background: var(--periwinkle-200); }
.session i {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--periwinkle-800);
  font-weight: var(--fw-semibold);
}
.session b { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--ink-900); }
.session span { color: var(--periwinkle-800); font-size: var(--text-body-md); }
@media (max-width: 720px) {
  .session { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Listen mit Häkchen ---------- */
.checks { list-style: none; margin-top: var(--space-5); display: grid; gap: 12px; }
.checks li { padding-left: 36px; position: relative; }
.checks li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-weight: var(--fw-extrabold);
  font-size: var(--text-body-lg);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  margin-top: var(--space-6);
}
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Drei Säulen ---------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); margin-top: var(--space-10); }
.pillar {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--card-pad);
  box-shadow: var(--shadow-xs);
  transition: var(--transition-interactive);
}
.pillar:hover { box-shadow: var(--shadow-md); transform: var(--hover-lift); }
.pillar h3 { color: var(--accent); margin-bottom: var(--space-2); font-size: var(--text-h4); }
.pillar p { font-size: var(--text-body-md); }

/* ---------- Foto + Text ---------- */
.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.split img { border-radius: var(--radius-image); box-shadow: var(--shadow-lg); }

/* ---------- Referenz-Laufband ---------- */
.marquee {
  overflow: hidden;
  background: var(--surface-warm);
  padding: var(--space-3) 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 128s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-body-md);
  color: var(--periwinkle-800);
  opacity: 0.8;
  white-space: nowrap;
  padding-right: 56px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 12px 0; }
}

/* ---------- Referenz-Zeile ---------- */
.refs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  align-items: center;
  margin-top: var(--space-6);
}
.center .refs { justify-content: center; }
.refs span {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-h4);
  color: var(--periwinkle-800);
  opacity: 0.85;
}

/* ---------- Zitate ---------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); margin-top: var(--space-10); }
.quote {
  background: var(--surface-card);
  border-radius: var(--radius-md);
  padding: var(--card-pad);
  border: var(--border-width) solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
}
.quote p { font-size: var(--text-body-md); font-style: italic; color: var(--ink-500); }
.quote footer { margin-top: var(--space-4); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-body-sm); color: var(--ink-900); }
.quote footer small { display: block; color: var(--warm-700); font-weight: var(--fw-semibold); }

/* ---------- Angebots-Wegweiser (Home) ---------- */
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); margin-top: var(--space-10); }
.offer {
  display: block;
  text-decoration: none;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--card-pad);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-interactive);
}
.offer:hover { box-shadow: var(--shadow-md); transform: var(--hover-lift); border-color: var(--border-strong); }
.offer .label { margin-bottom: 8px; }
.offer h3 { font-size: var(--text-h3); margin-bottom: var(--space-3); }
.offer p { font-size: var(--text-body-md); color: var(--ink-500); }
.offer .angebotfan { position: relative; display: block; height: 64px; margin-top: var(--space-4); }
.offer .angebotfan img {
  position: absolute; width: 52px; border-radius: 4px; background: #fff;
  border: 1px solid var(--border-subtle); box-shadow: 0 4px 10px rgba(53,55,75,.18);
}
.offer .angebotfan img:nth-child(1) { left: 6px;  top: 3px; transform: rotate(-8deg); z-index: 4; }
.offer .angebotfan img:nth-child(2) { left: 22px; top: 0;   transform: rotate(-3deg); z-index: 3; }
.offer .angebotfan img:nth-child(3) { left: 38px; top: 1px; transform: rotate(2deg);  z-index: 2; }
.offer .angebotfan img:nth-child(4) { left: 54px; top: 4px; transform: rotate(7deg);  z-index: 1; }
.offer .fanlabel {
  display: block; margin-top: var(--space-3);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-body-sm);
  color: var(--ink-900);
}
.offer .go {
  display: inline-block;
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--accent);
}

/* ---------- Preis / Buchen ---------- */
.book { background: var(--surface-inverse); border-radius: var(--radius-xl); padding: var(--space-16) var(--space-5); }
.book .label { color: var(--periwinkle-300); }
.book h2 { color: var(--white); }
.book p { color: var(--periwinkle-200); }
.book .checks li { color: var(--white); }
.price-card {
  background: var(--surface-card);
  color: var(--ink-900);
  border-radius: var(--radius-md);
  padding: var(--space-10) var(--space-8);
  box-shadow: var(--shadow-lg);
}
.price-card .price {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--fw-extrabold);
  color: var(--ink-900);
}
.price-card .price small { font-size: var(--text-body-md); font-weight: var(--fw-semibold); color: var(--warm-700); }
.price-card p { color: var(--warm-700); }
.book-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-12);
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
}
@media (max-width: 820px) { .book-grid { grid-template-columns: 1fr; } }
.book .checks li::before { color: var(--periwinkle-300); }
.seat-note {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--periwinkle-300) !important;
  margin-top: var(--space-2);
}

/* ---------- Footer ---------- */
footer.site {
  padding: var(--space-16) 0 var(--space-10);
  text-align: center;
  color: var(--periwinkle-800);
  font-size: var(--text-body-md);
}
footer.site .foot-logo { height: 110px; margin: 0 auto var(--space-5); width: auto; display: inline-block; }
footer.site nav { margin-top: var(--space-5); display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
footer.site nav a { color: var(--periwinkle-800); text-decoration: none; }
footer.site nav a:hover { color: var(--ink-900); }
footer.site .foot-brand {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  letter-spacing: 2px;
  color: var(--ink-900);
}

/* ---------- Rechtsseiten ---------- */
.legal h1 { font-size: var(--text-h2); margin-bottom: var(--space-6); }
.legal h2 { font-size: var(--text-h4); margin: var(--space-8) 0 var(--space-3); }
.legal p, .legal li { max-width: 75ch; margin-bottom: 12px; }
.legal ul { padding-left: 22px; }


/* ---------- Coming-Soon-Dropdown in der Menüleiste ---------- */
.nav .dropdown { position: relative; cursor: default; }
.nav .dropdown .dropmenu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid #E4E5F0; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(53,55,75,.14); padding: 8px 0;
  display: none; min-width: 180px; z-index: 60; text-align: left;
}
/* unsichtbare Brücke, damit das Menü beim Rüberfahren nicht zuklappt */
.nav .dropdown .dropmenu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav .dropdown:hover .dropmenu { display: block; }
.nav .dropdown .dropmenu span { display: block; padding: 9px 18px; color: var(--warm-700); font-size: 14px; white-space: nowrap; }