/* mobile.css */

@media screen and (max-width: 768px) {
    /* 1. Resetujemo kontejner da bude Grid sa dvije kolone */
    #step-med-stellung div[style*="gap: 30px"] {
        display: grid !important;
        grid-template-columns: 1fr auto !important; /* Lijeva kolona širi tekst, desna uzima koliko treba za checkbox */
        align-items: start !important;
        gap: 10px !important;
        position: relative !important;
    }

    /* 2. Sređujemo lijevu kolonu (Zanimanja) */
    #step-med-stellung div[style*="flex-direction: column; gap: 15px"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important; /* Razmak između naziva zanimanja */
    }

    /* 3. Sređujemo desnu kolonu (Checkboxovi) - BEZ POZADINE */
    #step-med-stellung div[style*="justify-content: center"]:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important; /* MORA biti isti kao u lijevoj koloni (stavka 2) */
        margin-top: 0 !important;
        padding: 0 !important;
        background: none !important; /* Uklanja bilo kakvu pozadinu */
        box-shadow: none !important; /* Uklanja sjene ako ih ima */
    }

    /* 4. Poravnanje samih elemenata unutar checkbox reda */
    #step-med-stellung div[style*="display: flex; align-items: center; gap: 10px"] {
        background: none !important;
        padding: 0 !important;
        height: 28px; /* Prilagođeno visini radio buttona da budu u ravni */
    }

    /* 5. Fontovi i veličine */
    #step-med-stellung span {
        font-size: 12px !important;
        white-space: nowrap !important;
        color: white !important;
    }

    #step-med-stellung input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }

    #step-med-stellung label {
        font-size: 16px !important;
        line-height: 1.2 !important;
        min-height: 28px;
    }
}


@media (max-width: 768px) {
    .main-logo {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        display: block !important;
        margin: 20px auto 10px auto !important;
        height: 50px !important; /* Ovo je za mobilni */
    }
}

@media (max-width: 768px) {
    /* Glavni kontejner */
    #hero-screen {
        padding: 40px 15px !important;
        justify-content: flex-start !important; /* Pomjera sadržaj malo prema gore na manjim ekranima */
        min-height: 90vh !important;
    }

    /* Naslov - smanjujemo ga da stane u ekran */
    #hero-screen h1 {
        font-size: 32px !important;
        margin-bottom: 20px !important;
    }

    #hero-screen h1 br {
        display: none; /* Uklanjamo fiksni prelaz u novi red da bi tekst prirodno tekao */
    }
    
    /* Podnaslov (Bewährtes Konzept...) */
    #hero-screen p:nth-of-type(1) {
        font-size: 18px !important;
        width: 100% !important;
        margin-bottom: 25px !important;
    }
    
    /* Opisni tekst */
    #hero-screen p:nth-of-type(2) {
        font-size: 16px !important;
        line-height: 1.4 !important;
        max-width: 100% !important;
        margin-bottom: 30px !important;
    }

    #hero-screen p:nth-of-type(2) br {
        display: none; /* I ovdje uklanjamo br za bolji flow */
    }

    /* Dugme - širimo ga skoro preko cijelog ekrana za lakši klik palcem */
    #hero-screen button {
        width: 100% !important;
        max-width: 350px !important;
        padding: 20px 20px !important;
        font-size: 18px !important;
        border-radius: 8px !important; /* Malo zaobljenije ivice bolje izgledaju na mobilnom */
    }

    /* Tekst ispod dugmeta */
    #hero-screen p:last-of-type {
        font-size: 13px !important;
        margin-top: 20px !important;
    }
}

/* mobile.css */

@media (max-width: 768px) {
    /* Glavni naslov koraka */
    #quiz-step-1 h2 {
        font-size: 26px !important;
        margin-bottom: 30px !important;
        padding: 0 10px !important;
    }

    /* Kontejner koji drži dvije opcije */
    #quiz-step-1 div[style*="display: flex"] {
        flex-direction: column !important; /* Stavlja kutije jednu ispod druge */
        gap: 20px !important; /* Smanjuje razmak između kutija */
        padding: 0 10px !important;
    }

    /* Pojedinačne kutije (Mediziner / Ostalo) */
    #quiz-step-1 div[onclick] {
        padding: 30px 20px !important; /* Drastično smanjujemo padding sa 60px */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Naslovi unutar kutija */
    #quiz-step-1 h3 {
        font-size: 20px !important;
    }

    /* Opisni tekst unutar kutija */
    #quiz-step-1 p[style*="font-size: 18px"] {
        font-size: 15px !important;
    }

    /* Strelica (SVG) */
    #quiz-step-1 svg {
        width: 40px !important;
        height: 40px !important;
        margin-top: 20px !important;
    }

    /* Napomena na dnu sa zvjezdicom */
    #quiz-step-1 p[style*="font-size: 16px"] {
        font-size: 14px !important;
        padding: 0 20px !important;
        line-height: 1.4 !important;
    }
}

