/* Real finalarm CTA-LIST-B2C (kk-tabelle-cta) — framework vars mapped to the new design tokens */
.kk-tabelle-cta{--c-main-1:var(--blue);--c-main-2:var(--navy);--c-surface:#fff;--c-border:var(--grey-200);--c-text:var(--ink);--c-grey:var(--grey-050);--g-1:var(--grad-spark);--r-md:var(--r);--r-lg:var(--r-lg);--r-pill:var(--r-pill);--shadow-sm:var(--shadow-sm);}
.kk-tabelle-cta {
margin-bottom: 15px;
    overflow: auto;
}

.kk-tabelle-cta .text-center {
text-align: center;
}

.kk-tabelle-cta .kk-cta-content {
/*background: var(--c-grey);*/
/*border-radius: var(--r-md);*/
padding: 10px;
}

.kk-tabelle-cta .cta-item {
background: #ffffff;
border-radius: var(--r-lg);
padding: 15px;
margin-bottom: 15px;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: var(--shadow-sm);
}

.kk-tabelle-cta .cta-item p {
margin-bottom: 5px;
color: rgba(0,0,0,0.42);
font-size: 18px;
max-width: 100%;
}

.kk-tabelle-cta .cta-item p span {
font-size: 12px;
}

.kk-tabelle-cta .cta-item h3 {
margin: 0;
text-align: center;
min-width: 100%;
}

.kk-tabelle-cta .cta-item .data-content {
display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.kk-tabelle-cta .cta-item .data-content h3 {
display: none;
}

.kk-tabelle-cta .cta-item .data-content .img-content {
display: flex;
align-items: center;
flex: 1;
}

.kk-tabelle-cta .cta-item .data-content .img-content img {
width: 250px;
}

.kk-tabelle-cta .cta-item .data-content .list-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 18px;
flex: 1;
}

.kk-tabelle-cta .cta-item .data-content .list-content p {
margin: 0 0 9px;
color: var(--c-text);
font-size: 16px;
font-weight: 600;
}

.kk-tabelle-cta .cta-item .data-content .list-content ul {
margin: 0;
padding: 0 0 0 20px;
}

.kk-tabelle-cta .cta-item .data-content .list-content ul li {
font-size: 14px;
line-height: 22px;
}

.kk-tabelle-cta .cta-item .data-content .buttons-content {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
min-height: 100%;
text-align: center;
margin-left: auto;
max-width: 260px;
flex: 0 auto;
}

/* CI: btn btn-primary / btn-secondary übernehmen – Fallback-Styles bleiben erhalten */
/* btn btn-primary / btn-secondary übernehmen Farbe, Radius, Hintergrund */
/* Template-spezifische Overrides: */
.kk-tabelle-cta .cta-item .data-content .buttons-content a {
margin-left: 15px;
}
.kk-tabelle-cta .cta-item .data-content .buttons-content a:first-child {
color:white;
}
.kk-tabelle-cta .cta-item .data-content .buttons-content a + a {
margin-top: 25px;
}

@media (max-width: 720px) {
.kk-tabelle-cta .kk-cta-content {
    background: transparent;
}

.kk-tabelle-cta .cta-item h3 {
    display: none;
}

.kk-tabelle-cta .cta-item .data-content h3 {
    margin: 0.6rem 0;
    display: block;
}

.kk-tabelle-cta .cta-item p {
    text-align: center;
}

.kk-tabelle-cta .cta-item .list-content p {
    text-align: start;
    font-size: 14px;
}

.kk-tabelle-cta .cta-item .data-content .img-content,
.kk-tabelle-cta .cta-item .data-content .img-content img {
    width: 100%;
    max-width: 300px;
}

.kk-tabelle-cta .cta-item ul {
    margin: 0.6rem 0;
}

.kk-tabelle-cta .cta-item .data-content {
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}
.kk-tabelle-cta .cta-item .data-content .list-content {
margin-right:auto;
}
.kk-tabelle-cta .cta-item .data-content .list-content ul li:before {
    width: 25px;
    height: 18px;
    background-size: 18px;
}

.kk-tabelle-cta .cta-item .data-content .list-content ul li {
    font-size: 11px;
}

.kk-tabelle-cta .cta-item .data-content .list-content + .list-content {
    display: none;
}

.kk-tabelle-cta .cta-item .data-content .buttons-content {
    width: 100%;
    max-width: 300px;
    margin-right: auto;
}

.kk-tabelle-cta .cta-item .data-content .buttons-content a {
    width: 100%;
    margin: 0;
    padding: 5px 16px;
    border-radius: var(--r-pill);
}

.kk-tabelle-cta .cta-item .data-content .buttons-content a + a {
    margin-top: 15px;
    border-radius: var(--r-pill);
}

.kk-tabelle-cta .cta-item p span {
    font-size: 9px;
}
}


.item_v2 h3 {text-align: center;font-size: 22px;font-weight: 600;line-height: 28px;margin: 30px 0;width: 100%;max-width: 100%;}
.content_v2 {display: flex;/*margin: 0 -18px;*/justify-content: center;}
.item_v2 {flex: 1;margin: 18px;padding: 18px;border: 1px solid var(--c-border);border-radius: var(--r-md);background: var(--c-grey); max-width: calc(30% - 10px); display: flex;flex-direction: column;}
.item_v2 .img-content {}
.item_v2 .img-content img  {width:100%}
.item_v2 h4 {font-size: 16px;font-weight: 600;line-height: 30px;min-height: 60px;margin: 20px 0 5px;}
#amex-card-models-content-batunet[data-type=amex-card-models-content-Insurance] div+h4 {font-size: 18px;font-weight: 700;min-height: 60px;}
#amex-card-models-content-batunet[data-type=amex-card-models-content-Insurance] h5 {padding-right:10px;    font-size: 14px;}
.item_v2 h5 { display: inline-block; background: var(--c-main-1); color: white; padding: 0 2px 0 18px; margin-left: -18px;    margin-right: -13px; margin-bottom: 12px; border-top-right-radius: var(--r-md); border-bottom-right-radius: var(--r-md); height: 43px; line-height: 43px; font-size: 12px!important; font-weight: 400; /*letter-spacing: 0.05em;*/}
.item_v2 h5 a {color:inherit;text-decoration: inherit;}
.item_v2 h4 + h5 + h4 {font-size: 14px;border: none;margin: 0 0 5px;    min-height: auto;}
.item_v2 .features {    min-height: 240px;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;margin: -6px -4px;border-bottom: 1px solid black;padding-bottom: 10px;margin-bottom: 15px;}
.item_v2 .features span, .item_v2 .detail-list li {background: #ffffff;font-size: 14px;font-weight: 400;padding: 2px 8px;border-radius: var(--r-md);margin: 6px 4px!important; word-break: break-word;}
.item_v2 .detail-list {padding: 0;margin: 0 0 15px;display: block;list-style: none;}
.item_v2 .detail-list li {font-size: 14px;font-weight: 400;line-height: 22px;letter-spacing: 0.05em;text-align: left;margin: 0;font-size: 80%;}
.item_v2 .detail-list li:before {display: none;}
.item_v2 .detail-list li span {float: right; font-size: 80%;}
.item_v2 .buttons-content {display: flex;margin: auto -5px 0;}
/* CI: btn btn-primary / btn-secondary übernehmen – Fallback-Styles bleiben erhalten */
.item_v2 .buttons-content a {color: var(--c-text);background: white;padding: 5px;text-align: center;flex: 1;margin: 0 5px;font-size: 14px;text-decoration: none;border-radius: var(--r-md);}
.item_v2 .buttons-content a.blue {background: var(--g-1);color: white;}
#amex-card-models-content-batunet[data-type].wide-image .kk-cta-content {
    background: transparent;
}

#amex-card-models-content-batunet[data-type].wide-image .kk-cta-content .item_v2 {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#amex-card-models-content-batunet[data-type].wide-image .item_v2 .img-content img {
    width: calc(100% + 38px);
    margin: -19px -19px 0;
    max-width: calc(100% + 38px);
}
@media (min-width: 1024px) {
    #amex-card-models-content-batunet[data-type].wide-image {
        top:-125px;
        margin-bottom: -125px;
        position:relative;
    }
}

