/* =========================
   ABI SECTION (scoped)
   ========================= */

.abi-section{
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 16px 10px;
  color: #111;
}

.abi-section mark{
  background: #ffeb3b; 
  padding: 0 .25em;
}

.abi-section .abi-head h2{
  margin: 0 0 10px;
  font-size: clamp(1.55rem, 2.4vw, 2.2rem);
  line-height: 1.12;
}

.abi-section .abi-head p{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.45;
  opacity: .9;
}

/* Info-Box */
.abi-section .abi-box{
  margin-top: 18px;
  border-radius: 22px;
  padding: 18px 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  overflow: hidden;
}

.abi-section .abi-box h3{
  margin: 0 0 12px;
  font-size: 1.25rem;
}

.abi-section .abi-features{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 18px;
  margin: 10px 0 14px;
}

.abi-section .abi-feature{
  padding-left: 34px;
  position: relative;
  line-height: 1.38;
  opacity: .95;
  font-size: 1rem;
}


.abi-section .abi-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
  opacity: .9;
}

.abi-section .abi-chip{
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 650;
  font-size: .95rem;
}

.abi-section .abi-highlight{
  margin: 12px 0 0;
  line-height: 1.45;
}

.abi-section .abi-highlight strong{
  background: #ffeb3b; 
  padding: 0 .25em;
}

/* Subhead */
.abi-section .abi-subhead{
  margin: 22px 0 12px;
  text-align: center;
  font-size: 1.15rem;
  opacity: .92;
}

/* States */
.abi-section .abi-states{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.abi-section .abi-state{
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;

  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.abi-section .abi-state:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.10);
}

.abi-section .abi-state-top{
  display: flex;
  gap: 12px;
  align-items: center;
}

.abi-section .abi-flag{ font-size: 1.25rem; }

.abi-section .abi-state-title{
  font-weight: 850;
  font-size: 1.08rem;
  line-height: 1.1;
}

.abi-section .abi-state-sub{
  opacity: .72;
  margin-top: 2px;
  font-size: .95rem;
}

/* CTA pill */
.abi-section .abi-state-cta{
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.7);
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-weight: 750;
  font-size: .98rem;
}

/* Mini tag */
.abi-section .abi-ribbon{
  margin-left: auto;
  font-weight: 850;
  font-size: .74rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.05);
}

/* leichte Farbhints (optional, dezent) */
.abi-section .abi-ribbon.is-by{ background: rgba(255, 215, 0, .18); }
.abi-section .abi-ribbon.is-he{ background: rgba(255, 80, 80, .14); }
.abi-section .abi-ribbon.is-nrw{ background: rgba(60, 180, 120, .14); }

/* MOBILE */
@media (max-width: 900px){
  .abi-section .abi-states{ grid-template-columns: 1fr; }
  .abi-section .abi-features{ grid-template-columns: 1fr; }
  .abi-section .abi-box{ padding: 16px; }
}

/* TOUCH: schöner Click-Feedback */
@media (hover: none){
  .abi-section .abi-state:active{
    transform: scale(.99);
  }
}

/* DARK MODE */
@media (prefers-color-scheme: dark){
  .abi-section{
    color: rgba(255,255,255,.92);
  }

  .abi-section mark{
    background: #ffc94c;
  }
    .abi-section .abi-highlight strong{
    color: #000;          /* Schrift schwarz */
    background: #ffc94c;  /* Gelb bleibt */
  }

  .abi-section .abi-box{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 12px 34px rgba(0,0,0,.45);
  }

  .abi-section .abi-feature::before{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.12);
  }

  .abi-section .abi-chip{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
  }

  .abi-section .abi-state{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
  }

  .abi-section .abi-state:hover{
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
  }

  .abi-section .abi-state-cta{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
  }

  .abi-section .abi-ribbon{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.12);
  }

  .abi-section .abi-ribbon.is-by{ background: rgba(255, 215, 0, .18); }
  .abi-section .abi-ribbon.is-he{ background: rgba(255, 80, 80, .18); }
  .abi-section .abi-ribbon.is-nrw{ background: rgba(60, 180, 120, .18); }
}

.abi-section .abi-feature{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.38;
  font-size: 1rem;
  opacity: .95;
}

.abi-section .abi-icon{
  width: 92px;
  height: 92px;
  flex: 0 0 26px;
  margin-top: 1px;
  border-radius: 8px;
  background: rgba(0,0,0,.04);       /* wirkt wie “Icon-Chip” */
  border: 1px solid rgba(0,0,0,.06);
  padding: 4px;
}

@media (prefers-color-scheme: dark){
  .abi-section .abi-icon{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
  }
}
.abi-section .abi-flag img{
  width: 92px;
  height: 92x;
  display: block;
}
/* === ABI: Mobile linksbündig === */
@media (max-width: 700px){

  .abi-section .abi-box{
    text-align: left;
  }

  .abi-section .abi-box h3{
    text-align: left;
  }

  .abi-section .abi-features{
    justify-items: start;     /* Grid-Inhalte links */
  }

  .abi-section .abi-feature{
    align-items: flex-start; /* Icon + Text sauber links */
    text-align: left;
  }

  .abi-section .abi-meta{
    justify-content: flex-start;
    text-align: left;
  }

  .abi-section .abi-highlight{
    text-align: left;
  }
}
@media (max-width: 700px){
  .abi-section .abi-feature{
    gap: 10px;
  }
}