/* mobile.css */

@media (max-width: 768px) {
    /* Glavni naslov koraka */
    #step-med-stellung h2 {
        font-size: 24px !important;
        margin-bottom: 30px !important;
        line-height: 1.3 !important;
    }

    /* Plava kutija - kontejner */
    #step-med-stellung div[style*="background-color: #3b4c7d"] {
        padding: 25px 15px !important; /* Smanjujemo unutrašnji razmak */
        flex-direction: column !important; /* Sve ide jedno ispod drugog */
        gap: 20px !important;
        border-radius: 20px !important;
    }

    /* Naslov unutar plave kutije (Berufliche Stellung) */
    #step-med-stellung div[style*="min-width: 200px"] {
        min-width: unset !important;
        width: 100% !important;
        font-size: 18px !important;
        margin-bottom: 5px !important;
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 10px;
    }

    /* Uklanjamo veliku žutu zagradu } */
    #step-med-stellung div[style*="font-size: 110px"] {
        display: none !important;
    }

    /* Svi labeli unutar koraka */
    #step-med-stellung label {
        font-size: 16px !important;
        width: 100% !important;
    }

    /* Radio dugmad i Checkboxovi - malo manji za mobilni */
    #step-med-stellung input[type="radio"],
    #step-med-stellung input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        margin-right: 12px !important;
    }

    /* Grupa sa checkboxovima (Nettolohn) */
    #step-med-stellung div[style*="display: flex; align-items: center; gap: 30px"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        width: 100% !important;
    }

    /* Pojedinačni redovi checkboxova */
    #step-med-stellung div[style*="display: flex; align-items: center; gap: 10px"] {
        width: 100% !important;
        background: rgba(255,255,255,0.05); /* Blaga pozadina da se istakne */
        padding: 8px;
        border-radius: 8px;
    }

    /* Donja dugmad (Zurück / Weiter) */
    #step-med-stellung div[style*="margin-top: 50px"] {
        flex-direction: column-reverse !important; /* "Weiter" ide gore, "Zurück" ispod */
        gap: 12px !important;
        width: 100% !important;
        margin-top: 30px !important;
    }

    #step-med-stellung button {
        width: 100% !important;
        padding: 15px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 768px) {

    /* Širimo listu radio dugmadi da zauzme punu širinu kad nema checkboxova sa strane */
    #step-med-stellung div[style*="display: flex; flex-direction: column; gap: 15px; position: relative"] {
        width: 100% !important;
    }

    /* Opcionalno: Smanji font naslova profesija da sve stane bez skrolovanja */
    #step-med-stellung label {
        font-size: 16px !important;
        margin-bottom: 5px !important;
    }
}

