/* =========================================================
   Hardanger / Flatsome Grundsystem
   Schlank, UX-Builder-freundlich, ohne starre Grid-Logik
   ========================================================= */

:root{
  --ha-primary:#006bb4;
  --ha-secondary:#e20617;
  --ha-accent:#ec6701;
  --ha-accent-strong:#d95e00;

  --ha-text-strong:#24364f;
  --ha-text:#31455d;
  --ha-text-soft:#50647d;
  --ha-muted:#60728a;
  --ha-text-faint:#8997a9;

  --ha-border:rgba(36,54,79,.10);
  --ha-border-strong:rgba(36,54,79,.14);
  --ha-soft:rgba(36,54,79,.035);

  --ha-surface:#ffffff;
  --ha-surface-soft:#fbfdff;

  --ha-radius-box:16px;
  --ha-radius-inner:12px;
  --ha-radius-button:10px;
  --ha-radius-pill:999px;

  --ha-shadow-soft:0 10px 22px rgba(20,41,65,.05);
  --ha-shadow:0 14px 30px rgba(25,45,70,.06);
  --ha-shadow-hover:0 18px 34px rgba(25,45,70,.10);

  --ha-content-width:1180px;
  --ha-content-narrow:920px;
}

/* =========================
   Section / Row
   ========================= */
.ha-sec{
  padding:40px 0;
}

.ha-sec--soft{
  background:linear-gradient(180deg, rgba(0,107,180,.03), rgba(255,255,255,0));
}

.ha-sec--light{
  background:linear-gradient(180deg, rgba(248,251,253,.96), rgba(244,248,251,.94));
}

.ha-row{
  width:min(var(--ha-content-width), calc(100vw - 48px));
  margin:0 auto;
}

.ha-row--narrow{
  width:min(var(--ha-content-narrow), calc(100vw - 48px));
  margin:0 auto;
}

/* Flatsome soll die Columns regeln */
.ha-row .col{
  padding-bottom:0;
}

.ha-col,
.ha-col > .col-inner{
  height:100%;
}

.ha-col > .col-inner{
  display:flex;
  flex-direction:column;
}

/* Etwas kontrollierter Abstand bei gestapelten Boxen */
.ha-stack-sm > * + *{ margin-top:12px; }
.ha-stack-md > * + *{ margin-top:18px; }
.ha-stack-lg > * + *{ margin-top:28px; }

/* =========================
   Content Boxen
   ========================= */
.ha-box,
.ha-content-box{
  width:100%;
  padding:22px;
  border:1px solid var(--ha-border);
  border-radius:var(--ha-radius-box);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,251,253,.96));
  box-shadow:var(--ha-shadow-soft);
  box-sizing:border-box;
}

.ha-content-box{
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.ha-content-box--blue{
  border-color:rgba(0,107,180,.16);
  background:linear-gradient(180deg, rgba(0,107,180,.05), rgba(255,255,255,.98));
}

.ha-content-box--accent{
  border-color:rgba(236,103,1,.14);
  background:linear-gradient(180deg, rgba(255,250,246,.98), rgba(255,255,255,.99));
}

.ha-content-box--center{
  text-align:center;
  align-items:center;
}

.ha-content-box > *:last-child{
  margin-bottom:0;
}

/* =========================
   Medien
   ========================= */
.ha-media{
  overflow:hidden;
  border-radius:var(--ha-radius-box);
  box-shadow:var(--ha-shadow-soft);
  background:rgba(36,54,79,.04);
}

.ha-media img{
  display:block;
  width:100%;
  height:auto;
}

.ha-media--ratio-43{
  aspect-ratio:4/3;
}

.ha-media--ratio-43 img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================
   Typografie
   ========================= */
.ha-kicker{
  display:inline-block;
  margin:0 0 8px;
  color:var(--ha-primary);
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ha-title{
  margin:0 0 12px;
  color:var(--ha-text-strong);
  font-size:clamp(30px, 4vw, 42px);
  line-height:1.05;
  letter-spacing:-.035em;
}

.ha-title--md{
  font-size:clamp(24px, 3vw, 32px);
  line-height:1.1;
}

.ha-title--sm{
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.025em;
}

.ha-title--line{
  position:relative;
  padding-left:16px;
}

.ha-title--line::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:5px;
  height:26px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(226,6,23,.96), rgba(226,6,23,.75));
}

