/* ================================================================
   2025-05-05: Status-Badges in ClientAreaProductDetails
   – Entfernt den Standard-Punkt (::before)
   – Zeigt jeden Status als Pill-Badge mit weißem Text und farbigem Hintergrund
   – Enthält Active, Pending, Suspended, Cancelled, Terminated
   ================================================================ */

/* 1) Standard-Bullet vor dem Status-Text ausblenden */
.page-clientareaproductdetails .status::before {
  display: none !important;
}

/* 2) Baseline-Styling für alle Status-Badges */
.page-clientareaproductdetails .status {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 3px !important;
  font-weight: 500;
  color: #fff !important;
}

/* 3) Hintergrundfarben pro Status */
.page-clientareaproductdetails .status-active { background-color: #2F855A !important; }
.page-clientareaproductdetails .status-pending,
.page-clientareaproductdetails .status-pendingsetup { background-color: #C53030 !important; }
.page-clientareaproductdetails .status-suspended { background-color: #D97706 !important; }
.page-clientareaproductdetails .status-cancelled,
.page-clientareaproductdetails .status-terminated { background-color: #4A5568 !important; }

/* ================================================================
   2025-05-05: Linke Produkt-Box nach Status einfärben
   ================================================================ */
.product-details:has(.status-active) .product-icon,
.product-details:has(.status-pending) .product-icon,
.product-details:has(.status-pendingsetup) .product-icon,
.product-details:has(.status-suspended) .product-icon,
.product-details:has(.status-cancelled) .product-icon,
.product-details:has(.status-terminated) .product-icon {
  background-image: none !important;
}
/* Farben nur auf .product-icon anwenden */
.product-details:has(.status-active)     .product-icon { background-color: #2F855A !important; }
.product-details:has(.status-pending)    .product-icon,
.product-details:has(.status-pendingsetup) .product-icon { background-color: #C53030 !important; }
.product-details:has(.status-suspended)  .product-icon { background-color: #D97706 !important; }
.product-details:has(.status-cancelled)  .product-icon,
.product-details:has(.status-terminated) .product-icon { background-color: #4A5568 !important; }

/* ====================================================================
   2025-05-06: Universelles Iframe-Responsiv-Styling für Serverstatus
   ==================================================================== */
.iframe-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 900 / 2200;
}
.iframe-container::before {
  content: "";
  display: block;
  padding-top: 244.44%;
}
.iframe-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* ====================================================================
   2025-05-06: Stil für den Telegram-Gruppen-Block in der Wissensdatenbank
   ==================================================================== */
.panel-kb-telegram {
  margin-top: 2rem;
  background-color: var(--kb-panel-bg, #1e2530);
  border-color: var(--kb-panel-border, #2b3743);
  border-radius: 6px;
}
.panel-kb-telegram .panel-body {
  background-color: var(--kb-panel-body-bg, rgba(0,0,0,0.2));
  padding: 1.5rem;
}
.panel-kb-telegram h2 {
  margin-top: 0; margin-bottom: 0.75rem;
  font-size: 1.25rem; color: #fff;
}
.panel-kb-telegram p,
.panel-kb-telegram .list-info-text,
.panel-kb-telegram .list-info-title {
  color: #e1e1e1; font-size: 0.95rem;
}
.panel-kb-telegram ul.list-info-v {
  padding-left: 1.25rem; margin-top: 0.75rem;
}
.panel-kb-telegram ul.list-info-v li {
  margin-bottom: 1rem;
}
.panel-kb-telegram a {
  color: var(--primary, #4eaaff);
  text-decoration: underline;
}
.panel-kb-telegram a:hover {
  color: var(--primary-hover, #7ecbff);
}

/* ====================================================================
   2025-05-06: Styling für Häufige Support-Anfragen im Ticket-Formular
   ==================================================================== */
.section.mt-4 { margin-top: 2rem; }
.section-header .section-title i { margin-right: 0.5em; color: var(--color-accent); }
.section-body.p-0    { padding: 0; }
.panel.panel-accent-blue .list-group-flush .list-group-item {
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 0.75rem 1rem;
}
.panel.panel-accent-blue .list-group-flush .list-group-item:last-child {
  border-bottom: none;
}
.panel.panel-accent-blue .list-group-item a {
  display: block; color: #fff; font-weight: 500; text-decoration: none;
}
.panel.panel-accent-blue .list-group-item a:hover {
  text-decoration: underline; color: var(--primary-hover, #7ecbff);
}

/* =========================================================================
   Voucher Card Styles auf viewinvoice (für beide Module)
   ========================================================================= */
.vc-card {
  background-color: var(--color-danger, #c0392b);
  background-image: linear-gradient(rgba(255,255,255,0.05),
                                    rgba(255,255,255,0.05));
  color: #fff; border-radius: 0.5rem; overflow: hidden;
  margin: 1rem auto; max-width: 100%;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
.vc-card-header { display: none; }
.vc-card-body {
  padding: 1rem;
  border-top-left-radius: 0.5rem;
  border-top-right-radius:0.5rem;
}
.vc-bank-details {
  margin-bottom:1rem; font-size:0.9rem; line-height:1.4;
}
.vc-steps {
  list-style:none; padding-left:0; margin:0 0 1rem;
}
.vc-steps li {
  position:relative; padding-left:2.5rem; margin-bottom:0.75rem;
}
.vc-steps li:before {
  content:attr(data-step); position:absolute; top:0; left:0;
  width:1.6rem; height:1.6rem; background:rgba(0,0,0,0.2);
  border-radius:50%; text-align:center; line-height:1.6rem;
  font-weight:bold; font-size:0.9rem;
}
.vc-steps li a { color:#fff; text-decoration:underline; }
.vc-kb { margin-bottom:1rem; }
.vc-kb a { color:#fff; text-decoration:underline; }
.vc-kb a strong { display:block; font-weight:500; }
.vc-invoice-ref {
  margin:1rem 0; font-size:0.9rem; text-align:center;
}
.vc-card-footer {
  background:rgba(0,0,0,0.1); padding:1rem; text-align:center;
}
.vc-card-footer .btn { width:100%; font-weight:500; }

/* Responsive für Voucher Cards */
@media (max-width:768px) {
  .vc-card { margin:1rem 1rem; }
  .vc-card-body { padding:0.75rem; }
  .vc-bank-details { font-size:0.85rem; }
  .vc-steps { margin-bottom:0.75rem; }
  .vc-steps li { padding-left:2rem; margin-bottom:0.5rem; }
  .vc-steps li:before {
    width:1.4rem; height:1.4rem; line-height:1.4rem; font-size:0.85rem;
  }
  .vc-kb { margin-bottom:0.75rem; }
  .vc-invoice-ref { margin:0.75rem 0; font-size:0.85rem; }
  .vc-card-footer { padding:0.75rem; }
  .vc-card-footer .btn { font-size:0.9rem; padding:0.5rem 0; }
}
@media (max-width:576px) {
  .vc-card {
    width:calc(100% - 2rem)!important; max-width:none!important;
    margin:1rem auto!important; border-radius:0.25rem; box-shadow:none;
  }
  .vc-card-body { padding:0.5rem; }
  .vc-bank-details { font-size:0.8rem; }
  .vc-steps { margin-bottom:0.5rem; }
  .vc-steps li { padding-left:1.8rem; margin-bottom:0.4rem; }
  .vc-steps li:before {
    width:1.2rem; height:1.2rem; line-height:1.2rem; font-size:0.8rem;
  }
  .vc-kb { margin-bottom:0.5rem; }
  .vc-invoice-ref { margin:0.5rem 0; font-size:0.8rem; }
  .vc-card-footer { padding:0.5rem; }
  .vc-card-footer .btn {
    font-size:0.85rem; padding:0.4rem 0;
  }
}

/* ViewInvoice für Plisio Iframe */
.plisio-iframe-wrapper {
  position:relative; overflow:hidden!important;
}
.plisio-iframe-wrapper .plisio-iframe {
  position:relative; left:-18px; width:calc(100% + 36px);
  top:-82px; height:calc(100% + 82px);
}
@media (max-width:859px) {
  .plisio-iframe-wrapper .plisio-iframe {
    top:-82px; height:calc(100% + 82px);
  }
}
@media (min-width:860px) and (max-width:991.98px) {
  .plisio-iframe-wrapper .plisio-iframe {
    top:-102px; height:calc(100% + 102px);
  }
}
@media (min-width:992px) and (max-width:1399px) {
  .plisio-iframe-wrapper .plisio-iframe {
    top:-82px; height:calc(100% + 82px);
  }
}
@media (min-width:1400px) {
  .plisio-iframe-wrapper .plisio-iframe {
    top:-102px; height:calc(100% + 102px);
  }
}
@media (max-width:464px) {
  .plisio-iframe-wrapper { height:700px!important; }
}
@media (min-width:465px) and (max-width:479.98px) {
  .plisio-iframe-wrapper { height:634px!important; }
}
@media (min-width:480px) and (max-width:496.98px) {
  .plisio-iframe-wrapper { height:700px!important; }
}
@media (min-width:497px) {
  .plisio-iframe-wrapper { height:634px!important; }
}


/* =========================================================================
   Updated ViewInvoice Overrides: Consistent Side-Padding & Badge Position
   ========================================================================= */

/* Ensure box-sizing */
.viewinvoice-scale-wrapper {
  box-sizing: border-box !important;
}

/* A) Tablet to Desktop Breakpoint (576px–991px) */
@media (min-width: 576px) and (max-width: 991px) {
  .viewinvoice-scale-wrapper {
    padding: 0 1rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
  }
}

/* B) Desktop (>=992px): wide side padding */
@media (min-width: 992px) {
  .viewinvoice-scale-wrapper {
    padding: 0 200px !important;
  }
}

/* C) Invoice meta row inline layout for >=576px */
@media (min-width: 576px) {
  .viewinvoice-scale-wrapper .invoice-meta-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .viewinvoice-scale-wrapper .invoice-meta-row > .invoice-dates {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .viewinvoice-scale-wrapper .invoice-meta-row > .invoice-status-container {
    flex: 0 0 auto !important;
    text-align: right !important;
  }
}

/* D) Mobile (<576px): badge under title, centered */
@media (max-width: 575px) {
  .viewinvoice-scale-wrapper .invoice-meta-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  .viewinvoice-scale-wrapper .invoice-meta-row > .invoice-status-container {
    order: -1 !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0.5rem 0 !important;
  }
  .viewinvoice-scale-wrapper .invoice-meta-row > .invoice-dates {
    order: 1 !important;
    width: 100% !important;
  }
}

/* E) Prevent date text wrapping */
.viewinvoice-scale-wrapper .invoice-dates .list-info-inline li,
.viewinvoice-scale-wrapper .invoice-dates .list-info-inline .list-info-text,
.viewinvoice-scale-wrapper .invoice-dates .list-info-inline .list-info-title {
  white-space: nowrap !important;
}

/* Maintain consistent spacing in date list */
.viewinvoice-scale-wrapper .invoice-dates .list-info-inline {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}
.viewinvoice-scale-wrapper .invoice-dates .list-info-inline li {
  display: inline-flex !important;
  align-items: baseline !important;
  margin-bottom: 0.25rem !important;
}
.viewinvoice-scale-wrapper .invoice-dates .list-info-inline li:last-child {
  margin-bottom: 0 !important;
}
.viewinvoice-scale-wrapper .invoice-dates .list-info-inline li + li {
  margin-top: 0.25rem !important;
}
.viewinvoice-scale-wrapper .invoice-dates .list-info-inline .list-info-text {
  margin-right: 0.75rem !important;
}

/* END OF OVERRIDES */


/* ================================================================
   NEUE ANPASSUNGEN
   ================================================================ */

/* --------------------------------------------------------
   1) Status-Badge bei 576–767 px nicht mehr am Rand kleben
   -------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 767px) {
  .viewinvoice-scale-wrapper .invoice-meta-row {
    /* seitliche Einrückung für beide Elemente */
    padding: 0 1rem !important;
  }
}


/* --------------------------------------------------------
   2) Vertikale Abstände der Datums-Einträge weiter verkleinern
   -------------------------------------------------------- */
.viewinvoice-scale-wrapper .invoice-dates .list-info-inline li {
  margin-bottom: 0.15rem !important;
}
.viewinvoice-scale-wrapper .invoice-dates .list-info-inline li + li {
  margin-top: 0.15rem !important;
}

/* Nur Abstand zwischen Rechnungsdatum und Fälligkeitsdatum verringern */
.viewinvoice-scale-wrapper .invoice-dates .list-info-inline li:first-child {
  /* Abstand nach unten enger setzen */
  margin-bottom: -0.5rem !important;
}
/* 2. Eintrag (Fälligkeitsdatum) rückt nach oben */
.viewinvoice-scale-wrapper .invoice-dates .list-info-inline li:nth-child(2) {
  margin-top: 0 !important;
}

/* Abstand unter Rechnungsnummer */
.invoice-title {
  padding-bottom: 10px !important;
}

/* Verhindert Umbruch in der Total- und Balance-Zeile */
.page-viewinvoice .invoice .table-condensed .total-row td {
  white-space: nowrap !important;
}












/* ================================================================
   view Ticket
   ================================================================ */
/* ================================================================
   2025-05-07: Staff-Reply Kreis weiß halbtransparent statt rot
   ================================================================ */
.ticket-reply.staff
  .ticket-reply-top
  .client-avatar.client-avatar-md
  .staff-reply {
  /* 1) Stelle sicher, dass kein rotes Bild mehr greift */
  background-image: none !important;
  /* 2) Setze den halbtransparenten weißen Kreis */
  background-color: rgba(255, 255, 255, 0.05) !important;
  /* 3) Erhalte die runde Form und Größe */
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  /* 4) Falls es eine rote Umrandung gibt: */
  border: none !important;
}


/* ====================================================================
   Alle Preis-Zyklus-Angaben (z.B. /mtl, /Jahr etc.) ausblenden auf view chart
   ==================================================================== */
.price-cycle-inline {
  display: none !important;
}

/* ================================================================
   2025-05-07: Edit-Icon (Stift) im Warenkorb ausblenden und deaktivieren
   ================================================================ */
/* Warenkorb: Edit-Icon (Stift) komplett ausblenden und deaktivieren */
.prod-actions .cart-item-actions a.btn-icon {
  display: none !important;
  pointer-events: none !important;
}
















/* ================================================================
   2025-05-09: products.tpl Anpassungen
   
   
   
   ================================================================ */

/* ======================================================
   Bilder
   ====================================================== */

/* ——— Bundle Wrapper ——— */
.product-image-wrapper.bundle {
  display: inline-block;                     
  margin: 0 auto 1rem;                       
  padding: 0.25rem;                          
  border-radius: 0.75rem;                    
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.25);
  overflow: hidden;                          
}

/* ——— Normal Wrapper ——— */
.product-image-wrapper.normal {
  display: inline-block;                     
  margin: 0 auto 1rem;                       
  padding: 0.00rem;      /* hier anpassen, bis es exakt wie Bundle aussieht */
  border-radius: 0.75rem;                    
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.25);
  overflow: hidden;                          
}

/* ——— Bundle Bild ——— */
.product-image-wrapper.bundle img,
.product-image-wrapper.bundle a img {
  display: block;
  margin: 0;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ——— Normal Bild ——— */
.product-image-wrapper.normal img,
.product-image-wrapper.normal a img {
  display: block;
  margin: 0;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.2);
}


/* ======================================================
   Produkt Panel – sanfteres Hervorheben
   ====================================================== */

/* Übergänge definieren */
#products .package {
  transition: 
    transform 0.4s ease-in-out !important,
    box-shadow 0.4s ease-in-out !important;
}

/* === Hover-Effekt: sanftes Reinholen (leichte Skalierung) === */
@media (hover: hover) {
  #products .package:hover {
    transform: scale(1.015) !important;
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.18) !important,
      inset 0 0 6px rgba(255, 255, 255, 0.04) !important;
  }
}

/* === Fokus-Effekt: dezentes Reinholen (minimal) === */
#products .package:focus-within {
  transform: scale(1.01) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.16) !important,
    inset 0 0 4px rgba(255, 255, 255, 0.03) !important;
}



/* ======================================================
   Typografie & Abstände – Produkt-Panels
   ====================================================== */

/* 1) Bild → Titel → Content Abstände */
#products .package .product-image-wrapper {
  margin-bottom: 1rem !important;
}
#products .package .package-title {
  margin: 0.5rem 0 0.75rem !important;
}

/* 2) Paket-Titel */
#products .package .package-title {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--text-heading-color) !important;
}

/* 3) Preis hervorheben */
#products .package .price {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--brand-primary) !important;
  margin-bottom: 0.5rem !important;
}

/* 4) Zyklus-Text dezenter */
#products .package .price-cycle,
#products .package .price-starting-from {
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: var(--text-faded-color) !important;
  margin-left: 0.25rem !important;
}

/* 5) Untertitel / Features */
#products .package .package-subtitle,
#products .package .important-info-panel {
  font-size: 0.875rem !important;
  color: var(--text-body-color) !important;
  margin-bottom: 1rem !important;
}

/* 6) Content-Bereich abschließen */
#products .package .package-body {
  padding-bottom: 1rem !important;
}


/* ======================================================
   Produkt-CTA: Einheitliche Buttons & Hover-Feedback
   ====================================================== */

/* 1) Einheitliche Breite und Abstand */
#products .package .btn-order-now,
#products .package .btn {
  display: block !important;
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  margin: 0.5rem 0 0 !important;
  
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-align: center !important;
}

