.elementor-1542 .elementor-element.elementor-element-7bbc560{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;}.elementor-1542 .elementor-element.elementor-element-a656dfe{--display:flex;}.elementor-1542 .elementor-element.elementor-element-a384a88{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1542 .elementor-element.elementor-element-eb8cfd1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:8rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;}.elementor-1542 .elementor-element.elementor-element-eb8cfd1:not(.elementor-motion-effects-element-type-background), .elementor-1542 .elementor-element.elementor-element-eb8cfd1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#020617;}.elementor-1542 .elementor-element.elementor-element-5d1fe06{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1542 .elementor-element.elementor-element-e533b86{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1542 .elementor-element.elementor-element-b81aa55{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;--padding-top:8rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;}.elementor-1542 .elementor-element.elementor-element-b81aa55:not(.elementor-motion-effects-element-type-background), .elementor-1542 .elementor-element.elementor-element-b81aa55 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#020617;}.elementor-1542 .elementor-element.elementor-element-f416cbe{background-color:#111827;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-1542 .elementor-element.elementor-element-bb1d304{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body.elementor-page-1542:not(.elementor-motion-effects-element-type-background), body.elementor-page-1542 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#111827;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-1542 .elementor-element.elementor-element-eb8cfd1{--padding-top:0rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;}}@media(min-width:768px){.elementor-1542 .elementor-element.elementor-element-a656dfe{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-0f160c0 *//* Section: Warum viele Onlineshops zu wenig Umsatz machen
   Farben angelehnt an Webfire-Farbsystem:
   - Section-Background (Ink):      #0F1722
   - Card / Surface:                #111827
   - Divider / Border:              #1F2937
   - Text / High:                   #F8FAFC
   - Text / Secondary:              #CBD5E1
   - Text / Muted:                  #94A3B8
*/

.problems-section {
  padding: 4rem 1.75rem 3.5rem;
  background: #111827;
  border-top: 1px solid #020617;
  position: relative;      /* für Linien */
  overflow: hidden;        /* damit nichts übersteht */
}

/* orange Linie oben */
.problems-section::before {
  content: "";
  position: absolute;
  inset-inline: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(249, 115, 22, 0.65),
    transparent
  );
  opacity: 0.9;
}

/* orange Linie unten */
.problems-section::after {
  content: "";
  position: absolute;
  inset-inline: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(249, 115, 22, 0.65),
    transparent
  );
  opacity: 0.9;
}

.problems-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.problems-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94A3B8;
  margin-bottom: 0.8rem;
}

.problems-title {
  font-size: clamp(1.9rem, 2.1vw + 1rem, 2.4rem);
  letter-spacing: -0.03em;
  margin-bottom: 2rem;
  color: #F8FAFC;
}

.problems-title span {
  background: linear-gradient(120deg, #FF7A00, #FFB869);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Grid mit 2 Spalten */
.problems-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 1.4rem;
  margin-bottom: 1.8rem;
}

/* Pill-Row-Karten */
.problem-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.4rem;
  border-radius: 999px;
  background: radial-gradient(circle at left,
      rgba(148, 163, 184, 0.12),
      rgba(15, 23, 42, 0.98));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  border: 1px solid #1F2937;
}

/* Nummern-Badge links */
.problem-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0%, #FFB869, #FF7A00);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.9),
    0 10px 25px rgba(15, 23, 42, 0.85);
}

.problem-icon span {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0B1120;
}

.problem-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #CBD5E1;
  margin: 0; /* Text sauber auf Höhe der Zahl */
}

/* Abschluss-Text */
.problems-conclusion {
  font-size: 0.9rem;
  color: #94A3B8;
  max-width: 40rem;
}

.problems-conclusion strong {
  color: #F8FAFC;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 900px) {
  .problems-section {
    padding: 3.25rem 1.5rem 3.1rem;
  }

  .problems-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .problem-card {
    border-radius: 1.1rem;
  }
}