.ha-text{
  margin:0 0 1em;
  color:var(--ha-text);
  line-height:1.75;
}

.ha-text--soft{
  color:var(--ha-text-soft);
}

.ha-text--small{
  font-size:14px;
  line-height:1.6;
}

/* =========================
   Badges / Meta
   ========================= */
.ha-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.ha-badges--center{
  justify-content:center;
}

.ha-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border:1px solid rgba(0,107,180,.20);
  border-radius:var(--ha-radius-pill);
  background:rgba(0,107,180,.06);
  color:var(--ha-text-strong);
  font-size:13px;
  font-weight:900;
  line-height:1.2;
  text-decoration:none;
}

.ha-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  margin:0;
  color:var(--ha-muted);
  font-size:14px;
  font-weight:700;
  line-height:1.5;
}

/* =========================
   Faktenliste
   ========================= */
.ha-facts{
  display:grid;
  gap:14px;
}

.ha-fact{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border:1px solid rgba(36,54,79,.08);
  border-radius:var(--ha-radius-inner);
  background:linear-gradient(180deg, rgba(0,107,180,.04), rgba(255,255,255,.98));
}

.ha-fact__label{
  color:var(--ha-muted);
  font-size:14px;
  font-weight:800;
  line-height:1.45;
}

.ha-fact__value{
  color:var(--ha-text-strong);
  font-size:18px;
  font-weight:900;
  line-height:1.2;
  text-align:right;
}

/* =========================
   USP-Liste
   ========================= */
.ha-usps{
  display:grid;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}

.ha-usp{
  position:relative;
  padding:16px 18px 16px 34px;
  border:1px solid rgba(236,103,1,.14);
  border-radius:var(--ha-radius-inner);
  background:linear-gradient(180deg, rgba(255,250,246,.98), rgba(255,255,255,.98));
  color:var(--ha-text-strong);
  font-size:14px;
  line-height:1.6;
  font-weight:800;
}

.ha-usp::before{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--ha-accent);
  transform:translateY(-50%);
}

/* =========================
   Karten / Teaser
   ========================= */
.ha-teaser{
  width:100%;
  min-height:100%;
  padding:22px;
  border:1px solid var(--ha-border);
  border-radius:var(--ha-radius-box);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,251,253,.96));
  box-shadow:var(--ha-shadow-soft);
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.ha-teaser:hover{
  transform:translateY(-2px);
  box-shadow:var(--ha-shadow-hover);
  border-color:rgba(36,54,79,.14);
}

.ha-teaser__title{
  margin:0 0 10px;
  color:var(--ha-text-strong);
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.025em;
}

.ha-teaser__text{
  margin:0 0 14px;
  color:var(--ha-text-soft);
  line-height:1.7;
}

.ha-teaser__footer{
  margin-top:auto;
  padding-top:8px;
}

/* =========================
   Buttons
   ========================= */
.ha-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:12px 18px;
  border:0;
  border-radius:var(--ha-radius-button);
  cursor:pointer;
  text-decoration:none;
  font-size:15px;
  font-weight:900;
  line-height:1.2;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}

.ha-btn:hover{
  transform:translateY(-1px);
}

