.elementor-5318 .elementor-element.elementor-element-b6198fa{--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;}.elementor-5318 .elementor-element.elementor-element-dea4fb2 .shopengine-account-dashboard p{margin:0 !important;color:#3A3A3A;font-size:16px;line-height:20px;}.elementor-5318 .elementor-element.elementor-element-dea4fb2 .shopengine-account-dashboard :is(p, a){font-weight:400;}.elementor-5318 .elementor-element.elementor-element-dea4fb2 .shopengine-account-dashboard p strong{color:#3A3A3A;font-weight:700;}.elementor-5318 .elementor-element.elementor-element-dea4fb2 .shopengine-account-dashboard p a{color:#4169E1;text-decoration:none;}.elementor-5318 .elementor-element.elementor-element-dea4fb2 .shopengine-account-dashboard p a:hover{color:#879BD6;}.elementor-5318 .elementor-element.elementor-element-dea4fb2 .shopengine-account-dashboard p:first-child{margin-bottom:15px !important;}.elementor-5318 .elementor-element.elementor-element-0ce1e5b{--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:5rem;--padding-bottom:10rem;--padding-left:5rem;--padding-right:5rem;}.elementor-5318 .elementor-element.elementor-element-3be39b4{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(max-width:767px){.elementor-5318 .elementor-element.elementor-element-0ce1e5b{--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-5318 .elementor-element.elementor-element-3be39b4{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:2rem 1rem 2rem 1rem;}}/* Start custom CSS for container, class: .elementor-element-b6198fa *//* ShopEngine / Woo Dashboard ausblenden */
.wf-hide-account-widget,
.wf-hide-account-widget .woocommerce,
.wf-hide-account-widget .woocommerce-MyAccount-content,
.wf-hide-account-widget .woocommerce-MyAccount-navigation {
  display: none !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3be39b4 */:root{
  /* ====== Match "Monatliche Betreuung" ====== */
  --wf-bg:#020617;
  --wf-card-bg:#111827;

  /* neutrales UI */
  --wf-border: rgba(148,163,184,.32);
  --wf-border-soft: rgba(148,163,184,.18);

  --wf-panel: rgba(15,23,42,.55);
  --wf-panel2: rgba(15,23,42,.75);

  --wf-text: rgba(249,250,251,.92);
  --wf-muted: rgba(156,163,175,.95);
  --wf-muted2: rgba(156,163,175,.75);

  /* Akzent */
  --wf-accent: #e05f00;
  --wf-accent-hover:#ff8a33;
  --wf-accent-grad: linear-gradient(120deg,#f97316,#fb923c,#fed7aa);

  --wf-r: 18px;
  --wf-shadow-outer: 0 28px 80px rgba(0,0,0,.70), 0 0 0 1px rgba(0,0,0,.35);
  --wf-shadow-card:  0 14px 38px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}

/* =========================
   Wrapper (Dashboard)
========================= */
.wf-custom-dashboard{
  position: relative;
  color: var(--wf-text);
  border-radius: calc(var(--wf-r) + 6px);
  border: 1px solid var(--wf-border-soft);
  background:
    radial-gradient(circle at 0 0, rgba(148,163,184,.08), transparent 55%),
    radial-gradient(circle at 100% 20%, rgba(2,6,23,1), rgba(2,6,23,1) 55%, rgba(0,0,0,.92));
  box-shadow: var(--wf-shadow-outer);
  padding: 28px 22px;
  overflow: hidden;
}
.wf-custom-dashboard:before{display:none !important;}

/* =========================
   Header
========================= */
.wf-dash-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin: 6px 0 18px;
}
.wf-dash-titlewrap{max-width: 720px;}
.wf-dash-title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.wf-dash-sub{
  margin-top: 8px;
  font-size: 14px;
  color: var(--wf-muted2);
}

/* Actions */
.wf-dash-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}

/* Primär-Button (Chip-Style wie Betreuung Header) */
.wf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .35rem 1.0rem;
  border-radius: 999px;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration:none;

  background: var(--wf-accent-grad) !important;
  color: #0b1120 !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 0 1.2em -0.6em rgba(15,23,42,.85);
  transition: filter .18s ease;
}
.wf-btn:hover{filter: brightness(1.03);}

/* Ghost */
.wf-btn-ghost{
  background: rgba(15,23,42,.55);
  color: var(--wf-text);
  border: 1px solid rgba(148,163,184,.28);
  box-shadow: none;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 900;
  text-decoration:none;
}
.wf-btn-ghost:hover{
  background: rgba(15,23,42,.75);
  border-color: rgba(148,163,184,.45);
}

