/* ==========================================================================
   Header and hero.

   Lifted verbatim out of the first build's inline <style> on 2026-09-10 when
   the site grew from one page to three. Not restyled: the hero's photo
   treatment and its text alignment were settled by Jose over three rounds on
   2026-08-28 and the outcome is deliberate, including the empty space on the
   left at wide widths. Only the indentation changed.
   ========================================================================== */

/* Fixed, not absolute, so the language switch and the menu stay reachable
   from anywhere on the page. It keeps the hero's own scrim at the top of the
   page and only takes a solid ground once it is over content, which site.js
   flags with .is-stuck. */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: linear-gradient(to bottom, rgba(8, 20, 15, 0.9), rgba(8, 20, 15, 0));
  padding: 24px 0;
  transition: background 200ms ease, border-color 200ms ease;
  border-bottom: 1px solid transparent;
}

header.is-stuck {
  background: rgba(8, 20, 15, 0.93);
  border-bottom-color: rgba(212, 175, 55, 0.18);
  padding: 14px 0;
}

@supports (backdrop-filter: blur(10px)) {
  header.is-stuck { background: rgba(8, 20, 15, 0.78); backdrop-filter: blur(12px); }
}

.container {
  width: 100%;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: 'Epilogue', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.02em;
}

header nav {
  display: none;
  gap: 28px;
}

header nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

header nav a:hover { color: var(--gold); }

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-toggle {
  display: flex;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 4px;
  overflow: hidden;
}

.lang-toggle button {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  background: transparent;
  color: var(--gold);
  border: none;
  cursor: pointer;
}

.lang-toggle button.active {
  background: var(--gold);
  color: var(--bg);
}

.cta-header {
  display: none;
  padding: 8px 20px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: transparent;
  color: var(--gold);
  text-decoration: none;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.cta-header:hover,
.cta-primary:hover {
  filter: brightness(1.08);
}

/*
  Full-bleed photo treatment per Jose's call (2026-08-28): his placement in
  the photo reads right there, and that's the priority over closing the
  empty-space-on-the-left tradeoff that comes with it.

  2026-09-11: the phone now gets the same treatment. It used to stack the
  photo as a strip with the copy on flat green underneath, which put the
  headline off the banner altogether. The mobile frame (2366:1399) has the
  copy on the photo like the desktop one, and solves the old text-on-his-face
  bug by moving him right of the text column instead, which is what
  background-position does below.
*/
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 620px;
  background-color: var(--bg);
  background-image:
    linear-gradient(to right,
      rgba(11, 36, 22, 1) 0%,
      rgba(11, 36, 22, 0.92) 17%,
      rgba(11, 36, 22, 0.66) 34%,
      rgba(11, 36, 22, 0.5) 50%,
      rgba(11, 36, 22, 0.42) 68%,
      rgba(11, 36, 22, 0.12) 84%,
      rgba(11, 36, 22, 0) 100%),
    url('../hero-bg.jpg');
  background-size: cover;
  /* 64% reproduces the crop the mobile frame actually uses. Its image fill
     carries imageTransform scale-x 0.4278, translate-x 0.3705, so the design
     shows the full-height band from 37% to 80% of the photo's width; cover on
     a phone-shaped box shows a 41% band, and 64% lands it in the same place. */
  background-position: 64% center;

  /* How much room there is to the left of his face, so the copy can be
     capped to it instead of guessed at.

     His face sits at x 925 to 1105 in the 1536 x 1024 photo. Phone-width
     cover scales by height (620 / 1024 = 0.605), so the photo renders 929
     wide and background-position-x 64% crops 0.64 * (929 - W) off the left.
     That puts the left edge of his face at 0.64W - 35. Take off the 24px
     gutter and 10px of air and the text has 0.64W - 69 to play with, which
     is 136px on a 320 screen and 174px on a 380 one. Capped at 170 so the
     line length stops growing on the larger phones. */
  --clear-of-him: min(170px, calc(64vw - 69px));
}

/* The strip the stacked build used. Nothing renders it now. */
.hero-bg { display: none; }

@media (min-width: 1024px) {
  .hero {
    min-height: 100vh;
    align-items: center;
    background-image:
      linear-gradient(90deg, rgba(26, 71, 42, 0.78) 0%, rgba(8, 20, 15, 0.61) 40%, rgba(8, 20, 15, 0) 100%),
      url('../hero-bg.jpg');
    background-size: cover;
    background-position: center;
  }

  .hero-bg { display: none; }
}

.hero-inner {
  width: 100%;
  padding: 40px 24px 56px;
}

@media (min-width: 1024px) {
  .hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 140px 24px 80px;
  }
}

.hero-content {
  max-width: 640px;
}

