/* ui_kits/website/styles.css — editorial cream + forest aesthetic on top of colors_and_type.css */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

html { overflow-x: clip; }
body.site {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Subtle grain on the whole page */
body.site::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

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

/* ---- layout ---- */
.container { max-width: var(--width-content); margin: 0 auto; padding: 0 3rem; }
.section   { padding: 7rem 3rem; position: relative; }
.section--hero  { min-height: min(88vh, 880px); display: flex; align-items: center; padding: 8rem 3rem 4rem; }
.section--alt   { background: var(--bg-elev); }
.section--ink   { background: var(--bg-ink); color: var(--fg-on-dark); }
.section--ink .eyebrow { color: var(--accent-glow); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--fg-on-dark); }
.section--ink .lede,
.section--ink p { color: var(--fg-dim-on-dark); }
.section--accent { background: var(--accent); color: var(--fg-on-dark); text-align: center; padding: 6rem 3rem; position: relative; }

/* ---- nav ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: 72px; z-index: 100;
  padding: 0 3rem;
  background: rgba(244,241,236,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--width-content); margin: 0 auto; }
.nav-links { display: flex; gap: 1.8rem; align-items: center; flex-wrap: nowrap; }
.nav-link  {
  font-size: 0.84rem; font-weight: 500; color: var(--fg-dim);
  letter-spacing: 0.03em; text-transform: uppercase;
  transition: color 0.3s var(--ease-out); cursor: pointer; white-space: nowrap;
}
.nav-link:hover { color: var(--fg); }
.nav-link.active { color: var(--fg); }
.nav-lang  {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  color: var(--fg-mute); letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
}
.nav-lang:hover { color: var(--accent); }

/* ---- buttons (pill shaped) ----
   Buttons get colour-only hover (no translate-on-hover lift, which is the
   "every card lifts" tell). The pill keeps its place; only its colour shifts.
   .btn-primary:active still uses transform to give a tactile press feedback. */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.9rem 2rem; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  border: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.btn-sm { padding: 0.6rem 1.4rem; font-size: 0.85rem; }
.btn-lg { padding: 1rem 2.4rem; font-size: 0.95rem; font-weight: 700; }

.btn-primary { background: var(--accent); color: var(--fg-on-dark); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-cta); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-secondary { background: transparent; color: var(--fg); border: 1.5px solid var(--border); }
.btn-secondary:hover { border-color: var(--fg); }

.btn-ghost { background: transparent; color: var(--fg); padding: 0.6rem 0.8rem; }
.btn-ghost:hover { color: var(--accent); }

.btn-ink { background: var(--fg); color: var(--bg); }
.btn-ink:hover { background: var(--accent); }

.btn-white { background: #fff; color: var(--accent); }
.btn-white:hover { box-shadow: var(--shadow-glow); }

/* ---- type semantic ---- */
.eyebrow {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); }
.lede  {
  font-family: var(--font-body); font-size: 1.15rem; line-height: 1.75;
  color: var(--fg-dim); text-wrap: pretty; max-width: 60ch;
}

h1.hero-h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  line-height: 1.12; letter-spacing: -0.03em;
  color: var(--fg-strong); margin: 0; text-wrap: balance;
}
h1.hero-h em, h1.hero-h .serif {
  font-style: italic; color: var(--accent); font-family: var(--font-display);
}
h2.section-h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  line-height: 1.2; letter-spacing: -0.02em;
  color: var(--fg-strong); margin: 0; text-wrap: balance;
}
h2.section-h em, h2.section-h .serif {
  font-style: italic; color: var(--accent); font-family: var(--font-display);
}
h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg-strong); margin: 0; }

/* ---- cards ----
   Single card spec used across the whole site. Two modifiers cover the actual
   density variants that exist on this site; everything else should leave padding
   to the .card default and not override via inline styles. */