/* ===========================================================================
   Important-Info-Panels – Grundgerüst
   =========================================================================== */
.important-info-panel {
  background: var(--ui-block-bg) !important;
  border: none !important;
  border-radius: var(--border-radius-sm) !important;
  box-shadow: var(--box-shadow-sm) !important;
  margin: 2rem 0 !important;
  padding: 0 !important; /* wir legen das Padding in panel-heading und panel-body fest */
}

/* ===========================================================================
   Panel-Heading: zentrieren, Farben & Abrundung
   =========================================================================== */
.panel.panel-default.product-card.important-info-panel > .panel-heading {
  display: block !important;            /* Block, damit text-align greift */
  text-align: center !important;        /* zentriert das inline-block .panel-title */
  background-color: rgba(255, 255, 255, 0.05) !important;

}

/* Farb-Akzente je Info-Typ */
.important-info-panel.info-test > .panel-heading {
  color: var(--brand-warning) !important;
}
.important-info-panel.info-paket > .panel-heading {
  color: var(--brand-primary) !important;
}

/* ===========================================================================
   Panel-Title: shrink-to-fit & Icon-Spacing
   =========================================================================== */
.panel.panel-default.product-card.important-info-panel > .panel-heading > .panel-title {
  display: inline-block !important;    /* passt sich der Breite von Icon–Text–Icon an */
  margin: 0 auto !important;           /* zentriert innerhalb des Headings */
}