@media (max-width: 520px) {
  .problems-section {
    padding: 3rem 1.25rem 2.75rem;
  }

  .problem-card {
    padding: 0.9rem 1rem;
  }

  .problem-text {
    font-size: 0.9rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-49f8b35 *//* Section: Was du von einem Webfire-Onlineshop erwarten kannst */

.features-section {
  padding: 4rem 1.75rem 3.5rem;
  background: #020617;
  border-top: 0px solid #020617;
}

.features-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.features-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94A3B8;
  margin-bottom: 0.8rem;
}

.features-title {
  font-size: clamp(1.9rem, 2.1vw + 1rem, 2.4rem);
  letter-spacing: -0.03em;
  margin-bottom: 2rem;
  color: #F8FAFC;
}

.features-title span {
  background: linear-gradient(120deg, #FF7A00, #FFB869);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 4 Karten in 2x2 Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 1.6rem;
}

/* Card / Surface */
.feature-card {
  border-radius: 1.3rem;
  background: radial-gradient(circle at left,
      rgba(148, 163, 184, 0.12),
      rgba(15, 23, 42, 0.98));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  border: 1px solid #1F2937;
  padding: 1.4rem 1.5rem 1.3rem;
  
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Icon-Badge oben */
.feature-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0%, #FFB869, #FF7A00);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.9),
    0 10px 25px rgba(15, 23, 42, 0.85);
  margin-bottom: 0.2rem;
}

.feature-icon span {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0B1120;
}

/* Card-Headline */
.feature-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #F8FAFC;
}

/* Bullet-Liste */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0.1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.feature-list li {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #CBD5E1;
}

/* Optional kleiner Bullet-Indicator */
.feature-list li::before {
  content: "•";
  margin-right: 0.45rem;
  color: #FF7A00;
}

/* Responsive */
@media (max-width: 900px) {
  .features-section {
    padding: 3.4rem 1.5rem 3.2rem;
  }

  .features-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .features-section {
    padding: 3rem 1.25rem 2.8rem;
  }

  .feature-card {
    padding: 1.2rem 1.2rem 1.15rem;
  }

  .feature-title {
    font-size: 1rem;
  }

  .feature-list li {
    font-size: 0.88rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c36a256 *//* Section: Funktionen, die wir für dich umsetzen – horizontale Leiste */

.functions-section {
  background: #020617;              /* dunkler Gesamt-Hintergrund */
  padding: 80px 0 90px;
  border-top: 1px solid #020617;
}

.functions-inner {
  max-width: none;
  margin: 0;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .functions-inner {
    padding: 0 16px;
  }
}

.functions-kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);
  margin-bottom: 10px;
}

.functions-title {
  font-family: "Sora", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f9fafb;
  margin-bottom: 10px;
}

.functions-title span {
  background: linear-gradient(120deg, #FF7A00, #FFB869);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.functions-subline {
  font-size: 15px;
  line-height: 1.7;
  color: #9ca3af;
  max-width: 60ch;
  margin-bottom: 26px;
}

/* Viewport für horizontale Cards */

.functions-viewport {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  margin: 0 -32px;
  padding: 6px 32px 8px;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scrollbar-width: none;
  background: #020617;
}

.functions-viewport::-webkit-scrollbar {
  display: none;
}

.functions-viewport.functions-dragging {
  cursor: grabbing;
}

@media (max-width: 900px) {
  .functions-viewport {
    margin: 0 -16px;
    padding: 6px 16px 8px;
  }
}

/* Track mit den Funktions-Cards */

.functions-track {
  display: flex;
  gap: 24px;
  padding: 0;
  background: #020617;
}

/* einzelne Funktions-Card – Surface-Farbverlauf wie USP/Problems */

.function-card {
  position: relative;                 /* Referenz für Logo-Chip */
  flex: 0 0 min(520px, 80vw);
  border-radius: 18px;

  /* fester Orange-Rand (keine Breiten-Änderung) */
  border: 2px solid rgba(255, 138, 51, 0.65);

  padding: 24px 24px 26px;
  padding-right: 120px;               /* rechts Platz für den Chip */

  /* Surface-Verlauf */
  background: radial-gradient(
    circle at top left,
    #111827,
    #111827 40%,
    #0F1722
  );

  /* sauberer Drop-Shadow in BG-Farbe */
  box-shadow: 0 22px 48px rgba(2, 6, 23, 0.9);

  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 170px;
  transition:
    transform 0.16s ease-out,
    box-shadow 0.16s ease-out,
    border-color 0.16s ease-out;
}

/* Hover: gleicher Background, nur Rand + Shadow + leichter Lift */

.function-card:hover {
  transform: translateY(-3px);
  border-color: #FF8A33;
  box-shadow:
    0 26px 56px rgba(2, 6, 23, 0.98),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}

/* Header: Titel + Tags */

.function-card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-right: 110px;                /* verhindert Kollision mit Chip */
  position: relative;
  z-index: 2;
}

.function-title {
  font-family: "Sora", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #f9fafb;
}

/* Tag-Badges */

.function-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.tag-pill {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #1F2937;
  background: #020617;
  font-size: 0.72rem;
  color: #CBD5E1;
  white-space: nowrap;
}

/* Klassen nur semantisch */
.tag-pill.wp {}
.tag-pill.elementor {}
.tag-pill.woo {}
.tag-pill.stripe {}
.tag-pill.ga4 {}
.tag-pill.brevo {}
.tag-pill.automation {}

/* Funktionsliste */

.function-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.function-list li {
  font-size: 15px;
  line-height: 1.7;
  color: #e5e7eb;
}

.function-list li::before {
  content: "•";
  margin-right: 7px;
  color: #FF7A00;
}

.function-list li.is-optional {
  color: #9ca3af;
  font-size: 14px;
}

/* kleiner Logo-Chip oben rechts */

.function-logo-chip {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.95);
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.function-logo-chip-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  display: block;

  /* Kreis ~25 % größer, damit er bis an den Rand geht */
  transform: scale(1.5);
  transform-origin: center center;
}

