body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/* ==========================================================
   ITSERVICEKW.DE
   Custom CSS 2026
   Teil 1 – Design System, Reset & Grundlayout
========================================================== */


/* ==========================================================
   DESIGN SYSTEM
========================================================== */

:root {

    --primary: #0073e6;
    --primary-dark: #005bb5;
    --primary-light: #4da3ff;

    --background: #f5f7fa;
    --surface: #ffffff;

    --text: #1f2937;
    --text-light: #6b7280;

    --border: #e5e7eb;

    --radius-small: 6px;
    --radius: 10px;
    --radius-large: 16px;

    --shadow-small: 0 2px 8px rgba(0,0,0,.05);
    --shadow: 0 10px 30px rgba(0,0,0,.08);
    --shadow-large: 0 18px 45px rgba(0,0,0,.12);

    --transition: .25s ease;

    --container: 1400px;
    --content-width: 1200px;

}


/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after {

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    margin: 0;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    font-size: 17px;

    line-height: 1.7;

    color: var(--text);

    background: var(--background);

    -webkit-font-smoothing: antialiased;

}


/* ==========================================================
   CONTAINER
========================================================== */

.inside {

    max-width: var(--container);

    margin: 0 auto;

    padding: 0 40px;

}


/* ==========================================================
   CONTENT
========================================================== */

main {

    max-width: var(--content-width);

    margin: 0 auto;

    padding: 70px 20px;

}


/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    margin: 0;

    color: var(--text);

    font-weight: 700;

    line-height: 1.2;

}

h1 {

    font-size: clamp(40px,5vw,56px);

}

h2 {

    font-size: clamp(30px,3vw,40px);

}

h3 {

    font-size: 24px;

}

p {

    margin: 0 0 20px;

    color: var(--text-light);

}


/* ==========================================================
   LINKS
========================================================== */

a {

    color: inherit;

    text-decoration: none;

    transition: color var(--transition);

}

a:hover {

    color: var(--primary);

}


/* ==========================================================
   BILDER
========================================================== */

img {

    display: block;

    max-width: 100%;

    height: auto;

}


/* ==========================================================
   HEADER
========================================================== */

.header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: var(--surface);

    border-bottom: 1px solid var(--border);

    backdrop-filter: blur(12px);

}


/* ==========================================================
   HEADER LAYOUT
========================================================== */

.header .inside {

    min-height: 88px;

    display: flex;

    align-items: center;

}


/* ==========================================================
   BRAND
========================================================== */

.header-brand {

    display: flex;

    flex-direction: column;

}

.header-brand strong {

    font-size: 26px;

    color: var(--text);

    line-height: 1.1;

}

.header-brand span {

    font-size: 15px;

    color: var(--text-light);

}


/* ==========================================================
   NAVIGATION
========================================================== */

.mod_navigation {

    margin-left: auto;

}

nav.navigation-main ul.level_1 {

    display: flex;

    align-items: center;

    gap: 8px;

    list-style: none;

    margin: 0;

    padding: 0;

}

nav.navigation-main li {

    position: relative;

}

nav.navigation-main a,
nav.navigation-main strong {

    display: block;

    padding: 12px 16px;

    font-size: 16px;

    font-weight: 500;

    color: var(--text);

    transition: color var(--transition);

}

nav.navigation-main a:hover {

    color: var(--primary);

}

nav.navigation-main li.active > strong {

    color: var(--primary);

}
/* ==========================================================
   HERO BASIS
========================================================== */

h1.content-headline {

    max-width: 900px;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 25px;

    text-align: center;

}


.content-text {

    max-width: 760px;

    margin-left: auto;

    margin-right: auto;

    text-align: center;

}


.content-text .rte {

    background: transparent;

    padding: 0;

    box-shadow: none;

}


.content-text .rte p {

    font-size: 20px;

    line-height: 1.7;

    text-align: center;

}
/* ==========================================================
   ÜBERSCHRIFTEN
========================================================== */


h2.content-headline {

    text-align: center;

    font-size: 34px;

    line-height: 1.3;

    margin-top: 70px;

    margin-bottom: 35px;

}


/* blaue Akzentlinie unter H2 */

