/* ── LARS SCHLICHTING — SHARED SITE STYLES ── */
@import url('fonts/lato/lato.css');

:root {
  --green:      #8EB902;
  --green-dark: #6c9700;
  --green-bar:  #8AB202;
  --text:       #737c7a;
  --bg-white:   #ffffff;
  --bg-light:   #f4f6e9;
  --bg-dark:    #39342d;
  --bg-darker:  #342f29;
  --bg-darkest: #2b2822;
  --border:     #ebe8e2;
  --muted-dark: #7b7368;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.7;
  color: var(--text); background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }

/* ── TOP BAR ── */
.top-bar { background: var(--bg-darkest); padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.top-bar-inner { display: flex; justify-content: space-between; align-items: center; }
.top-bar-left { font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; }
.top-bar-left .dot { font-size: 0.5em; vertical-align: middle; opacity: 0.8; }
/* responsive grid utilities */
.auto-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; background: var(--border); }
.auto-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--border); }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.top-bar-right { display: flex; gap: 14px; align-items: center; }
.top-bar-right a { color: rgba(255,255,255,0.45); font-size: 13px; text-decoration: none; transition: color 0.2s; }
.top-bar-right a:hover { color: var(--green); }

/* ── NAV ── */
nav { background: var(--bg-white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.nav-logo img { height: 48px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--green); }
.nav-links .has-dropdown { position: relative; display: flex; align-items: center; }
.nav-links .has-dropdown > a::after { content: ' \25BE'; font-size: 9px; }
.nav-links .dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--bg-white); border: 1px solid var(--border); border-top: 2px solid var(--green); min-width: 200px; z-index: 200; }
.nav-links .has-dropdown:hover .dropdown { display: block; }
.nav-links .dropdown a { display: block; padding: 10px 18px; font-size: 11px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.nav-links .dropdown a:last-child { border-bottom: none; }
.nav-cta-group { display: flex; align-items: center; gap: 12px; }
.nav-member { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); border: 1px solid var(--border); padding: 8px 16px; text-decoration: none; }
.nav-member:hover { border-color: var(--green); color: var(--green); }
.nav-cta { background: var(--green); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 22px; text-decoration: none; white-space: nowrap; transition: background 0.2s; }
.nav-cta:hover { background: var(--green-dark); }
.nav-mobile-only { display: none; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text); transition: all 0.2s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── SHARED CARDS (service + pricing) ── */
.service-card { background: var(--bg-white); padding: 40px 36px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); z-index: 2; }
.price-card { background: var(--bg-white); padding: 32px 28px; transition: transform 0.25s ease, box-shadow 0.25s ease; display: flex; flex-direction: column; }
.price-card:not(.featured):hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); border-top: 3px solid var(--green); }
.price-card.featured { background: var(--green); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.15); }
.price-card.featured:hover { transform: translateY(-8px); box-shadow: 0 20px 48px rgba(0,0,0,0.2); }

/* ── ICON BAR ── */
.icon-bar { background: var(--green-bar); }
.icon-bar-inner { display: flex; align-items: stretch; max-width: 1200px; margin: 0 auto; }
.icon-bar-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 16px; border-right: 1px solid rgba(255,255,255,0.2); cursor: default; }
.icon-bar-item:last-child { border-right: none; }
.icon-bar-item img { width: 28px; height: 28px; object-fit: contain; }
.icon-bar-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }

