/* ============================================================
   Judith Konrad · Leadership-Activator — shared site styles
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────── */
@font-face { font-family: 'Geologica'; src: url('../fonts/Geologica-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('../fonts/Geologica-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('../fonts/Geologica-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('../fonts/Geologica-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('../fonts/Geologica-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('../fonts/Geologica-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('../fonts/Geologica-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('../fonts/Geologica-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica Cursive'; src: url('../fonts/Geologica_Cursive-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica Cursive'; src: url('../fonts/Geologica_Cursive-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica Cursive'; src: url('../fonts/Geologica_Cursive-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* ── Tokens ────────────────────────────────────────────── */
:root {
  --cream: #FCFCFA;
  --sand: #F6F2EA;
  --surface: #FAF8F3;
  --rost: #D26441;
  --rost-hover: #B8502F;
  --peach: #FFCFA7;
  --peach-mid: #FFA050;
  --lehm: #CD9B50;
  --schwarzbraun: #37323C;
  --erdbraun: #644B50;
  --rosegrau: #C1B7B9;
  --warmgrau: #A5A096;
  --naturgruen: #647D73;
  --salbei: #B1BEB9;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Geologica', sans-serif;
  background: var(--cream);
  color: var(--schwarzbraun);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; }
.accent { font-family: 'Geologica Cursive', sans-serif; font-weight: 300; color: var(--rost); font-style: normal; }

/* ── Shared layout helpers ─────────────────────────────── */
.wrap { max-width: 1200px; margin: 0 auto; }
.eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rost);
}

/* ── Buttons ───────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background: var(--rost);
  color: var(--cream);
  border-radius: 8px;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.04em;
  border: none; cursor: pointer;
  font-family: 'Geologica', sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms;
}
.btn-primary:hover { background: var(--rost-hover); }

.btn-ghost {
  display: inline-block;
  padding: 14px 0;
  background: transparent;
  color: var(--erdbraun);
  font-size: 15px; font-weight: 500;
  letter-spacing: 0.04em;
  border: none;
  border-bottom: 1.5px solid var(--erdbraun);
  text-decoration: none;
  cursor: pointer;
  font-family: 'Geologica', sans-serif;
}

/* ── Nav ───────────────────────────────────────────────── */
nav.topnav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 56px; height: 68px;
  background: rgba(254,250,240,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rosegrau);
}
nav.topnav .logo img { height: 46px; width: auto; display: block; }
nav.topnav .links { display: flex; gap: 36px; align-items: center; }
nav.topnav .links a {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--schwarzbraun);
  text-decoration: none;
  transition: color 200ms;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
}
nav.topnav .links a:hover { color: var(--rost); }
nav.topnav .links a.active { color: var(--rost); border-bottom-color: var(--rost); }
nav.topnav .nav-right { display: flex; gap: 20px; align-items: center; }
nav.topnav .cta {
  display: inline-block;
  padding: 14px 32px;
  background: var(--rost);
  color: var(--cream);
  border-radius: 8px;
  text-decoration: none;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 200ms;
  white-space: nowrap;
}
nav.topnav .cta:hover { background: var(--rost-hover); }
nav.topnav .back {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--schwarzbraun);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 200ms;
}
nav.topnav .back:hover { color: var(--rost); }

/* Hamburger toggle (mobile only) */
nav.topnav .links .cta-in-menu { display: none; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 11px 10px;
  margin-right: -10px;
  background: transparent; border: none; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 100%; height: 2px;
  background: var(--schwarzbraun); border-radius: 2px;
  transition: transform 240ms ease, opacity 200ms ease;
}
nav.topnav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.topnav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.topnav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* DE/EN toggle */
.lang-toggle { display: flex; align-items: center; gap: 4px; }
.lang-toggle button {
  background: transparent; border: none; cursor: pointer;
  font-family: 'Geologica', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  padding: 4px 2px;
  color: var(--warmgrau);
  transition: color 200ms;
}
.lang-toggle button.active { color: var(--schwarzbraun); }
.lang-toggle button:hover { color: var(--rost); }
.lang-toggle .sep { font-size: 11px; color: var(--warmgrau); }

/* ── Site footer (green) ───────────────────────────────── */
footer.site-footer { background: var(--naturgruen); padding: 64px 56px 32px; }
.site-footer-inner { max-width: 1200px; margin: 0 auto; }
.site-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.site-footer-logo { height: 40px; width: auto; margin-bottom: 16px; display: block; }
.site-footer-brand { text-align: left; }
.site-footer-tagline {
  font-size: 13px; color: rgba(254,250,240,0.42);
  line-height: 1.7; max-width: 240px; margin-bottom: 22px;
}
.site-footer-social { display: flex; gap: 14px; }
.site-footer-social a {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  color: rgba(254,250,240,0.35); text-decoration: none;
}
.site-footer-social a:hover { color: rgba(254,250,240,0.7); }
.site-footer-col { display: flex; flex-direction: column; gap: 10px; }
.site-footer-h {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--lehm); margin-bottom: 6px;
}
.site-footer-col a { font-size: 13px; color: rgba(254,250,240,0.45); text-decoration: none; }
.site-footer-col a:hover { color: var(--cream); }
.site-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: rgba(254,250,240,0.25);
}
.site-footer-tagline-italic { font-family: 'Geologica Cursive', sans-serif; font-weight: 300; color: rgba(254,250,240,0.18); }