/* Kreis-Icon im Heading (vor und nach dem Text) */
.panel.panel-default.product-card.important-info-panel
  > .panel-heading
  > .panel-title
  > i.lm-info {
/*  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  padding: 0.4em !important;
  font-size: 1em !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  margin: 0 0.5em !important;          /* gleicher Abstand links & rechts */
}

/* ===========================================================================
   Panel-Body: Listen-Layout & Icon-Position
   =========================================================================== */
.important-info-panel .panel-body {
  padding: 0.75rem 1rem 1rem !important; /* Abstand oben und unten */
}

.important-info-panel .important-info-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.important-info-panel .important-info-item {
  position: relative !important;
  padding-left: 1.75em !important;      /* Platz für das Icon */
  margin-bottom: 0.75em !important;
  color: var(--text-body-color) !important;
  font-size: 0.875rem !important;
}

/* Listen-Icon absolut positionieren */
.important-info-panel .important-info-item > i.lm-info {
  position: absolute !important;
  left: 0 !important;
  top: 0.1em !important;                /* bündig mit erster Textzeile */
  font-size: 1.2em !important;
  line-height: 1 !important;
  color: inherit !important;
}


/* ===========================================================================
   Aufzaehlungs Dots in Info-Panel Paket
   =========================================================================== */