/* Logout-Link (alles was kein wf-btn / wf-btn-ghost ist) -> ebenfalls Chip */
.wf-dash-actions a:not(.wf-btn):not(.wf-btn-ghost){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .35rem 1.0rem;
  border-radius: 999px;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration:none;

  background: var(--wf-accent-grad);
  color: #0b1120;

  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 0 1.2em -0.6em rgba(15,23,42,.85);
  transition: filter .18s ease;
}
.wf-dash-actions a:not(.wf-btn):not(.wf-btn-ghost):hover{filter: brightness(1.03);}
.wf-dash-actions a:not(.wf-btn):not(.wf-btn-ghost):active{transform: scale(.98);}

/* =========================
   Grid
========================= */
.wf-dash-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

/* =========================
   Cards (CLEAN / FLAT)
   -> kein Orange Rahmen
========================= */
.wf-card,
.wf-card-accent{
  position: relative;
  display:block;
  padding: 16px 16px 14px;
  border-radius: var(--wf-r);
  border: 1px solid var(--wf-border);
  background: var(--wf-card-bg);
  box-shadow: var(--wf-shadow-card);
  text-decoration:none;
  color: var(--wf-text);
  overflow:hidden;
}

/* ruhiger sheen */
.wf-card:before,
.wf-card-accent:before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(600px 200px at 10% 0%, rgba(148,163,184,.06), transparent 55%);
  pointer-events:none;
}

/* Hover: KEIN Anheben, kein Shadow-Sprung */
.wf-card:hover,
.wf-card-accent:hover{
  border-color: rgba(148,163,184,.45);
  box-shadow: var(--wf-shadow-card);
}

/* Card top */
.wf-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Icon Box (neutral, ohne Orange Rahmen) */
.wf-custom-dashboard .wf-ic{
  width: 42px; height: 42px;
  display:grid; place-items:center;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(15,23,42,.88);
}
.wf-custom-dashboard .wf-ic svg{
  width:22px;height:22px;
  color: rgba(255,255,255,.88);
}

/* Badges: neutral + kleiner Orange-Akzent als Text */
.wf-badge,
.wf-badge-accent,
.wf-badge-hot{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(15,23,42,.55);
  color: rgba(249,250,251,.90);
}
.wf-badge-accent,
.wf-badge-hot{
  color: #ffd9bf; /* subtiler Orange-Touch */
  border-color: rgba(224,95,0,.35);
  background: rgba(224,95,0,.08);
}

/* Text */
.wf-card-title{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.wf-card-text{
  font-size: 14px;
  color: var(--wf-muted2);
  line-height: 1.45;
}

/* Footer */
.wf-card-foot{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,.18);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color: var(--wf-muted2);
  font-weight: 800;
  font-size: 13px;
}
.wf-arrow{opacity:.9;}

/* =========================
   Section (z.B. letzte Bestellungen)
========================= */
.wf-dash-section{
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--wf-r);
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(2,6,23,.55);
  box-shadow: var(--wf-shadow-card);
}
.wf-dash-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}
.wf-dash-section-title{
  font-weight: 950;
  letter-spacing: -.01em;
}
.wf-link{
  color: rgba(255,255,255,.75);
  text-decoration:none;
  font-weight: 850;
}
.wf-link:hover{color: rgba(255,255,255,.92);}

/* Orders list */
.wf-orders{display:grid;gap:10px;}
.wf-order{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(15,23,42,.55);
}
.wf-order-row{font-size:14px;color: rgba(255,255,255,.82);}

/* =========================
   Link-Hover killen
========================= */
.wf-custom-dashboard .wf-card,
.wf-custom-dashboard .wf-card:visited,
.wf-custom-dashboard .wf-card:hover,
.wf-custom-dashboard .wf-card:active,
.wf-custom-dashboard .wf-card:focus{
  color: var(--wf-text) !important;
  text-decoration: none !important;
}

/* Responsive */
@media (max-width: 1024px){
  .wf-dash-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 640px){
  .wf-custom-dashboard{padding: 22px 16px;}
  .wf-dash-head{flex-direction:column; align-items:stretch;}
  .wf-dash-actions{justify-content:flex-start;}
  .wf-dash-grid{grid-template-columns: 1fr;}
}

/* =====================================
   Webfire Akzente (Dashboard) – Add-On / Overrides
   -> Username orange + Pfeile orange + Divider-Progress
===================================== */

/* 1) Username orange
   Falls du keinen separaten <span> hast:
   -> färbt NUR den ersten <strong>/<b> im Titel orange (typisch bei Greeting-Shortcodes).
*/
.wf-dash-title strong,
.wf-dash-title b{
  color: var(--wf-accent);
  font-weight: 950;
}

/* Wenn du später einen Wrapper setzt: <span class="wf-dash-user">NAME</span> */
.wf-dash-user{
  color: var(--wf-accent);
  font-weight: 950;
}

/* 2) Alle Pfeile orange */
.wf-custom-dashboard .wf-arrow{
  color: var(--wf-accent) !important;
  opacity: 1 !important;
}