.ha-btn--primary{
  color:#fff;
  background:linear-gradient(180deg, #0b78bf 0%, #0068ad 100%);
  box-shadow:0 12px 24px rgba(0,107,180,.16);
}

.ha-btn--accent{
  color:#fff;
  background:linear-gradient(180deg, #f2841b 0%, #ec6701 100%);
  box-shadow:0 14px 28px rgba(236,103,1,.24);
}

.ha-btn--ghost{
  color:var(--ha-primary);
  background:#fff;
  border:1px solid rgba(0,107,180,.20);
  box-shadow:0 10px 18px rgba(0,107,180,.08);
}

.ha-btn--sm{
  min-height:40px;
  padding:10px 14px;
  font-size:14px;
}

.ha-btn--lg{
  min-height:52px;
  padding:14px 24px;
  font-size:16px;
}

.ha-btn--block{
  display:flex;
  width:100%;
}

/* =========================
   Utilities
   ========================= */
.ha-text-center{ text-align:center !important; }
.ha-mb-0{ margin-bottom:0 !important; }
.ha-mb-sm{ margin-bottom:10px !important; }
.ha-mb-md{ margin-bottom:18px !important; }
.ha-mb-lg{ margin-bottom:28px !important; }

@media (max-width: 1100px){
  .ha-row,
  .ha-row--narrow{
    width:min(100%, calc(100vw - 32px));
  }
}

@media (max-width: 849px){
  .ha-sec{
    padding:28px 0;
  }

  .ha-box,
  .ha-content-box,
  .ha-teaser{
    padding:18px;
  }

  .ha-title{
    font-size:clamp(26px, 8vw, 34px);
  }

  .ha-title--md{
    font-size:24px;
  }

  .ha-title--sm,
  .ha-teaser__title{
    font-size:22px;
  }

  .ha-fact{
    flex-direction:column;
    gap:8px;
  }

  .ha-fact__value{
    text-align:left;
  }

  .ha-btn--block-mobile{
    display:flex;
    width:100%;
  }
}

/* =========================================================
   Hardanger / Flatsome Builder Bindings
   Nur für native UX-Builder-Elemente
   ========================================================= */

/* =========================================
   1) Columns als echte Hardanger-Boxen
   ========================================= */

.ha-box-col > .col-inner,
.ha-card-col > .col-inner,
.ha-panel-col > .col-inner{
  width:100%;
  height:100%;
  padding:22px;
  border:1px solid var(--ha-border);
  border-radius:var(--ha-radius-box);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,251,253,.96));
  box-shadow:var(--ha-shadow-soft);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}

.ha-box-col--accent > .col-inner{
  border-color:rgba(236,103,1,.14);
  background:linear-gradient(180deg, rgba(255,250,246,.98), rgba(255,255,255,.99));
}

.ha-box-col--blue > .col-inner{
  border-color:rgba(0,107,180,.16);
  background:linear-gradient(180deg, rgba(0,107,180,.05), rgba(255,255,255,.98));
}

.ha-box-col--center > .col-inner{
  text-align:center;
  align-items:center;
}

.ha-card-col > .col-inner{
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.ha-card-col:hover > .col-inner{
  transform:translateY(-2px);
  box-shadow:var(--ha-shadow-hover);
  border-color:rgba(36,54,79,.14);
}

/* =========================================
   2) Native Flatsome Buttons
   ========================================= */

a.button.ha-btn,
.button.ha-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:12px 18px;
  border:0;
  border-radius:var(--ha-radius-button);
  cursor:pointer;
  text-decoration:none;
  font-size:15px;
  font-weight:900;
  line-height:1.2;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}

a.button.ha-btn:hover,
.button.ha-btn:hover{
  transform:translateY(-1px);
}