/* Sicherheitshalber: alte Footer-Logos deaktivieren */
.function-card-footer,
.function-logo {
  display: none !important;
}

/* Mobile Tweaks */

@media (max-width: 900px) {
  .functions-title {
    font-size: 26px;
  }
  .functions-subline {
    font-size: 14px;
  }
}

@media (max-width: 700px) {
  .function-card {
    flex: 0 0 85vw;
    padding: 20px 18px 22px;
    padding-right: 100px;
  }

  .function-card-header {
    margin-right: 100px;
  }

  .function-logo-chip {
    top: 16px;
    right: 14px;
    width: 50px;
    height: 50px;
    padding: 3px;
  }
}

/* =========================
   MOBILE SLIDER FIX + PEEK
   ========================= */
@media (max-width: 700px){
  :root{ --wf-peek: 18px; } /* 👈 Peek hier anpassen (z.B. 12px / 24px) */

  /* wichtig: kein seitliches Überstehen/„Balken“ */
  .functions-section{ overflow-x: clip; }
  @supports not (overflow: clip){
    .functions-section{ overflow-x: hidden; }
  }

  /* Viewport bündig + sauberes Scroll-Verhalten */
  .functions-viewport{
    margin: 0;                               /* ❗ kein negatives Margin auf Mobile */
    padding: 6px 16px 8px;
    padding-right: calc(16px + var(--wf-peek)); /* Platz für Peek rechts */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scroll-padding-right: calc(16px + var(--wf-peek));
    -webkit-overflow-scrolling: touch;
    background: transparent;
  }

  .functions-track{
    gap: 16px;
    padding-right: var(--wf-peek);           /* damit letzte Karte nicht „klebt“ */
  }

  /* Kartenbreite: 1 Karte + Peek sichtbar */
  .function-card{
    flex: 0 0 calc(100% - var(--wf-peek));
    scroll-snap-align: start;
  }
}

/* Optional: extra klein etwas weniger Peek */
@media (max-width: 420px){
  :root{ --wf-peek: 14px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-500d387 *//* =========================================
   Sektion: Ablauf – „Von der Idee …“
   ========================================= */

.process-section {
  background: #111827;
  padding: 80px 0 90px;
  border-top: 1px solid #020617;
  position: relative;      /* für Linien */
  overflow: hidden;        /* damit nichts übersteht */
}

/* orange Linie oben */
.process-section::before {
  content: "";
  position: absolute;
  inset-inline: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(249, 115, 22, 0.65),
    transparent
  );
  opacity: 0.9;
}

/* orange Linie unten */
.process-section::after {
  content: "";
  position: absolute;
  inset-inline: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(249, 115, 22, 0.65),
    transparent
  );
  opacity: 0.9;
}