/* 3) Divider-Progress in Cards (Hover)
   Wir ersetzen border-top durch 2 Layer:
   - graue Basislinie (immer)
   - orange Linie (animiert)
*/
.wf-custom-dashboard .wf-card-foot{
  position: relative;
  border-top: none !important;   /* kill border, sonst doppelt */
  padding-top: 12px;            /* bleibt wie gehabt */
}

/* graue Basislinie */
.wf-custom-dashboard .wf-card-foot::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;
  height:1px;
  background: rgba(148,163,184,.18);
  pointer-events:none;
}

/* orange Progress-Line (startet bei 0) */
.wf-custom-dashboard .wf-card-foot::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:1px;
  width:100%;
  background: var(--wf-accent-grad); /* hochwertiger als Vollton */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s ease;
  pointer-events:none;
  opacity: .95;
}

/* beim Hover fährt die Linie auf */
.wf-custom-dashboard .wf-card:hover .wf-card-foot::before{
  transform: scaleX(1);
}

/* 4) Hover bleibt ruhig (kein Lift, kein Shadow-Sprung) */
.wf-custom-dashboard .wf-card:hover,
.wf-custom-dashboard .wf-card-accent:hover{
  transform: none !important;
  box-shadow: var(--wf-shadow-card) !important;
  border-color: rgba(148,163,184,.45) !important;
}

/* 5) OPTIONAL: Chips/Badges komplett raus (wenn du sie nicht willst) */
.wf-custom-dashboard .wf-badge,
.wf-custom-dashboard .wf-badge-accent,
.wf-custom-dashboard .wf-badge-hot{
  display:none !important;
}

/* =====================================
   Pfeile im Accent-Gradient (wie Divider)
===================================== */

.wf-custom-dashboard .wf-arrow{
  font-weight: 900;
  opacity: 1 !important;

  /* Gradient Text */
  background: var(--wf-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* minimaler Kontrast-Boost */
  filter: saturate(1.05);
}

/* Optional: beim Hover minimal „nachziehen“ */
.wf-custom-dashboard .wf-card:hover .wf-arrow{
  filter: saturate(1.15) brightness(1.05);
}

/* =====================================
   DASHBOARD – Mobile Compact Mode (CSS only)
   Ziel: weniger Scroll, ohne UI kaputt zu machen
===================================== */

/* 1) Mobile: kompaktere Wrapper-Abstände */
@media (max-width: 640px){
  .wf-custom-dashboard{
    padding: 18px 14px;
    border-radius: calc(var(--wf-r) + 2px);
  }

  /* Header kompakter */
  .wf-dash-title{
    font-size: 20px;
    line-height: 1.15;
  }
  .wf-dash-sub{
    font-size: 13px;
    line-height: 1.45;
    margin-top: 6px;
  }

  /* Actions: als Stack, volle Breite */
  .wf-dash-actions{
    width:100%;
    gap:10px;
  }
  .wf-dash-actions .wf-btn,
  .wf-dash-actions a:not(.wf-btn):not(.wf-btn-ghost){
    width:100%;
  }

  /* 2) Grid: 2 Spalten auf Mobile (spart Höhe massiv) */
  .wf-dash-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px;
  }

  /* 3) Cards: kompakter */
  .wf-card,
  .wf-card-accent{
    padding: 12px 12px 11px;
    border-radius: 16px;
  }

  .wf-card-top{
    margin-bottom: 8px;
    gap:10px;
  }

  .wf-custom-dashboard .wf-ic{
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }
  .wf-custom-dashboard .wf-ic svg{
    width:20px;
    height:20px;
  }

  .wf-card-title{
    font-size: 14px;
    margin-bottom: 4px;
  }

  /* 4) Text clamp: 2 Zeilen max (spart Höhe extrem) */
  .wf-card-text{
    font-size: 12.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 5) Footer kompakter */
  .wf-card-foot{
    margin-top: 10px;
    padding-top: 9px;
    font-size: 12px;
  }

  /* Pfeil etwas kleiner */
  .wf-arrow{
    font-size: 13px;
  }

  /* 6) Section/Orders: kompakter (bleibt sichtbar, aber kürzer) */
  .wf-dash-section{
    margin-top: 14px;
    padding: 12px;
    border-radius: 16px;
  }
  .wf-dash-section-head{
    margin-bottom: 8px;
  }

  .wf-orders{ gap:8px; }
  .wf-order{
    padding: 10px 12px;
    border-radius: 14px;
  }
  .wf-order-row{
    font-size: 13px;
    line-height: 1.35;
  }
}

/* 7) Sehr kleine Phones: zurück auf 1 Spalte, damit nichts gequetscht wirkt */
@media (max-width: 380px){
  .wf-dash-grid{
    grid-template-columns: 1fr !important;
  }
}/* End custom CSS */