a.button.ha-btn.ha-btn--primary,
.button.ha-btn.ha-btn--primary{
  color:#fff;
  background:linear-gradient(180deg, #0b78bf 0%, #0068ad 100%);
  box-shadow:0 12px 24px rgba(0,107,180,.16);
}

a.button.ha-btn.ha-btn--accent,
.button.ha-btn.ha-btn--accent{
  color:#fff;
  background:linear-gradient(180deg, #f2841b 0%, #ec6701 100%);
  box-shadow:0 14px 28px rgba(236,103,1,.24);
}

a.button.ha-btn.ha-btn--ghost,
.button.ha-btn.ha-btn--ghost{
  color:var(--ha-primary);
  background:#fff;
  border:1px solid rgba(0,107,180,.20);
  box-shadow:0 10px 18px rgba(0,107,180,.08);
}

a.button.ha-btn.ha-btn--sm,
.button.ha-btn.ha-btn--sm{
  min-height:40px;
  padding:10px 14px;
  font-size:14px;
}

a.button.ha-btn.ha-btn--lg,
.button.ha-btn.ha-btn--lg{
  min-height:52px;
  padding:14px 24px;
  font-size:16px;
}

a.button.ha-btn.ha-btn--block,
.button.ha-btn.ha-btn--block{
  display:flex;
  width:100%;
}

a.button.ha-btn.ha-btn--chip,
.button.ha-btn.ha-btn--chip{
  min-height:36px;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  line-height:1.2;
}

/* =========================================
   3) Featured Boxen als Builder-Element
   ========================================= */

.ha-featured-box.icon-box{
  margin:0;
  width:100%;
}

.ha-featured-box .icon-box-img{
  margin-bottom:16px;
}

.ha-featured-box .icon-box-img img,
.ha-featured-box .icon-box-img svg{
  width:auto;
  max-width:76px;
  max-height:76px;
  height:auto;
  display:block;
}

.ha-featured-box .icon-box-text{
  width:100%;
}

.ha-featured-box .icon-box-text > *:last-child{
  margin-bottom:0;
}

.ha-featured-box.icon-box-center{
  text-align:center;
}

.ha-featured-box.icon-box-center .icon-box-img img,
.ha-featured-box.icon-box-center .icon-box-img svg{
  margin:0 auto;
}

.ha-featured-box.icon-box-left{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:16px;
  align-items:start;
  text-align:left;
}

.ha-featured-box.icon-box-left .icon-box-img{
  margin:0;
}

.ha-featured-box.icon-box-left .icon-box-img img,
.ha-featured-box.icon-box-left .icon-box-img svg{
  margin:0;
  max-width:64px;
  max-height:64px;
}

/* =========================================
   4) Native Flatsome Tabs
   Klasse auf Tabgruppe: ha-tabs
   ========================================= */

.ha-tabs.tabbed-content{
  border:1px solid var(--ha-border);
  border-radius:var(--ha-radius-box);
  background:#fff;
  box-shadow:var(--ha-shadow-soft);
  overflow:hidden;
}

.ha-tabs.tabbed-content > ul.nav{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:16px 16px 0;
  margin:0;
}

.ha-tabs.tabbed-content > ul.nav > li{
  margin:0 !important;
  flex:0 0 auto;
}

.ha-tabs.tabbed-content > ul.nav > li > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:154px;
  min-height:72px;
  padding:14px 18px;
  border:1px solid rgba(53,76,101,.11);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,252,.96));
  color:var(--ha-text-strong);
  font-weight:900;
  text-align:center;
  text-decoration:none;
  box-shadow:0 10px 22px rgba(20,41,65,.04);
  transition:transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.ha-tabs.tabbed-content > ul.nav > li > a:hover{
  transform:translateY(-1px);
  border-color:rgba(236,103,1,.28);
  box-shadow:0 14px 26px rgba(20,41,65,.07);
}

.ha-tabs.tabbed-content > ul.nav > li.active > a,
.ha-tabs.tabbed-content > ul.nav > li.current > a{
  border-color:var(--ha-primary);
  background:linear-gradient(180deg, #0b78bf 0%, #006bb5 100%);
  color:#fff;
  box-shadow:0 14px 28px rgba(0,107,180,.18);
}

.ha-tabs.tabbed-content .tab-panels{
  padding:16px;
}

.ha-tabs.tabbed-content .panel{
  color:var(--ha-text);
}

.ha-tabs.tabbed-content .panel > *:last-child{
  margin-bottom:0;
}

/* =========================================
   5) Native Flatsome Accordion
   Klasse auf Accordion: ha-accordion
   ========================================= */

.ha-accordion.accordion{
  display:grid;
  gap:12px;
}

.ha-accordion.accordion .accordion-item{
  border:1px solid var(--ha-border);
  border-radius:var(--ha-radius-box);
  background:#fff;
  box-shadow:var(--ha-shadow-soft);
  overflow:hidden;
}

.ha-accordion.accordion .accordion-title{
  display:block;
  padding:18px 20px;
  color:var(--ha-text-strong);
  font-weight:900;
  text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,251,253,.96));
}

.ha-accordion.accordion .accordion-title:hover{
  color:var(--ha-primary);
}

.ha-accordion.accordion .accordion-item.active > .accordion-title,
.ha-accordion.accordion .accordion-title.active{
  background:linear-gradient(180deg, rgba(0,107,180,.05), rgba(255,255,255,.98));
  color:var(--ha-primary);
}

.ha-accordion.accordion .accordion-inner{
  padding:0 20px 20px;
  color:var(--ha-text);
}

.ha-accordion.accordion .accordion-inner > *:last-child{
  margin-bottom:0;
}

