/* ================================
   AdElemental – CLEAN / LIGHT
   FINAL custom.css
================================ */

/* ---------- Design Tokens ---------- */
:root{
  /* Brand */
  --ae-primary: #FE4000;
  --ae-primary-dark: #E23900;

  /* Base */
  --ae-bg: #ffffff;
  --ae-text: #111111;
  --ae-muted: #6c757d;

  /* Panels / Cards */
  --ae-light: #E9ECEF;

  /* Navbar / Footer */
  --ae-dark: #0B0B0D;

  /* Effects */
  --ae-shadow-soft: 0 8px 20px rgba(0,0,0,.08);
  --ae-shadow-hover: 0 14px 32px rgba(0,0,0,.12);

  /* Growth */
  --ae-growth: #7BD444;
}

/* ---------- Base ---------- */
body{
  padding-top: 50px; /* fixed navbar */
  background: var(--ae-bg);
  color: var(--ae-text);
}

a{
  color: var(--ae-primary);
}
a:hover{
  color: var(--ae-primary-dark);
}

/* ---------- Hero Title ---------- */
.hero-title{
  font-weight: 900;
  letter-spacing: .4px;
}

.brand-highlight{
  color: var(--ae-primary);
  font-weight: 900;
}

/* ---------- Navbar (bleibt dunkel) ---------- */
.navbar{
  background: var(--ae-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.navbar .navbar-brand,
.navbar .nav-link{
  color: #ffffff !important;
}

.navbar .nav-link:hover{
  color: var(--ae-primary) !important;
}

.navbar .btn-primary{
  border-radius: 999px;
  padding: 7px 18px;
  font-weight: 700;
}

/* ---------- Buttons ---------- */
.btn-primary{
  background-color: var(--ae-primary) !important;
  border-color: var(--ae-primary) !important;
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: .3px;
  transition: all .15s ease;
}

.btn-primary:hover{
  background-color: var(--ae-primary-dark) !important;
  border-color: var(--ae-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(254,64,0,.25);
}

/* ---------- Hero Image ---------- */
.hero-image{
  width: 100%;
  overflow: hidden;
}

.hero-image img{
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Jumbotron (hell & clean) ---------- */
.jumbotron{
  background: var(--ae-light);
  border-radius: 18px;
  box-shadow: var(--ae-shadow-soft);
}

.jumbotron .lead,
.jumbotron h1,
.jumbotron h2{
  color: var(--ae-text);
}

/* ---------- Cards allgemein ---------- */
.card{
  border-radius: 16px;
  border: none;
  box-shadow: var(--ae-shadow-soft);
  transition: transform .15s ease, box-shadow .15s ease;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--ae-shadow-hover);
}

/* ---------- Problem Cards ---------- */
.problem-card{
  background: var(--ae-light);
}

.problem-card h5,
.problem-card p{
  color: var(--ae-text);
}

/* ---------- Step Cards ---------- */
.step-card{
  background: var(--ae-light);
  text-align: center;
}

.step-card h5,
.step-card p{
  color: var(--ae-text);
}

/* Aufsteigende Höhe */
.step-1{ min-height: 350px; }
.step-2{ min-height: 450px; }
.step-3{ min-height: 550px; }

/* ---------- Growth Arrow ---------- */
.growth-arrow{
  margin-bottom: -250px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.15));
}

/* ---------- CTA Hinweis ---------- */
.cta-hint{
  color: #111111 !important;
  font-weight: 500;
}

/* ---------- FAQ ---------- */
.accordion .card{
  border-radius: 14px;
  overflow: hidden;
}

.accordion .card-header{
  background: var(--ae-light);
}

.btn.btn-link{
  font-weight: 600;
  color: var(--ae-text);
  text-decoration: none !important;
}

/* ---------- Social Buttons ---------- */
.social-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0 6px;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  transition: all .2s ease;
  box-shadow: var(--ae-shadow-soft);
}

.social-btn.instagram{ background: #E1306C; }
.social-btn.facebook{ background: #1877F2; }

.social-btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--ae-shadow-hover);
}

/* ---------- Footer (dunkel wie Navbar) ---------- */
footer.bg-light{
  background: var(--ae-dark) !important;
  color: rgba(255,255,255,.75);
}

footer.bg-light a{
  color: #ffffff;
}

