/* ═══════════════════════════════════════════════════════════
   CAPABLE Pitchdeck — capable.css
   Loaded only on page template: page-capable.php
   Version: 2.2  (override Salient parent-theme heading colors)
═══════════════════════════════════════════════════════════ */

/* ── FONTS ── */
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/IBMPlexSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/IBMPlexSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/IBMPlexSans-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/IBMPlexSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/IBMPlexSans-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }

/* ── ROOT VARS ── */
:root {
  --navy:       #253644;
  --navy-deep:  #1d2c38;
  --orange:     #ff5d3c;
  --orange-dk:  #e24a2b;
  --olive:      #646042;
  --grey:       #9ca2a2;
  --peach:      #f0c1a5;
  --golden:     #c8af7d;
  --silver:     #b6becb;
  --lightgrey:  #e6e6e6;
  --white:      #ffffff;
}

/* ── RESET inside our landing only ── */
body.capable-landing,
body.capable-landing *,
body.capable-landing *::before,
body.capable-landing *::after { box-sizing: border-box; }

body.capable-landing { margin: 0; padding: 0; }

body.capable-landing {
  font-family: 'IBM Plex Sans', sans-serif !important;
  background: var(--navy) !important;
  color: var(--white) !important;
  overflow-x: hidden;
  min-width: 960px;
}

/* ── KILL Salient parent-theme containers/headings on our page ── */
body.capable-landing #header-outer,
body.capable-landing #header-secondary-outer,
body.capable-landing #search-outer,
body.capable-landing #to-top { display: none !important; }

body.capable-landing #ajax-content-wrap,
body.capable-landing #ajax-content-wrap > .container-wrap,
body.capable-landing .container-wrap,
body.capable-landing .main-content,
body.capable-landing .main-content > .row {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  max-width: none !important;
  width: 100% !important;
}

/* Salient adds top padding for the fixed header — remove on this page */
body.capable-landing #ajax-content-wrap { padding-top: 0 !important; }

/* ── FORCE heading + text colors (override Salient defaults) ── */
body.capable-landing h1,
body.capable-landing h2,
body.capable-landing h3,
body.capable-landing h4,
body.capable-landing h5,
body.capable-landing h6,
body.capable-landing p,
body.capable-landing span,
body.capable-landing a,
body.capable-landing div {
  font-family: 'IBM Plex Sans', sans-serif;
}

body.capable-landing h1,
body.capable-landing h2,
body.capable-landing h3 {
  color: var(--white);
  margin: 0;
  padding: 0;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

body.capable-landing p { margin: 0; padding: 0; color: inherit; }
body.capable-landing a { text-decoration: none; }

/* ── NAV ── */
body.capable-landing #mainNav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 56px;
  background: transparent;
  transition: background 0.4s;
}
body.capable-landing #mainNav.scrolled { background: rgba(37,54,68,0.97); }
body.capable-landing #mainNav .logo { height: 28px; display: block; width: auto; max-width: none; }

body.capable-landing .nav-right { display: flex; align-items: center; gap: 28px; }

body.capable-landing .lang-toggle {
  display: flex; align-items: center;
  border: 1px solid rgba(182,190,203,0.3);
  overflow: hidden;
}
body.capable-landing .lang-toggle button {
  padding: 7px 14px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  background: transparent; color: var(--grey);
  border: none; cursor: pointer; transition: background 0.2s, color 0.2s;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  min-height: 0;
  line-height: 1;
}
body.capable-landing .lang-toggle button.active { background: var(--orange); color: var(--white); }

body.capable-landing .nav-dots { display: flex; gap: 8px; }
body.capable-landing .nav-dots button {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--grey); background: transparent;
  cursor: pointer; padding: 0;
  transition: background 0.25s, border-color 0.25s;
  min-height: 0; min-width: 0; line-height: 1;
  box-shadow: none;
}
body.capable-landing .nav-dots button.active { background: var(--orange); border-color: var(--orange); }