@media (max-width: 849px){
  .ha-box-col > .col-inner,
  .ha-card-col > .col-inner,
  .ha-panel-col > .col-inner{
    padding:18px;
  }

  .ha-tabs.tabbed-content > ul.nav{
    padding:12px 12px 0;
    gap:10px;
  }

  .ha-tabs.tabbed-content > ul.nav > li{
    flex:1 1 calc(50% - 10px);
  }

  .ha-tabs.tabbed-content > ul.nav > li > a{
    width:100%;
    min-width:0;
    min-height:64px;
    padding:12px 14px;
  }

  .ha-tabs.tabbed-content .tab-panels{
    padding:12px;
  }

  .ha-featured-box.icon-box-left{
    grid-template-columns:1fr;
    text-align:center;
  }

  .ha-featured-box.icon-box-left .icon-box-img img,
  .ha-featured-box.icon-box-left .icon-box-img svg{
    margin:0 auto;
  }
}

/* =========================================================
   Vorlage 3 – Builder Overrides / Ergänzungen
   ========================================================= */

/* =========================================
   Native Tabs stärker an Plugin-Optik anlehnen
   Klasse auf [tabgroup]: ha-tabs
   ========================================= */

.ha-tabs.tabbed-content{
  padding:16px;
  border:1px solid var(--ha-border);
  border-radius:var(--ha-radius-box);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,251,253,.96));
  box-shadow:var(--ha-shadow-soft);
  overflow:visible;
}

.ha-tabs.tabbed-content > ul.nav{
  padding:0;
  margin:0 0 16px;
  gap:14px;
}

.ha-tabs.tabbed-content > ul.nav::before,
.ha-tabs.tabbed-content > ul.nav::after,
.ha-tabs.tabbed-content > ul.nav > li > a::before,
.ha-tabs.tabbed-content > ul.nav > li > a::after{
  display:none !important;
  content:none !important;
}

.ha-tabs.tabbed-content > ul.nav > li{
  margin:0 !important;
}

.ha-tabs.tabbed-content > ul.nav > li > a{
  min-width:170px;
  min-height:86px;
  padding:18px 20px;
  border:1px solid rgba(36,54,79,.10);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,250,252,.96));
  color:var(--ha-text-strong);
  font-size:18px;
  font-weight:900;
  line-height:1.15;
  box-shadow:0 10px 20px rgba(20,41,65,.04);
  text-align:center;
  white-space:nowrap;
}

.ha-tabs.tabbed-content > ul.nav > li > a:hover{
  border-color:rgba(0,107,180,.26);
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(20,41,65,.08);
}

.ha-tabs.tabbed-content > ul.nav > li.active > a,
.ha-tabs.tabbed-content > ul.nav > li.current > a{
  margin:0 !important;
  border-color:var(--ha-primary);
  background:linear-gradient(180deg, #3f83ca 0%, #2d6eb3 100%);
  color:#fff;
  box-shadow:0 14px 28px rgba(0,107,180,.18);
}

.ha-tabs.tabbed-content .tab-panels{
  padding:22px;
  border:1px solid rgba(36,54,79,.08);
  border-radius:18px;
  background:#fff;
}

.ha-tabs.tabbed-content .panel > *:last-child{
  margin-bottom:0;
}

/* =========================================
   Native Accordion sauberer und ohne Flatsome-Grau-Icon
   Klasse auf [accordion]: ha-accordion
   ========================================= */

.ha-accordion.accordion{
  gap:14px;
}

.ha-accordion.accordion .accordion-item{
  border:1px solid var(--ha-border);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--ha-shadow-soft);
  overflow:hidden;
}

.ha-accordion.accordion .toggle{
  display:none !important;
}

.ha-accordion.accordion .accordion-title{
  position:relative;
  padding:20px 58px 20px 20px;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,251,253,.96));
  color:var(--ha-text-strong);
  font-size:20px;
  line-height:1.15;
  font-weight:900;
  text-decoration:none;
}

.ha-accordion.accordion .accordion-title::after{
  content:"+";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  color:var(--ha-primary);
  font-size:26px;
  font-weight:700;
  line-height:1;
}

.ha-accordion.accordion .accordion-item.active > .accordion-title,
.ha-accordion.accordion .accordion-title.active{
  color:var(--ha-primary);
  background:linear-gradient(180deg, rgba(0,107,180,.05), rgba(255,255,255,.98));
}