.card {
  background: var(--bg-elev); border: 1px solid transparent;
  border-radius: var(--radius-lg); padding: 2rem 1.75rem;
  transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.card--compact { padding: 1.6rem 1.4rem; }     /* press cards, reference pillars, small grid items */
.card--featured { padding: 2.5rem 2.5rem 2rem; } /* hero-of-section quote card */
.card-interactive { cursor: pointer; }
.card-interactive:hover {
  border-color: var(--accent); transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.section--alt .card { background: var(--bg); }   /* invert when on white */
.section--ink .card {
  background: rgba(244,241,236,0.04);
  border-color: rgba(244,241,236,0.08);
  color: var(--fg-on-dark);
}
.section--ink .card:hover {
  background: rgba(244,241,236,0.07);
  border-color: rgba(45,212,160,0.3);
}

/* ---- forms ---- */
.field {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0.85rem 1rem; height: 48px;
  color: var(--fg); font-family: var(--font-body); font-size: 0.95rem;
  width: 100%; outline: none;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.field::placeholder { color: var(--fg-mute); }
.field:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.field:focus:not(:focus-visible) { border-color: var(--accent); }
textarea.field { height: auto; resize: vertical; min-height: 96px; line-height: 1.5; }

/* ---- service-style icon plate ---- */
.icon-plate {
  width: 52px; height: 52px;
  background: var(--accent-light); color: var(--accent);
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- floating CTA (bottom-right) ---- */
.float-cta {
  position: fixed; bottom: 24px; right: 24px; z-index: 40;
  background: var(--fg); color: var(--fg-on-dark);
  height: 48px; padding: 0 1.4rem; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.88rem; cursor: pointer; border: none;
  box-shadow: 0 8px 30px rgba(10,15,26,0.25);
  transition: background-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  white-space: nowrap;
}
.float-cta:hover { background: var(--accent); transform: translateY(-2px); }

/* ---- modal ---- */
.scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,15,26,0.4); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadein 200ms var(--ease-out);
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 2rem; max-width: 480px; width: 100%;
  box-shadow: var(--shadow-card);
  animation: liftin 350ms var(--ease-out);
}
@keyframes liftin { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-close {
  background: none; border: none; color: var(--fg-mute); cursor: pointer;
  font-size: 20px; padding: 4px;
}
.modal-close:hover { color: var(--fg); }

/* ---- entry animation ---- */
.enter {
  opacity: 0; transform: translateY(30px);
  animation: enter 800ms var(--ease-out) forwards;
}
@keyframes enter { to { opacity: 1; transform: translateY(0); } }

/* ---- toast ---- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--bg-elev); border: 1px solid var(--accent);
  border-radius: var(--radius-pill); padding: 0.7rem 1.4rem; z-index: 200;
  display: flex; align-items: center; gap: 8px;
  font-size: 0.9rem; color: var(--fg);
  box-shadow: var(--shadow-card);
  animation: enter 350ms var(--ease-out);
}

/* ---- live dot ----
   Static filled dot, not a continuous pulse. The pulse was a hostile
   attention-grab on a non-live state ("Available from 1 June 2026" is a
   date, not a live signal). Kept the class name + selector so JSX doesn't
   need to change. */
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}

/* ---- floating warm accent ---- */
.float-circle {
  position: absolute;
  width: 120px; height: 120px;
  background: var(--accent-warm); opacity: 0.8;
  border-radius: 50%;
  animation: floatcircle 6s ease-in-out infinite;
  z-index: -1;
}
@keyframes floatcircle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-15px) rotate(5deg); }
}

/* ---- responsive ---- */

