/* sendar — editorial site styles
   Palette: sandstone cream on warm near-black. Tweaks toggle variants. */

:root {
  /* Default "Sandstone" palette */
  --bg: #1f1d1a;         /* warm near-black */
  --bg-2: #272421;       /* slightly lighter */
  --sand: #f0d9a6;       /* cream/sandstone highlight */
  --sand-soft: #eed7a6;
  --sand-deep: #e6cb90;
  --ink: #1a1815;        /* near-black text for on-sand sections */
  --text: #efe7d6;       /* warm off-white body on dark */
  --text-dim: rgba(239, 231, 214, 0.62);
  --hairline: rgba(240, 217, 166, 0.18);
  --card: #2b2825;
  --card-border: rgba(240, 217, 166, 0.08);
  --sponsored-border: rgba(240, 217, 166, 0.55);
  --sponsored-tag: #f2d96a;

  --radius-card: 18px;
  --radius-pill: 999px;

  --density: 1;           /* multiplier for section padding */

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

/* Palette variants (via data-palette on <html>) */
html[data-palette="cool"] {
  --bg: #1b1e22;
  --bg-2: #23272c;
  --sand: #dfe4ea;
  --sand-soft: #d8dee6;
  --sand-deep: #c9d1db;
  --ink: #121518;
  --text: #e6ebf1;
  --text-dim: rgba(230, 235, 241, 0.6);
  --hairline: rgba(223, 228, 234, 0.18);
  --card: #272b30;
  --card-border: rgba(223, 228, 234, 0.08);
  --sponsored-border: rgba(223, 228, 234, 0.55);
  --sponsored-tag: #c5d7ff;
}

html[data-palette="darker"] {
  --bg: #0f0e0c;
  --bg-2: #161412;
  --sand: #d9b982;
  --sand-soft: #d4b27a;
  --sand-deep: #c9a569;
  --ink: #0a0806;
  --text: #e9dcc0;
  --text-dim: rgba(233, 220, 192, 0.55);
  --hairline: rgba(217, 185, 130, 0.14);
  --card: #1a1815;
  --card-border: rgba(217, 185, 130, 0.08);
  --sponsored-border: rgba(217, 185, 130, 0.55);
  --sponsored-tag: #e9c370;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

* { box-sizing: border-box; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ── Typography ─────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.95;
  text-wrap: balance;
}

.kicker {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 calc(48px * var(--density));
}

.section {
  position: relative;
  padding: calc(140px * var(--density)) 0;
}

html[data-density="compact"] { --density: 0.75; }
html[data-density="airy"]    { --density: 1.15; }

/* ── Nav ────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(20, 18, 15, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--sand);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.nav-logo {
  width: 28px; height: 28px;
  border: 1.5px solid var(--sand);
  border-radius: 50%;
  position: relative;
}
.nav-logo::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--sand);
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.nav:hover .nav-logo::after { transform: scale(0.5); }

.nav-links {
  display: flex; gap: 36px;
  align-items: center;
}
.nav-links a {
  font-size: 14px;
  color: var(--text);
  opacity: 0.82;
  transition: opacity 0.2s;
  position: relative;
}
.nav-links a:hover { opacity: 1; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -6px;
  height: 1px;
  background: var(--sand);
  transition: right 0.3s ease;
}
.nav-links a:hover::after { right: 0; }

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}
.lang-toggle button {
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
  transition: all 0.2s;
}
.lang-toggle button.active {
  background: var(--sand);
  color: var(--ink);
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-bottom: 80px;
}
.hero-bg {
  position: absolute;
  inset: -10% 0 0 0;
  z-index: 0;
  will-change: transform;
}
.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero-bg-layer.active { opacity: 1; }
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(15,13,11,0.25) 0%,
    rgba(15,13,11,0.15) 35%,
    rgba(15,13,11,0.55) 70%,
    rgba(15,13,11,0.92) 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}
.hero-title {
  color: var(--sand);
}
.hero-brand {
  display: block;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.03em;
  margin-bottom: 0.12em;
}
.hero-line { display: block; }
.hero-sub {
  max-width: 540px;
  color: var(--text);
  opacity: 0.92;
  font-size: 17px;
  line-height: 1.55;
  margin-top: 32px;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 28px;
  right: 48px;
  z-index: 3;
  display: flex; align-items: center; gap: 10px;
  color: var(--sand);
  opacity: 0.7;
}
.hero-scroll-hint .line {
  width: 1px; height: 32px;
  background: var(--sand);
  animation: scrollLine 1.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

.hero-dots {
  position: absolute;
  bottom: 28px;
  left: 48px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.hero-dot {
  width: 18px; height: 2px;
  background: rgba(240, 217, 166, 0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s;
}
.hero-dot.active { background: var(--sand); }

/* ── Reveal ─────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(80px) scale(0.96);
  filter: blur(6px);
  transition:
    opacity 1.4s cubic-bezier(.16,.84,.24,1),
    transform 1.4s cubic-bezier(.16,.84,.24,1),
    filter 1.1s cubic-bezier(.16,.84,.24,1);
  will-change: opacity, transform, filter;
}
.reveal.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }

/* Stronger reveal for display headlines */
.reveal-headline {
  opacity: 0;
  transform: translateY(120px) scale(0.94);
  filter: blur(10px);
  transition:
    opacity 1.6s cubic-bezier(.16,.84,.24,1),
    transform 1.6s cubic-bezier(.16,.84,.24,1),
    filter 1.3s cubic-bezier(.16,.84,.24,1);
  will-change: opacity, transform, filter;
}
.reveal-headline.in {
  opacity: 1; transform: none; filter: blur(0);
}

/* Line-by-line stagger for display headlines (via nth-child on spans) */
.reveal-lines > * {
  display: block;
  opacity: 0;
  transform: translateY(80%) rotate(1deg);
  transition:
    opacity 1.1s cubic-bezier(.19,.9,.2,1),
    transform 1.2s cubic-bezier(.19,.9,.2,1);
  will-change: opacity, transform;
}
.reveal-lines.in > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-lines.in > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-lines.in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-lines.in > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-lines.in > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-lines.in > * {
  opacity: 1;
  transform: none;
}

/* Card entrance */
.reveal-card {
  opacity: 0;
  transform: translateY(60px) scale(0.92);
  transition:
    opacity 1.1s cubic-bezier(.16,.84,.24,1),
    transform 1.1s cubic-bezier(.16,.84,.24,1);
}
.reveal-card.in { opacity: 1; transform: none; }
.reveal-card.stagger-0 { transition-delay: 0.00s; }
.reveal-card.stagger-1 { transition-delay: 0.08s; }
.reveal-card.stagger-2 { transition-delay: 0.16s; }
.reveal-card.stagger-3 { transition-delay: 0.24s; }
.reveal-card.stagger-4 { transition-delay: 0.32s; }

/* ── Placeholders (striped) ─────────────────────────────────── */
.ph {
  width: 100%; height: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  color: rgba(240, 217, 166, 0.75);
}
.ph::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(240,217,166,0.07) 0 14px,
      rgba(240,217,166,0.12) 14px 28px),
    linear-gradient(180deg, #2a2724, #1a1815);
}
.ph-photo-1::before { background: linear-gradient(135deg, #3a3632 0%, #1c1a17 60%, #0f0d0b 100%); }
.ph-photo-2::before { background: linear-gradient(140deg, #47423b 0%, #2a2621 50%, #17140f 100%); }
.ph-photo-3::before { background: linear-gradient(160deg, #4d2a23 0%, #2a1814 50%, #120907 100%); }
.ph-photo-4::before { background: linear-gradient(180deg, #6f7b80 0%, #3e4548 60%, #1d2022 100%); }
.ph-gradient::before {
  background: linear-gradient(135deg, #8b2f54 0%, #3a1e4f 40%, #0f4a6b 75%, #1f8c8f 100%);
}
.ph > .ph-label {
  position: relative; z-index: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.35);
  color: rgba(240,217,166,0.7);
  padding: 4px 8px;
  margin: 12px;
  border-radius: 4px;
}

/* Category tone fills (no real imagery — abstract shapes) */
.cat-art {
  position: absolute; inset: 0;
  overflow: hidden;
}
.cat-art::before, .cat-art::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.cat-startups::before  { background: radial-gradient(circle, #d1c6b5 0%, transparent 70%); width: 260%; height: 260%; left: -60%; top: -40%; }
.cat-startups::after   { background: #38342e; inset: 0; z-index: -1; }
.cat-events::before    { background: radial-gradient(ellipse at 30% 70%, #c9a260 0%, transparent 60%); width: 200%; height: 180%; left: -50%; top: -10%; }
.cat-events::after     { background: #1e1a14; inset: 0; z-index: -1; }
.cat-ecosystem::before { background:
  repeating-linear-gradient(30deg, #e49a3e 0 2px, transparent 2px 14px),
  repeating-linear-gradient(120deg, #e49a3e 0 2px, transparent 2px 18px);
  inset: 0; border-radius: 0; opacity: 0.55; }
.cat-ecosystem::after  { background: #0b1620; inset: 0; z-index: -1; }
.cat-corporate::before { background: radial-gradient(circle at 70% 40%, #4d4548 0%, transparent 55%); inset: 0; border-radius: 0; }
.cat-corporate::after  { background: #1c2124; inset: 0; z-index: -1; }
.cat-education::before { background: linear-gradient(160deg, #6b5746 0%, #302620 100%); inset: 0; border-radius: 0; }
.cat-education::after  { display: none; }

/* Program tone fills */
.prog-sunset::before { background: linear-gradient(180deg, #d68a5e 0%, #7a4a3a 55%, #2a1d1a 100%); }
.prog-ai::before     { background: radial-gradient(ellipse at 40% 50%, #7a7a75 0%, #2a2a28 70%); }
.prog-tunnel::before { background: linear-gradient(180deg, #4a453f 0%, #1a1815 100%); }


/* Hamburger is mobile-only (hidden on desktop) */
.nav-hamburger { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE (≤ 800px)
   Added 2026-04-18 to fix overflow on iPhone SE / 13 / Pixel.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 800px) {
  /* ── Layout ─────────────────────────────────────────────────── */
  .container { padding: 0 20px; }
  .section { padding: calc(72px * var(--density)) 0; }

  /* ── Nav: hide desktop links, show hamburger menu ───────────── */
  .nav { padding: 14px 20px; }
  .nav-brand { font-size: 16px; gap: 8px; }
  .nav-logo { width: 22px; height: 22px; }

  /* Hide the full desktop nav and replace with a single Menu button
     (falls back gracefully — JS hooks wire it up when available). */
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 80px 28px 40px;
    background: var(--bg);
    z-index: 99;
  }
  .nav-links.open a {
    font-size: 22px;
    padding: 14px 0;
    width: 100%;
    border-bottom: 1px solid var(--hairline);
  }
  .nav-links.open .lang-toggle { margin-top: 24px; }

  /* Hamburger trigger — rendered by JS */
  .nav-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    color: var(--sand);
    cursor: pointer;
    padding: 0;
    z-index: 101;
  }
  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--sand);
    position: relative;
    transition: transform 0.3s, opacity 0.3s;
  }
  .nav-hamburger span::before,
  .nav-hamburger span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 1.5px;
    background: var(--sand);
    transition: transform 0.3s;
  }
  .nav-hamburger span::before { top: -7px; }
  .nav-hamburger span::after  { top:  7px; }
  .nav-hamburger.open span { background: transparent; }
  .nav-hamburger.open span::before { transform: rotate(45deg) translate(5px, 5px); }
  .nav-hamburger.open span::after  { transform: rotate(-45deg) translate(5px, -5px); }

  /* ── Hero ───────────────────────────────────────────────────── */
  .hero { padding-bottom: 60px; }
  .hero-content { padding: 0 20px; }
  .hero-title {
    font-size: clamp(40px, 11vw, 64px) !important;
  }
  .hero-sub { font-size: 15px; margin-top: 24px; max-width: 100%; }
  .hero-scroll-hint { bottom: 20px; right: 20px; font-size: 10px; }
  .hero-scroll-hint .line { height: 24px; }
  .hero-dots { bottom: 20px; left: 20px; }

  /* ── Section headlines shrink ───────────────────────────────── */
  .display {
    font-size: clamp(32px, 8vw, 56px);
  }
  h2.display { font-size: clamp(32px, 8vw, 56px); }

  /* ── News / Matchmaking rail ────────────────────────────────── */
  .news-rail, .cats-track, .programs-rail {
    padding-right: 20px !important;
  }
  /* Cards shrink on mobile */
  .news-card,
  .prog-card,
  .cat-card {
    width: 78vw !important;
    max-width: 320px;
    height: auto !important;
    min-height: 320px;
  }
  .prog-card { height: 240px !important; }
  .cat-card { width: 220px !important; height: 300px !important; }

  /* ── About section ──────────────────────────────────────────── */
  .about-layout,
  .about-grid,
  .about-inner {
    display: block !important;
  }
  .about-copy, .about-visual {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Education / Award two-column → stacked ─────────────────── */
  .award-grid,
  .award-layout,
  .education-layout {
    display: block !important;
  }
  .award-left, .award-right,
  .education-left, .education-right {
    width: 100% !important;
  }

  /* Certificate card shrinks */
  .cert-card {
    max-width: 100% !important;
    padding: 24px !important;
    font-size: 12px !important;
  }
  .cert-card h3, .cert-card .cert-title {
    font-size: 22px !important;
  }

  /* ── Footer ─────────────────────────────────────────────────── */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  /* ── Subpages (static HTML pages) ────────────────────────────── */
  .subpage-wrap,
  .legal-wrap {
    padding: 100px 20px 80px !important;
  }
  .subpage-title {
    font-size: clamp(36px, 10vw, 56px) !important;
  }
  .subpage-lead {
    font-size: 16px !important;
  }
  .subpage-h2 {
    font-size: clamp(22px, 6vw, 32px) !important;
    margin: 48px 0 16px !important;
  }
  .subpage-card-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .subpage-card { padding: 20px !important; }

  /* Legal-wrap (Impressum/Datenschutz/AGB/Cookies/Widerruf) */
  .legal-wrap h1 {
    font-size: clamp(32px, 8vw, 48px) !important;
  }
  .legal-wrap h2 { font-size: 20px !important; margin: 32px 0 12px !important; }
  .legal-wrap h3 { font-size: 16px !important; }
  .legal-wrap p, .legal-wrap li { font-size: 14px !important; }

  /* Tables (cookies page) wrap */
  .legal-wrap table,
  .subpage-wrap table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    font-size: 12px !important;
  }
  .legal-wrap table th,
  .legal-wrap table td {
    padding: 8px !important;
    font-size: 12px !important;
  }

  /* ── Contact form fills width ───────────────────────────────── */
  .subpage-contact-form {
    max-width: 100% !important;
  }
  .subpage-contact-form button {
    width: 100%;
    justify-self: stretch !important;
  }

  /* ── Hero skyline: shift slightly for small screens ─────────── */
  .hero-skyline { height: 80% !important; opacity: 0.7; }

  /* ── Prevent any stray horizontal overflow ──────────────────── */
  body { overflow-x: hidden; }
  section, header, footer, main { max-width: 100vw; }
}

/* Smaller phones (<=390px) */
@media (max-width: 390px) {
  .hero-title { font-size: clamp(36px, 10vw, 56px) !important; }
  .subpage-title { font-size: clamp(32px, 9vw, 48px) !important; }
  .container { padding: 0 16px; }
  .subpage-wrap, .legal-wrap { padding: 96px 16px 64px !important; }
}