.elementor-6239 .elementor-element.elementor-element-107119e{--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;--padding-top:5rem;--padding-bottom:10rem;--padding-left:5rem;--padding-right:5rem;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-6239 .elementor-element.elementor-element-107119e{--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-6239 .elementor-element.elementor-element-a9d8d72{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:2rem 1rem 2rem 1rem;}}/* Start custom CSS for html, class: .elementor-element-a9d8d72 */:root{
  --wf-bg:#020617;
  --wf-card-bg:#111827;
  --wf-border:rgba(148,163,184,.45);

  --wf-orange:#e05f00;
  --wf-orange-hover:#ff8a33;
  --wf-orange-grad:linear-gradient(120deg,#f97316,#fb923c,#fed7aa);

  --wf-text-main:#f9fafb;
  --wf-text-soft:#9ca3af;

  --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);
}

/* Dashboard */
.wf-billing-page{
  color: var(--wf-text-main);
  border-radius: 1.6rem;
  border: 1px solid rgba(148,163,184,.18);
  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;
}

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

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

/* Cards */
.wf-bill-card{
  position: relative;
  display:flex;
  flex-direction:column;

  border-radius: 1.25rem;
  border: 1px solid rgba(148,163,184,.32);
  background: var(--wf-card-bg);
  box-shadow: var(--wf-shadow-card);

  padding: 16px 16px 14px;
  overflow:hidden;
}
.wf-bill-card:before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(600px 200px at 10% 0%, rgba(148,163,184,.06), transparent 55%);
  pointer-events:none;
}
.wf-bill-card:after{content:none !important;display:none !important;} /* keine orange Striche */

/* Card top */
.wf-bill-card-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

/* Icon box */
.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-ic svg{width:22px;height:22px;color: rgba(255,255,255,.88);}

/* Body */
.wf-bill-body{
  position:relative;
  z-index:1;
  flex: 1 1 auto;
}

/* KPI */
.wf-bill-kpi{display:grid;gap:6px;margin-top:2px;}
.wf-bill-kpi-label{
  font-size: .78rem;
  color: rgba(156,163,175,.9);
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.wf-bill-kpi-value{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -.01em;
}

/* Block */
.wf-bill-block-title{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.wf-bill-block-text{
  font-size: 14px;
  color: var(--wf-text-soft);
  line-height: 1.55;

  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* Footer (default: KEIN Divider) */
.wf-bill-footer{
  position:relative;
  z-index:1;
  margin-top: auto;
  padding-top: 0;
  border-top: 0;
}
.wf-bill-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color: rgba(156,163,175,.95);
  font-weight: 800;
  font-size: 13px;
}
.wf-arrow{opacity:.9;}

/* Divider NUR Karte 1 */
.wf-bill-card--divider .wf-bill-footer{
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,.18);
}

/* Meta rows (nur Karte 1 nutzt die) */
.wf-bill-meta{display:grid;gap:8px;}
.wf-bill-meta-row{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.82);
}
.wf-bill-meta-row span{color: rgba(156,163,175,.95);}
.wf-bill-meta-row strong{font-weight: 900; color: rgba(249,250,251,.92);}

