/* Koblank GmbH – Entwurf 2026
   Einfache, eigenstaendige CSS-Datei ohne Framework.
*/

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #e9edf0;
    color: #202d3b;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.65;
}

a {
    color: #07599b;
    text-underline-offset: 3px;
}

a:hover {
    color: #003d70;
}

.seite {
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    min-height: 100vh;
}

.kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 26px 6%;
    border-bottom: 1px solid #e5e9ed;
}

.kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.kopf .marke {
    display: block;
    flex: 0 1 900px;
    min-width: 0;
}

.kopf .marke img {
    display: block;
    width: 100%;
    height: auto;
}

.kopf-kontakt {
    flex-shrink: 0;
    white-space: nowrap;
}

.marke {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.marke-name {
    color: #07599b;
    font-size: 31px;
    font-weight: bold;
    letter-spacing: -1px;
}

.marke-zusatz {
    margin-top: 4px;
    color: #647486;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.kopf-kontakt {
    font-size: 14px;
    font-weight: bold;
}

.auftakt {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 7%;
    align-items: center;
    padding: 90px 6% 100px;
}

.rubrik {
    margin: 0 0 18px;
    color: #07599b;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1.7px;
}

h1, h2, h3 {
    line-height: 1.18;
}

h1 {
    margin: 0 0 26px;
    font-size: clamp(38px, 4.6vw, 60px);
    letter-spacing: -1.8px;
}

h2 {
    margin: 0 0 26px;
    font-size: clamp(29px, 3vw, 41px);
    letter-spacing: -0.7px;
}

h3 {
    margin: 0 0 20px;
    font-size: 21px;
}

p {
    margin: 0 0 19px;
}

.einleitung, .lead {
    color: #44576b;
    font-size: 20px;
    line-height: 1.55;
}

.aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    margin-top: 34px;
}

.primaer {
    display: inline-block;
    padding: 13px 21px;
    border-radius: 4px;
    background: #07599b;
    color: white;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
}

.primaer:hover {
    background: #003d70;
    color: white;
}

.sekundaer {
    font-size: 15px;
    font-weight: bold;
}

.auftakt-grafik {
    padding: 32px;
    background: #eaf2f9;
    border: 1px solid #d7e5f1;
    border-radius: 6px;
}

.grafik-titel {
    display: block;
    margin-bottom: 26px;
    font-size: 21px;
    font-weight: bold;
}

.schritt {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #c9dbe9;
}

.schritt b {
    color: #07599b;
    font-size: 14px;
}

.grafik-fuss {
    display: block;
    margin-top: 26px;
    color: #07599b;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
}

.bereich {
    padding: 85px 6%;
    border-top: 1px solid #e5e9ed;
}

.bereich-raster {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 9%;
}

.bereich-raster > div > p:last-of-type {
    margin-bottom: 28px;
}

.hinterlegt {
    background: #f4f7fa;
}

.merkmal, .kontaktbox {
    align-self: start;
    padding: 30px;
    background: #f4f7fa;
    border: 1px solid #e0e7ee;
    border-radius: 5px;
}

.merkmal.weiss {
    background: white;
}

.merkmal ul {
    margin: 0;
    padding-left: 20px;
}

.merkmal li {
    margin-bottom: 12px;
}

.klein {
    margin-top: 25px;
    color: #667789;
    font-size: 13px;
}

.textlink {
    font-size: 15px;
    font-weight: bold;
}

.mail {
    font-size: 20px;
    font-weight: bold;
    overflow-wrap: anywhere;
}

.karten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 35px;
}

.karten article {
    padding: 28px;
    background: white;
    border: 1px solid #e0e7ee;
    border-radius: 5px;
}

.kartennummer {
    display: block;
    margin-bottom: 22px;
    color: #07599b;
    font-size: 13px;
    font-weight: bold;
}

.karten p {
    min-height: 110px;
    color: #526477;
    font-size: 15px;
}