.tagline {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tagline span.divider {
  color: var(--text-muted);
  font-weight: 400;
}

h1 {
  font-family: 'Epilogue', sans-serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1.1;
  margin-bottom: 24px;
}

.subtext {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
  color: #e2e8f0;
  opacity: 0.9;
  margin-bottom: 40px;
  max-width: 480px;
}

.cta-area {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-primary {
  display: inline-block;
  background: var(--gold);
  border: none;
  color: var(--bg);
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px;
  padding: 16px 32px;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}

.cta-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 24px;
  border-left: 1px solid rgba(212, 175, 55, 0.3);
}

.cta-meta .time {
  font-weight: 500;
  font-size: 16px;
}

.cta-meta .spots {
  font-weight: 400;
  font-size: 14px;
  color: var(--text-muted);
}

@media (min-width: 768px) {
  header nav { display: flex; }
  .cta-header { display: inline-block; }
  h1 { font-size: 60px; }
}

/* Below the row breakpoint the copy sits on the photo, left aligned, the way
   the mobile frame has it. The scrim above carries the text; the photo keeps
   him to the right of it. */
@media (max-width: 1023px) {
  .hero { justify-content: center; }

  /* Clears the absolute header, then centres the block in what is left. */
  .hero-inner { padding: 124px 24px 64px; }
  .hero-content { max-width: 520px; }
  .cta-meta { text-align: left; }
}

/* Phone. The type scale comes off the mobile frame, rounded up: its 34px
   headline and 13px body are literal values at 380 wide, and 13px body is
   below what we ship, so the body sizes stay where they were. */
@media (max-width: 767px) {
  /* Scoped to the hero: about.html and insights.html carry the same bare h1
     and neither of them sits on a photograph. */
  /* The frame sets 34px over 40px of leading. It fits because its own lines
     are short; ours are capped to the room left of his face, so the size
     tracks the width and tops out at the frame's value. */
  .hero h1 { font-size: clamp(26px, 8.9vw, 34px); line-height: 1.18; max-width: var(--clear-of-him); }

  /* The column is as wide as the tagline needs to stay on one line; the
     headline and body are capped narrower so they clear his face. */
  .hero-content { max-width: 332px; }
  .subtext { font-size: 13px; line-height: 1.55; max-width: var(--clear-of-him); margin-bottom: 24px; }

  /* Frame values: 12px button label, 10px availability, floored at 11. */
  .cta-primary { font-size: 12px; padding: 12px 22px; }
  .cta-meta .time { font-size: 10px; }
  .cta-meta .spots { font-size: 10px; }
  /* One line in both languages, which is what both mobile frames show. The
     German string is the longer one and sets the size: the frames use 8px,
     10px is the smallest we will ship and still fits it. */
  /* Not capped: at 10px it stays on one line, which is what both frames show,
     and it sits above his head rather than across his face. nowrap keeps
     KI-AGENTUR whole if a narrow screen does wrap the row, since the hyphen
     is otherwise a break opportunity and the line broke mid-word. */
  /* 0.06em rather than the desktop 0.1em: at 11px the German phrase needs the
     tracking back to stay on the one line both frames show. */
  .tagline { font-size: 8px; gap: 8px; margin-bottom: 18px; letter-spacing: 0.06em; }
  .tagline > span { white-space: nowrap; }

  /* The frame stacks the button and the availability line, so the vertical
     rule between them has nothing to divide. */
  .cta-area { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cta-meta { padding-left: 0; border-left: 0; }
}

@media (min-width: 1024px) {
  h1 { font-size: 72px; }
}

/* --------------------------------------------------------------------------
   Mobile navigation.

   The first build was one page, so a header with no nav below 768px cost
   nothing. With three pages it strands About and Insights, so the mobile
   frame's hamburger (Button - Menu, 32x32, three rules) is built here and the
   links drop into a panel. The EN/DE control stays in the bar rather than
   moving into the panel: the design omits it on mobile, but hiding the
   language switch behind a menu is worse than the small deviation.
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 4px;
  color: var(--gold);
  cursor: pointer;
}

.nav-toggle:hover { background: rgba(212, 175, 55, 0.1); }
.nav-toggle svg { display: block; }
.nav-toggle .icon-close { display: none; }

/* Panel-only control, revealed inside the mobile block below. Declared here
   so the media query that shows it comes later and wins. */
.nav-cta { display: none; }
header.is-open .nav-toggle .icon-open { display: none; }
header.is-open .nav-toggle .icon-close { display: block; }

@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; }

  /* The panel: same scrim colour as the header so it reads as one surface. */
  header nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 16px;
    background: rgba(8, 20, 15, 0.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  }

  header.is-open nav { display: flex; }

  /* 44px minimum touch height, which the desktop 14px link does not give. */
  header nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  header nav a:first-child { border-top: 0; }

  .lang-toggle button { min-height: 44px; padding: 0 14px; }
  .header-right { gap: 10px; }
  .logo { font-size: 20px; }

  /* The header CTA stays out of the mobile bar. The design puts a "Let's
     Talk" button there, but its German label is "Jetzt sprechen", which
     pushed the hamburger off the right edge at 390px. The CTA moves to the
     foot of the panel instead, where the label length cannot break it. */
  .nav-cta {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 14px;
    width: 100%;
    background: var(--gold);
    color: var(--bg);
    border: 0;
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
  }
}

/* Thumb targets in the bar, keyed on the pointer rather than the width: an
   iPad is a touch device at 1024px wide, and the device pass on 2026-09-11
   found the language buttons at 26px and the nav links at 19px there. */
/* Controls that are in the bar at every width. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  /* The logo is the link home, and 21px of text is not a thumb target. */
  .logo { display: inline-flex; align-items: center; min-height: 44px; }
  .lang-toggle button { min-height: 44px; }
}

/* The row nav and the bar CTA only exist from 768px up, so the min-width is
   part of the condition, not an optimisation. Without it the display value
   here would put the header CTA back into the phone bar, where its German
   label pushes the hamburger off the right edge. */
@media (min-width: 768px) and (hover: none) and (pointer: coarse) {
  header nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .cta-header { min-height: 44px; display: inline-flex; align-items: center; }
}