h2.content-headline {

    border-bottom: 3px solid var(--primary);

    padding-bottom: 15px;

}
/* ==========================================================
   CONTENT ZENTRIERUNG DESKTOP
========================================================== */

#main .inside {

    max-width: var(--content-width);

    margin-left: auto;

    margin-right: auto;

}


/* etwas Luft auf großen Bildschirmen */

@media (min-width: 1200px) {

    main {

        padding-left: 40px;

        padding-right: 40px;

    }

}
/* ==========================================================
   STARTSEITE AUSRICHTUNG
========================================================== */

#article-1 {

    text-align: center;

}


#article-1 .content-text {

    margin-left: auto;

    margin-right: auto;

}


#article-1 .btn {

    display: inline-flex;

    margin: 10px 6px;

}
/* ==========================================================
   HAUPTINHALT ZENTRIEREN
========================================================== */

#main .inside {

    max-width: 1200px;

    margin-left: auto;

    margin-right: auto;

    padding-left: 20px;

    padding-right: 20px;

}
#container {

    max-width: 1200px;

    margin: 0 auto;

}
/* ==========================================================
   HEADER AUSRICHTUNG FINAL
========================================================== */

#header .inside {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 18px 40px;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: flex-start;

}


/* Logo links */

#header .header-brand {

    flex: 0 0 auto;

}


/* Navigation nach rechts */

#header .nav-wrapper {

    margin-left: auto;

}


/* Navigation horizontal */

#header nav.navigation-main ul.level_1 {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 8px;

}
/* ==========================================================
   MOBILE NAVIGATION
========================================================== */

@media (max-width: 1024px) {

    #header .nav-wrapper {

        margin-left: auto;

    }


    #header nav.navigation-main {

        display: block;

    }


    #header nav.navigation-main ul.level_1 {

        display: block;

        flex-direction: column;

    }


    #header nav.navigation-main li {

        display: block;

    }

}
/* ==========================================================
   SERVICE KARTEN
========================================================== */


.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    margin-top: 40px;

    margin-bottom: 60px;

}


.service-card {

    background: #ffffff;

    padding: 30px;

    border-radius: var(--radius);

    box-shadow: var(--shadow-small);

    border: 1px solid var(--border);

    transition: all .25s ease;

    text-align: left;

}


.service-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow);

}


.service-card h3 {

    color: var(--primary);

    font-size: 22px;

    margin-bottom: 15px;

}


.service-card p {

    color: var(--text-light);

    font-size: 16px;

    line-height: 1.7;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {


    .services-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {


    .services-grid {

        grid-template-columns: 1fr;

    }


    .service-card {

        padding: 25px;

    }

}
/* ==========================================================
   BENEFIT KARTEN
   Warum Kunden auf meinen Service setzen
========================================================== */

.benefits-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

    margin-top: 40px;

    margin-bottom: 70px;

}
.benefits-grid .benefit-card {

    display: block;

}

.benefit-card {

    background: var(--surface);

    padding: 25px;

    border-radius: var(--radius);

    border: 1px solid var(--border);

    text-align: center;

    box-shadow: var(--shadow-small);

}


.benefit-card h3 {

    color: var(--primary);

    font-size: 20px;

    margin-bottom: 15px;

}


.benefit-card p {

    color: var(--text-light);

    margin-bottom: 0;

}


/* Tablet */

@media (max-width: 1000px) {

    .benefits-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


/* Mobil */

@media (max-width: 650px) {

    .benefits-grid {

        grid-template-columns: 1fr;

    }

}
/* ==========================================================
   BENEFIT KARTEN
========================================================== */

.benefit-card {

    background: var(--surface);

    padding: 28px 22px;

    border-radius: var(--radius);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-small);

    text-align: center;

    transition: transform .25s ease, box-shadow .25s ease;

}


.benefit-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow);

}


.benefit-card h3 {

    color: var(--primary);

    font-size: 20px;

    margin-bottom: 12px;

}


.benefit-card p {

    margin-bottom: 0;

}


/* Tablet */

