/* =============================================================
   utp·partner – Globales Design-System (Elementor)
   Executive Search & Eignungsdiagnostik | Suzanne Conradi
   Executive Minimalism: Arial, harte Kanten, dünne Linien.
   ============================================================= */

:root {
  --paper:  #FFFFFF;
  --ink:    #07080C;
  --dark:   #1F1F1F;
  --mist:   #F2F2F2;
  --amber:  #F2AE2E;
  --orange: #D97C0B;
  --rust:   #A64005;
  --copper: #D97C0B;
  --muted:  #6B6B6B;
  --line:      rgba(7, 8, 12, .16);
  --line-soft: rgba(7, 8, 12, .09);

  --font-base: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --container-width: 1400px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset & Basis --- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.elementor-heading-title {
  font-family: var(--font-base) !important;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

p { margin-bottom: 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }

/* --- Container --- */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container-width);
}

/* =============================================================
   LABELS / EYEBROWS (über Überschriften)
   ============================================================= */
.utp-label .elementor-heading-title,
.utp-label p {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.utp-label-rust  .elementor-heading-title,
.utp-label-rust  p { color: var(--rust); font-size: 14px; letter-spacing: 1.6px; }
.utp-label-amber .elementor-heading-title,
.utp-label-amber p { color: var(--amber); }
.utp-label-muted .elementor-heading-title,
.utp-label-muted p { color: var(--muted); }

/* =============================================================
   BUTTONS – harte Kanten (kein Radius)
   ============================================================= */
.elementor-button {
  font-family: var(--font-base) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 15px 30px !important;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease) !important;
}
/* Primär: Rost -> Hover Bernstein/dunkel */
.utp-btn-rust .elementor-button {
  background-color: var(--rust) !important;
  color: #fff !important;
}
.utp-btn-rust .elementor-button:hover {
  background-color: var(--amber) !important;
  color: var(--ink) !important;
}
/* Groß: Bernstein -> Hover Orange/weiß, hebt an */
.utp-btn-amber .elementor-button {
  background-color: var(--amber) !important;
  color: var(--ink) !important;
  padding: 18px 40px !important;
  font-size: 14px !important;
}
.utp-btn-amber .elementor-button:hover {
  background-color: var(--orange) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* =============================================================
   HERO
   ============================================================= */
.utp-hero .elementor-heading-title { text-transform: uppercase; }
.utp-hero-h1 h1,
.utp-hero-h1 .elementor-heading-title {
  font-size: clamp(2.3rem, 3.4vw, 3rem) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  line-height: 1.06 !important;
  letter-spacing: -0.025em;
  margin: 0;
}
.utp-hero-visual img { max-width: 420px; width: 100%; height: auto; }

/* =============================================================
   WORUM ES GEHT – Spalten mit 2px Oberlinie
   ============================================================= */
.utp-problem-col {
  border-top: 2px solid var(--ink);
  padding-top: 24px !important;
}
.utp-num .elementor-heading-title,
.utp-num p {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 800;
  color: var(--copper);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.utp-problem-col h3.elementor-heading-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin-bottom: 12px;
}
.utp-problem-col .elementor-widget-text-editor { color: var(--muted); font-size: 15px; }

/* =============================================================
   LEISTUNGEN – Zeilen mit dünnen Trennlinien
   ============================================================= */
.utp-service-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  transition: transform .3s var(--ease);
}
.utp-service-list .utp-service-row:first-child { border-top: 1px solid var(--line); }
.utp-service-row:hover { transform: translateX(14px); }
.utp-service-name {
  font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.utp-service-desc {
  font-size: 14px;
  color: var(--muted);
  text-align: right;
  flex-shrink: 0;
  max-width: 46%;
}

/* =============================================================
   ÜBER SUZANNE (Mist-Hintergrund)
   ============================================================= */
.utp-about { background-color: var(--mist) !important; }
.utp-about-photo img {
  width: 70%;
  height: auto;
  object-fit: contain;
  display: block;
}
.utp-about-name .elementor-heading-title {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  color: var(--amber) !important;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.utp-about-role .elementor-heading-title,
.utp-about-role p {
  color: var(--copper);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 24px;
}
.utp-quote .elementor-blockquote,
.utp-quote blockquote {
  border: none;
  border-left: 3px solid var(--copper);
  margin: 0;
  padding: 4px 0 4px 22px;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.01em;
}

/* =============================================================
   WAS UNS UNTERSCHEIDET – Accordion (Elementor)
   ============================================================= */
.utp-accordion .elementor-accordion-item {
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
}
.utp-accordion .elementor-accordion-item:first-child {
  border-top: 1px solid var(--line) !important;
}
.utp-accordion .elementor-tab-title {
  font-family: var(--font-base) !important;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem) !important;
  font-weight: 800 !important;
  color: var(--copper) !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  padding: 26px 0 !important;
  background: transparent !important;
  transition: color .3s var(--ease);
}
.utp-accordion .elementor-tab-title:hover,
.utp-accordion .elementor-tab-title.elementor-active {
  color: var(--rust) !important;
}
.utp-accordion .elementor-accordion-icon { color: var(--copper) !important; }
.utp-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon { color: var(--rust) !important; }
.utp-accordion .elementor-tab-content {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  padding: 0 0 26px !important;
  background: transparent !important;
  max-width: 78ch;
}

/* =============================================================
   CTA (dunkel)
   ============================================================= */
.utp-cta { background-color: var(--dark) !important; }
.utp-cta .elementor-heading-title {
  color: #fff !important;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* =============================================================
   FOOTER-BAND (ink) – am Seitenende
   ============================================================= */
.utp-footer { background-color: var(--ink) !important; }
.utp-footer .elementor-heading-title,
.utp-footer p { color: rgba(255,255,255,.82) !important; font-size: 13px; }
.utp-footer a { color: rgba(255,255,255,.82) !important; }
.utp-footer a:hover { color: var(--copper) !important; }
.utp-footer .utp-dot { color: var(--copper); }

/* =============================================================
   Rechtstexte (Impressum / Datenschutz)
   ============================================================= */
.utp-legal-content h2 .elementor-heading-title,
.utp-legal-content h2 { font-size: 20px; margin-top: 2em; text-transform: none; }
.utp-legal-content p, .utp-legal-content li { font-size: 15px; }

/* =============================================================
   NEUE SEKTIONEN (Hero-Lead, Werte-Band, Team, Whitepaper, Kontakt)
   ============================================================= */
.utp-dot { color: var(--copper); }

/* Hero-Lead */
.utp-hero-lead p,
.utp-hero-lead .elementor-widget-container {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--muted);
  max-width: 72ch;
}

/* Werte-Band (Bernstein) */
.utp-values-band { text-align: center; }
.utp-values p {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: clamp(.85rem, 1.4vw, 1.05rem);
  color: var(--ink);
  text-align: center;
}
.utp-values .utp-dot { color: var(--rust); }

/* Einleitungs-Absatz je Sektion */
.utp-section-lead p,
.utp-section-lead .elementor-widget-container {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--muted);
  max-width: 74ch;
}