footer.bg-light a:hover{
  color: var(--ae-primary);
}
/* ==========================
   Responsive Fixes (Mobile/Tablet)
   ========================== */

/* Allgemein: längere Wörter/Links sollen nicht alles sprengen */
body {
  overflow-x: hidden;
}

/* Hero / Jumbotron auf Mobile kompakter */
@media (max-width: 576px) {
  .jumbotron {
    padding: 28px 16px !important;
    border-radius: 14px;
  }

  .hero-title {
    font-size: 2.1rem !important;
    line-height: 1.1;
    margin-bottom: 16px !important;
  }

  .jumbotron .lead {
    font-size: 1.05rem;
  }

  /* Buttons auf Mobile nicht zu breit/hoch wirken lassen */
  .btn-lg {
    padding: 12px 16px;
    font-size: 1rem;
  }

  /* CTA Hint lesbar */
  .cta-hint {
    font-size: 0.95rem !important;
  }

  /* Problem Cards kompakter */
  .problem-card {
    padding: 18px !important;
  }

  /* Step Cards: fixe Höhen killen Mobile -> auf auto */
  .step-1, .step-2, .step-3 {
    min-height: auto !important;
  }

  /* Wachstums-Pfeil: auf Mobile weniger “reincrashen” */
  .growth-arrow {
    margin-bottom: -90px !important;
    width: 100%;
    max-width: 360px;
  }

  /* Leistungen-Bilder: fixen Inline-Style umgehen */
  .service-img {
    width: 100% !important;
    height: auto!important;
    max-width: 100% !important;
  }
}

/* Tablet: auch etwas kompakter, aber nicht so stark wie Mobile */
@media (min-width: 577px) and (max-width: 991px) {
  .jumbotron {
    padding: 36px 22px !important;
  }

  .hero-title {
    font-size: 2.8rem !important;
  }

  .step-1 { min-height: 320px !important; }
  .step-2 { min-height: 390px !important; }
  .step-3 { min-height: 460px !important; }

  .growth-arrow {
    margin-bottom: -160px !important;
    width: 100%;
    max-width: 520px;
  }
}
/* Pfeil immer über den Karten */
.growth-arrow{
  position: relative;
  z-index: 3;
}

/* Karten leicht darunter */
.step-card{
  position: relative;
  z-index: 1;
}
/* Pfeil optisch näher an die Karten (Mobile fein) */
@media (max-width: 576px){
  .growth-arrow{
    margin-bottom: -50px; /* statt -250px */
  }
}
/* Swipe-Karten nur auf Handy */
@media (max-width: 768px){

  .steps-row{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 0 12px 10px;
    scroll-snap-type: x mandatory;
  }

  /* Bootstrap Row Margins neutralisieren, damit es sauber aussieht */
  .steps-row.row{
    margin-left: 0;
    margin-right: 0;
  }

  /* Jede Spalte wird zur Swipe-Card */
  .steps-row > [class*="col-"]{
    flex: 0 0 88%;
    max-width: 88%;
    scroll-snap-align: start;
    padding-left: 0;
    padding-right: 0;
  }

  /* Kartenhöhe nicht erzwingen auf Mobile */
  .step-1, .step-2, .step-3{
    min-height: auto !important;
  }

  /* Etwas kompaktere Karte */
  .step-card .card-body{
    padding: 18px;
  }

  /* Text besser lesbar */
  .step-card p{
    margin-top: 12px !important;
  }
}
/* ===== Mobile Swipe: Leistungen (Desktop bleibt unverändert) ===== */
@media (max-width: 576px){

  .services-row{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding: 0 14px 14px;
    margin: 0;
  }

  .services-row > [class^="col-"]{
    flex: 0 0 88%;
    max-width: 88%;
    scroll-snap-align: center;
  }

  /* Bilder in den Leistungen sauber responsive */
  .services-row img{
    width: 100% !important;
    height: 200px !important;
    object-fit: cover;
    border-radius: 12px;
  }
}
/* ===== Mobile Navbar Toggler (Hamburger) ===== */
.navbar-light .navbar-toggler {
  border-color: var(--ae-primary);
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(254,64,0,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-toggler:hover {
  box-shadow: 0 0 0 2px rgba(254,64,0,.35);
}