/* =========================================================
   Mobil-Optimierung (Smartphones & Tablets)
   ========================================================= */

/* Touch-Geräte: keine "fixed"-Hintergründe (auf iPhone unscharf & ruckelig) */
@media (max-width:1024px), (hover:none){
    .page-section, .home-section, .small-section, .banner-section, .bg-dark, [data-background]{
        background-attachment: scroll !important;
    }
}

/* Kein Zoom beim Antippen von Formularfeldern auf dem iPhone (Schrift min. 16px) */
@media (max-width:767px){
    input.form-control, select.form-control, textarea.form-control,
    .contact-form input, .contact-form textarea{
        font-size:16px !important;
        letter-spacing:.02em !important;
        text-transform:none !important;
    }
    input::placeholder, textarea::placeholder{ text-transform:none; letter-spacing:.02em; }
}

@media (max-width:767px){

    html{ -webkit-text-size-adjust:100%; }
    .page{ overflow-x:hidden; }

    /* ---------- Willkommensbanner: eigenes Hochformat-Motiv ---------- */
    #home.home-section{
        background-image:url(../bilder/start-mobile.jpg) !important;
        background-size:cover !important;
        background-position:center 40% !important;
    }

    /* ---------- Überschriften ---------- */
    #about h1{
        font-size:18px; line-height:1.4; letter-spacing:.04em;
        overflow-wrap:break-word; margin:0 0 10px;
    }
    #about center br{ display:none; }
    .section-title{ font-size:20px !important; letter-spacing:.18em !important; line-height:1.45 !important; }
    .section-text, .section-text p{ text-align:left !important; }
    .section-text p[align="justify"]{ text-align:left !important; hyphens:auto; }
    #about .section-text .col-sm-6{ margin-bottom:0 !important; }
    #about .section-text .col-sm-6 p{ margin-bottom:0; }
    #about .section-text .col-sm-6 + .col-sm-6 p{ margin-bottom:20px; }

    /* ---------- Team: Fotos nicht bildschirmfüllend ---------- */
    .team-item{ max-width:280px; margin:0 auto; }
    .team-item-name{ letter-spacing:.2em; }

    /* ---------- leere Bild-Bänder zwischen den Bereichen flacher ---------- */
    .banner-section .mt-140, .banner-section .mt-lg-80{ margin-top:55px !important; }
    .banner-section .mb-140, .banner-section .mb-lg-80{ margin-bottom:55px !important; }
    .banner-section[data-background="bilder/rollover-sasbach.jpg"]{ background-image:url(../bilder/mobil/rollover-sasbach.jpg) !important; }
    .banner-section[data-background="bilder/rollover-lahr.jpg"]{ background-image:url(../bilder/mobil/rollover-lahr.jpg) !important; }
    .banner-section[data-background="bilder/rollover-kirchzarten.jpg"]{ background-image:url(../bilder/mobil/rollover-kirchzarten.jpg) !important; }
    [data-background="bilder/rollover-staufen.jpg"]{ background-image:url(../bilder/mobil/rollover-staufen.jpg) !important; }

    /* ---------- Abstände kompakter ---------- */
    .page-section{ padding-top:60px; padding-bottom:60px; }
    .mb-70{ margin-bottom:40px !important; }

    /* ---------- Trophy-Bereiche ---------- */
    #trophy center img{ max-width:100%; height:auto; }
    #trophy .post-prev-title{ margin-top:12px; }
    #trophy .multi-columns-row > [class*="col-"]{ margin-bottom:30px; }
    #trophy .row > .col-xs-6{ flex:0 0 50%; max-width:50%; margin-bottom:15px !important; }

    /* ---------- Leistungen: Reiter als Schaltflächen ---------- */
    .tpl-alt-tabs{ display:flex !important; flex-wrap:wrap; justify-content:center; gap:8px; padding:0 0 25px !important; border:0 !important; }
    .tpl-alt-tabs > li{ float:none !important; width:auto !important; margin:0 !important; display:block !important; }
    .tpl-alt-tabs > li > a{ display:block; padding:9px 14px !important; border:1px solid #ddd !important; border-radius:20px; font-size:11px !important; letter-spacing:.12em !important; line-height:1.2 !important; color:#666; }
    .tpl-alt-tabs > li > a.active, .tpl-alt-tabs > li > a.active:hover, .tpl-alt-tabs > li > a.active:focus, .tpl-alt-tabs li.active a{ background:#111 !important; border-color:#111 !important; color:#fff !important; }
    .tpl-alt-tabs > li > a .alt-tabs-icon{ display:none; }

    /* ---------- Projekte: 2 Bilder nebeneinander ---------- */
    .works-grid .work-item,
    .container .work-grid-3 .work-item,
    .work-grid-3 .work-item{ width:50% !important; }

    /* ---------- Partner-Logos ---------- */
    section table[with]{ width:100% !important; }
    section table[with] td{ width:33.3% !important; padding:8px 4px; }
    section table[with] img{ width:100% !important; max-width:110px; height:auto; }

    /* ---------- Kontakt & Footer ---------- */
    .footer-copy{ letter-spacing:.08em !important; line-height:1.9; font-size:10px; }
    .footer-copy a{ display:inline-block; }
    .contact-form .btn, .contact-form .submit_btn{ width:100%; }

    /* ---------- Formularseiten ---------- */
    .bewerbung-form .form-control{ height:48px; }
    .bewerbung-form textarea.form-control{ height:auto; }
    .bewerbung-form select.form-control{ height:48px; padding-top:0; padding-bottom:0; }
    #bewerbung-btn, #anfrage-btn{ width:100%; padding-top:16px; padding-bottom:16px; }
    .bewerbung-form .align-right{ text-align:left !important; margin-top:12px; }
    .bewerbung-form .form-check{ padding-left:1.9em; }
    .bewerbung-form .form-check-input{ width:20px; height:20px; margin-left:-1.9em; margin-top:2px; }
    .pa-check{ margin-bottom:6px; }
    .pa-check .form-check-label{ padding:4px 0; display:block; }
    .karriere-head{ padding-top:120px !important; padding-bottom:50px !important; }
    .karriere-head .hs-line-11{ font-size:26px !important; letter-spacing:.15em !important; }
    .karriere-head .hs-line-4{ font-size:12px !important; letter-spacing:.12em !important; line-height:1.7 !important; }
}

/* Auf Touch-Geräten: Upload-Text ohne "hierher ziehen" */
@media (hover:none){
    .pa-drop .pa-drag-txt{ display:none; }
    .pa-drop .pa-tap-txt{ display:inline !important; }
}
.pa-drop .pa-tap-txt{ display:none; }

/* Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
    .wow{ visibility:visible !important; animation:none !important; }
}