@media (max-width: 768px) {
    /* Naslov koraka */
    #step-med-status h2 {
        font-size: 24px !important;
        margin-bottom: 30px !important;
        line-height: 1.3 !important;
        padding: 0 10px !important;
    }

    /* Plava kutija (Kontejner) */
    #step-med-status div[style*="background-color: #3b4c7d"] {
        flex-direction: column !important; /* Stavlja naslov iznad opcija */
        padding: 30px 20px !important;
        gap: 25px !important;
        border-radius: 25px !important;
        align-items: flex-start !important; /* Poravnanje ulijevo */
    }

    /* Naslov unutar plave kutije (Arbeitsverhältnis...) */
    #step-med-status div[style*="min-width: 250px"] {
        min-width: unset !important;
        width: 100% !important;
        font-size: 18px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 10px;
        text-align: center;
    }

    /* Radio opcije */
    #step-med-status label {
        font-size: 17px !important;
        line-height: 1.4 !important;
    }

    #step-med-status input[type="radio"] {
        width: 24px !important;
        height: 24px !important;
        margin-right: 15px !important;
    }

    /* Donja dugmad */
    #step-med-status div[style*="margin-top: 50px"] {
        flex-direction: column-reverse !important; /* Weiter iznad Zurück */
        width: 100% !important;
        gap: 15px !important;
        margin-top: 30px !important;
    }

    #step-med-status button {
        width: 100% !important;
        padding: 15px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 768px) {
    /* Naslov koraka */
    #step-kein-status h2 {
        font-size: 24px !important;
        margin-bottom: 30px !important;
        line-height: 1.3 !important;
        padding: 0 10px !important;
    }

    /* Plava kutija (Kontejner) */
    #step-kein-status div[style*="background-color: #3b4c7d"] {
        flex-direction: column !important; /* Naslov iznad opcija */
        padding: 30px 20px !important;
        gap: 25px !important;
        border-radius: 25px !important;
        align-items: flex-start !important;
    }

    /* Naslov unutar plave kutije (Arbeitsverhältnis...) */
    #step-kein-status div[style*="min-width: 250px"] {
        min-width: unset !important;
        width: 100% !important;
        font-size: 18px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 10px;
        text-align: center;
    }

    /* Radio opcije */
    #step-kein-status label {
        font-size: 17px !important;
        line-height: 1.4 !important;
        align-items: flex-start !important; /* Bolje poravnanje za duži tekst */
    }

    #step-kein-status input[type="radio"] {
        width: 24px !important;
        height: 24px !important;
        margin-right: 15px !important;
        flex-shrink: 0; /* Sprečava da se krug deformiše ako je tekst u dva reda */
        margin-top: 2px;
    }

    /* Donja dugmad (Zurück / Weiter) */
    #step-kein-status div[style*="margin-top: 50px"] {
        flex-direction: column-reverse !important; 
        width: 100% !important;
        gap: 15px !important;
        margin-top: 30px !important;
    }

    #step-kein-status button {
        width: 100% !important;
        padding: 15px !important;
        font-size: 18px !important;
        border-radius: 5px !important;
    }
}