.ha-accordion.accordion .accordion-item.active > .accordion-title::after,
.ha-accordion.accordion .accordion-title.active::after{
  content:"−";
}

.ha-accordion.accordion .accordion-inner{
  padding:0 20px 20px;
}

/* =========================================
   Builder-only Listen
   Klasse auf [ux_text]:
   ha-list ha-list--hook
   ha-list ha-list--check
   ha-list ha-list--cross
   ========================================= */

.ha-list ul,
.ha-list ol{
  list-style:none !important;
  padding-left:0 !important;
  margin:0;
  display:grid;
  gap:12px;
}

.ha-list li{
  position:relative;
  padding-left:34px;
  margin:0 !important;
  color:var(--ha-text);
  line-height:1.7;
}

.ha-list li::marker{
  content:"";
}

/* Angelhaken */
.ha-list--hook li::before{
  content:"";
  position:absolute;
  left:0;
  top:.22em;
  width:20px;
  height:20px;
  border-radius:999px;
  background:rgba(236,103,1,.08);
  border:1px solid rgba(236,103,1,.18);
}

.ha-list--hook li::after{
  content:"";
  position:absolute;
  left:7px;
  top:.52em;
  width:8px;
  height:11px;
  border-right:2px solid var(--ha-accent);
  border-bottom:2px solid var(--ha-accent);
  border-bottom-right-radius:10px;
  transform:rotate(34deg);
}

/* Check */
.ha-list--check li::before{
  content:"";
  position:absolute;
  left:0;
  top:.22em;
  width:20px;
  height:20px;
  border-radius:999px;
  background:rgba(0,107,180,.08);
  border:1px solid rgba(0,107,180,.18);
}

.ha-list--check li::after{
  content:"";
  position:absolute;
  left:7px;
  top:.58em;
  width:8px;
  height:4px;
  border-left:2px solid var(--ha-primary);
  border-bottom:2px solid var(--ha-primary);
  transform:rotate(-45deg);
}

/* Cross */
.ha-list--cross li::before{
  content:"";
  position:absolute;
  left:0;
  top:.22em;
  width:20px;
  height:20px;
  border-radius:999px;
  background:rgba(226,6,23,.08);
  border:1px solid rgba(226,6,23,.16);
}

.ha-list--cross li::after{
  content:"";
  position:absolute;
  left:5px;
  top:.48em;
  width:10px;
  height:10px;
  background:
    linear-gradient(45deg, transparent 43%, rgba(190,34,34,.92) 43%, rgba(190,34,34,.92) 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, rgba(190,34,34,.92) 43%, rgba(190,34,34,.92) 57%, transparent 57%);
}

/* =========================================
   Builder-only Preis-KPI
   Klasse auf [col]: ha-price-col
   Textklassen:
   ha-price-overline
   ha-price-big
   ha-price-sub
   ========================================= */

.col.ha-price-col > .col-inner,
.ha-price-col.col-inner{
  width:100%;
  height:100%;
  padding:24px;
  border:1px solid rgba(0,107,180,.18);
  border-radius:18px;
  background:
    radial-gradient(700px 240px at 15% 0%, rgba(0,107,180,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,250,252,.96));
  box-shadow:0 12px 26px rgba(20,41,65,.06);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}