.service-info {
    max-width: calc(min(550px, 85%));
    height: 370px;
    max-height: 410px;
}

@media (max-width: 768px) {
    .item_v2 h3  {margin: 16px 0;}
    .content_v2 {/*margin: 0 -8px;*//*flex-wrap: wrap;*/justify-content: flex-start;}
    .item_v2 {margin: 8px;padding: 14px;width: calc(50% - 16px);max-width: calc(70% - 16px);flex: 0 0 65%;}
    .item_v2 .features {     min-height: 210px;}
    .item_v2 .features span {    font-size: 9.6px;padding: 2px 7px;}
    .item_v2 .detail-list li {    font-size: 61%;}
    .item_v2 h4 {   font-size: 13px;}
   .item_v2 h5 {font-size: 10px!important;/*padding-right: 10px;*/height: 30px;line-height: 30px;}
    .item_v2 h4 + h5 + h4 {font-size: 16px !important;}
    .item_v2 .buttons-content {flex-direction: column-reverse;}
    .item_v2 .buttons-content a {font-size : 12px;}
    .item_v2 .buttons-content a + a {margin-bottom:10px}
}

@media (max-width: 440px) {
    .item_v2 {padding: 10px;}
    .item_v2 h4 {
        font-size: 16px !important;
        line-height: 20px !important;
        min-height: 40px !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
    .item_v2 h5 {
        margin-left: -14px;
        margin-right: -9px;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

}

/* button re-skin (unscoped .btn from the framework is intentionally NOT loaded) */
.kk-tabelle-cta .cta-item{margin-bottom:1.1rem!important;border:1px solid var(--grey-200)!important;box-shadow:var(--shadow-xs)!important;border-radius:var(--r-lg)!important;}
.kk-tabelle-cta .cta-item .data-content{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;}
.kk-tabelle-cta .cta-item .data-content>h3{flex-basis:100%;font-family:var(--font-display);color:var(--navy);font-size:1.25rem;margin:0 0 .2rem;}
.kk-tabelle-cta .cta-item>h3:first-child{display:none;}
.kk-tabelle-cta .img-content{flex:0 0 auto;}
.kk-tabelle-cta .img-content img{width:210px;max-width:38vw;border-radius:10px;}
.kk-tabelle-cta .list-content{flex:1 1 200px;min-width:180px;}
.kk-tabelle-cta .list-content p{font-weight:700;color:var(--navy);margin:0 0 .5rem;font-size:.95rem;}
.kk-tabelle-cta .list-content ul{list-style:none;padding:0;margin:0;}
.kk-tabelle-cta .list-content ul li{position:relative;padding-left:28px;margin:.35rem 0;color:var(--muted);font-size:.95rem;line-height:1.45;}
.kk-tabelle-cta .list-content ul li:before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6FEB' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center/contain;}
.kk-tabelle-cta .buttons-content{flex:0 0 auto;display:flex;flex-direction:column;gap:.6rem;min-width:190px;}
.kk-tabelle-cta .buttons-content a{margin:0!important;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:600;font-size:1rem;padding:.85rem 1.4rem;border-radius:var(--r-pill);border:1px solid transparent;text-decoration:none;transition:all .18s var(--ease);white-space:nowrap;}
.kk-tabelle-cta .buttons-content a:first-child,.kk-tabelle-cta .btn-primary{background:var(--coral)!important;color:#fff!important;font-weight:700;box-shadow:0 10px 24px rgba(255,90,79,.32);}
.kk-tabelle-cta .buttons-content a:first-child:hover{background:var(--coral-600)!important;transform:translateY(-1px);}
.kk-tabelle-cta .btn-secondary{background:#fff!important;border:1px solid var(--blue)!important;color:var(--blue)!important;}
.kk-tabelle-cta .btn-secondary:hover{border-color:var(--blue)!important;color:var(--blue)!important;}
.kk-tabelle-cta .cta-item>p{font-size:.78rem;color:var(--faint);margin:.9rem 0 0;line-height:1.5;}
@media(max-width:680px){.kk-tabelle-cta .cta-item .data-content{flex-direction:column;align-items:stretch;}.kk-tabelle-cta .buttons-content{min-width:0;}}

/* Leeres (noch nicht geöffnetes) Affiliate-Modal nie anzeigen — es steht sonst
   als unsichtbarer 922px-Block offscreen und erzeugt horizontalen Overflow */
.amex-modal:empty { display: none !important; }

/* ---- Card-Models-CTA (.item_v2) — Breite, 07.09.2026 ---------------------
   Das Vendor-Skript (amex-card-models-content-mr.js) injiziert sein eigenes CSS
   am Dokumentende und deckelt .item_v2 auf calc(25% - 36px). Bei 3 Karten
   bleiben davon nur ~176px, die Karten wirken gequetscht. Da das Vendor-CSS
   spaeter laedt, ist !important hier noetig (Paritaet, kein Stilbruch).       */
.content_v2 .item_v2,
.kk-cta-content .item_v2 {
  max-width: calc(33.333% - 36px) !important;
}

/* Ab 4 Karten greift der Deckel ohnehin nicht mehr — dann entscheidet die
   Container-Breite. Deshalb bricht der Card-Models-CTA wie der CTA-LIST-B2C
   aus der 940px-Lesespalte aus.                                              */
.wp-block-post-content .card.card-flat:has(> [id^="amex-"][data-type^="amex-card-models-content"]) {
  width: min(1220px, calc(100vw - 60px));
  max-width: none !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}