/* Tablet — 1024px and below */
@media (max-width: 1024px) {
  .nav { padding: 0 1.5rem; }
  .container { padding: 0 1.5rem; }
  .section { padding: 5rem 1.5rem; }
  .section--hero { padding: 7rem 1.5rem 3rem; min-height: auto; }
  .section--accent { padding: 5rem 1.5rem; }
  .nav-links { display: none !important; }
  .nav-burger { display: flex !important; }

  /* Generic responsive grid overrides */
  .r-hero-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .r-grid-3    { grid-template-columns: repeat(2, 1fr) !important; }
  .r-grid-4    { grid-template-columns: repeat(2, 1fr) !important; }
  .r-grid-5    { grid-template-columns: repeat(2, 1fr) !important; }
  .r-grid-asym { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .r-grid-2    { grid-template-columns: 1fr !important; gap: 1.5rem !important; }

  /* Hero stat card numbers slightly smaller */
  .r-hero-grid .stat-num { font-size: 2.4rem !important; }
}

/* Lede variants — full version on desktop+tablet, compact (2-sentence) on phone.
   Compact is hidden by default; the phone media query below swaps them. */
.lede--compact { display: none; }

/* Phone — 640px and below */
@media (max-width: 640px) {
  .nav { padding: 0 1.2rem; height: 64px; }
  .container { padding: 0 1.2rem; }
  .section { padding: 3.5rem 1.2rem; }
  .section--hero { padding: 5.5rem 1.2rem 2.5rem; }
  .section--accent { padding: 4rem 1.2rem; }

  /* Swap to the compact lede on phone */
  .lede--full { display: none; }
  .lede--compact { display: block; }

  /* Headlines scale down */
  h1.hero-h { font-size: clamp(2rem, 9vw, 2.8rem) !important; line-height: 1.1; }
  h2.section-h { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
  h3 { font-size: 1.1rem !important; }

  /* All multi-column grids collapse to single */
  .r-grid-3, .r-grid-4, .r-grid-5 { grid-template-columns: 1fr !important; }

  /* Card padding shrinks */
  .card { padding: 1.6rem 1.4rem !important; }

  /* Audiences "Auch für" strip stacks */
  .r-also-strip {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 1.2rem 1.4rem !important;
  }
  .r-also-strip > span:first-child {
    margin-bottom: 4px;
    font-size: 0.7rem;
    color: var(--accent) !important;
  }
  .r-also-strip button {
    padding: 0.8rem !important;
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    width: 100%;
  }

  /* Industries table rows → stacked */
  .r-industry-row {
    grid-template-columns: 44px 1fr !important;
    gap: 8px 12px !important;
    padding: 16px 16px !important;
  }
  .r-industry-row > *:nth-child(2) { grid-column: 2; }
  .r-industry-row > *:nth-child(3) { grid-column: 2; }

  /* Hero stat-card padding shrinks */
  .r-stat-card { padding: 1.8rem !important; }

  /* Contact 3-col → 1 col, centered */
  .r-contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; text-align: center; }
  .r-contact-grid > div { text-align: left; }

  /* Buttons can wrap */
  .btn { padding: 0.8rem 1.4rem; font-size: 0.88rem; }
  .btn-lg { padding: 0.9rem 1.6rem; font-size: 0.92rem; }
  .float-cta { bottom: 16px; right: 16px; height: 44px; padding: 0 1.1rem; }

  /* Photo in About shrinks height */
  .r-about-photo { height: 320px !important; }

  /* Headhunter FAQ row label/answer stacks */
  .r-faq-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* Bosch Bytes co-founder card — logo stacks above text on phone */
  .r-bb-card {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
    padding: 1.4rem 1.4rem !important;
  }
  .r-bb-img { height: 120px !important; object-position: left !important; }
}

/* ============================================================
   MOBILE NAV
   ============================================================ */
.nav-burger {
  display: none;
  background: transparent; border: none; cursor: pointer;
  padding: 10px; color: var(--fg); /* 24 + 10×2 = 44px square touch target (WCAG 2.5.5) */
}
.nav-burger:hover { color: var(--accent); }
.nav-mobile-controls { display: none; align-items: center; gap: 6px; }
.nav-lang-mobile {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
@media (max-width: 1024px) {
  .nav-mobile-controls { display: flex !important; }
}

.nav-drawer {
  position: fixed; top: 72px; left: 0; right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 1.6rem 1.5rem 2rem;
  display: flex; flex-direction: column; gap: 1.2rem;
  z-index: 99;
  animation: slidedown 240ms var(--ease-out);
  box-shadow: 0 12px 30px rgba(10,15,26,0.08);
}
@keyframes slidedown {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.nav-drawer .nav-link {
  font-size: 1rem; padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.nav-drawer .nav-link:last-of-type { border-bottom: none; }
.nav-drawer-foot {
  display: flex; gap: 12px; align-items: center; margin-top: 0.6rem;
}

/* ============================================================
   ACCESSIBILITY — globale Focus-Visible + Skip-Link + reduced-motion
   ============================================================ */

/* Global focus-visible — applies to every interactive element. WCAG 2.4.7.
   The accent token is forest green at ~5.7:1 against cream paper, so the
   outline is high-contrast on every supported surface. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.section--ink :focus-visible,
.section--accent :focus-visible {
  outline-color: var(--accent-glow);   /* lighter accent on dark / accent surfaces */
}
/* Hide the default focus ring only when the user is clicking (mouse / touch).
   :focus-visible preserves keyboard focus indication. */
*:focus:not(:focus-visible) { outline: none; }

/* Skip-link — first focusable element. Visually hidden until focused.
   Lets keyboard users jump straight to main content past the nav. */
.skip-link {
  position: absolute;
  top: 0; left: 0;
  background: var(--fg);
  color: var(--fg-on-dark);
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 200;
  transform: translateY(-150%);
  transition: transform 200ms var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
}

/* Decorative icon helper — apply to icons that have visible text labels nearby.
   Prevents screen readers from announcing the icon's symbol on top of the text. */
.icon-decorative { /* used in JSX as className="icon-decorative" */
  pointer-events: none;
}

/* Reduced motion — respects the OS-level preference (Vestibular Disorders,
   migraines, motion sensitivity). Collapses every animation + transition to
   near-instant. Hard rail, not opt-in. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .enter { opacity: 1; transform: none; }
  .float-circle { animation: none; transform: none; }
}