@media (max-width: 768px) {
    /* Naslov sekcije */
    #step-einkommen h2 {
        font-size: 26px !important;
        margin-bottom: 25px !important;
        padding: 0 10px !important;
    }

    /* Plava kutija (Glavni okvir) */
    #step-einkommen div[style*="background-color: #3b4c7d"] {
        padding: 20px 10px !important;
        border-radius: 20px !important;
    }

    /* Labeli (Kartice sa opcijama A i B) */
    #step-einkommen label {
        padding: 15px !important;
        font-size: 16px !important;
        align-items: flex-start !important; /* Poravnanje checkboxa u vrh */
        gap: 10px !important;
    }

    /* Slova A i B */
    #step-einkommen strong {
        font-size: 20px !important;
        margin-right: 8px !important;
    }

    /* Tekstualni dio unutar labela */
    #step-einkommen label > div {
        flex: 1 !important; /* Pusti tekst da zauzme sav prostor lijevo */
    }

    /* Dodatni info tekstovi (žuti i sivi) */
    #step-einkommen div[id="extra-info-med"],
    #step-einkommen div[style*="color: #ccc"] {
        margin-left: 0 !important; /* Ukidamo 42px jer nema mjesta na mobu */
        margin-top: 5px !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    /* Checkboxovi */
    #step-einkommen input[type="checkbox"] {
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important; /* Da se ne zgnječi */
        margin-top: 5px !important;
    }

    /* Donja dugmad (Zurück / Weiter) */
    #step-einkommen div[style*="margin-top: 40px"] {
        flex-direction: column-reverse !important;
        width: 100% !important;
        gap: 12px !important;
        margin-top: 25px !important;
    }

    #step-einkommen button {
        width: 100% !important;
        padding: 15px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 768px) {
    /* Naslov koraka */
    #step-zajednicko-4 h2 {
        font-size: 22px !important;
        margin-bottom: 25px !important;
        line-height: 1.4 !important;
        padding: 0 10px !important;
    }

    /* Plava kutija kontejner */
    #step-zajednicko-4 div[style*="background-color: #3b4c7d"] {
        padding: 20px 15px !important;
        border-radius: 20px !important;
    }

    /* Razmak između labela */
    #step-zajednicko-4 div[style*="display: flex; flex-direction: column; gap: 20px"] {
        gap: 12px !important;
    }

    /* Pojedinačne opcije (Labeli) */
    #step-zajednicko-4 label {
        font-size: 16px !important;
        padding: 15px !important;
        background: rgba(255,255,255,0.05); /* Dodajemo blagu pozadinu za mobilni */
        border-radius: 12px !important;
        border: 1px solid rgba(255,255,255,0.1);
        align-items: center !important;
        min-height: 60px !important;
    }

    /* Slova A, B, C, D */
    #step-zajednicko-4 strong {
        font-size: 20px !important;
        margin-right: 10px !important;
        color: #4a86f7; /* Plava boja za slova da se lakše razlikuju */
    }

    /* Checkboxovi */
    #step-zajednicko-4 input[type="checkbox"] {
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
        margin-left: 10px !important;
    }

    /* Donja dugmad (Zurück / Weiter) */
    #step-zajednicko-4 div[style*="margin-top: 40px"] {
        flex-direction: column-reverse !important;
        width: 100% !important;
        gap: 12px !important;
        margin-top: 30px !important;
    }

    #step-zajednicko-4 button {
        width: 100% !important;
        padding: 16px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 768px) {
    /* Naslov koraka */
    #step-zajednicko-5 h2 {
        font-size: 22px !important;
        margin-bottom: 15px !important;
        line-height: 1.3 !important;
    }

    /* Žuti tekst (Sie können mehr als eine Option auswählen) */
    #step-zajednicko-5 p[style*="color: #ffcc00"] {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }

    /* Plava kutija kontejner */
    #step-zajednicko-5 div[style*="background-color: #3b4c7d"] {
        padding: 15px 10px !important;
        border-radius: 20px !important;
    }

    /* Smanjujemo razmak između redova da sve stane */
    #step-zajednicko-5 div[style*="display: flex; flex-direction: column; gap: 20px"] {
        gap: 10px !important;
    }

    /* Labeli (Opcije A-E) */
    #step-zajednicko-5 label {
        font-size: 15px !important;
        padding: 12px 10px !important;
        background: rgba(255,255,255,0.05);
        border-radius: 10px !important;
        min-height: unset !important;
    }

    /* Slova A, B, C... */
    #step-zajednicko-5 strong {
        font-size: 18px !important;
        margin-right: 8px !important;
        min-width: 20px;
        display: inline-block;
    }

    /* Checkboxovi */
    #step-zajednicko-5 input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0 !important;
    }

    /* Donja dugmad */
    #step-zajednicko-5 div[style*="margin-top: 40px"] {
        flex-direction: column-reverse !important;
        width: 100% !important;
        gap: 10px !important;
        margin-top: 25px !important;
    }

    #step-zajednicko-5 button {
        width: 100% !important;
        padding: 15px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 768px) {
    /* Naslov koraka */
    #step-zajednicko-6 h2 {
        font-size: 22px !important;
        margin-bottom: 10px !important;
        line-height: 1.3 !important;
    }

    /* Žuti tekst instrukcije */
    #step-zajednicko-6 p[style*="color: #ffcc00"] {
        font-size: 14px !important;
        margin-bottom: 15px !important;
    }

    /* Plava kutija kontejner */
    #step-zajednicko-6 div[style*="background-color: #3b4c7d"] {
        padding: 12px 10px !important;
        border-radius: 20px !important;
    }

    /* Smanjujemo razmak između redova da bi svih 6 opcija stalo */
    #step-zajednicko-6 div[style*="display: flex; flex-direction: column; gap: 20px"] {
        gap: 8px !important;
    }

    /* Labeli (Opcije A-F) */
    #step-zajednicko-6 label {
        font-size: 14px !important; /* Neznatno manji font za duge rečenice */
        padding: 10px 12px !important;
        background: rgba(255,255,255,0.05);
        border-radius: 8px !important;
        align-items: flex-start !important; /* Poravnanje checkboxa u vrh pored prve linije teksta */
    }

    /* Slova A, B, C... */
    #step-zajednicko-6 strong {
        font-size: 16px !important;
        margin-right: 8px !important;
        color: #4a86f7;
        min-width: 18px;
    }

    /* Tekst unutar labela (span) */
    #step-zajednicko-6 label span {
        line-height: 1.4 !important;
        padding-right: 5px;
    }

    /* Checkboxovi */
    #step-zajednicko-6 input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
        margin-top: 2px !important; /* Precizno poravnanje sa prvim redom teksta */
    }

    /* Donja dugmad (Zurück / Weiter) */
    #step-zajednicko-6 div[style*="margin-top: 40px"] {
        flex-direction: column-reverse !important;
        width: 100% !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }

    #step-zajednicko-6 button {
        width: 100% !important;
        padding: 14px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 768px) {
    /* Naslov koraka */
    #step-formular h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
    }

    /* Plava kutija */
    #step-formular div[style*="background-color: #3b4c7d"] {
        padding: 20px 15px !important;
        border-radius: 20px !important;
    }

    /* Redovi za Anrede i Titel */
    #step-formular div[style*="display: flex; margin-bottom: 20px"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Naslovi polja (Anrede, Titel, Name...) */
    #step-formular div[style*="width: 180px"] {
        width: 100% !important;
        font-size: 16px !important;
        margin-bottom: 5px !important;
    }

    /* Input polja (Text, Email, Tel) */
    #step-formular div[style*="flex-direction: column; gap: 10px"] div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    #step-formular input[type="text"],
    #step-formular input[type="email"] {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px !important;
        font-size: 16px !important; /* Spriječava auto-zoom na iPhoneu */
    }

    /* Grid za erreichbarkeit (vrijeme dostupnosti) */
    #step-formular div[style*="display: grid"] {
        grid-template-columns: repeat(2, 1fr) !important; /* Dva stupca umjesto tri */
        gap: 10px !important;
    }

    #step-formular div[style*="display: grid"] label {
        font-size: 14px !important;
        background: rgba(255,255,255,0.05);
        padding: 8px;
        border-radius: 5px;
        display: flex;
        align-items: center;
    }

    /* Donja napomena sa zvjezdicom */
    #step-formular p[style*="font-size: 13px"] {
        font-size: 12px !important;
        padding: 0 10px !important;
    }

    /* Dugmad na dnu */
    #step-formular div[style*="margin-top: 30px"] {
        flex-direction: column-reverse !important;
        width: 100% !important;
    }

    #step-formular button {
        width: 100% !important;
        padding: 15px !important;
    }
}