/* Stripe status badges */
.wf-sub-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(15,23,42,.55);
  color: rgba(249,250,251,.92);
}
.wf-sub-badge.is-ok{border-color: rgba(34,197,94,.55);background: rgba(34,197,94,.10);color:#bbf7d0;}
.wf-sub-badge.is-warn{border-color: rgba(251,191,36,.55);background: rgba(251,191,36,.10);color:#fde68a;}
.wf-sub-badge.is-bad{border-color: rgba(239,68,68,.55);background: rgba(239,68,68,.10);color:#fecaca;}
.wf-sub-badge.is-none{opacity:.85;}

/* =========================================
   EIN LOOK FÜR: Header "Abo verwalten" + Support-Link + Verwaltung (Inline)
========================================= */
.wf-ui-link{
  display:inline-flex;
  align-items:center;
  gap:10px;

  text-decoration:none !important;
  font-weight: 900;
  color: rgba(255,255,255,.92) !important;

  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(15,23,42,.55);

  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
.wf-ui-link:hover{
  background: rgba(15,23,42,.75);
  border-color: rgba(148,163,184,.45);
}

/* Inline Variante für "Verwaltung" in Karte 2 */
.wf-ui-link--inline{
  padding: 10px 12px;
  display:inline-flex;
  align-items:center;
}

/* Header Button brutal überschreiben (gewinnt gegen Chip/Theme) */
.wf-billing-page .wf-bill-actions-btn .wf-btn.wf-ui-link,
.wf-billing-page .wf-bill-actions-btn a.wf-btn.wf-ui-link,
.wf-billing-page .wf-bill-actions-btn button.wf-btn.wf-ui-link{
  background-image: none !important;
  background: rgba(15,23,42,.55) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(148,163,184,.28) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  text-transform: none !important;
  letter-spacing: .02em !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

/* Hover ruhig */
.wf-bill-card:hover{
  transform:none !important;
  box-shadow: var(--wf-shadow-card) !important;
  border-color: rgba(148,163,184,.45);
}

/* Hinweis */
.wf-bill-info{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 1.25rem;
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(2,6,23,.55);
}
.wf-bill-info-title{
  font-weight: 950;
  letter-spacing: -.01em;
  margin-bottom: 6px;
  color: var(--wf-orange);
}
.wf-bill-info-text{
  color: var(--wf-text-soft);
  font-size: 14px;
  line-height: 1.55;
}

/* Prevent theme hover colors */
.wf-billing-page a,
.wf-billing-page a:hover,
.wf-billing-page a:visited{color: inherit;}

/* Responsive */
@media (max-width: 1024px){
  .wf-bill-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 640px){
  .wf-billing-page{padding: 22px 16px;}
  .wf-bill-head{flex-direction:column; align-items:stretch;}
  .wf-bill-grid{grid-template-columns: 1fr;}
}

/* =========================
   Mehr Innenluft zwischen Content & Footer
========================= */

/* Mehr Abstand UNTER dem Content */
.wf-bill-body{
  padding-bottom: 16px;
}

/* Footer etwas weiter vom Content weg */
.wf-bill-footer{
  padding-top: 16px;
}

/* Speziell für Karten mit Text + Button (Belege / Support) */
.wf-bill-card-link .wf-bill-body,
.wf-bill-card-warn .wf-bill-body{
  padding-bottom: 20px;
}

/* =========================
   Billing – Header Actions (Profil-Chip Style)
========================= */

.wf-bill-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Chip Style wie Profil */
.wf-billing-page .wf-bill-chip,
.wf-billing-page .wf-bill-chip:visited,
.wf-billing-page .wf-bill-actions-btn .wf-btn.wf-bill-chip,
.wf-billing-page .wf-bill-actions-btn a.wf-btn.wf-bill-chip,
.wf-billing-page .wf-bill-actions-btn button.wf-btn.wf-bill-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:.35rem 1rem !important;
  border-radius:999px !important;

  font-size:.75rem !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;

  text-decoration:none !important;

  background: var(--wf-orange-grad) !important; /* entspricht Profil: --wf-accent-grad */
  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) !important;

  transition: filter .18s ease !important;
}

.wf-billing-page .wf-bill-chip:hover,
.wf-billing-page .wf-bill-actions-btn .wf-btn.wf-bill-chip:hover{
  filter:brightness(1.03) !important;
}

/* Mobile: beide Chips schön stapeln & full width */
@media (max-width: 640px){
  .wf-billing-page .wf-bill-actions{
    width:100%;
  }
  .wf-billing-page .wf-bill-actions > a.wf-bill-chip,
  .wf-billing-page .wf-bill-actions-btn{
    flex:1 1 100%;
  }
  .wf-billing-page .wf-bill-actions > a.wf-bill-chip,
  .wf-billing-page .wf-bill-actions-btn .wf-btn.wf-bill-chip{
    width:100% !important;
  }
}

/* =========================
   Billing – Hover komplett deaktivieren
   für "Abo verwalten" Chip
========================= */

.wf-billing-page .wf-bill-actions-btn .wf-btn.wf-bill-chip:hover,
.wf-billing-page .wf-bill-actions-btn a.wf-btn.wf-bill-chip:hover,
.wf-billing-page .wf-bill-actions-btn button.wf-btn.wf-bill-chip:hover{
  filter: none !important;
  background: var(--wf-orange-grad) !important;
  color: #0b1120 !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 0 1.2em -0.6em rgba(15,23,42,.85) !important;
  transform: none !important;
}

/* =========================================================
   BILLING – Mobile Compact Mode (ADD-ON)
   -> ganz unten in dein CSS
========================================================= */

@media (max-width: 640px){

  /* Wrapper kompakter */
  .wf-billing-page{
    padding: 18px 14px;
    border-radius: 1.25rem;
  }

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

  /* Actions full width (bleibt tap-friendly) */
  .wf-bill-actions{
    width: 100%;
    gap: 10px;
  }
  .wf-bill-actions > *{
    width: 100%;
  }

  /* ✅ Grid: 2 Spalten statt 1 -> weniger Scroll */
  .wf-bill-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  /* Cards kompakter */
  .wf-bill-card{
    padding: 12px 12px 11px;
    border-radius: 16px;
  }

  /* Card top enger */
  .wf-bill-card-top{
    gap: 10px;
    margin-bottom: 8px;
  }

  /* Icon kleiner */
  .wf-ic{
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }
  .wf-ic svg{
    width: 20px;
    height: 20px;
  }

  /* KPI kompakter */
  .wf-bill-kpi{ gap: 4px; }
  .wf-bill-kpi-label{
    font-size: .72rem;
    letter-spacing: .08em;
  }
  .wf-bill-kpi-value{
    font-size: 14px;
  }

  /* Block Titel/Text kleiner */
  .wf-bill-block-title{
    font-size: 14px;
    margin-bottom: 4px;
  }

  /* ✅ Text: max 2 Zeilen */
  .wf-bill-block-text{
    font-size: 12.5px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
  }

  /* Footer kompakter (weniger Höhe) */
  .wf-bill-foot{
    font-size: 12px;
  }

  /* Weniger "Innenluft" */
  .wf-bill-body{
    padding-bottom: 10px !important;
  }
  .wf-bill-footer{
    padding-top: 10px !important;
  }

  /* Divider Karte 1 nicht zu hoch */
  .wf-bill-card--divider .wf-bill-footer{
    padding-top: 10px;
  }

  /* Meta Rows: auf Mobile NICHT space-between (verhindert komische Umbrüche) */
  .wf-bill-meta-row{
    justify-content: flex-start !important;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }
  .wf-bill-meta-row span{
    white-space: nowrap;
  }
  .wf-bill-meta-row strong{
    white-space: normal;
  }

  /* Hinweis-Box kompakter */
  .wf-bill-info{
    padding: 12px 12px;
    border-radius: 16px;
  }
  .wf-bill-info-text{
    font-size: 13px;
    line-height: 1.45;
  }
}

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