/* Fullscreen overlay */
html.ka-open, body.ka-open { height: 100%; overflow: hidden; }
#ka-app.ka-fullscreen {
    position: fixed; inset: 0; z-index: 9999;
    background: #f7e9d9; /* soft beige like your mockups */
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: #0d3b2e;
    padding: 24px 18px 90px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: background-image .4s ease-in-out !important;
}

#ka-app.ka-fullscreen a, #ka-app.ka-fullscreen [type=button], #ka-app.ka-fullscreen [type=submit], #ka-app.ka-fullscreen button {
    color: #0d3b2e;
}

#ka-app.ka-fullscreen button:focus,
#ka-app.ka-fullscreen button:active,
#ka-app.ka-fullscreen button:hover
{
    background: none;
}


/* Header logo */
.ka-header { display:flex; align-items:center; margin-bottom: 8px; }
.ka-logo { height: 28px; width:auto; }

/* Topbar */
.ka-topbar { display:flex; align-items:center; gap:12px; }
.ka-back { background:none; border:0; font-size:22px; line-height:1; cursor:pointer; }
.ka-progress { display:flex; align-items:center; gap:12px; flex:1; }
.ka-progress-bar { height:10px; background:#ead8c1; border-radius:999px; flex:1; overflow:hidden; }
.ka-progress-fill { display:block; height:100%; background:#1f6a52; width:0; border-radius:999px; transition:width .25s ease; }
.ka-progress-count { min-width: 60px; text-align:right; opacity:.8; font-weight: bold;}

/* Steps */
.ka-steps { max-width: 980px; margin: 0 auto; padding: 16px 0 40px; }
.ka-step {
    display:none;
}


#ka-app h1,
#ka-app h2,
#ka-app h3,
#ka-app p,
#ka-app .ka-opt-label,
#ka-app .ka-card-title {
    color: inherit;

}

#ka-app h3 {
    font-weight: 700;
    margin: 20px 0;
}


.ka-step.is-active { display:block; }
.ka-step-inner { display:block; }

.ka-steps {
    transition: opacity 0.15s ease;
}
.ka-steps.is-fading {
    opacity: 0;
}


/*Shortcodes*/

/* BMI box */
.ka-bmi-box {
    background: rgba(255,255,255,.6);
    border: 2px solid #efdfc9;
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 12px;
    backdrop-filter: blur(2px);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}
.ka-bmi-box.in { opacity: 1; transform: translateY(0); }
.ka-bmi-box.out { opacity: 0; transform: translateY(6px); }

.ka-bmi-head { font-weight: 600; font-size: 80%; margin-bottom: 6px; display: inline-block; color: white; padding: 1px 7px; border-radius: 5px; letter-spacing: 0.5px;}
.ka-bmi-text { margin: 0; }

.ka-bmi-intro {
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.3;
}