/* Basis: jeder Listenpunkt erhält links Platz für den Punkt */
.important-info-panel .important-info-item {
  position: relative;       /* für absolutes Positionieren des Punktes */
  padding-left: 1.75em;     /* genug Platz für Punkt + Abstand */
  margin-bottom: 0.75em;    /* optionaler Abstand zwischen den Punkten */
  color: var(--text-body-color) !important;
  font-size: 0.875rem !important;
}

/* Der Punkt selbst wird absolut positioniert */
.important-info-panel .important-info-item .info-dot {
  position: absolute;
  left: 0;                  /* ganz links in den padding-left-Bereich */
  top: 0.6em;               /* vertikal zur ersten Textzeile justieren */
  width: 0.5rem;            /* Punkt-Durchmesser */
  height: 0.5rem;
  background-color: currentColor;  /* übernimmt die Textfarbe (= Icon-Farbe) */
  border-radius: 50%;       /* rund */
}


/* ===========================================================================
   Buttons im Info-Panel
   =========================================================================== */



/* ===================================================
   Important-Info-Panel: Text + Button immer in 2 Spalten
   =================================================== */
.important-info-panel .important-info-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.important-info-panel .important-info-list .important-info-item {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  column-gap: 0.5rem !important;    /* Abstand zwischen Text & Button */
  align-items: center !important;   /* Button vertikal zum Text zentrieren */
  margin-bottom: 0.75em !important;
  font-size: 0.875rem !important;
}