@media (max-width: 1000px) {

    .benefits-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


/* Mobil */

@media (max-width: 650px) {

    .benefits-grid {

        grid-template-columns: 1fr;

    }

}
/* ==========================================================
   PROZESS KARTEN
   So funktioniert die Hilfe
========================================================== */


.process-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 40px;

    margin-bottom: 70px;

}


.process-card {

    background: var(--surface);

    padding: 35px 25px;

    border-radius: var(--radius);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-small);

    text-align: center;

}


.process-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 20px;

}


.process-card h3 {

    color: var(--primary);

    margin-bottom: 15px;

}


.process-card p {

    margin-bottom: 0;

}


/* Tablet */

@media (max-width: 1000px) {

    .process-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


/* Mobil */

@media (max-width: 650px) {

    .process-grid {

        grid-template-columns: 1fr;

    }

}
/* ==========================================================
   SERVICEGEBIET
========================================================== */

.location-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 40px;

    margin-bottom: 70px;

}


.location-card {

    background: var(--surface);

    padding: 30px;

    border-radius: var(--radius);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-small);

    text-align: center;

    transition: transform .25s ease, box-shadow .25s ease;

}


.location-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow);

}


.location-card h3 {

    color: var(--primary);

    margin-bottom: 15px;

}


.location-card p {

    margin-bottom: 0;

}


/* Tablet */

@media (max-width: 1000px) {

    .location-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


/* Mobil */

@media (max-width: 650px) {

    .location-grid {

        grid-template-columns: 1fr;

    }

}
/* ==========================================================
   KONTAKT ABSCHLUSS
========================================================== */

.contact-cta {

    background: var(--surface);

    padding: 50px 40px;

    border-radius: var(--radius-large);

    box-shadow: var(--shadow);

    text-align: center;

    margin-top: 50px;

    margin-bottom: 50px;

}


.contact-cta h2 {

    color: var(--text);

    margin-bottom: 20px;

}


.contact-cta p {

    max-width: 800px;

    margin: 0 auto 35px;

    font-size: 18px;

}


/* Button sauber zentrieren */

.contact-cta .btn {

    margin: 0;

}
/* ==========================================================
   CTA BUTTON
========================================================== */

.contact-cta .btn-primary {

    background: var(--primary);

    color: #ffffff;

    border: 2px solid var(--primary);

    padding: 13px 28px;

    border-radius: var(--radius);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-weight: 600;

}


.contact-cta .btn-primary:hover {

    background: var(--primary-dark);

    border-color: var(--primary-dark);

    color: #ffffff;

}
/* ==========================================================
   GLOBALE BUTTONS
========================================================== */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 13px 28px;

    border-radius: var(--radius);

    font-size: 16px;

    font-weight: 600;

    transition: all .25s ease;

    cursor: pointer;

}


.btn-primary {

    background: var(--primary);

    color: #ffffff;

    border: 2px solid var(--primary);

}


.btn-primary:hover {

    background: var(--primary-dark);

    border-color: var(--primary-dark);

    color: #ffffff;

}


.btn-secondary {

    background: transparent;

    color: var(--primary);

    border: 2px solid var(--primary);

}


.btn-secondary:hover {

    background: var(--primary);

    color: #ffffff;

}
/* ==========================================================
   HERO KONTAKT
========================================================== */

.hero-contact {

    margin-top: 30px;

    text-align: center;

}


.hero-contact .phone {

    font-size: 20px;

    margin-bottom: 8px;

}


.hero-contact .phone a {

    color: var(--primary);

    font-weight: 700;

}


.hero-contact .hours {

    color: var(--text-light);

    margin-bottom: 20px;

}


.btn-call {

    background: var(--primary);

    color: #fff;

    border: 2px solid var(--primary);

}


.btn-call:hover {

    background: var(--primary-dark);

    color: #fff;

}
/* ==========================================================
   HERO KONTAKT
========================================================== */

.hero-contact {

    margin-top: 35px;

    text-align: center;

}


.contact-item {

    margin-bottom: 15px;

}


.contact-item strong {

    display: block;

    color: var(--text);

    font-size: 16px;

}


.contact-item a {

    color: var(--primary);

    font-weight: 600;

}


.hero-contact-buttons {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 25px;

    flex-wrap: wrap;

}