/* Kategorie-Farben (Border) */
.ka-bmi-box.cat-untergewicht   { border-color: #5aa7ff; }
.ka-bmi-box.cat-normalgewicht  { border-color: #1f6a52; }
.ka-bmi-box.cat-uebergewicht   { border-color: #e6a700; }
.ka-bmi-box.cat-fettleibigkeit { border-color: #d33; }

/* Kategorie-Farben (Border) */
.ka-bmi-box.cat-untergewicht .ka-bmi-head   { background: #5aa7ff; }
.ka-bmi-box.cat-normalgewicht .ka-bmi-head  { background: #1f6a52; }
.ka-bmi-box.cat-uebergewicht .ka-bmi-head   { background: #e6a700; }
.ka-bmi-box.cat-fettleibigkeit .ka-bmi-head { background: #d33; }

/* Zielgewicht box */

.ka-ideal-box, .ka-range-box {
    margin-top: 12px;
    text-align: center;
}
.ka-ideal-head { font-weight: 700; margin-bottom: 4px; font-size: 120%;}
.ka-ideal-value { font-weight: 700; font-size: 120%; color: #0d3b2e; }
.ka-ideal-value-small { font-weight: 700; font-size: 100%; color: #0d3b2e; }

.ka-fade-in { animation: kaFade .2s ease; }
@keyframes kaFade { from {opacity:0; transform: translateY(4px);} to {opacity:1; transform:none;} }


/*Zielgewicht Tabelle*/

.ka-goalchart-wrap { margin-top: 16px;     margin-bottom: 26px;}
.ka-goalchart-head {
    text-align: center;
    font-size: 100%;    /* vorher 14px */
    opacity: 1;         /* voll sichtbar */
    margin-bottom: 8px;
}

.ka-goalchart-title {
    text-align: center;
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 12px;
    line-height: 1.2;
}
.ka-goalchart-title .hl { color: #1f6a52; }

/* SVG */
.ka-goalchart-svg {
    width: 100%;
    height: auto;
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: visible !important;
}

.gc-grid { stroke: rgba(0,0,0,.25); stroke-width: 1; }
.gc-axis { stroke: rgba(0,0,0,.25); stroke-width: 2; }
.gc-path { stroke: #1f6a52; stroke-width: 8; fill: none; stroke-linecap: round; filter: drop-shadow(0 2px 22px rgba(0, 0, 0, 0.45)); }
.gc-dot {
    fill: #ffffff;
    stroke: #1f6a52;
    stroke-width: 18px;
    filter: drop-shadow(0 2px 22px rgba(0, 0, 0, 0.45));
}

.gc-badge rect { fill: #1f6a52; }
.gc-badge text {
    fill: #fff;
    font-weight: 700;
    font-size: 100%;
    dominant-baseline: middle;
}

/* X-Achsen-Labels */
.gc-xlabel {
    font-size: 100%;
    opacity: 1;
}

@media (max-width: 578px) {

    .gc-badge rect { fill: #1f6a52; }
    .gc-badge text {
        font-size: 30px;
    }

    /* X-Achsen-Labels */
    .gc-xlabel {
        font-size: 30px;
    }


}

/*Final Table*/

.ka-goaltable-wrap {
    border: 2px solid #efdfc9;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.6);
}

.ka-goaltable {
    font-size: 90%;
    line-height: 1.2;
}

/* Kopf */
.ka-goaltable-head {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    gap: 0;
    padding: 10px 12px;
    background: #fff;
}
.ka-goaltable-head .split { width: 1px; height: 20px; background: #e0d3c1; justify-self: center; }
.ka-goaltable-head .col { text-align: center; font-weight: 700; padding: 0 10px;}

/* Bild */
.ka-goaltable-img img { width: 100%; height: auto; display: block; }

/* Body */
.ka-goaltable-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 12px;
}
.ka-goaltable-body .col { padding: 6px 10px; }
.ka-goaltable-body > div:nth-child(2) { border-left: 1px solid #e0d3c1; }
.ka-goaltable-body .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2px;
    padding: 2px 0;
    flex-direction: column;
    margin-bottom: 4px;
}
.ka-goaltable-body .label { font-weight: 700; }
.ka-goaltable-body .value {  }

/* Dummy-Bars (optional) */
.ka-goaltable-body .bars { display: flex; gap: 3px; margin-top: 6px; width: 100%; }
.ka-goaltable-body .bars span {
    display: block; height: 8px; flex: 1 1 auto; background: #1f6a52; border-radius: 3px;
}
.ka-goaltable-body .bars span.off { background: #e0d3c1; }


/* Angebotsbox */
.ka-plan { max-width: 720px; margin: 30px auto; }

/* Badge-Zeile */
.ka-plan-badge{
    background:#1f6a52; color:#fff; text-transform:uppercase;
    font-weight:800; font-size:.85rem; letter-spacing:.02em;
    text-align:center; padding:8px 10px; border-radius:12px 12px 0 0;
}

/* Box */
.ka-plan-box{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    border:2px solid #1f6a52; border-top:0;
    background:#f3efe7; border-radius:0 0 12px 12px; padding:14px 16px;
}

/* Linke Seite */
.ka-plan-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.ka-plan-dot{
    width:18px; height:18px; border:2px solid #1f6a52; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    background:#e9e2d3; flex:0 0 18px;
}
.ka-plan-dot > span{
    width:8px; height:8px; background:#1f6a52; border-radius:50%; display:block;
}
.ka-plan-main{ display:flex; flex-direction:column; gap:4px; }
.ka-plan-title{ font-weight:800; }
.ka-plan-prices{ display:flex; gap:10px; align-items:baseline; }
.ka-plan-old{ color:#a8a29e; }
.ka-plan-offer{ font-weight:800; color:#0d3b2e; }

/* Rechte Seite */
.ka-plan-right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.ka-plan-weekprice{
    background: #cde5d3;
    color: #0d3b2e;
    font-weight: 900;
    padding: 2px 10px;
    border-radius: 7px;
    text-align: center;
}
.ka-plan-weeklabel{ font-size:.85rem; opacity:.85; }

/* Plan genereiren */
@media (max-width:560px){
    .ka-plan-right{ align-items:center; }
}



/* Container */
.ka-gen-wrap { display:flex; flex-direction:column; align-items:center; gap:16px; }

/* Donut-Gauge */
.ka-gen-gauge { position:relative; width:160px; height:160px; }

/* Der Kreis: conic-gradient basierend auf --p (0..100) */
.gen-donut{
    --p: 0;               /* progress in % */
    --accent: #e6a56d;    /* Fortschrittsfarbe */
    --track:  #e9dfd0;    /* Hintergrundspur */
    width:100%; height:100%;
    border-radius:50%;
    background:
            conic-gradient(var(--accent) calc(var(--p)*1%), var(--track) 0);
    position:relative;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); /* leichter Schatten wie gewünscht */
}
/* Loch in der Mitte für den „Donut“ */
.gen-donut::before{
    content:"";
    position:absolute; inset:12px; /* Dicke des Rings */
    background:#fff;   /* Innenfläche */
    border-radius:50%;
}

/* Prozent-Label */
.gen-label{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:24px; color:#0d3b2e;
}

/* Info-Card (direkt sichtbar) */
.ka-gen-card {
    width:100%; max-width:640px; background:#fff;
    border:2px solid #efdfc9; border-radius:12px;
    padding:16px 18px;
    color:#0d3b2e;
}
.ka-gen-card .gen-title { font-weight:800; margin:0 0 12px; font-size: 100%;}
.ka-gen-card .gen-list { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; }

/* Optional: deaktivierter Weiter-Button sichtbar machen */
.ka-step .ka-next.is-disabled[disabled] { opacity:.5; pointer-events:none; }





/*Testimonial Slider*/

.testimonial-slider .swiper-slide {
    background: #e2d0ba;
    padding: 20px 20px 5px 20px;
    border-radius: 15px;
    margin-bottom: 10px;
}

.testimonial-slider .ka-t-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

span.ka-stars {
    color: #f3af01;
    font-size: 20px;
}


/*Specific Step Styles*/

#ka-app.step-0 .ka-topbar {
    opacity: 0;
}


section.step-8 .ka-image,
section.step-12 .ka-image,
section.step-22 .ka-image {
    width: 150px;
    height: auto;
}
section.step-8 .ka-title,
section.step-12 .ka-title,
section.step-22 .ka-title {
    text-align: left;
    margin-bottom: 30px;
    font-size: 40px;
}

section.step-33 .ka-image {
    text-align: center;
}

/*Swiper JS*/

/* Basis */
.swiper.testimonial-slider { width: 100%; }
.swiper.testimonial-slider .swiper-slide { box-sizing: border-box; }
.ka-testimonial { padding-bottom: 32px; } /* Platz für Bullets */

/* Bullets */
.swiper.testimonial-slider .swiper-pagination {
    position: relative;
    margin-top: 8px;
}
.swiper.testimonial-slider .swiper-pagination-bullet {
    width: 8px; height: 8px;
    opacity: .4;
}
.swiper.testimonial-slider .swiper-pagination-bullet-active {
    opacity: 1;
    background: #0d3b2e;
}

/* Pfeile – nur dezent, innerhalb des Containers */
.swiper.testimonial-slider .swiper-button-prev,
.swiper.testimonial-slider .swiper-button-next {
    color: #0d3b2e;            /* oder currentColor */
    width: 17px;
    height: 17px;
    top: 40%;
}
.swiper.testimonial-slider .swiper-button-prev:after,
.swiper.testimonial-slider .swiper-button-next:after {
    font-size: 20px;           /* kleiner als default */
}
@media (max-width: 640px) {
    .swiper.testimonial-slider .swiper-button-prev,
    .swiper.testimonial-slider .swiper-button-next {
        top: 98%;
    }
}



/* Titles */
.ka-title {
    font-size: clamp(32px, 4.5vw, 48px);
    line-height:1.1;
    text-align:center;
    margin: 24px 0 8px;
    font-weight: 700;
}

.ka-subtitle { text-align:center; font-size: 18px; opacity:.8; }

/* Image cards grid */
/* Standard Grid */
.ka-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 26px;
}
@media (min-width: 900px) {
    .ka-card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
.ka-card-grid { 
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		justify-content: center; /* horizontale Zentrierung */
	}
}

/* Card base */
.ka-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 14px;
    border: 2px solid #efdfc9;
    /*box-shadow: 0 2px 0 rgba(0,0,0,.05);*/
    cursor: pointer;
    text-align: center;
    padding: 0;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ka-card-media img {
    width: 100%;
    height: auto;
    display: block;
}
.ka-card-title {
    padding: 14px 12px 16px;
    font-weight: 700;
    text-wrap: auto;
    font-size: 18px;
}

/* Aktive Karte */
.ka-card.is-selected {
    border-color: #1f6a52;
}

.ka-card:hover {
    background: rgba(255, 255, 255, 0.8) !important;
}

/* ----- Alignment variants ----- */

/* 0 = oben (Grid-Variante) */
.ka-card.align-0 {
    flex-direction: column;
    max-width: 250px;
    margin: 0 auto;
}
.ka-card.align-0 .ka-card-media img {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* 1 = links (volle Breite) */
.ka-card.align-1 {
    flex-direction: row;
    align-items: center;
    text-align: left;
    grid-column: 1 / -1;
}
.ka-card.align-1 .ka-card-media {
    order: -1;
    flex: 0 0 90px;
    height: 90px;
    margin-right: 14px;
}
.ka-card.align-1 .ka-card-media img {
    border-radius: 50%;
    width: 90px;
    height: 90px;
    object-fit: cover;
}

/* 2 = rechts (volle Breite) */
.ka-card.align-2 {
    display: flex;
    align-items: center;
    text-align: left;
    grid-column: 1 / -1;
    padding: 0;
    overflow: hidden;
    flex-direction: row;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    min-height: 90px;
}

.ka-card.align-2 .ka-card-title {
    flex: 1;
    padding: 16px;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: calc(100% - 90px);
}

.ka-card.align-2 .ka-card-media {
    flex: 0 0 90px;
    height: 100%;
    margin-left: auto;
    border-radius: 0;
    overflow: hidden;
    order: 2;
}

.ka-card.align-2 .ka-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0 0 0 14px;
}




.ka-card { background:white; border-radius:14px; border:2px solid #efdfc9; padding:0; cursor:pointer; text-align:center; /*box-shadow:0 2px 0 rgba(0,0,0,.05);*/ }
.ka-card:focus { outline:3px solid #1f6a52; }

/* Baseline: alles unsichtbar, wir blenden gezielt ein */
.ka-card-media img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    display: none;
}

/* Nicht-gendered Medien (inkl. c_gender): Default immer sichtbar */
.ka-card-media:not(.media-gendered) .img-default { display: block; }

/* Gendered Medien:
   - solange KEINE Gender-Klasse auf #ka-app: Default zeigen
   - mit Gender-Klasse: jeweiliges Bild zeigen */
#ka-app:not(.gender-male):not(.gender-female) .ka-card-media.media-gendered .img-default { display: block; }
#ka-app.gender-male   .ka-card-media.media-gendered .img-male   { display: block; }
#ka-app.gender-female .ka-card-media.media-gendered .img-female { display: block; }

/* Wenn Gender gesetzt ist, Default innerhalb gendered-Boxen ausblenden */
#ka-app.gender-male   .ka-card-media.media-gendered .img-default,
#ka-app.gender-female .ka-card-media.media-gendered .img-default { display: none; }





.ka-card-title { display:block; padding:14px 12px 16px; font-weight:700; }

/* Option lists */
.ka-options { display:grid; gap:12px; margin: 22px 0; }
.ka-option { display:block; }
.ka-option input { position:absolute; opacity:0; pointer-events:none; }
.ka-opt-box {
    display:flex;
    align-items:center;
    gap:14px;
    background: #fff;
    border:2px solid #efdfc9;
    border-radius:12px;
    padding:16px;
    min-height: 90px;
}

.ka-option input:checked + .ka-opt-box {
    background:#fff5ea;
    border-color:#1f6a52;
    /*box-shadow: inset 0 0 0 2px #1f6a52; */
}

.ka-opt-label {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}

/* Nur für Multiple-Auswahl */
.ka-options.multiple .ka-option {
    display: block;
    position: relative;
}

/* Checkbox-Input unsichtbar */
.ka-options.multiple .ka-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Box um Text + Custom Checkbox */
.ka-options.multiple .ka-opt-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 2px solid #efdfc9;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

/* kleine Checkbox links */
.ka-options.multiple .ka-opt-check {
    width: 20px;
    height: 20px;
    border: 2px solid #1f6a52;
    border-radius: 4px;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Haken – unsichtbar bis checked */
.ka-options.multiple .ka-opt-check::after {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: rotate(-45deg);
    opacity: 0;
    transition: opacity .2s;
}

/* Text */
.ka-options.multiple .ka-opt-label {
    font-weight: 700;
    color: #0d3b2e;
    font-size: 18px;
    line-height: 1.3;
}

/* Hover */
.ka-options.multiple .ka-option:hover .ka-opt-box {
    border-color: #d8c3a6;
}

/* Zustand checked */
.ka-options.multiple .ka-option input[type="checkbox"]:checked + .ka-opt-box {
    background: #fff5ea;
    border-color: #1f6a52;
}

.ka-options.multiple .ka-option input[type="checkbox"]:checked + .ka-opt-box .ka-opt-check {
    background: #1f6a52;
    border-color: #1f6a52;
}

.ka-options.multiple .ka-option input[type="checkbox"]:checked + .ka-opt-box .ka-opt-check::after {
    border-left-color: #fff;
    border-bottom-color: #fff;
    opacity: 1;
}

.ka-opt-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

span.ka-opt-icon {
    min-width: 40px;
}

.ka-opt-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}


/* Inputs */
.ka-field { margin: 22px 0; }
.ka-field input { width:100%; font-size:18px; padding:14px 16px; border-radius:12px; border:2px solid #efdfc9; background:white; }

/* Step actions */
.ka-step-actions { display:flex; justify-content:center; margin-top:26px; }
.ka-final-submit {
    text-align: center;
}
.ka-submit,
.ka-next {
    appearance:none;
    border:0;
    border-radius:8px;
    padding:12px 24px;
    font-size:18px;
    font-weight:700;
    background:#1f6a52;
    color:white !important;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
}

.ka-submit:hover,
.ka-next:hover
{
    background: #1b5945 !important;
}

.ka-next[disabled] { opacity:.5; filter:grayscale(20%); cursor:not-allowed; }

/* Footer */
.ka-footer { bottom: 0; background: transparent; text-align:center; margin-top: 36px; opacity:.75; padding-bottom: 8px; }