.process-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 900px) {
  .process-inner {
    padding: 0 16px;
  }
}

/* Headline / Intro */

.process-kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);
  margin-bottom: 10px;
}

.process-title {
  font-family: "Sora", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f9fafb;
  margin-bottom: 10px;
}

.process-title span {
  background: linear-gradient(120deg, #ff7a00, #ffb869);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.process-subline {
  font-size: 15px;
  line-height: 1.7;
  color: #9ca3af;
  max-width: 60ch;
  margin-bottom: 32px;
}

/* Layout: Steps links, Content rechts */

.process-layout {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 40px;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .process-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: flex-start;
  }
}

/* =========================================
   Linke Spalte: Steps
   ========================================= */

.process-steps-nav {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

/* Vertikale Linie */

.process-steps-nav::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(148, 163, 184, 0),
    rgba(148, 163, 184, 0.35),
    rgba(148, 163, 184, 0)
  );
  pointer-events: none;
}

/* Step-Chip mit Hover/Active-Effekt,
   aber ohne Layout-Shift */

.process-step-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px 11px 46px;
  border-radius: 999px;
  cursor: pointer;

  border: 2px solid transparent; /* feste Breite – ändert sich nie */
  background:
    radial-gradient(circle at top left, #111827, #020617 70%) padding-box,
    linear-gradient(135deg, rgba(248, 250, 252, 0.9), #ff8a33) border-box;

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
  color: #e5e7eb;
  font-size: 14px;
  will-change: transform;
  transition:
    background 0.18s ease-out,
    box-shadow 0.18s ease-out,
    color 0.18s ease-out,
    transform 0.16s ease-out,
    opacity 0.16s ease-out;
}

.process-step-item:hover {
  background:
    radial-gradient(circle at top left, #1f2937, #020617 70%) padding-box,
    linear-gradient(135deg, #ffffff, #ff8a33) border-box;
  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 138, 51, 0.18);
  transform: translateY(-1px);
  color: #f9fafb;
}

.process-step-item.is-active {
  background:
    radial-gradient(circle at top left, #111827, #020617 70%) padding-box,
    linear-gradient(135deg, #ffffff, #ff8a33) border-box;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 138, 51, 0.4);
  transform: translateY(-1px);
  color: #f9fafb;
}

/* Nummer-Badge */

.process-step-badge {
  position: absolute;
  left: 6px;
  top: 50%;
  translate: 0 -50%;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Sora", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #0b1120;
  background: linear-gradient(135deg, #ff8a33, #ffb869);
  box-shadow:
    0 0 0 3px rgba(248, 113, 22, 0.4),
    0 8px 18px rgba(0, 0, 0, 0.7);
}

.process-step-label {
  font-family: "Sora", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
}

/* =========================================
   Rechte Spalte: Detail-Container
   ========================================= */

.process-detail-panel {
  position: relative;
  border-radius: 1.5rem;
  background: #111827;
  border: 2px solid rgba(148, 163, 184, 0.65);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  padding: 2.4rem 2.3rem 2.6rem;
  min-height: 210px;
  max-width: 780px;
  margin: 0 auto;
}

/* Subtiler Glow */

.process-detail-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.16), transparent 55%),
    radial-gradient(circle at bottom right, rgba(15, 23, 42, 0.9), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* einzelne Detail-Ansicht */

.process-detail {
  position: relative;
  z-index: 1;
  display: none;
}

.process-detail.is-active {
  display: block;
}

/* Typo im Panel */

.process-detail-title {
  font-family: "Sora", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #f9fafb;
  margin-bottom: 12px;
}

.process-detail-text {
  font-size: 15.5px;
  line-height: 1.8;
  color: #cbd5f5;
  margin-bottom: 10px;
}

.process-detail-text:last-child {
  margin-bottom: 0;
}

/* =========================================
   Responsive Tweaks
   ========================================= */

@media (max-width: 900px) {
  .process-title {
    font-size: 26px;
  }

  .process-subline {
    font-size: 14px;
  }

  .process-detail-panel {
    padding: 2rem 1.7rem 2.3rem;
  }

  .process-detail-title {
    font-size: 19px;
  }

  .process-detail-text {
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  .process-section {
    padding: 64px 0 72px;
  }

  .process-steps-nav {
    padding: 4px 0 0;
  }

  .process-step-item {
    padding: 10px 16px 10px 44px;
  }

  .process-step-badge {
    left: 5px;
    width: 28px;
    height: 28px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f416cbe *//* =========================================
   9. FAQ-Bereich „Onlineshops“
   ========================================= */

.shop-faq-section {
  background: #020617;
  padding: 4rem 1.5rem 4.5rem;
  border-top: 0px solid #020617;
}

.shop-faq-inner {
  max-width: 960px;
  margin: 0 auto;
}

.shop-faq-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 0.75rem;
}

.shop-faq-title {
  font-family: "Sora", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1.9rem, 2.2vw + 1rem, 2.3rem);
  letter-spacing: -0.02em;
  color: #f9fafb;
  margin: 0 0 0.8rem;
}

.shop-faq-title span {
  color: #e5e7eb;
}

.shop-faq-subline {
  font-size: 0.98rem;
  line-height: 1.8;
  color: #9ca3af;
  max-width: 46rem;
  margin: 0 0 2.1rem;
}

/* Liste */

.shop-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Hard Reset für FAQ-Elemente */

#shop-faq .shop-faq-item,
#shop-faq .shop-faq-trigger,
#shop-faq .shop-faq-panel,
#shop-faq .shop-faq-icon-wrap {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* FAQ-Card */

#shop-faq .shop-faq-item {
  border-radius: 1rem !important;
  background: radial-gradient(circle at top left, #111827, #020617 70%) !important;
  border: 1px solid rgba(148, 163, 184, 0.38) !important;
  overflow: hidden !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.7) !important;
  transition:
    border-color 0.18s ease-out,
    border-width 0.18s ease-out,
    box-shadow 0.18s ease-out,
    background 0.18s ease-out;
}

/* OFFEN: dicker, hellerer grauer Rand, Chevron Orange */

#shop-faq .shop-faq-item.is-open {
  border-width: 2px !important;
  border-color: rgba(203, 213, 225, 0.95) !important;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.95);
}

/* Trigger / Frage-Button */

#shop-faq .shop-faq-trigger {
  all: unset;
  box-sizing: border-box;

  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1.25rem;
  cursor: pointer;
  text-align: left;
  color: #e5e7eb;
}

#shop-faq .shop-faq-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px rgba(255, 138, 51, 0.8);
  border-radius: 0.8rem;
}