/* Team */
.utp-team-headline .elementor-heading-title {
  font-size: clamp(1.7rem, 3.4vw, 2.7rem) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  margin: 0;
}
.utp-team-intro p,
.utp-team-intro .elementor-widget-container {
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  color: var(--muted);
  max-width: 74ch;
}

/* Team-Member – Sektion mit Video-Hintergrund */
.utp-team-member .elementor-widget-container { max-width: 720px; }
.utp-team-member .utp-label .elementor-heading-title,
.utp-team-member .utp-label p { color: var(--amber); }
.utp-team-member .utp-about-role .elementor-heading-title { color: var(--amber) !important; }
.utp-team-member .elementor-widget-text-editor,
.utp-team-member p { color: rgba(255,255,255,.92); }
.utp-team-member .utp-quote blockquote { border-left-color: var(--amber); color: #fff; }

/* Branchen-Liste (Accordion 02) */
.utp-branchen { margin: 14px 0 0; padding-left: 1.1em; }
.utp-branchen li { margin: 4px 0; }

/* Whitepaper */
.utp-whitepaper-headline .elementor-heading-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
}
.utp-whitepaper-action { text-align: left; }
.utp-wp-download {
  display: inline-block;
  background: var(--amber);
  color: var(--ink) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: 14px;
  padding: 18px 34px;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.utp-wp-download:hover { background: var(--orange); color: #fff !important; transform: translateY(-2px); }
.utp-wp-note { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* Kontakt */
.utp-contact-headline .elementor-heading-title {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
}
.utp-contact-meta a { color: var(--rust); font-weight: 700; }
.utp-contact-meta a:hover { color: var(--amber); }
.utp-form-title .elementor-heading-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-top: 8px;
}
.utp-contact-note { font-size: 13px; color: var(--muted); }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
  :root { --container-width: 92%; }
}
@media (max-width: 767px) {
  .elementor-col-50, .elementor-col-40, .elementor-col-60,
  .elementor-col-33, .elementor-col-66, .elementor-col-25, .elementor-col-20 { width: 100% !important; }
  .utp-service-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .utp-service-desc { text-align: left; max-width: 100%; }
  .utp-about-photo img { width: 60%; max-width: 320px; }
  .utp-team-member { text-align: left; }
}