/* ── REVEAL ── */
body.capable-landing .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.65s cubic-bezier(.2,.7,.2,1), transform 0.65s cubic-bezier(.2,.7,.2,1); }
body.capable-landing .reveal.in { opacity: 1; transform: none; }
body.capable-landing .d1 { transition-delay: 0.08s; }
body.capable-landing .d2 { transition-delay: 0.20s; }
body.capable-landing .d3 { transition-delay: 0.32s; }
body.capable-landing .d4 { transition-delay: 0.44s; }

/* ── SHARED LABEL ── */
body.capable-landing .eyebrow {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 22px;
  display: block;
}

/* ── BUTTONS ── */
body.capable-landing .btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange); color: var(--white);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 16px 32px; border: none; cursor: pointer; text-decoration: none;
  transition: background 0.2s;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}
body.capable-landing .btn-primary:hover { background: var(--orange-dk); color: var(--white); }

body.capable-landing .btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--white);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px; font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 15px 32px; border: 1px solid rgba(255,255,255,0.28); cursor: pointer;
  text-decoration: none; transition: border-color 0.2s, color 0.2s;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}
body.capable-landing .btn-outline:hover { border-color: var(--orange); color: var(--orange); }

/* ══ HERO ══ */
body.capable-landing #hero {
  min-height: 100vh; position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
}
body.capable-landing #hero .bg {
  position: absolute; inset: 0;
  background: url('../images/Hintergrund Koeln.jpg') center/cover no-repeat;
  filter: brightness(0.38) saturate(0.7);
}
body.capable-landing #hero .accent-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--orange);
}
body.capable-landing #hero .hero-content {
  position: relative; z-index: 1;
  padding: 0 80px 100px;
  max-width: 1040px;
}
body.capable-landing #hero .eyebrow { color: var(--golden); }
body.capable-landing #hero h1 {
  font-size: clamp(52px, 7.5vw, 108px);
  font-weight: 600; line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  text-wrap: pretty;
  color: var(--white);
}
body.capable-landing #hero h1 em { font-style: italic; color: var(--orange); }
body.capable-landing #hero .hero-sub {
  font-size: clamp(16px, 1.5vw, 19px); font-weight: 300;
  color: var(--silver); line-height: 1.65;
  max-width: 500px; margin-bottom: 44px;
}
body.capable-landing .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ══ REFERENZEN ══ */
body.capable-landing #referenzen {
  background: var(--white); color: var(--navy);
  padding: 112px 80px 88px;
}
body.capable-landing #referenzen .eyebrow { color: var(--orange); }
body.capable-landing #referenzen h2 {
  font-size: clamp(32px, 3.8vw, 56px); font-weight: 600;
  line-height: 1.05; max-width: 640px; margin-bottom: 56px;
  color: var(--navy);
}
body.capable-landing .ref-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
body.capable-landing .ref-card {
  position: relative; overflow: hidden;
  background: var(--navy-deep);
  aspect-ratio: 4/3;
  cursor: zoom-in;
}
body.capable-landing .ref-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s cubic-bezier(.16,1,.3,1), filter 0.4s;
  filter: brightness(0.72) saturate(0.85);
  max-width: none;
}
body.capable-landing .ref-card:hover img { transform: scale(1.04); filter: brightness(0.9) saturate(1); }
body.capable-landing .ref-card .card-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 40px 22px 20px;
  background: linear-gradient(to top, rgba(37,54,68,0.95) 0%, transparent 100%);
}
body.capable-landing .card-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--golden); margin-bottom: 6px;
}
body.capable-landing .card-title {
  font-size: 18px; font-weight: 600; color: var(--white); line-height: 1.2;
  margin-bottom: 4px;
}
body.capable-landing .card-detail { font-size: 13px; font-weight: 300; color: var(--silver); }