/* ── PAGE HERO (Speaker-style full-bleed banner) ── */
.page-hero { background: #2b2822; position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: flex-end; }
.page-hero-bg { position: absolute; inset: 0; background: #2b2822; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.65; }
.page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,40,34,0.85) 0%, rgba(43,40,34,0.20) 55%, transparent 100%); }
.page-hero-content { position: relative; z-index: 2; width: 100%; padding-top: 72px; padding-bottom: 60px; }
.page-hero-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); margin-bottom: 16px; }
.page-hero h1 { font-size: 60px; font-weight: 300; text-transform: uppercase; color: #fff; line-height: 1.05; letter-spacing: 0.02em; margin-bottom: 16px; }
.page-hero h1 em { font-style: normal; color: var(--green); }
.page-hero-sub { font-size: 17px; font-weight: 300; color: rgba(255,255,255,0.7); max-width: 520px; line-height: 1.65; }

/* ── SECTION TYPOGRAPHY ── */
.section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; }
.section-label.light { color: rgba(255,255,255,0.4); }
h2.section-title { font-size: 38px; font-weight: 300; text-transform: uppercase; color: var(--text); letter-spacing: 0.03em; line-height: 1.1; margin-bottom: 8px; }
h2.section-title em { font-style: normal; color: var(--green); font-weight: 600; }
h2.section-title.light { color: #fff; }
h3.card-title { font-size: 20px; font-weight: 600; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.section-divider { width: 40px; height: 3px; background: var(--green); margin: 20px 0 32px; }
.section-divider.light { background: rgba(255,255,255,0.3); }
p.body-text { font-size: 15px; color: var(--text); line-height: 1.8; margin-bottom: 16px; }
p.body-text.light { color: var(--muted-dark); }

/* ── BUTTONS ── */
.btn-primary { background: var(--green); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 32px; text-decoration: none; display: inline-block; transition: background 0.2s; }
.btn-primary:hover { background: var(--green-dark); }
.btn-outline-dark { border: 1px solid var(--border); color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 13px 28px; text-decoration: none; display: inline-block; transition: all 0.2s; }
.btn-outline-dark:hover { border-color: var(--green); color: var(--green); }
.btn-outline-light { border: 1px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 13px 28px; text-decoration: none; display: inline-block; transition: all 0.2s; }
.btn-outline-light:hover { border-color: #fff; color: #fff; }
.btn-white { background: #fff; color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 32px; text-decoration: none; display: inline-block; transition: background 0.2s; }
.btn-white:hover { background: var(--bg-light); }

/* ── FEATURE LIST (checkmarks) ── */
.feature-list { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 32px; }
.feature-list-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text); }
.feature-list-item img { width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; }

/* ── CTA BANNER ── */
.cta-banner { background: var(--green-bar); padding: 64px 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-title { font-size: 34px; font-weight: 300; text-transform: uppercase; color: #fff; letter-spacing: 0.04em; margin-bottom: 10px; }
.cta-sub { font-size: 15px; color: rgba(255,255,255,0.75); font-weight: 300; }

/* ── TESTIMONIALS ── */
.testimonials { background: var(--bg-dark); padding: 80px 0; }
.testimonials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(255,255,255,0.06); margin-top: 48px; }
.testimonial { background: var(--bg-dark); padding: 40px 36px; }
.t-quote { font-size: 16px; font-style: italic; font-weight: 300; color: rgba(255,255,255,0.75); line-height: 1.8; margin-bottom: 24px; }
.t-quote::before { content: '"'; color: var(--green); font-size: 24px; font-style: normal; }
.t-author { font-size: 12px; font-weight: 600; color: var(--green); text-transform: uppercase; letter-spacing: 0.1em; }
.t-role { font-size: 11px; color: var(--muted-dark); margin-top: 3px; }

/* ── LOGOS ── */
.logos { background: var(--bg-white); padding: 64px 0; }
.logos-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--border); margin-top: 40px; }
.logo-tile { background: var(--bg-white); height: 80px; display: flex; align-items: center; justify-content: center; padding: 16px 20px; transition: background 0.2s; }
.logo-tile:hover { background: var(--bg-light); }
.logo-tile img { max-height: 38px; max-width: 100%; object-fit: contain; filter: grayscale(1) opacity(0.45); transition: filter 0.2s; }
.logo-tile:hover img { filter: grayscale(0) opacity(1); }

/* ── FOOTER ── */
footer { background: var(--bg-darker); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand img { height: 40px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer-brand p { font-size: 13px; color: var(--muted-dark); line-height: 1.8; }
.footer-social { display: flex; gap: 14px; margin-top: 20px; }
.footer-social a { color: rgba(255,255,255,0.3); font-size: 15px; text-decoration: none; transition: color 0.2s; }
.footer-social a:hover { color: var(--green); }
.footer-col-label { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.25); margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 13px; color: var(--muted-dark); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--green); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; }
.footer-copy { font-size: 11px; color: rgba(255,255,255,0.2); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: 11px; color: rgba(255,255,255,0.2); text-decoration: none; }
.footer-legal a:hover { color: var(--green); }

/* desktop dropdown tap target */
.nav-links .dropdown a { padding: 13px 18px; }
.toggle-btn { padding: 8px 0; }

/* ── RESPONSIVE ── */
/* Tablet/laptop nav: switch to hamburger up to 1024px so the full nav never crowds */
@media (max-width: 1024px) {
  .nav-toggle { display: flex; order: 3; }
  .nav-cta-group { display: none; }
  .nav-links {
    display: none; position: absolute; top: 70px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-white); border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08); padding: 8px 0;
  }
  .nav-links.open { display: flex; }
  .nav-links > a, .nav-links .has-dropdown > a { display: block; padding: 14px 24px; border-bottom: 1px solid var(--border); }
  .nav-links .has-dropdown { position: static; display: block; }
  .nav-links .has-dropdown .dropdown { position: static; display: none; border: none; box-shadow: none; background: var(--bg-light); min-width: 0; }
  .nav-links .has-dropdown:hover .dropdown { display: none; }
  .nav-links .has-dropdown.open .dropdown { display: block; }
  .nav-links .dropdown a { padding-left: 40px; }
  .nav-mobile-only { display: block; padding: 14px 24px; border-bottom: 1px solid var(--border); }
}