/* Reset alter Button-Abstände */
.important-info-panel .important-info-item .btn {
  margin: 0 !important;
}


/* ===================================================
   Produktbeschreibung aus dem Backend
   
   
   =================================================== */


/* ======================================================
   2025-05-XX: Produkt‐Beschreibung (product-clear) mit Farb-Varianten
   ====================================================== */

.product-clear {
  padding: 1rem;
  margin: 1rem 0;
  background: var(--ui-block-bg);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--box-shadow-sm);
  /* Default-Border, wenn keine Variante greift */
  border-left: 1.5px solid var(--brand-info);
}

/* Farb-Varianten per Kategorie */
.product-clear--standard { border-left-color: #FFA500; } /* orange */
.product-clear--multi    { border-left-color: #D12F2F; } /* rot */
.product-clear--triple  { border-left-color: #2E7D32; } /* grün */
.product-clear--familie  { border-left-color: #2E2E2E; } /* dunkelgrau */
.product-clear--paket    { border-left-color: #298DFF; } /* blau */
.product-clear--test     { border-left-color: #E6B800; } /* gelb */

/* ======================================================
   Feature-Box (deine .product-features innerhalb .product-clear)
   ====================================================== */
.product-clear .product-features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;   /* Abstand zwischen den Zeilen */
  margin: 0;
  padding: 0;
}

/* ======================================================
   Einzelne Feature-Zeile: Icon + Text immer gleich ausrichten
   ====================================================== */
.product-clear .product-feature,
.product-clear .product-feature > strong {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

/* Icon-Styling */
.product-clear .product-feature i,
.product-clear .product-feature > strong i {
  flex-shrink: 0;
  font-size: 1rem;
  width: 1rem;
  height: 1rem;
  line-height: 1;
  color: var(--text-body-color) !important;
}

/* Text-Styling */
.product-clear .product-feature__text,
.product-clear .product-feature > strong .product-feature__text {
  font-size: 0.875rem;
  line-height: 1.2;
  margin: 0;
  color: var(--text-body-color);
}

/* Optional: noch etwas enger, aber lesbar */
.product-clear .product-feature + .product-feature {
  margin-top: 0.25rem;
}


/* ---------------------------------------------------------------------------- */
/* Dashboard Telegram Widget 01.06.2025 */
/* Scrollbar für das Telegram-Widget ausblenden (bleibt scrollbar, auch per Touch!) */
/* ---------------------------------------------------------------------------- */

div.telegram-scroll {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
div.telegram-scroll::-webkit-scrollbar {
    width: 0px !important;
    background: transparent !important;
}

/* Weniger Abstand oben in jedem Nachrichten-Item */
.list-group.telegram-news-list .list-group-item {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important; /* Falls Lagom abgerundet hat */
}

/* Optional: Erstes Nachrichten-Item kein Extra-Top-Abstand */
.list-group.telegram-news-list .list-group-item:first-child {
    margin-top: 0 !important;
    padding-top: 0.4rem !important;
}

/* Optional: Panel-Body oben enger machen */
.panel-body .telegram-news-list {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.telegram-news-list .list-group-item {
    padding-left: 8px !important;
    padding-right: 8px !important;
}



/* ================================================================
   2025-06-12: Weitere Anpassungen in Products.tpl
   Border um Boxen / Hintergründe / Preisfarbe
   ================================================================ */
.package.product-clear--standard, .panel.product-clear--standard  { border-color: #FFA500 !important; }
.package.product-clear--multi,    .panel.product-clear--multi     { border-color: #D12F2F !important; }
.package.product-clear--triple,   .panel.product-clear--triple    { border-color: #2E7D32 !important; }
.package.product-clear--familie,  .panel.product-clear--familie   { border-color: #2E2E2E !important; }
.package.product-clear--paket,    .panel.product-clear--paket     { border-color: #298DFF !important; }
.package.product-clear--test,     .panel.product-clear--test      { border-color: #E6B800 !important; }

/* ——————————————
   Produkttafeln: Farbig umrissen
   —————————————— */
#products .package[class*="product-clear--"] {
    border-width: 1.5px !important;
    border-style: solid !important;
}
#products .package.product-clear--standard { border-color: #FFA500 !important; }
#products .package.product-clear--multi    { border-color: #D12F2F !important; }
#products .package.product-clear--triple   { border-color: #2E7D32 !important; }
#products .package.product-clear--familie  { border-color: #2E2E2E !important; }
#products .package.product-clear--paket    { border-color: #298DFF !important; }
#products .package.product-clear--test     { border-color: #E6B800 !important; }



#products .package[class*="product-clear--"]:hover {
  border-width: 1.5px !important;
  /* Optional: Box-Shadow in Borderfarbe passend je Kategorie: */
  box-shadow: 0 0 0 4px rgba(255,165,0,0.13), 0 6px 16px rgba(0,0,0,0.18)!important;
}

/* Speziell je Kategorie - für individuellen Glow */
#products .package.product-clear--standard:hover { box-shadow: 0 0 0 6px rgba(255,165,0,0.14), 0 6px 16px rgba(0,0,0,0.14)!important; }
#products .package.product-clear--multi:hover    { box-shadow: 0 0 0 6px rgba(209,47,47,0.14), 0 6px 16px rgba(0,0,0,0.14)!important; }
#products .package.product-clear--triple:hover   { box-shadow: 0 0 0 6px rgba(46,125,50,0.13), 0 6px 16px rgba(0,0,0,0.13)!important; }
#products .package.product-clear--familie:hover  { box-shadow: 0 0 0 6px rgba(46,46,46,0.13), 0 6px 16px rgba(0,0,0,0.13)!important; }
#products .package.product-clear--paket:hover    { box-shadow: 0 0 0 6px rgba(30,62,168,0.13), 0 6px 16px rgba(0,0,0,0.13)!important; }
#products .package.product-clear--test:hover     { box-shadow: 0 0 0 6px rgba(230,184,0,0.13), 0 6px 16px rgba(0,0,0,0.13)!important; }



#products .package {
  /* Leichter, vertikaler Verlauf, sehr dezent */
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(0,0,0,0.08) 100%);
  /* Sanfte Umrahmung: */
  box-shadow: 0 4px 16px rgba(0,0,0,0.14), 0 1px 3px rgba(0,0,0,0.04);
}

#products .package .price {
  color: #FF2F2F !important;
  font-weight: 700;
}

/* --- Button-Style: einheitliche Breite und Ausrichtung --- */
.important-info-panel.info-default .btn {
  min-width: 150px !important;
  max-width: 200px !important;
  width: 150px !important;
}




/* ================================================================
   2025-06-12: Kategorie Sidebar Icons vor Kategoriename
   ================================================================ */

.sidebar .list-group-item i.lagom-custom-icon,
.main-sidebar .list-group-item i.lagom-custom-icon {

    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;

}



@media (max-width: 767px) {
    .sidebar .list-group-item i.lagom-custom-icon,
    .main-sidebar .list-group-item i.lagom-custom-icon {
        font-size: 1.07em !important;
        min-width: 1.1em !important;
        margin-right: 0.34em !important;
    }
}

/* ================================================================
   2025-06-12: Dünner statischer Rahmen um das Produktbild
   ================================================================ */
/* Grundstyle für alle Produkt-Wrapper mit product-clear--… */
#products .product-image-wrapper[class*="product-clear--"] {
  border-width: 0.5px !important;
  border-style: solid !important;
}

/* Farben pro Kategorie */
#products .product-image-wrapper.product-clear--standard {
  border-color: rgba(255,165,0,0.5) !important;
}
#products .product-image-wrapper.product-clear--multi {
  border-color: rgba(209,47,47,0.5) !important;
}
#products .product-image-wrapper.product-clear--triple {
  border-color: rgba(46,125,50,0.5) !important;
}
#products .product-image-wrapper.product-clear--familie {
  border-color: rgba(0,0,0,0.5) !important;
}
#products .product-image-wrapper.product-clear--paket {
  border-color: rgba(41,141,255,0.5) !important;
}
#products .product-image-wrapper.product-clear--test {
  border-color: rgba(230,184,0,0.5) !important;
}


/* ================================================================
   2025-06-16: Hoover Produkte Startseite
   ================================================================ */

/* Basis-Übergang wie bei Lagom2 */
.vennetvproducts.is-boxed {
  transition: all var(--transition-base);
}

/* Hover-Effekt 1:1 aus Lagom2 übernehmen */
.vennetvproducts.is-boxed:hover {
  transform: translate3d(0, -8px, 0);
  box-shadow: var(--box-shadow-xlg);
}