.shop-faq-question {
  font-size: 0.98rem;
  line-height: 1.5;
  flex: 1;
}

#shop-faq .shop-faq-trigger:hover .shop-faq-question {
  color: #f9fafb;
}

/* Pfeil rechts (Chevron) */

#shop-faq .shop-faq-icon-wrap {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 0; /* Text (+) unsichtbar */
  color: transparent;
}

#shop-faq .shop-faq-icon-wrap::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(45deg); /* nach unten */
  transition:
    transform 0.2s ease-out,
    border-color 0.2s ease-out;
}

/* Offener Zustand: Chevron orange, nach oben */

#shop-faq .shop-faq-item.is-open .shop-faq-icon-wrap::before {
  transform: rotate(-135deg);
  border-right-color: #FF8A33;
  border-bottom-color: #FF8A33;
}

/* Panel / Antwort */

#shop-faq .shop-faq-panel {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.25rem;
  transition:
    max-height 0.22s ease-out,
    padding-top 0.18s ease-out,
    padding-bottom 0.18s ease-out;
}

.shop-faq-answer {
  font-size: 0.94rem;
  line-height: 1.75;
  color: #cbd5e1;
}

.shop-faq-answer + .shop-faq-answer {
  margin-top: 0.55rem;
}

.shop-faq-note {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #fbbf24;
  margin-top: 0.7rem;
}

/* =========================================
   Responsive
   ========================================= */

