/*
Theme Name:  Conqil Theme
Author:       MJ
Description:  Custom WordPress Theme for Conqil Logistics
Version:      1.2
*/

/*  Google‑Font  ------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

/*  Reset / Basics  ---------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;overflow-x:hidden}
body{
    font-family:'Inter',sans-serif;
    background:#111;
    color:#fff;
    line-height:1.4;
}
a{color:#fff;text-decoration:none;transition:color .3s;}

/*  Header & Logo  ----------------------------------------------------- */
.site-header{
    position:absolute;
    top:0;left:0;
    width:100%;
    padding:1rem 2rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    z-index:10;
    background:transparent;
}
.logo img,.custom-logo{
    height:62px;        /* 25 % größer (vorher ~50 px) */
    width:auto;
    max-width:none;
}
.primary-menu{
    list-style:none;
    display:flex;
    gap:2.25rem;
    font-weight:600;
    font-size:1rem;
}
.primary-menu li{display:inline-flex}
.primary-menu a:hover{color:#007bff}

/*  Hero / Video  ------------------------------------------------------ */
.home-hero{
    position:relative;
    height:100vh;
    overflow:hidden;
}
.bg-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-1;
}
.hero-content{
    position:relative;
    top:35%;
    text-align:center;
    max-width:800px;
    margin:0 auto;
    padding:0 1rem;
}
.hero-content h1{
    font-size:3rem;
    font-weight:800;
    margin-bottom:1rem;
    line-height:1.2;
}
@media(min-width:768px){
    .hero-content h1{font-size:4rem}
}
.hero-content p{font-size:1.125rem;margin-bottom:2rem}
.btn-primary{
    background:#007bff;
    padding:.75rem 1.5rem;
    border-radius:4px;
    font-weight:600;
    display:inline-block;
}
.btn-primary:hover{background:#0056b3}

/*  Services Section  -------------------------------------------------- */
#services{
    padding:4rem 2rem;
    background:#141a1a;
    text-align:center;
}
#services h2{font-size:2rem;margin-bottom:2rem}
.service-targets{
    display:flex;
    flex-wrap:wrap;
    gap:3rem;
    justify-content:center;
}
.service-targets div{
    background:#1f1f1f;
    padding:1.5rem 2rem;
    border-radius:8px;
    max-width:300px;
}