/* ══ USP ══ */
body.capable-landing #usp {
  background: var(--navy); color: var(--white);
  padding: 120px 80px;
}
body.capable-landing #usp .eyebrow { color: var(--orange); }
body.capable-landing #usp h2 {
  font-size: clamp(32px, 3.8vw, 56px); font-weight: 600;
  line-height: 1.0; max-width: 780px; margin-bottom: 72px;
  color: var(--white);
}
body.capable-landing .usp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
body.capable-landing .usp-divider { height: 1px; background: rgba(182,190,203,0.2); grid-column: span 3; }
body.capable-landing .usp-item {
  padding: 44px 44px 44px 0;
  border-right: 1px solid rgba(182,190,203,0.2);
}
body.capable-landing .usp-item:last-child { border-right: none; padding-right: 0; padding-left: 44px; }
body.capable-landing .usp-item:nth-child(3) { padding-left: 44px; }
body.capable-landing .usp-num {
  font-size: 40px; font-weight: 600; color: var(--orange);
  line-height: 1; margin-bottom: 18px;
}
body.capable-landing .usp-item h3 {
  font-size: 18px; font-weight: 600; margin-bottom: 12px; line-height: 1.2;
  color: var(--white);
}
body.capable-landing .usp-item p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--silver); }
body.capable-landing .usp-callout {
  margin-top: 64px; padding: 48px 56px;
  background: var(--navy-deep);
  display: grid; grid-template-columns: 1fr 360px; gap: 64px; align-items: center;
}
body.capable-landing .usp-callout p {
  font-size: clamp(17px, 1.8vw, 22px); font-weight: 300;
  line-height: 1.65; color: var(--silver);
}
body.capable-landing .usp-callout p strong { color: var(--white); font-weight: 600; }
body.capable-landing .usp-callout img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  filter: brightness(0.65) saturate(0.75); display: block;
  max-width: none;
}

/* ══ TEAM ══ */
body.capable-landing #team {
  background: var(--golden);
  padding: 112px 80px;
  color: var(--navy);
}
body.capable-landing #team .eyebrow { color: var(--navy-deep); opacity: 0.6; }
body.capable-landing #team h2 {
  font-size: clamp(32px, 3.8vw, 56px); font-weight: 600;
  line-height: 1.0; max-width: 640px; margin-bottom: 72px;
  color: var(--navy);
}
body.capable-landing .team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: 0 40px;
  align-items: start;
}
body.capable-landing .team-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: 0;
}
body.capable-landing .team-name {
  font-size: clamp(28px, 3vw, 42px); font-weight: 600;
  line-height: 1.05; letter-spacing: -0.01em;
  color: var(--navy);
}
body.capable-landing .team-role {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy-deep); opacity: 0.65;
  padding-bottom: 20px; margin-top: 8px;
}
body.capable-landing .team-bio {
  font-size: 14px; font-weight: 300; line-height: 1.75;
  color: var(--navy); opacity: 0.85;
  margin-bottom: 28px; align-self: start;
}
body.capable-landing .team-photo {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center 25%;
  display: block; filter: saturate(0.9);
  max-width: none;
}

/* ══ SPEKTRUM ══ */
body.capable-landing #spektrum { background: var(--navy-deep); padding: 120px 80px; color: var(--white); }
body.capable-landing #spektrum h2 {
  font-size: clamp(32px, 3.8vw, 56px); font-weight: 600;
  max-width: 580px; margin-bottom: 72px; line-height: 1.05;
  color: var(--white);
}
body.capable-landing .sek-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid rgba(182,190,203,0.15);
}
body.capable-landing .sek-col-title {
  padding: 20px 0; border-bottom: 1px solid rgba(182,190,203,0.15);
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--golden);
}
body.capable-landing .sek-col-title:nth-child(2) {
  padding-left: 52px;
  border-left: 1px solid rgba(182,190,203,0.15);
}
body.capable-landing .sek-item {
  padding: 32px 52px 32px 0;
  border-bottom: 1px solid rgba(182,190,203,0.12);
  display: grid; grid-template-columns: 44px 1fr; gap: 0; align-items: start;
}
body.capable-landing .sek-item.right {
  padding-left: 52px; padding-right: 0;
  border-left: 1px solid rgba(182,190,203,0.15);
}
body.capable-landing .sek-idx { font-size: 10px; font-weight: 300; color: var(--grey); letter-spacing: 0.1em; padding-top: 4px; }
body.capable-landing .sek-item h3 {
  font-size: 18px; font-weight: 600; margin-bottom: 7px; line-height: 1.2;
  color: var(--white);
}
body.capable-landing .sek-item p { font-size: 13px; font-weight: 300; color: var(--grey); line-height: 1.65; }