.abschluss {
    padding: 85px 6%;
    background: #12334f;
    color: white;
}

.abschluss .rubrik {
    color: #9ccaf0;
}

.abschluss h2 {
    max-width: 730px;
}

.abschluss > p:not(.rubrik) {
    color: #d5e1eb;
}

.primaer.hell {
    margin-top: 12px;
    background: white;
    color: #12334f;
}

.abschluss-klein {
    margin-top: 25px;
    font-size: 14px;
}

.abschluss-klein a {
    color: white;
}

.fuss {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    padding: 25px 6%;
    color: #647486;
    font-size: 13px;
}

@media (max-width: 760px) {
    body {
        font-size: 16px;
    }

    .kopf {
        padding: 22px 5%;
    }

    .auftakt, .bereich-raster, .karten {
        grid-template-columns: 1fr;
    }

    .auftakt {
        gap: 40px;
        padding: 65px 5%;
    }

    .bereich, .abschluss {
        padding: 60px 5%;
    }

    .karten p {
        min-height: 0;
    }
}

@media (max-width: 440px) {
    .marke-name {
        font-size: 27px;
    }

    .kopf-kontakt {
        font-size: 12px;
    }

    .auftakt-grafik, .merkmal, .kontaktbox, .karten article {
        padding: 23px;
    }
}

/* Aktuelles, Zitate und Kundenbilder */
.neuigkeiten {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.neuigkeiten article {
    border-top: none; /* 1px solid #dce3e9; */
    padding-top: 12px;
}
.neuigkeiten h3 { margin: 0 0 8px; font-size: 19px; }
.neuigkeiten p { margin: 0; }
.zitatbox {
    max-width: 750px;
    margin: 0 auto 40px;
    padding: 25px;
    text-align: center;
    background: white;
    border: 1px solid #dce3e9;
}
.zitatbox p { margin: 10px 0; }
.zitatbild { display: block; max-width: 100%; height: auto; max-height: 180px; margin: 16px auto; }
.kundenueberschrift { margin-top: 35px; }
.kundengalerie {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.kundengalerie a { display: block; }
.kundengalerie img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
@media (max-width: 700px) {
    .neuigkeiten { grid-template-columns: 1fr; }
    .kundengalerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Original-Koblank-Logo */
.marke {
    display: block;
    max-width: 530px;
    flex: 1 1 auto;
}

.marke img {
    display: block;
    width: 100%;
    max-width: 530px;
    height: auto;
}

.zitat-wechsel {
    margin-top: -24px;
    margin-bottom: 38px;
    text-align: center;
    font-size: 14px;
}

@media (max-width: 760px) {
    .kopf {
        flex-wrap: wrap;
    }
}

/* Schreibweise des Produktnamens */
.idee {
    color: #0066cc;
    font-style: italic;
}

/* Blau umrandete Schaltfläche für ideeNet */
.primaer-rahmen {
    background: #ffffff;
    color: #07599b;
    border: 2px solid #07599b;
    padding: 11px 19px;
}

.primaer-rahmen:hover {
    background: #eaf2f9;
    color: #003d70;
}

/* Kleine Zwischenüberschrift für die Kundenbeispiele */
.kundenrubrik {
    margin-top: 45px;
    margin-bottom: 12px;
}

.kundenueberschrift {
    margin-top: 0;
}

/* Abwechselnd weiße und hellgraue Hauptabschnitte */
.bereich.hinterlegt .merkmal,
.bereich.hinterlegt .kontaktbox {
    background: #ffffff;
}

/* Kompaktere vertikale Abstaende auf der Startseite. */
.auftakt {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
}

.bereich {
    padding-top: 45px;
    padding-bottom: 45px;
}

.abschluss {
    padding-top: 45px;
    padding-bottom: 45px;
}

@media (max-width: 760px) {
    .auftakt {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .bereich,
    .abschluss {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}