/* Basis */
:root{
    --accent:#12213a;
    --bg:#efefea;
    --text:#212121;
}

*{ box-sizing:border-box; }
body{
    margin:0;
    font-family:'Roboto', Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    padding-bottom:76px; /* Platz für fixe Fußzeile */
}

/* Container */
header,
.referenzen-modern,
.impressum-bereich{
    max-width:1200px;
    margin:0 auto;
    padding:32px 5vw 0 5vw;
}

/* Typo */
h1{
    font-weight:700;
    margin:0 0 28px 0;
    font-size:clamp(2.2rem, 4vw, 3rem); /* größer als h2 */
    letter-spacing:-1px;
    text-align:left;
}
h2{
    font-weight:700;
    margin:0 0 24px 0;
    font-size:clamp(1.8rem, 3.2vw, 2.6rem); /* gleiche Größe für alle h2 */
    letter-spacing:-0.5px;
    text-align:left; /* nie zentriert */
}
h3{
    margin:0 0 14px 0;
    font-weight:400;
    font-size:1.5rem;
}

/* Intro */
.about-flex{ display:flex; gap:32px; flex-wrap:wrap; align-items:center; }
.about-text{ flex:3; min-width:320px; }
.about-image{ flex:1; min-width:220px; max-width:360px; }
.about-image img{ width:100%; height:auto; border-radius:18px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.about-lead{ font-size:clamp(1.35rem, 2.6vw, 2rem); line-height:1.55; margin-bottom:12px; }

/* Dienstleistungen */
.leistungen{
    display:flex; flex-wrap:wrap; gap:32px; margin:0 0 48px 0;
    justify-content:flex-start; /* Karten links */
}
.leistung{
    flex:1 1 320px; min-width:300px; max-width:410px;
    background:#fff; border-radius:24px;
    box-shadow:0 2px 8px rgba(60,60,60,.05);
    overflow:hidden; display:flex; flex-direction:column;
}
.leistung img{ width:100%; height:230px; object-fit:cover; background:#d2d2d2; }
.leistung-content{ padding:24px 20px 32px 20px; flex:1; }
.leistung-content p{ margin:0; line-height:1.6; font-size:1rem; }

/* Referenzen */
.referenzen-modern{ margin:80px 0 40px 0; }
.referenzen-cards{ display:flex; flex-wrap:wrap; gap:36px; justify-content:flex-start; }
.referenz-card{
    width:200px; background:#fff; border-radius:22px;
    box-shadow:0 3px 16px rgba(40,50,60,.07);
    display:flex; flex-direction:column; align-items:center;
    padding:24px 10px 16px 10px; transition:transform .18s, box-shadow .18s;
}
.referenz-card img{
    width:92px; height:92px; object-fit:cover; border-radius:16px;
    background:#f3f3f3; margin-bottom:16px; box-shadow:0 2px 8px rgba(60,60,60,.08);
}
.referenz-card span{ font-size:1.03rem; text-align:center; color:#223647; }
.referenz-card:hover{ transform:translateY(-8px) scale(1.045); box-shadow:0 6px 32px rgba(28,38,58,.15); }

/* Impressum */
.impressum-bereich{ margin:70px 0 0 0; padding-bottom:50px; }
.impressum-title{ font-size:clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom:36px; font-weight:700; }
.impressum-flex{ display:flex; flex-wrap:wrap; gap:24px; margin-bottom:40px; justify-content:space-between; }
.impressum-block{ min-width:240px; max-width:420px; }
.impressum-block b{ display:block; margin-bottom:7px; font-weight:bold; }
.impressum-unter{
    border-top:1px solid #283649; padding-top:28px; display:flex; flex-wrap:wrap;
    gap:40px; font-size:1.1rem; justify-content:space-between;
}
.impressum-unter>div{ min-width:220px; max-width:330px; text-align:center; }

/* Call Button */
.top-call{
    position:fixed; top:16px; right:5vw; z-index:1000;
    padding:10px 18px; border-radius:22px; background:var(--accent);
    color:#fff; text-decoration:none; font-weight:700; font-size:.98rem;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.top-call:hover{ background:#223c61; }

/* Fixe Fußzeile */
.site-footer{
    position:fixed; left:0; right:0; bottom:0; z-index:1000;
    background:#f7f7f4; border-top:1px solid rgba(0,0,0,.08);
    font-size:.95rem;
}
.footer-inner{
    max-width:1200px; margin:0 auto; padding:12px 5vw; gap:16px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.footer-inner a{ color:var(--accent); text-decoration:none; font-weight:700; }
.footer-inner span, .footer-inner a{ white-space:nowrap; font-size:.95rem; }

/* Responsive */
@media (max-width:1100px){
    .leistungen{ flex-direction:column; align-items:center; }
}
@media (max-width:900px){
    .about-image{ order:-1; max-width:100%; }
    .referenzen-cards{ gap:18px; justify-content:center; }
}
@media (max-width:600px){
    .site-footer{ font-size:.78rem; }
    .footer-inner{ gap:6px; padding:8px 3vw; }
    .footer-inner span, .footer-inner a{ font-size:.8rem; }
}
/* 1) Dienstleistungen Abschnitt nicht zentriert, sondern vollbreit links geführt */
#leistungen{
    max-width: none;        /* überschreibt die Container-Regel */
    margin: 0;              /* kein auto zentrieren */
    padding: 32px 5vw 0 5vw;/* gleiche Innenabstände wie oben */
}
#leistungen h2{ text-align: left; }
#leistungen .leistungen{ justify-content: flex-start; }

/* 2) Impressum über die ganze Bildschirmbreite */
.impressum-bereich{
    max-width: none;        /* volle Breite */
    margin: 70px 0 0 0;
    padding: 0 5vw 50px 5vw;
}

/* 3) Infozeile unten (Fußzeile) über die ganze Bildschirmbreite */
.site-footer{ width: 100%; }
.footer-inner{
    max-width: none;        /* volle Breite */
    width: 100%;
    padding: 12px 5vw;
    justify-content: space-between;
}

/* Text breiter, Bild etwas schmaler */
.about-text {
    flex: 4;   /* vorher 3 */
    min-width: 340px;
}

.about-image {
    flex: 1;   /* bleibt kleiner */
    min-width: 220px;
    max-width: 360px;
}
/* Intro breiterer Text, schmaleres Bild auf Desktop */
@media (min-width: 1000px) {
    .about-flex { gap: 40px; }

    /* Text nimmt ~68 Prozent, Bild ~28 Prozent */
    .about-text {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .about-image {
        flex: 0 0 28% !important;
        max-width: 28% !important;
        min-width: 260px;
    }
    .about-image img {
        width: 100%;
        height: auto;
    }
}

.about-flex {
    display: flex;
    flex-wrap: nowrap; /* verhindert Umbruch */
    align-items: flex-start;
    gap: 40px;
}

.about-text {
    flex: 0 0 60%;   /* Text auf ca. 60% */
    max-width: 60%;
}

.about-image {
    flex: 0 0 40%;   /* Bild auf ca. 40% */
    max-width: 40%;
    min-width: 320px; /* sorgt dafür, dass es sichtbar bleibt */
}
/* Desktop: Text/Bild nebeneinander */
@media (min-width: 1000px) {
    .about-flex { flex-wrap: nowrap; gap: 40px; align-items: flex-start; }
    .about-text  { flex: 0 0 63%; max-width: 63%; }
    .about-image { flex: 0 0 35%; max-width: 35%; min-width: 320px; }
}

/* Mobile/Tablet: Bild oben, volle Breite für beides */
@media (max-width: 999px) {
    .about-flex { flex-wrap: wrap; gap: 20px; }
    .about-image,
    .about-text { flex: 0 0 100% !important; max-width: 100% !important; }
    .about-image { min-width: 0 !important; }
    .about-image img { width: 100%; height: auto; }
    .about-lead { font-size: clamp(1.1rem, 4.5vw, 1.5rem); }
}
/* Footer Standard (Desktop) */
.site-footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    background: #f7f7f4;
    border-top: 1px solid rgba(0,0,0,.08);
    font-size: .95rem;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
}
.footer-inner span,
.footer-inner a {
    white-space: nowrap;
    font-size: .95rem;
    font-weight: 700;
    color: #12213a;
    text-decoration: none;
}

/* Handy-Ansicht: spaltenweise untereinander */
@media (max-width: 600px) {
    .footer-inner {
        flex-direction: column;
        gap: 6px;
        text-align: center;
        padding: 10px 3vw;
    }
    .footer-inner span,
    .footer-inner a {
        font-size: 0.85rem;
        flex: unset;
    }
}