/*  Footer (wenn benötigt)  ------------------------------------------- */
footer{
    padding:2rem 0;
    text-align:center;
    font-size:.875rem;
    color:#999;
}
/* ---- Service Card Grid ---- */
.services-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-block:3rem 5rem;
}
.service-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.15);}
.service-card .card-banner{height:110px;background-size:cover;background-position:center;}
.service-card header{padding:1rem;background:#000000cc;color:#fff;}
.service-card h3{margin:0;font-size:1.35rem;line-height:1.2;}
.service-card small{font-size:.85rem;opacity:.85;}
.service-card ul{list-style:none;margin:0;padding:1rem 1.25rem;line-height:1.5rem;}
.service-card li:not(:last-child){margin-bottom:.35rem;}

/* ---- Approach Grid ---- */
.approach{margin-block:4rem;}
.approach-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.approach-box{background:#1a1a1a;border-radius:12px;padding:2rem;}
.approach-box h3{color:#0f80ff;font-size:1.15rem;margin-top:0;margin-bottom:.75rem;}
.approach-box p{margin:0;color:#d2d2d2;font-size:.95rem;line-height:1.55rem;}

/* --- Added 2025‑08‑07 for new sections --- */
.pain-promise ul{list-style:disc;padding-left:1.2rem}
.service-card{background:#121417;border:1px solid #2a2d33;border-radius:6px;padding:2rem;transition:transform .2s}
.service-card:hover{transform:translateY(-4px)}
.proof-bar{background:#000;text-align:center;padding:2rem 0}
.kpi-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:3rem}
.kpi-grid strong{font-size:2rem;display:block}
.why-conqil h3{color:#1e8bff;margin-bottom:.5rem}
.final-cta{background:#1e8bff;color:#fff;padding:4rem 1rem;text-align:center}

/* --- 2nd pass fixes 2025-08-07 --- */
:root{
 --accent:#0f80ff;
 --bg-light:#1a1a1a;
}
.pain-promise h2,
.why-conqil h3,
.btn-primary,
.service-card .link{color:var(--accent);}
.btn-primary{background:var(--accent);}
.btn-primary:hover{background:#1a8cff}
.service-card{background:var(--bg-light);border:1px solid #262626;}
.final-cta{background:var(--accent);}
.primary-nav a:hover,
.primary-nav .current-menu-item a{color:var(--accent);}
.home-hero::before{background:rgba(0,0,0,0.6);}
@media(max-width:768px){
 .hero-content h1{font-size:2rem;}
}

/* === v4 additional layout === */
.home-hero + .pain-promise{margin-top:4rem}
.pain-promise ul{padding-left:1.1rem;list-style:disc}
.service-card{background:#1a1a1a;border:1px solid #333;border-radius:6px;padding:2rem;transition:transform .2s}
.service-card:hover{transform:translateY(-4px)}
.proof-bar{background:#000;text-align:center;padding:2rem 0}
.kpi-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:3rem}
.kpi-note{display:block;margin-top:1rem;font-size:.8rem;opacity:.7}
.why-conqil h3{color:#1e8bff;margin-bottom:.5rem}
.final-cta{background:#1e8bff;color:#fff;padding:4rem 1rem;text-align:center}

.btn-primary{color:#fff !important;}
.service-card .link{color:#1e8bff}


/* ---- home overlap fix ---- */
.home-hero + .pain-promise{margin-top:4rem}
.service-card{background:#1a1a1a;border:1px solid #333;border-radius:6px;padding:2rem;transition:transform .2s}
.service-card:hover{transform:translateY(-4px)}
.service-card .link{color:#1e8bff;font-weight:600}
.btn-primary{color:#fff !important;}

/* === Home visual polish 2025-08-07 === */
.accent{color:#1e8bff;margin-bottom:1rem}

.pain-promise{padding:4rem 0}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3rem;max-width:1000px;margin:0 auto}
.pp-list{list-style:none;padding:0;line-height:1.6}
.pp-list li{position:relative;padding-left:1.6rem;margin-bottom:.6rem}
.pp-list li::before{content:"◆";position:absolute;left:0;color:#1e8bff;font-size:.7rem;top:.4rem}
.promise{background:#1a1a1a;padding:2rem;border-radius:6px}

.why-conqil{padding:4rem 0}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;max-width:1000px;margin:0 auto;text-align:center}
.why-card{background:#1a1a1a;padding:2rem;border:1px solid #333;border-radius:6px}
.why-card h3{margin-bottom:.5rem;color:#1e8bff;font-size:1.1rem}

/*
 * Additional styling for the Conqil homepage.
 *
 * These rules build upon the original theme’s dark aesthetic and accent
 * colour without altering core settings. They apply consistent
 * spacing, alignment and hover effects across the new messaging
 * sections. To use, append this file to the end of your existing
 * style.css or enqueue it in functions.php.
 */

/* Hero button fix */
.home-hero .btn-primary {
  color: #fff;
  background-color: #1e8bff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}
.home-hero .btn-primary:hover {
  background-color: #1669cc;
}

/* Section wrappers */
.pain-promise,
.services,
.proof-bar,
.why,
.testimonials,
.cta {
  padding: 4rem 1rem;
}
.pain-promise .pp-grid,
.services .cards,
.why-cards {
  max-width: 1000px;
  margin: 0 auto;
}

/* Pain & Promise */
.pp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.pp-col {
  flex: 1 1 300px;
  min-width: 280px;
}
.pp-col h2 {
  color: #1e8bff;
  margin-bottom: 1rem;
}
.pp-col .pp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1.6;
}
.pp-col .pp-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.5rem;
  color: #ccc;
}
.pp-col .pp-list li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  top: 0;
  color: #1e8bff;
  font-size: 0.8rem;
}
.pp-col.promise {
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 2rem;
}

/* Services */
.services h2 {
  color: #fff;
  margin-bottom: 2rem;
  font-size: 2rem;
  text-align: center;
}
.services .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.services .card {
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 2rem;
  flex: 1 1 280px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s, border-color 0.2s;
}
.services .card:hover {
  transform: translateY(-5px);
  border-color: #1e8bff;
}
.services .card h3 {
  margin-bottom: 0.5rem;
  color: #1e8bff;
  font-size: 1.2rem;
}
.services .card p {
  flex-grow: 1;
  color: #ccc;
}
.services .card .btn-text {
  margin-top: 1rem;
  color: #1e8bff;
  font-weight: 600;
}

/* Proof bar */
.proof-bar {
  background-color: #000;
  text-align: center;
  padding: 2rem 1rem;
}
.proof-bar .proof-inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;
}
.proof-bar .proof-item {
  flex: 1 1 200px;
  min-width: 200px;
}
.proof-bar .proof-value {
  font-size: 2.2rem;
  color: #fff;
  display: block;
}
.proof-bar .proof-label {
  color: #ccc;
  font-size: 0.9rem;
}
.proof-bar .proof-footnote {
  margin-top: 0.8rem;
  font-size: 0.75rem;
  color: #777;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* Why section */
.why h2 {
  color: #fff;
  margin-bottom: 2rem;
  font-size: 2rem;
  text-align: center;
}
.why-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.why-card {
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 2rem;
  flex: 1 1 280px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.why-card h3 {
  margin-bottom: 0.5rem;
  color: #1e8bff;
  font-size: 1.2rem;
}
.why-card p {
  color: #ccc;
  flex-grow: 1;
}
.why-card .mini-cta {
  margin-top: 1rem;
  color: #1e8bff;
  font-size: 0.9rem;
  text-decoration: none;
}
.why-card .mini-cta:hover {
  text-decoration: underline;
}

/* Testimonials */
.testimonials {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.testimonials blockquote {
  color: #ccc;
  font-style: italic;
  margin-bottom: 1.5rem;
}
.testimonials cite {
  display: block;
  color: #888;
  font-size: 0.85rem;
}

/* CTA */
.cta {
  background-color: #1e8bff;
  color: #fff;
  text-align: center;
  padding: 4rem 1rem;
}
.cta h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
}
.cta p {
  margin-bottom: 2rem;
  font-size: 1rem;
}
.cta-form {
  max-width: 500px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .pp-grid,
  .services .cards,
  .why-cards {
    flex-direction: column;
    gap: 2rem;
  }
  .services .card,
  .why-card {
    max-width: none;
  }
  .proof-bar .proof-item {
    flex-basis: 100%;
    margin-bottom: 1rem;
  }
}

/* ---- refined layout 08-07 ---- */
.pain-promise{padding:4rem 0}
.pp-flex{display:flex;flex-wrap:wrap;gap:3rem;justify-content:center;max-width:1100px;margin:0 auto}
.pp-box{flex:1 1 320px;border:1px solid #333;border-radius:8px;padding:2rem;background:#101214}
.promise{background:#1a1a1a}
.pp-list{list-style:none;padding:0;margin:0}
.pp-list li{position:relative;padding-left:1.4rem;margin:.6rem 0}
.pp-list li::before{content:"●";position:absolute;left:0;top:.2rem;font-size:.55rem;color:#1e8bff}

.why-conqil{padding:4rem 0}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;max-width:1100px;margin:2rem auto 0}
.why-card{background:#131518;border:1px solid #333;border-radius:8px;padding:2rem;text-align:center;transition:transform .2s}
.why-card:hover{transform:translateY(-4px)}
.why-card h3{margin-bottom:.6rem;color:#1e8bff;font-size:1.1rem}

/* --- polish 08-07 --- */

/* remove native bullets, keep accent dots */
.pp-list{list-style:none;padding:0;margin:0}

/* centre section headings that use class="center" */
.center{text-align:center;margin:0 auto}

/* Why-cards tighter grid on very wide screens */
@media (min-width:1400px){
  .why-grid{max-width:1200px}
}

/*
 * Additional styling for the Conqil homepage.
 *
 * These rules build upon the original theme’s dark aesthetic and accent
 * colour without altering core settings. They apply consistent
 * spacing, alignment and hover effects across the new messaging
 * sections. To use, append this file to the end of your existing
 * style.css or enqueue it in functions.php.
 */

/* Hero button fix */
.home-hero .btn-primary {
  color: #fff;
  background-color: #1e8bff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}
.home-hero .btn-primary:hover {
  background-color: #1669cc;
}

/* Section wrappers */
.pain-promise,
.services,
.proof-bar,
.why,
.testimonials,
.cta {
  padding: 4rem 1rem;
}
.pain-promise .pp-grid,
.services .cards,
.why-cards {
  max-width: 1000px;
  margin: 0 auto;
}

/* Pain & Promise */
.pp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.pp-col {
  flex: 1 1 300px;
  min-width: 280px;
}
.pp-col h2 {
  color: #1e8bff;
  margin-bottom: 1rem;
}
.pp-col .pp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1.6;
}
.pp-col .pp-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.5rem;
  color: #ccc;
}
.pp-col .pp-list li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  top: 0;
  color: #1e8bff;
  font-size: 0.8rem;
}
.pp-col.promise {
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 2rem;
}

/* Services */
.services h2 {
  color: #fff;
  margin-bottom: 2rem;
  font-size: 2rem;
  text-align: center;
}
.services .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.services .card {
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 2rem;
  flex: 1 1 280px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s, border-color 0.2s;
}
.services .card:hover {
  transform: translateY(-5px);
  border-color: #1e8bff;
}
.services .card h3 {
  margin-bottom: 0.5rem;
  color: #1e8bff;
  font-size: 1.2rem;
}
.services .card p {
  flex-grow: 1;
  color: #ccc;
}
.services .card .btn-text {
  margin-top: 1rem;
  color: #1e8bff;
  font-weight: 600;
}

/* Proof bar */
.proof-bar {
  background-color: #000;
  text-align: center;
  padding: 2rem 1rem;
}
.proof-bar .proof-inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;
}
.proof-bar .proof-item {
  flex: 1 1 200px;
  min-width: 200px;
}
.proof-bar .proof-value {
  font-size: 2.2rem;
  color: #fff;
  display: block;
}
.proof-bar .proof-label {
  color: #ccc;
  font-size: 0.9rem;
}
.proof-bar .proof-footnote {
  margin-top: 0.8rem;
  font-size: 0.75rem;
  color: #777;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* Why section */
.why h2 {
  color: #fff;
  margin-bottom: 2rem;
  font-size: 2rem;
  text-align: center;
}
.why-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.why-card {
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 2rem;
  flex: 1 1 280px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.why-card h3 {
  margin-bottom: 0.5rem;
  color: #1e8bff;
  font-size: 1.2rem;
}
.why-card p {
  color: #ccc;
  flex-grow: 1;
}
.why-card .mini-cta {
  margin-top: 1rem;
  color: #1e8bff;
  font-size: 0.9rem;
  text-decoration: none;
}
.why-card .mini-cta:hover {
  text-decoration: underline;
}

/* Testimonials */
.testimonials {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.testimonials blockquote {
  color: #ccc;
  font-style: italic;
  margin-bottom: 1.5rem;
}
.testimonials cite {
  display: block;
  color: #888;
  font-size: 0.85rem;
}

/* CTA */
.cta {
  background-color: #1e8bff;
  color: #fff;
  text-align: center;
  padding: 4rem 1rem;
}
.cta h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
}
.cta p {
  margin-bottom: 2rem;
  font-size: 1rem;
}
.cta-form {
  max-width: 500px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .pp-grid,
  .services .cards,
  .why-cards {
    flex-direction: column;
    gap: 2rem;
  }
  .services .card,
  .why-card {
    max-width: none;
  }
  .proof-bar .proof-item {
    flex-basis: 100%;
    margin-bottom: 1rem;
  }
}

/* === Deep pages additions === */
.deep{padding:4rem 0}
.deep.alt{background:#111317}
.deep h2{color:#1e8bff;margin-bottom:1rem}
.kpi-list{list-style:none;margin:1rem 0;padding:0}
.kpi-list li{position:relative;padding-left:1.4rem;margin:.5rem 0}
.kpi-list li::before{content:'●';position:absolute;left:0;top:.2rem;font-size:.55rem;color:#1e8bff}

.responsive-img{max-width:100%;height:auto;display:block;margin:1.5rem auto}

.timeline ul{list-style:none;margin:0;padding:0}
.timeline li{display:flex;align-items:center;margin:1rem 0}
.timeline .dot{width:10px;height:10px;border-radius:50%;background:#1e8bff;margin-right:.8rem}

.heat-map{display:grid;grid-template-columns:repeat(5,40px);grid-gap:4px;margin:1rem 0}
.loop-placeholder,.dashboard-placeholder{height:260px;border:1px dashed #333;display:flex;align-items:center;justify-content:center;color:#666}

.vcard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin:2rem 0}
.vcard{background:#1a1a1a;border:1px solid #333;border-radius:6px;padding:1.5rem}
.copy{background:none;border:none;color:#1e8bff;cursor:pointer}