.btn-call {

    background: var(--primary);

    color: #fff;

    border: 2px solid var(--primary);

}


.btn-call:hover {

    background: var(--primary-dark);

    color: #fff;

}


.btn-whatsapp {

    background: #25D366;

    color: #fff;

    border: 2px solid #25D366;

}


.btn-whatsapp:hover {

    background: #1da851;

    color: #fff;

}
/* ==========================================================
   FOOTER
========================================================== */

#footer {

    background: #1f2937;

    color: #ffffff;

    margin-top: 70px;

}


#footer .inside {

    max-width: var(--container);

    margin: 0 auto;

    padding: 50px 40px;

}


.footer-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 40px;

}


.footer-column h3 {

    color: #ffffff;

    font-size: 20px;

    margin-bottom: 20px;

}


.footer-column p {

    color: rgba(255,255,255,.75);

    margin-bottom: 15px;

}


.footer-column a {

    color: rgba(255,255,255,.85);

}


.footer-column a:hover {

    color: var(--primary-light);

}


/* Kontakt hervorheben */

.footer-contact a {

    font-weight: 600;

}


/* Tablet */

@media (max-width: 1000px) {

    .footer-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


/* Mobil */

@media (max-width: 650px) {

    .footer-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }


    #footer .inside {

        padding: 40px 20px;

    }

}
/* ==========================================================
   FOOTER NAVIGATION
========================================================== */

#footer .mod_navigation {

    margin-top: 40px;

    padding-top: 25px;

    border-top: 1px solid rgba(255,255,255,.15);

}


#footer .mod_navigation ul {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 25px;

    list-style: none;

    margin: 0;

    padding: 0;

}


#footer .mod_navigation li {

    margin: 0;

}


#footer .mod_navigation a {

    color: rgba(255,255,255,.75);

    font-size: 15px;

}


#footer .mod_navigation a:hover {

    color: #ffffff;

}
/* ==========================================================
   FOOTER CUSTOM NAVIGATION
========================================================== */

#footer .mod_customnav {

    margin-top: 40px;

    padding-top: 25px;

    border-top: 1px solid rgba(255,255,255,.15);

}


#footer .mod_customnav ul.level_1 {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

    list-style: none;

    margin: 0;

    padding: 0;

}


#footer .mod_customnav li {

    margin: 0;

}


#footer .mod_customnav a {

    color: rgba(255,255,255,.75);

    font-size: 15px;

    transition: color .25s ease;

}


#footer .mod_customnav a:hover {

    color: #ffffff;

}
/* ==========================================================
   FOOTER BOTTOM
========================================================== */

.footer-bottom {

    margin-top: 35px;

    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,.15);

    text-align: center;

}


.footer-bottom p {

    margin: 0;

    color: rgba(255,255,255,.65);

    font-size: 14px;

}
/* ==========================================================
   FOOTER ICONS
========================================================== */

.footer-icon {

    display: inline-block;

    width: 24px;

    color: var(--primary-light);

}
/* ==========================================================
   TRUST LINE
========================================================== */

.trust-line {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 35px;

    color: var(--text-light);

    font-size: 16px;

}


.trust-line span {

    white-space: nowrap;

}


/* Mobile */

@media (max-width: 650px) {

    .trust-line {

        flex-direction: column;

        align-items: center;

        gap: 10px;

    }

}
/* ==========================================================
   BENEFITS GRID
   Variante A: 3 Karten oben / 2 Karten unten
========================================================== */

.benefits-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}


/* zweite Reihe mittig ausrichten */

.benefits-grid .benefit-card:nth-child(4) {

    grid-column: 1 / 2;

}


.benefits-grid .benefit-card:nth-child(5) {

    grid-column: 2 / 3;

}


/* Tablet */

@media (max-width: 900px) {

    .benefits-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .benefits-grid .benefit-card:nth-child(4),
    .benefits-grid .benefit-card:nth-child(5) {

        grid-column: auto;

    }

}


/* Mobil */

@media (max-width: 650px) {

    .benefits-grid {

        grid-template-columns: 1fr;

    }

}
/* ==========================================================
   BENEFIT CARDS EINHEITLICHE HÖHE
========================================================== */