@media (max-width: 960px) {
  .container { padding: 0 24px; }
  .icon-bar { display: none; }
  .auto-grid-2 { grid-template-columns: 1fr; }
  .auto-grid-3 { grid-template-columns: repeat(2,1fr); } /* tablet: 2-up, not 1 */
  .split-2 { grid-template-columns: 1fr; gap: 40px; }
  h2.section-title { font-size: 28px; }
  .page-hero { min-height: 420px; }
  .page-hero h1 { font-size: 44px; }
  .page-hero-overlay { background: linear-gradient(to top, rgba(43,40,34,0.85) 0%, rgba(43,40,34,0.30) 50%, rgba(43,40,34,0.05) 100%); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .logos-grid { grid-template-columns: repeat(3,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .cta-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 600px) {
  .auto-grid-3 { grid-template-columns: 1fr; }
  .page-hero { min-height: 300px; }
  .page-hero h1 { font-size: 28px; }
  .page-hero-overlay { background: linear-gradient(to top, rgba(43,40,34,0.90) 0%, rgba(43,40,34,0.45) 60%, rgba(43,40,34,0.15) 100%); }
  .logos-grid { grid-template-columns: repeat(2,1fr); }
}

/* ── PRICING (shared) ── */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--border); margin-top: 48px; }
.pricing-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.price-name { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.price-card.featured .price-name { color: rgba(255,255,255,0.75); }
.price-amount { font-size: 38px; font-weight: 300; color: var(--text); line-height: 1; margin-bottom: 4px; }
.price-card.featured .price-amount { color: #fff; }
.price-sessions { font-size: 12px; color: var(--text); margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.price-card.featured .price-sessions { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); }
.price-badge { font-size: 11px; color: rgba(255,255,255,0.9); margin-bottom: 16px; font-weight: 600; }
.price-features { display: flex; flex-direction: column; gap: 9px; margin-bottom: 28px; flex: 1; }
.price-feature { font-size: 13px; color: var(--text); display: flex; align-items: flex-start; gap: 8px; }
.price-card.featured .price-feature { color: rgba(255,255,255,0.85); }
.price-feature::before { content: '—'; color: var(--green); font-size: 11px; margin-top: 3px; flex-shrink: 0; }
.price-card.featured .price-feature::before { color: rgba(255,255,255,0.5); }
.pricing-note { text-align: center; font-size: 12px; color: var(--text); margin-top: 24px; line-height: 1.8; }
.einzelstunden-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); margin-top: 48px; }
.einzel-card { background: var(--bg-white); padding: 36px 32px; text-align: center; }
.einzel-name { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; }
.einzel-title { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); margin-bottom: 8px; }
.einzel-desc { font-size: 13px; color: var(--text); margin-bottom: 20px; line-height: 1.7; }
.einzel-price { font-size: 42px; font-weight: 300; color: var(--green); line-height: 1; }
.page-hero-short { background: var(--bg-dark); padding: 80px 0; }
.page-hero-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); margin-bottom: 16px; }
.corporate-note { background: var(--bg-light); padding: 56px 0; text-align: center; }
@media (max-width: 960px) { .pricing-grid { grid-template-columns: 1fr 1fr; } .pricing-grid.cols-3 { grid-template-columns: 1fr; } .einzelstunden-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ── ACCORDION / TOGGLE ── */
.toggle-btn { background: none; border: none; color: var(--green); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; cursor: pointer; padding: 0; margin-top: 12px; font-family: inherit; }
.toggle-btn:hover { color: var(--green-dark); }
.toggle-content { display: none; margin-top: 14px; }
.toggle-content.open { display: block; }

/* ── COOKIE CONSENT ── */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-darker); color: rgba(255,255,255,0.85); padding: 20px 24px; z-index: 9000; display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; box-shadow: 0 -4px 24px rgba(0,0,0,0.25); }
.cookie-banner p { font-size: 13px; max-width: 720px; line-height: 1.6; margin: 0; }
.cookie-banner a { color: var(--green); }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 11px 22px; cursor: pointer; border: none; }
.cookie-accept { background: var(--green); color: #fff; }
.cookie-accept:hover { background: var(--green-dark); }
.cookie-decline { background: transparent; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.3); }
.cookie-decline:hover { color: #fff; border-color: #fff; }
.cookie-hidden { display: none !important; }

/* ── LEGAL / TEXT PAGES ── */
.legal-section { background: var(--bg-white); padding: 72px 0; }
.legal-section .container { max-width: 860px; }
.legal-section h2 { font-size: 22px; font-weight: 600; color: var(--text); margin: 36px 0 12px; }
.legal-section h3 { font-size: 16px; font-weight: 700; color: var(--green); margin: 24px 0 8px; }
.legal-section p, .legal-section li { font-size: 15px; color: var(--text); line-height: 1.8; margin-bottom: 12px; overflow-wrap: break-word; word-break: break-word; }
.legal-section ul { padding-left: 22px; margin-bottom: 12px; }
.legal-section li { margin-bottom: 6px; }
.legal-section .container > h2:first-child { margin-top: 0; }
.legal-section a { color: var(--green); text-decoration: none; }
.legal-section a:hover { text-decoration: underline; }
.legal-note { background: var(--bg-light); border-left: 3px solid var(--green); padding: 16px 20px; font-size: 13px; color: var(--muted-dark); margin: 24px 0; }


/* ==== homepage page-specific styles (ported from site-home.html) ==== */

    /* ── HERO ── */
    .home-hero {
      position: relative;
      height: 100vh;
      min-height: 600px;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
    }
    .home-hero-bg {
      position: absolute;
      inset: 0;
    }
    .home-hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }
    .home-hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(43,40,34,0.92) 40%, rgba(43,40,34,0.3) 100%);
    }
    .home-hero-content {
      position: relative;
      z-index: 2;
      text-align: left;
      width: 100%;
      padding-bottom: 60px;
    }
    .home-hero-eyebrow {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 20px;
    }
    .home-hero h1 {
      font-size: 68px;
      font-weight: 300;
      text-transform: uppercase;
      color: #fff;
      line-height: 1.05;
      letter-spacing: 0.02em;
      margin-bottom: 20px;
      max-width: 540px;
    }
    .home-hero h1 em {
      font-style: normal;
      color: var(--green);
      font-weight: 700;
    }
    .home-hero-sub {
      font-size: 17px;
      font-weight: 300;
      color: rgba(255,255,255,0.7);
      max-width: 440px;
      line-height: 1.7;
      margin-bottom: 36px;
    }
    .home-hero-ctas {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      max-width: 540px;
    }
    .scroll-arrow {
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      color: rgba(255,255,255,0.35);
      font-size: 22px;
      animation: bounce 2s infinite;
    }
    @keyframes bounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(8px); }
    }

    /* ── SERVICES SECTION ── */
    .services { background: var(--bg-white); padding: 80px 0; }
    .services-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 2px;
      background: var(--border);
      margin-top: 48px;
    }
    .service-card {
      background: var(--bg-white);
      padding: 40px 36px;
      transition: transform 0.25s, box-shadow 0.25s;
    }
    .service-card.bg-light-card { background: var(--bg-light); }
    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.12);
      z-index: 2;
      position: relative;
    }
    .card-num {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 16px;
    }
    .card-link {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--green);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 20px;
      transition: gap 0.2s;
    }
    .card-link:hover { gap: 10px; }

    /* ── STATS ── */
    .stats { background: var(--bg-light); padding: 72px 0; }
    .stats-grid-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }
    .stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
      background: var(--border);
    }
    .stat-cell {
      background: var(--bg-white);
      padding: 32px 28px;
    }
    .stat-cell.green-stat {
      background: var(--green);
    }
    .stat-num {
      font-size: 42px;
      font-weight: 300;
      color: var(--green);
      line-height: 1;
      margin-bottom: 6px;
    }
    .stat-cell.green-stat .stat-num { color: #fff; }
    .stat-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text);
    }
    .stat-cell.green-stat .stat-label { color: rgba(255,255,255,0.85); }

    /* ── SPLIT FEATURE ── */
    .split-feature {
      background: var(--bg-white);
      padding: 80px 0;
    }
    .split-feature-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .split-img {
      position: relative;
      min-height: 480px;
      overflow: hidden;
    }
    .split-img img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.75;
    }
    .split-img-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(43,40,34,0.85) 0%, transparent 60%);
    }
    .split-img-label {
      position: absolute;
      bottom: 32px;
      left: 36px;
      z-index: 2;
    }
    .split-img-label .eyebrow {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 4px;
    }
    .split-img-label .location {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.85);
    }
    .feature-content {
      padding: 56px 52px;
      background: var(--bg-light);
    }

    /* ── PRICING ── */
    .pricing { background: var(--bg-light); padding: 80px 0; }
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px;
      background: var(--border);
      margin-top: 48px;
    }
    .price-card {
      background: var(--bg-white);
      padding: 32px 28px;
      transition: transform 0.25s, box-shadow 0.25s;
      display: flex;
      flex-direction: column;
    }
    .price-card:not(.featured):hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.1);
      border-top: 3px solid var(--green);
    }
    .price-card.featured {
      background: var(--green);
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.15);
    }
    .price-card.featured:hover { transform: translateY(-8px); }
    .price-name {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 8px;
    }
    .price-card.featured .price-name { color: rgba(255,255,255,0.75); }
    .price-amount {
      font-size: 38px;
      font-weight: 300;
      color: var(--text);
      line-height: 1;
      margin-bottom: 4px;
    }
    .price-card.featured .price-amount { color: #fff; }
    .price-sessions {
      font-size: 12px;
      color: var(--text);
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border);
    }
    .price-card.featured .price-sessions { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); }
    .price-badge {
      font-size: 11px;
      color: rgba(255,255,255,0.9);
      margin-bottom: 16px;
      font-weight: 600;
    }
    .price-features {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-bottom: 28px;
      flex: 1;
    }
    .price-feature {
      font-size: 13px;
      color: var(--text);
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    .price-card.featured .price-feature { color: rgba(255,255,255,0.85); }
    .price-feature::before {
      content: '—';
      color: var(--green);
      font-size: 11px;
      margin-top: 3px;
      flex-shrink: 0;
    }
    .price-card.featured .price-feature::before { color: rgba(255,255,255,0.5); }
    .pricing-note {
      text-align: center;
      font-size: 12px;
      color: var(--text);
      margin-top: 24px;
    }
    .pricing-note a {
      color: var(--green);
      text-decoration: none;
      font-weight: 600;
    }
    .pricing-link {
      text-align: center;
      margin-top: 32px;
    }
    .pricing-link a {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: var(--green);
      text-decoration: none;
    }
    .pricing-link a:hover { text-decoration: underline; }

    /* ── CLIENT LOGOS ── */
    .logos-label { text-align: center; }

    @media (max-width: 960px) {
      .home-hero h1 { font-size: 42px; }
      .services-grid, .pricing-grid { grid-template-columns: 1fr; }
      .stats-grid-2col { grid-template-columns: 1fr; }
      .stats-grid-2col > * { min-width: 0; }
      .split-feature-inner { grid-template-columns: 1fr; }
      .split-img { min-height: 300px; }
    }
  

/* =====================================================================
   WP-only additions appended to theme.css by build-wp-theme.py.
   (Not used by the static prototype — only the WordPress block theme.)

   Note: the header uses the original custom nav (.nav-links / .nav-toggle
   driven by site.js), which already carries its full styling in the ported
   site CSS.
   ===================================================================== */

/* Sticky header in the block theme.
   In FSE the nav sits inside a short <header class="wp-block-template-part">
   wrapper, so `position:sticky` on the inner <nav> can only stick within that
   short wrapper. Make the WHOLE header template-part sticky instead, so the
   top-bar + nav stay pinned to the top while scrolling up/down on every page. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 300;
}
.wp-site-blocks > header.wp-block-template-part nav { position: static; }

/* ---- Native-block pages: editable hero (core/cover) replicating .page-hero ---- */
/* .wp-block-cover.page-hero-cover beats core's .wp-block-cover (equal-class) rules */
.wp-block-cover.page-hero-cover {
  min-height: 560px; padding: 0; background-color: #2b2822;
  align-items: flex-end; justify-content: flex-start;
}
/* image: cover-cropped at 0.65 like the original (focal point sets object-position inline) */
.page-hero-cover .wp-block-cover__image-background { opacity: 0.65; }
/* overlay = the original bottom-up dark gradient (force regardless of dim classes) */
.page-hero-cover .wp-block-cover__background {
  background: linear-gradient(to top, rgba(43,40,34,0.85) 0%, rgba(43,40,34,0.20) 55%, rgba(43,40,34,0) 100%) !important;
  opacity: 1 !important;
}
/* content block: full-width flex item, capped + centered at the 1200 container so the
   headline sits on the SAME gutter as the body (≈160px @1440), not the cover's edge */
.page-hero-cover .wp-block-cover__inner-container {
  flex-basis: 100%; width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 0 48px 60px; text-align: left; color: #fff;   /* 48px == .container gutter */
}
@media (max-width: 960px) { .page-hero-cover .wp-block-cover__inner-container { padding: 0 24px 48px; } }
.page-hero-cover h1 {
  font-size: 60px; font-weight: 300; text-transform: uppercase; color: #fff;
  line-height: 1.05; letter-spacing: 0.02em; margin: 0 0 16px;
}
.page-hero-cover h1 em { font-style: normal; color: var(--green); }
@media (max-width: 960px) { .wp-block-cover.page-hero-cover { min-height: 420px; } .page-hero-cover h1 { font-size: 44px; } }
@media (max-width: 600px) { .wp-block-cover.page-hero-cover { min-height: 300px; } .page-hero-cover h1 { font-size: 28px; } }

/* When a block group is used as a CSS grid (.auto-grid-*), WordPress's flow-layout
   rule adds a top margin to every grid item after the first — which pushes the 2nd
   card down. Neutralize it so grid cards top-align. */
.auto-grid-2 > *, .auto-grid-3 > *, .split-2 > *, .pricing-grid > *,
.einzelstunden-grid > *, .testimonials-grid > *, .logos-grid > *, .location-grid > *,
.price-features > *, .lars-flush > * {
  margin-block-start: 0 !important; margin-top: 0 !important;
}

/* image inside the editable team cards */
.team-card-img img { width: 100%; height: 300px; object-fit: cover; object-position: center top; display: block; }
.team-card-img { margin: 0 0 24px; }

/* ---- Native core/button CTAs: make them behave EXACTLY like the site's
   .btn-primary / .btn-white anchor buttons (used in the home pattern & nav).
   Without this, standalone core/buttons keep WordPress's default pill shape
   (border-radius:9999px) and .wp-element-button hover/colors, so CTAs like
   "Zum Speaker-Format", "Format anfragen" and "Jetzt Kontakt aufnehmen" look
   and hover differently from the rest. Normalize base + hover, site-wide. ---- */
.wp-block-button__link.btn-primary,
.wp-block-button__link.btn-white {
  border-radius: 0 !important;          /* kill WP's default pill */
  padding: 14px 32px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border: none; box-shadow: none; transition: background 0.2s;
}
.wp-block-button__link.btn-primary       { background: var(--green); color: #fff; }
.wp-block-button__link.btn-primary:hover { background: var(--green-dark) !important; color: #fff; }
.wp-block-button__link.btn-white         { background: #fff; color: var(--green); }
.wp-block-button__link.btn-white:hover   { background: var(--bg-light) !important; color: var(--green); }
/* the .btn-* class also lands on the wrapper <div>; neutralize it there so it
   doesn't add its own padding/background around the link */
.wp-block-button.btn-primary, .wp-block-button.btn-white { background: none !important; padding: 0 !important; }
/* native <details> "Weiterlesen" toggle in team cards */
.team-more { margin-top: 8px; }
.team-more > summary {
  cursor: pointer; list-style: none; color: var(--green);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.team-more > summary::-webkit-details-marker { display: none; }
.team-more[open] > summary { margin-bottom: 12px; }


/* ---- page-specific CSS lifted from kontakt + locations (now native-block pages) ---- */
/* from site-kontakt.html */
/* ── Booking mock (placeholder for Bookly [bookly-form] in WordPress) ── */
    .booking { background: var(--bg-light); padding: 80px 0; }
    .booking-card {
      background: var(--bg-white); border: 1px solid var(--border);
      border-top: 3px solid var(--green);
      padding: 40px; margin-top: 40px; max-width: 760px;
    }
    .booking-row {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px;
    }
    .booking-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
    .booking-field.half-row { margin-bottom: 0; }
    .booking-fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
    .booking-label {
      font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--green);
    }
    .booking-input, .booking-select, .booking-textarea {
      font-family: 'Lato', Helvetica, Arial, sans-serif;
      font-size: 15px; color: var(--text);
      padding: 12px 14px; border: 1px solid var(--border);
      background: var(--bg-white); width: 100%; border-radius: 0;
      -webkit-appearance: none; appearance: none;
    }
    .booking-select {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238EB902' stroke-width='2'/></svg>");
      background-repeat: no-repeat; background-position: right 14px center;
      background-size: 12px 8px; padding-right: 36px;
    }
    .booking-textarea { resize: vertical; min-height: 96px; }
    .booking-input:focus, .booking-select:focus, .booking-textarea:focus {
      outline: none; border-color: var(--green);
    }
    .booking-slots { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
    .booking-slot {
      font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 600;
      letter-spacing: 0.04em; color: var(--text);
      padding: 9px 18px; border: 1px solid var(--border); background: var(--bg-white);
      cursor: pointer; transition: all 0.18s;
    }
    .booking-slot:hover { border-color: var(--green); color: var(--green); }
    .booking-slot.is-active { background: var(--green); border-color: var(--green); color: #fff; }
    .booking-submit {
      font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
      background: var(--green); border: none; padding: 15px 36px; cursor: pointer;
      transition: background 0.2s;
    }
    .booking-submit:hover { background: var(--green-dark); }
    .booking-note { font-size: 12px; color: var(--text); margin-top: 16px; opacity: 0.75; }
    @media (max-width: 600px) {
      .booking-row, .booking-fields-2 { grid-template-columns: 1fr; }
      .booking-card { padding: 28px 20px; }
    }
/* from site-locations.html */
.location-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      margin-top: 48px;
    }
    .location-card {
      background: var(--bg-white);
      border: 1px solid var(--border);
    }
    .location-card-img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      display: block;
    }
    .location-card-body {
      padding: 32px;
    }
    .location-name {
      font-size: 18px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--bg-dark);
      margin-bottom: 8px;
    }
    .location-address {
      font-size: 14px;
      color: var(--text);
      line-height: 1.6;
      margin-bottom: 24px;
    }
    .location-map {
      width: 100%;
      height: 260px;
      border: 0;
      display: block;
    }
    @media (max-width: 960px) {
      .location-grid { grid-template-columns: 1fr; }
    }

/* ===== Targeted layout fixes (user QA batch) ===== */
/* (2) no gap between the cover hero and the green icon bar (home has none) */
.icon-bar { margin-top: 0 !important; }

/* Speaker page: the home-hero is the first visible block but the speaker pattern
   embeds an inline <style> as its literal first child, so WP's flow block-gap adds
   a 24px margin-block-start to the hero -> a gap below the nav. The home-hero never
   needs a top margin (it's always flush under the sticky nav). */
.home-hero { margin-top: 0 !important; margin-block-start: 0 !important; }

/* (3) featured price card: "x × y Min" should be a line, not a 3px box */
.price-card.featured .price-sessions { border-width: 0 0 1px !important; }

/* (6) "Beliebtestes Paket" badge -> upper-right, out of flow, so all cards' prices align */
.price-card { position: relative; }
.price-badge { position: absolute; top: 22px; right: 24px; margin: 0 !important; text-align: right; }

/* Preise price-card CTA: core/button -> full-width square block, like the home pattern
   (the original was <a class="btn-primary" style="width:100%;text-align:center;display:block">) */
.price-card .wp-block-buttons { width: 100%; margin: 0; }
/* the .btn-primary class lands on BOTH the wrapper div and the link; strip it from the
   wrapper so its padding/background don't shrink the link inside */
.price-card .wp-block-button {
  display: block; width: 100%; flex: 1 1 100%; margin: 0;
  padding: 0 !important; background: none !important;
}
.price-card .wp-block-button__link {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  border-radius: 0 !important; padding: 14px 32px;
}