.ha-price-overline{
  display:inline-block;
  margin:0 0 6px;
  color:var(--ha-primary);
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ha-price-big{
  margin:0;
  color:var(--ha-primary);
  font-size:clamp(42px, 6vw, 68px);
  line-height:.95;
  font-weight:900;
  letter-spacing:-.05em;
}

.ha-price-sub{
  margin:0;
  color:var(--ha-text-soft);
  font-size:14px;
  line-height:1.55;
}

@media (max-width: 849px){
  .ha-tabs.tabbed-content{
    padding:14px;
  }

  .ha-tabs.tabbed-content > ul.nav{
    gap:10px;
    margin-bottom:14px;
  }

  .ha-tabs.tabbed-content > ul.nav > li{
    flex:1 1 calc(50% - 10px);
  }

  .ha-tabs.tabbed-content > ul.nav > li > a{
    width:100%;
    min-width:0;
    min-height:72px;
    padding:14px 12px;
    font-size:16px;
  }

  .ha-tabs.tabbed-content .tab-panels{
    padding:18px;
  }

  .ha-accordion.accordion .accordion-title{
    padding:18px 52px 18px 18px;
    font-size:18px;
  }

  .col.ha-price-col > .col-inner,
  .ha-price-col.col-inner{
    padding:20px;
  }
}

/* =========================================================
   Hardanger List Styles – Flatsome Klassen hart überschreiben
   SVGs liegen im selben Ordner wie diese CSS
   ========================================================= */

/* Basis für alle 3 Listen */
ul.bullet-arrow,
.bullet-arrow ul,
ul.bullet-checkmark,
.bullet-checkmark ul,
ul.bullet-cross,
.bullet-cross ul{
  list-style:none !important;
  padding-left:0 !important;
  margin:0 !important;
  display:grid;
  gap:12px;
}

ul.bullet-arrow li,
.bullet-arrow ul li,
ul.bullet-checkmark li,
.bullet-checkmark ul li,
ul.bullet-cross li,
.bullet-cross ul li{
  position:relative !important;
  list-style:none !important;
  padding-left:34px !important;
  margin:0 !important;
  color:var(--ha-text) !important;
  line-height:1.7 !important;
}

ul.bullet-arrow li::marker,
.bullet-arrow ul li::marker,
ul.bullet-checkmark li::marker,
.bullet-checkmark ul li::marker,
ul.bullet-cross li::marker,
.bullet-cross ul li::marker{
  content:"" !important;
}

/* falls Flatsome eigene Pseudoelemente setzt */
ul.bullet-arrow li::after,
.bullet-arrow ul li::after,
ul.bullet-checkmark li::after,
.bullet-checkmark ul li::after,
ul.bullet-cross li::after,
.bullet-cross ul li::after{
  content:none !important;
}

/* Absätze in Listen sauber halten */
ul.bullet-arrow li p,
.bullet-arrow ul li p,
ul.bullet-checkmark li p,
.bullet-checkmark ul li p,
ul.bullet-cross li p,
.bullet-cross ul li p{
  margin:0 !important;
}

/* -----------------------------------------
   1) bullet-arrow = Angelhaken
   Datei: fischhaken.svg
   ----------------------------------------- */
ul.bullet-arrow li::before,
.bullet-arrow ul li::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:.28em !important;
  width:18px !important;
  height:18px !important;
  background-color:var(--ha-accent) !important;
  -webkit-mask:url("fischhaken.svg") center / contain no-repeat;
  mask:url("fischhaken.svg") center / contain no-repeat;
}

/* -----------------------------------------
   2) bullet-checkmark = Fisch-Icon
   Datei: fische.svg
   ----------------------------------------- */
ul.bullet-checkmark li::before,
.bullet-checkmark ul li::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:.22em !important;
  width:20px !important;
  height:20px !important;
  background-color:var(--ha-primary) !important;
  -webkit-mask:url("fische.svg") center / contain no-repeat;
  mask:url("fische.svg") center / contain no-repeat;
}

/* -----------------------------------------
   3) bullet-cross = Angelrevier-Icon
   Datei: angelrevier.svg
   ----------------------------------------- */
ul.bullet-cross li::before,
.bullet-cross ul li::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:.20em !important;
  width:20px !important;
  height:20px !important;
  background-color:var(--ha-secondary) !important;
  -webkit-mask:url("angelrevier.svg") center / contain no-repeat;
  mask:url("angelrevier.svg") center / contain no-repeat;
}

/* Kleine Feinanpassung mobil */
@media (max-width: 849px){
  ul.bullet-arrow,
  .bullet-arrow ul,
  ul.bullet-checkmark,
  .bullet-checkmark ul,
  ul.bullet-cross,
  .bullet-cross ul{
    gap:10px;
  }

  ul.bullet-arrow li,
  .bullet-arrow ul li,
  ul.bullet-checkmark li,
  .bullet-checkmark ul li,
  ul.bullet-cross li,
  .bullet-cross ul li{
    padding-left:30px !important;
  }

  ul.bullet-arrow li::before,
  .bullet-arrow ul li::before{
    width:16px !important;
    height:16px !important;
  }

  ul.bullet-checkmark li::before,
  .bullet-checkmark ul li::before,
  ul.bullet-cross li::before,
  .bullet-cross ul li::before{
    width:18px !important;
    height:18px !important;
  }
}