/* ══ LIGHTBOX ══ */
body.capable-landing .lightbox-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(18,28,36,0.93);
  align-items: center; justify-content: center;
  cursor: zoom-out;
}
body.capable-landing .lightbox-overlay.open { display: flex; }
body.capable-landing .lightbox-card {
  position: relative;
  width: min(80vw, 960px);
  cursor: default;
  animation: lbIn 0.28s cubic-bezier(.16,1,.3,1);
}
@keyframes lbIn { from { opacity: 0; transform: scale(0.93); } to { opacity: 1; transform: scale(1); } }
body.capable-landing .lightbox-card img {
  width: 100%; display: block;
  aspect-ratio: 4/3; object-fit: cover;
  filter: brightness(0.72) saturate(0.85);
  max-width: none;
}
body.capable-landing .lightbox-card .lb-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 48px 36px 32px;
  background: linear-gradient(to top, rgba(37,54,68,0.97) 0%, transparent 100%);
}
body.capable-landing .lb-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--golden); margin-bottom: 8px; }
body.capable-landing .lb-title { font-size: clamp(22px, 3vw, 36px); font-weight: 600; color: var(--white); line-height: 1.1; margin-bottom: 8px; }
body.capable-landing .lb-desc { font-size: 14px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.82); margin-top: 10px; max-width: 56ch; text-wrap: pretty; }
body.capable-landing .lb-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: rgba(37,54,68,0.85);
  border: 1px solid rgba(182,190,203,0.25);
  color: var(--white); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 1; transition: background 0.2s;
  font-family: 'IBM Plex Sans', sans-serif;
  border-radius: 0;
  box-shadow: none;
  line-height: 1;
}
body.capable-landing .lb-close:hover { background: var(--orange); border-color: var(--orange); }