.benefits-grid .benefit-card {

    height: 100%;

    display: flex;

    flex-direction: column;

}


.benefits-grid {

    align-items: stretch;

}
/* ==========================================================
   GOOGLE BEWERTUNGEN
========================================================== */

.reviews-section {

    max-width: var(--content-width);

    margin: 70px auto;

    padding: 0 20px;

    text-align: center;

}


.reviews-section h2 {

    margin-bottom: 40px;

}


.reviews-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}


.review-card {

    background: var(--surface);

    padding: 30px;

    border-radius: var(--radius);

    box-shadow: var(--shadow-small);

    text-align: left;

}


.review-stars {

    font-size: 22px;

    margin-bottom: 15px;

}


.review-card p {

    margin-bottom: 20px;

}


.review-card span {

    color: var(--text-light);

    font-size: 15px;

}


/* Button */

.reviews-section .btn {

    display: inline-block;

    margin-top: 40px;

}


/* Tablet */

@media (max-width: 900px) {

    .reviews-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


/* Handy */

@media (max-width: 650px) {

    .reviews-grid {

        grid-template-columns: 1fr;

    }

}
.reviews-section {

    width: 100%;

    padding: 50px 20px 30px;

    margin: 0;

    text-align: center;
     
}
.reviews-section h2 {

    border-bottom: 3px solid var(--primary);

    padding-bottom: 15px;

    
}
.reviews-grid {

    max-width: 1200px;

    margin: 35px auto 0;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}


@media (max-width: 900px) {

    .reviews-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


@media (max-width: 650px) {

    .reviews-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .review-card {

        padding: 20px;

    }


    .review-card p {

        font-size: 16px;

        line-height: 1.6;

    }


    .reviews-section h2 {

        font-size: 26px;

    }

}
/* ==========================================================
   GOOGLE BEWERTUNGEN SLIDER
========================================================== */

.reviews-slider {

    max-width: 500px;

    margin: 40px auto;

}


.review-slide {

    display: none;

}


.review-slide.active {

    display: block;

}


.review-controls {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-top: 25px;

}


.review-controls button {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    border: none;

    background: var(--primary);

    color: white;

    font-size: 28px;

    cursor: pointer;

}


.review-controls button:hover {

    opacity: 0.85;

}
/* ===============================
   Kontaktformular Contao
   =============================== */

.ce_form .formbody {
    max-width: 800px;
    margin: 0 auto;
}

.ce_form .widget {
    margin-bottom: 1.5rem;
}

.ce_form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.ce_form .mandatory {
    color: inherit;
}


/* Eingabefelder */

.ce_form input[type="text"],
.ce_form input[type="email"],
.ce_form select,
.ce_form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    font-size: 1rem;
    background: #ffffff;
    transition: all 0.3s ease;
    box-sizing: border-box;
}


/* Textbereich */

.ce_form textarea {
    min-height: 180px;
    resize: vertical;
}


/* Fokus */

.ce_form input:focus,
.ce_form select:focus,
.ce_form textarea:focus {
    outline: none;
    border-color: #ff8562;
    box-shadow: 0 0 0 3px rgba(255,133,98,0.15);
}


/* Datenschutz Checkbox */

.ce_form .widget-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ce_form .widget-checkbox input {
    width: auto;
    margin-top: 5px;
}


/* Absende-Button */

.ce_form .submit_container {
    margin-top: 1rem;
}

.ce_form input[type="submit"] {
    padding: 14px 30px;
    border: none;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(99deg, #f6d365 0%, #ff8562 100%);
    color: #fff;
    transition: transform 0.2s ease;
}

.ce_form input[type="submit"]:hover {
    transform: translateY(-2px);
}
/* ===============================
   Kontaktformular Button
   =============================== */

.ce_form button.submit {
    display: inline-block;
    padding: 14px 32px;
    border: none;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    background: #0d6efd;
    color: #ffffff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ce_form button.submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    background: #0b5ed7;
}
.hero-logo {
    display: block;
    width: min(100%, 500px);
    height: auto;
    margin-bottom: 28px;
     margin: 0 auto;
}
@media (max-width: 767px) {
    .hero-logo {
        width: min(100%, 330px);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 24px;
    }
}