@media (max-width: 768px) {
    /* Gornji dio sa zakonima (DSGVO) */
    #step-final-submit h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
        padding: 0 10px !important;
    }

    #step-final-submit p[style*="font-size: 14px"] {
        font-size: 11px !important;
        padding: 0 15px !important;
    }

    /* Plava kutija (Glavni kontejner) */
    #step-final-submit div[style*="background-color: #3b4c7d"] {
        padding: 40px 20px !important;
        border-radius: 30px !important; /* Nešto manji radijus za mob */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Glavni naslov JETZT ABSENDEN */
    #step-final-submit h1 {
        font-size: 34px !important; /* Drastično smanjeno sa 70px */
        margin-bottom: 30px !important;
        letter-spacing: 1px !important;
    }

    /* Ikona koverte */
    #submit-kviz img {
        width: 140px !important; /* Smanjeno sa 200px */
        padding: 15px !important;
    }

    /* Katanac pored koverte */
    #submit-kviz div[style*="position: absolute"] {
        right: -10px !important;
        bottom: 5px !important;
        font-size: 18px !important;
    }

    /* Tekst "Auf Symbol klicken" */
    #step-final-submit div[style*="background-color: #566794"] {
        width: 100% !important;
        padding: 12px 0 !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        margin-top: 30px !important;
    }
}

@media (max-width: 768px) {
    /* Kontejner za Thank You sekciju */
    #step-thank-you {
        justify-content: flex-start !important; /* Da krene od vrha ako je ekran mali */
        padding-top: 40px !important;
    }

    /* Slika doktora */
    #step-thank-you img[alt="Mediziner"] {
        max-width: 250px !important; /* Smanjujemo sa 400px */
        margin-bottom: 20px !important;
    }

    /* Horizontalna linija */
    #step-thank-you hr {
        width: 90% !important;
        margin-bottom: 25px !important;
    }

    /* Glavni naslov (Danke...) */
    #step-thank-you h2 {
        font-size: 22px !important; /* Sa 38px na 22px */
        line-height: 1.4 !important;
        padding: 0 10px !important;
        margin-bottom: 30px !important;
    }

    /* Tekstualne informacije na dnu */
    #step-thank-you div[style*="margin-top: 60px"] {
        margin-top: 30px !important;
        font-size: 14px !important;
        padding: 0 15px !important;
    }

    #step-thank-you div[style*="margin-top: 60px"] p {
        margin-bottom: 15px !important;
    }

    /* Brojevi telefona - da ne pucaju u čudne redove */
    #step-thank-you span[style*="font-weight: bold"] {
        display: block;
        margin-top: 5px;
        font-size: 15px;
    }

    /* Dugme na dnu */
    #step-thank-you div[style*="margin-top: 50px"] {
        margin-top: 35px !important;
        width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    #step-thank-you a {
        display: block !important; /* Dugme preko cijele širine */
        padding: 15px 20px !important;
        font-size: 18px !important;
        text-align: center;
    }
    
}