/* ══ KONTAKT ══ */
body.capable-landing #kontakt { min-height: 100vh; position: relative; display: flex; align-items: stretch; }
body.capable-landing #kontakt .k-bg {
  position: absolute; inset: 0;
  background: url('../images/image6.png') center 30%/cover no-repeat;
  opacity: 0.12;
}
body.capable-landing .k-inner {
  position: relative; z-index: 1; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr;
}
body.capable-landing .k-left {
  padding: 120px 72px 80px;
  background: rgba(37,54,68,0.90);
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid rgba(182,190,203,0.12);
}
body.capable-landing .k-left .eyebrow { color: var(--orange); }
body.capable-landing .k-left h2 {
  font-size: clamp(36px, 4vw, 56px); font-weight: 600;
  line-height: 1.0; margin-bottom: 20px;
  color: var(--white);
}
body.capable-landing .k-left .k-sub {
  font-size: 15px; font-weight: 300; color: var(--silver);
  line-height: 1.7; max-width: 400px; margin-bottom: 52px;
}
body.capable-landing .contact-block { padding-top: 36px; border-top: 1px solid rgba(182,190,203,0.15); }
body.capable-landing .contact-block .cn { font-size: 17px; font-weight: 600; margin-bottom: 4px; color: var(--white); }
body.capable-landing .contact-block .cr { font-size: 11px; font-weight: 300; color: var(--grey); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
body.capable-landing .contact-block a { font-size: 14px; font-weight: 300; color: var(--golden); text-decoration: none; transition: opacity 0.2s; }
body.capable-landing .contact-block a:hover { opacity: 0.7; }
body.capable-landing .k-right {
  padding: 120px 72px 80px;
  background: rgba(29,44,56,0.75);
  display: flex; flex-direction: column; justify-content: center;
}
body.capable-landing .k-right h3 {
  font-size: 20px; font-weight: 600; margin-bottom: 36px; line-height: 1.3;
  color: var(--white);
}

/* ── WPForms overrides ── */
body.capable-landing .wpforms-form,
body.capable-landing .wpforms-form * { color: var(--white); }
body.capable-landing .wpforms-form .wpforms-field-label,
body.capable-landing .wpforms-form .wpforms-field-sublabel {
  font-size: 9px !important; font-weight: 600 !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  color: var(--grey) !important; margin-bottom: 7px !important;
}
body.capable-landing .wpforms-form input[type="text"],
body.capable-landing .wpforms-form input[type="email"],
body.capable-landing .wpforms-form input[type="tel"],
body.capable-landing .wpforms-form select,
body.capable-landing .wpforms-form textarea {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(182,190,203,0.2) !important;
  color: var(--white) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important; font-weight: 300 !important;
  padding: 13px 16px !important;
  border-radius: 0 !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  box-shadow: none !important;
}
body.capable-landing .wpforms-form input:focus,
body.capable-landing .wpforms-form select:focus,
body.capable-landing .wpforms-form textarea:focus {
  border-color: var(--orange) !important;
}
body.capable-landing .wpforms-form textarea { resize: none !important; min-height: 80px !important; }
body.capable-landing .wpforms-form .wpforms-submit {
  background: var(--orange) !important;
  color: var(--white) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important;
  padding: 16px 32px !important; border: none !important;
  border-radius: 0 !important; cursor: pointer !important;
  transition: background 0.2s !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.capable-landing .wpforms-form .wpforms-submit:hover { background: var(--orange-dk) !important; }

/* ══ FOOTER ══ */
body.capable-landing #site-footer {
  padding: 28px 80px;
  border-top: 1px solid rgba(182,190,203,0.1);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--navy);
}
body.capable-landing #site-footer img { height: 22px; opacity: 0.4; display: block; width: auto; max-width: none; }
body.capable-landing #site-footer p { font-size: 11px; font-weight: 300; color: var(--grey); margin: 0; }
body.capable-landing #site-footer a { color: var(--grey); text-decoration: none; }
body.capable-landing #site-footer a:hover { opacity: 0.7; }

/* Hide Salient's own page footer (theirs is rendered separately) */
body.capable-landing #footer-outer { display: none !important; }

/* ══ RESPONSIVE ══ */
@media (max-width: 960px) {
  body.capable-landing #mainNav { padding: 18px 24px; }
  body.capable-landing #hero .hero-content { padding: 0 28px 80px; }
  body.capable-landing #referenzen,
  body.capable-landing #usp,
  body.capable-landing #spektrum,
  body.capable-landing #team { padding: 80px 28px; }
  body.capable-landing .ref-grid { grid-template-columns: 1fr 1fr; }
  body.capable-landing .team-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 56px; }
  body.capable-landing .team-card { grid-row: span 1; grid-template-rows: auto auto auto auto; }
  body.capable-landing .usp-row { grid-template-columns: 1fr; }
  body.capable-landing .usp-divider { display: none; }
  body.capable-landing .usp-item,
  body.capable-landing .usp-item:last-child,
  body.capable-landing .usp-item:nth-child(3) { padding: 32px 0; border-right: none; border-bottom: 1px solid rgba(182,190,203,0.2); }
  body.capable-landing .usp-callout { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
  body.capable-landing .sek-cols { grid-template-columns: 1fr; }
  body.capable-landing .sek-col-title:nth-child(2),
  body.capable-landing .sek-item.right { border-left: none; padding-left: 0; }
  body.capable-landing .k-inner { grid-template-columns: 1fr; }
  body.capable-landing .k-left,
  body.capable-landing .k-right { padding: 60px 28px; }
  body.capable-landing .k-left { border-right: none; border-bottom: 1px solid rgba(182,190,203,0.12); }
  body.capable-landing #site-footer { padding: 22px 28px; flex-direction: column; gap: 10px; }
}