/* ── Animations ────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms cubic-bezier(0.22,0.61,0.36,1),
              transform 700ms cubic-bezier(0.22,0.61,0.36,1);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: translateY(0); }

[data-reveal-stagger] > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
[data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: 400ms; }
[data-reveal-stagger].is-in > *:nth-child(7) { transition-delay: 480ms; }
[data-reveal-stagger].is-in > *:nth-child(8) { transition-delay: 560ms; }
[data-reveal-stagger].is-in > * { opacity: 1; transform: translateY(0); }

.cursive-pop { display: inline-block; opacity: 0; transform: translateY(10px); }
[data-reveal].is-in .cursive-pop, .cursive-pop.is-popped {
  animation: cursivePopKey 780ms cubic-bezier(0.22,0.61,0.36,1) 280ms forwards;
}
@keyframes cursivePopKey { to { opacity: 1; transform: translateY(0); } }

.word-color-pop { color: var(--schwarzbraun); }
[data-reveal].is-in .word-color-pop { animation: wordColorPop 480ms ease-out 350ms both; }
@keyframes wordColorPop { from { color: var(--schwarzbraun); } to { color: var(--rost); } }

.sweep-lr[data-reveal-stagger] > * { transform: translateX(-30px); }
.sweep-lr[data-reveal-stagger].is-in > * { transform: translateX(0); }
.sweep-lr[data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
.sweep-lr[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 170ms; }
.sweep-lr[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 340ms; }

.focus-pop { display: inline-block; opacity: 0; transform: scale(0.62); transform-origin: center; }
[data-reveal].is-in .focus-pop { animation: focusPopKey 780ms cubic-bezier(0.34,1.56,0.64,1) 380ms forwards; }
@keyframes focusPopKey {
  0% { opacity: 0; transform: scale(0.62); }
  62% { opacity: 1; transform: scale(1.09); }
  100% { opacity: 1; transform: scale(1); }
}

[data-reveal-stagger].is-in .cta-pulse { animation: ctaGlow 1500ms ease-in-out 1000ms 3; }
@keyframes ctaGlow {
  0%,100% { box-shadow: 0 8px 24px rgba(0,0,0,0.18); transform: scale(1); }
  50% { box-shadow: 0 12px 34px rgba(0,0,0,0.30), 0 0 0 6px rgba(255,255,255,0.22); transform: scale(1.04); }
}

.build-steps[data-reveal-stagger] > * { transform: translateY(24px); }
.build-steps[data-reveal-stagger].is-in > * { transform: translateY(0); }
.build-steps[data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
.build-steps[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 150ms; }
.build-steps[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 300ms; }
.build-steps[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 450ms; }

.erlauber-card { animation: erlauberIn 520ms cubic-bezier(0.22,0.61,0.36,1) both; }
@keyframes erlauberIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.lift { transition: transform 240ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 240ms cubic-bezier(0.22,0.61,0.36,1); }
.lift:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > *, .cursive-pop, .focus-pop, .lift {
    transition: none !important; transform: none !important; opacity: 1 !important; animation: none !important;
  }
  .word-color-pop { color: var(--rost) !important; }
  .sweep-lr[data-reveal-stagger] > * { transform: none !important; }
}

/* ── i18n ──────────────────────────────────────────────── */
html[lang="de"] [data-lang="en"] { display: none !important; }
html[lang="en"] [data-lang="de"] { display: none !important; }

/* ── Responsive (shared chrome) ────────────────────────── */
@media (max-width: 900px) {
  nav.topnav { padding: 0 22px; }
  .nav-toggle { display: inline-flex; }
  nav.topnav .nav-right > .cta { display: none; }

  /* Slide-down mobile menu */
  nav.topnav .links {
    display: none;
    position: absolute;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 22px 18px;
    background: rgba(254,250,240,0.99);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rosegrau);
    box-shadow: 0 16px 30px rgba(55,50,60,0.12);
  }
  nav.topnav.is-open .links { display: flex; }
  nav.topnav .links a {
    font-size: 15px;
    letter-spacing: 0.04em;
    padding: 17px 2px;
    border-bottom: 1px solid rgba(193,183,185,0.38);
    border-top: none;
  }
  nav.topnav .links a.active { color: var(--rost); border-bottom-color: rgba(193,183,185,0.38); }
  nav.topnav .links .cta-in-menu {
    display: block;
    margin-top: 16px;
    padding: 16px 24px;
    text-align: center;
    background: var(--rost);
    color: var(--cream);
    border-radius: 10px;
    border-bottom: none;
    text-transform: none;
    font-size: 15px;
  }
  nav.topnav .links .cta-in-menu:hover { background: var(--rost-hover); }

  .site-footer { padding: 48px 22px 24px; }
  .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}