@media (max-width: 960px) {
  .shop-faq-section {
    padding: 3.5rem 1.25rem 4rem;
  }
}

@media (max-width: 640px) {
  #shop-faq .shop-faq-trigger {
    padding: 0.9rem 1rem;
  }

  #shop-faq .shop-faq-panel {
    padding: 0 1rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-49dc064 *//* =========================================
   10. Finaler CTA-Block – Onlineshop-CTA (MOBILE FIXED + Button-Text Switch + Mobile Order)
   ========================================= */

.shop-cta-final {
  background: #020617;
  padding: 4.5rem 1.5rem 4.8rem;
  border-top: 1px solid #020617;
}

.shop-cta-final-inner {
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
  padding-inline: 0;
}

/* Card-Container */
.shop-cta-final-card {
  border-radius: 1.6rem;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: radial-gradient(circle at top left, #111827, #020617 70%);
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.9);
  padding: 2.4rem 2.3rem 2.6rem;

  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2.7rem;
  align-items: center;

  width: 100%;
  max-width: 100%;
  overflow: visible; /* wichtig fürs Badge */
}

/* ✅ GANZ WICHTIG bei Grid: Kinder dürfen schrumpfen */
.shop-cta-final-content,
.shop-cta-final-visual{
  min-width: 0;
}

/* Linke Seite – Text + Button */
.shop-cta-final-content{
  max-width: 560px;
}

/* ✅ Text darf immer umbrechen */
.shop-cta-final-heading,
.shop-cta-final-text,
.shop-cta-final-note{
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.shop-cta-final-heading {
  font-family: "Sora", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1.85rem, 2vw + 1rem, 2.2rem);
  letter-spacing: -0.02em;
  color: #f9fafb;
  margin: 0 0 1rem;
  line-height: 1.18;
}

.shop-cta-final-heading span { color: #fed7aa; }

.shop-cta-final-text {
  font-size: 1.02rem;
  line-height: 1.8;
  color: #e5e7eb;
  margin: 0 0 0.9rem;
}

.shop-cta-final-note {
  font-size: 0.94rem;
  line-height: 1.7;
  color: #9ca3af;
  margin: 0;
}

.shop-cta-final-button-wrap { margin-top: 1.4rem; }

/* Button – Layout fix */
.shop-cta-final-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.shop-cta-final-button .icon{
  flex: 0 0 auto;
}

/* ✅ Button-Text Switch (Desktop default) */
.cta-text-mobile{ display: none; }
.cta-text-desktop{ display: inline; }

/* Rechte Seite – Visual */
.shop-cta-final-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 230px;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

/* Badge */
.shop-cta-final-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.36rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(248, 250, 252, 0.16);
  background: radial-gradient(circle at top left, rgba(255, 138, 51, 0.22), rgba(15, 23, 42, 0.96));
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.55);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f97316;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bild-Container */
.shop-cta-final-image-wrap {
  width: 100%;
  max-width: 360px;
  border-radius: 1.4rem;
  padding: 0.45rem;
  background: radial-gradient(circle at top left, #1f2937, #020617 80%);
  border: 1px solid rgba(148, 163, 184, 0.48);
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.9);
  overflow: hidden;
}

.shop-cta-final-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 1.1rem;
  object-fit: cover;
}

/* =========================================
   Responsive
   ========================================= */

@media (max-width: 960px) {
  .shop-cta-final {
    padding: 3.8rem 1.25rem 4.2rem;
  }

  .shop-cta-final-card {
    grid-template-columns: 1fr;
    padding: 2.05rem 1.6rem 2.35rem;
    gap: 2rem;
    border-radius: 1.45rem;
  }

  .shop-cta-final-content { max-width: none; }

  /* ✅ Mobile Order: Überschrift -> CTA -> Bild -> Text */
  .shop-cta-final-content{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .shop-cta-final-heading{ order: 1; margin-bottom: 0; }
  .shop-cta-final-button-wrap{ order: 2; margin-top: 0.2rem; }
  .shop-cta-final-visual{ order: 3; margin-top: 0.25rem; }
  .shop-cta-final-text{ order: 4; margin: 0.2rem 0 0; }
  .shop-cta-final-note{ order: 5; }

  .shop-cta-final-visual {
    min-height: 200px;
    padding-top: 0.6rem;
  }

  .shop-cta-final-image-wrap {
    margin: 0 auto;
    max-width: 320px;
  }

  .shop-cta-final-heading {
    font-size: clamp(1.7rem, 2.2vw + 1rem, 2.05rem);
  }

  .shop-cta-final-text { font-size: 1rem; }
  .shop-cta-final-note { font-size: 0.92rem; }

  .shop-cta-final-button {
    width: 100%;
    justify-content: center;
  }

  .shop-cta-final-button:hover .icon{
    width: 2.2em;
  }
}

@media (max-width: 640px) {
  .shop-cta-final {
    padding: 3.2rem 1rem 3.6rem;
  }

  .shop-cta-final-card {
    padding: 1.75rem 1.15rem 2.05rem;
    gap: 1.6rem;
    border-radius: 1.35rem;
  }

  .shop-cta-final-heading {
    font-size: clamp(1.55rem, 5.2vw, 1.9rem);
    line-height: 1.2;
  }

  .shop-cta-final-text {
    font-size: 0.98rem;
    line-height: 1.75;
  }

  .shop-cta-final-note {
    font-size: 0.9rem;
    line-height: 1.65;
  }

  .shop-cta-final-visual {
    padding-top: 0.9rem;
  }

  .shop-cta-final-badge {
    font-size: 0.72rem;
    padding: 0.3rem 0.75rem;
    letter-spacing: 0.14em;
  }

  .shop-cta-final-image-wrap {
    max-width: 290px;
    border-radius: 1.25rem;
  }

  .shop-cta-final-image { border-radius: 1.05rem; }

  .shop-cta-final-button { width: 100%; }

  /* ✅ ab hier Mobile-Text aktivieren */
  .cta-text-desktop{ display: none; }
  .cta-text-mobile{ display: inline; }
}

@media (max-width: 420px) {
  .shop-cta-final-card {
    padding: 1.55rem 1rem 1.85rem;
  }

  .shop-cta-final-image-wrap {
    max-width: 100%;
  }
}/* End custom CSS */
/* Start custom CSS *//* =========================
   GLOBAL FIX: kein Overflow / saubere Viewport-Breite
   (einmal global einfügen)
========================= */

/* 1) Breite/Box-Model stabil */
html{ box-sizing:border-box; }
*,*::before,*::after{ box-sizing:inherit; }

/* 2) Nie horizontal scrollen (klassische WP/Elementor Fixes) */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/* 3) Media/Widgets dürfen niemals breiter als der Container werden */
img,svg,video,canvas,iframe,embed,object{
  max-width:100%;
  height:auto;
  display:block;
}

/* 4) Lange Wörter/Links brechen statt rauszuschieben */
p,h1,h2,h3,h4,h5,h6,li,a,span,small,strong,em{
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

/* 5) Grid/Flex: Kinder dürfen schrumpfen (verhindert Overflow in vielen Layouts) */
.wf-shop-hero__inner,
.hero-inner,
.wf-package-process-faq__grid,
.wf-package-cta__inner,
.problems-grid{
  min-width:0;
}
.wf-shop-hero__copy,
.hero-copy,
.wf-package-hero__content,
.wf-package-process,
.wf-package-faq,
.wf-package-cta__content,
.wf-package-cta__side-card,
.problems-inner{
  min-width:0;
}

/* 6) Buttons/Badges/Pills dürfen umbrechen statt überlaufen */
.cssbuttons-io-button,
.wf-packages-cta-btn,
.wf-shop-hero__pill,
.wf-shop-hero__pill-accent,
.badge,
.wf-shop-hero__tag,
.screen-address,
.wf-shop-hero__address{
  max-width:100%;
  white-space:normal;
}

/* 7) Typische Übeltäter: negative Margins/Transforms entschärfen */
[class*="orbit"],
[class*="mockup"]{
  max-width:100%;
}

/* 8) Optional: Section-Wrapping, falls irgendwo zu breite Elemente sind */
section,header,footer,main,div{
  max-width:100%;
}/* End custom CSS */