/* ==========================================================
   STRETCHFOLIENPROFI – ZENTRALE CUSTOM STYLES

   Basis:
   .sfp-seite

   Seiten mit eigenem Layout:
   .sfp-startseite
   .sfp-umzugseite
   .sfp-kontaktseite

   Gemeinsamer Seitentyp für Rechtstexte:
   .sfp-rechtstext

   Gemeinsame Bausteine:
   .sfp-section
   .sfp-section-header
   .sfp-section-title
   .sfp-section-line
   .sfp-card
   .sfp-info-box
   .sfp-btn
   .sfp-cta

   Stand: 24.09.2026
   ========================================================== */


/* ==========================================================
   1. SEITENBASIS
   ========================================================== */

.sfp-seite,
.sfp-startseite,
.sfp-umzugseite,
.sfp-kontaktseite {
    color: #333333;
    line-height: 1.55;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.sfp-seite *,
.sfp-startseite *,
.sfp-umzugseite *,
.sfp-kontaktseite * {
    box-sizing: border-box;
}


/* ==========================================================
   SEITENÜBERSCHRIFT / H1
   ========================================================== */

.sfp-page-title {
    margin: 24px 0 28px 0;
    padding: 0 0 10px 0;
    color: #044d71;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    border-bottom: 1px solid #e2e5e8;
    position: relative;
}

.sfp-page-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 80px;
    height: 3px;
    background-color: #A3481B;
}

@media (max-width: 767px) {

    .sfp-page-title {
        margin: 18px 0 22px 0;
        padding-bottom: 9px;
        font-size: 22px;
        line-height: 1.3;
    }

    .sfp-page-title::after {
        width: 65px;
    }
}


/* ==========================================================
   2. GEMEINSAME ABSCHNITTE
   ========================================================== */

.sfp-section {
    clear: both;
    margin-top: 42px;
    margin-bottom: 20px;
}

.sfp-section-header {
    margin-bottom: 16px;
}

.sfp-section-title {
    margin: 0;
    padding: 0;
    color: #044d71;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
}

.sfp-section-line {
    width: 80px;
    height: 3px;
    margin-top: 6px;
    background-color: #A3481B;
}

.sfp-section-intro {
    margin: 0 0 16px 0;
    color: #444444;
    font-size: 14px;
    line-height: 1.5;
}

.sfp-section-intro a {
    color: #044d71;
    font-weight: 600;
    text-decoration: none;
}

.sfp-section-intro a:hover,
.sfp-section-intro a:focus {
    color: #A3481B;
    text-decoration: underline;
}

.sfp-section-image,
.sfp-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 0;
}


/* ==========================================================
   3. GEMEINSAME KARTEN FÜR CMS-/INFOSEITEN
   ========================================================== */

.sfp-card {
    margin-bottom: 18px;
    border: 1px solid #d6dde3;
    background-color: #ffffff;
}

.sfp-card-title {
    margin: 0;
    padding: 10px 12px;
    background-color: #244867;
    border-bottom: 2px solid #A3481B;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
}

.sfp-card-body {
    padding: 13px 14px 15px 14px;
}

.sfp-card-body p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   4. GEMEINSAME INFOBOX
   ========================================================== */

.sfp-info-box {
    width: 100%;
    padding: 22px 24px;
    background-color: #244867;
    color: #ffffff;
}

.sfp-info-box h2,
.sfp-info-box h3,
.sfp-info-box p,
.sfp-info-box strong {
    color: #ffffff;
}

.sfp-info-box h3 {
    margin: 0 0 14px 0;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
}

.sfp-info-box p {
    margin: 0 0 13px 0;
}

.sfp-info-box p:last-child {
    margin-bottom: 0;
}

.sfp-info-box a {
    color: #ffffff;
    text-decoration: underline;
}


/* ==========================================================
   5. GEMEINSAME LINKS UND BUTTONS
   ========================================================== */

.sfp-link {
    color: #A3481B;
    font-weight: 700;
    text-decoration: none;
}

.sfp-link:hover,
.sfp-link:focus {
    color: #7f3515;
    text-decoration: underline;
}

.sfp-btn {
    display: inline-block;
    padding: 10px 18px;
    background-color: #244867;
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none !important;
    text-align: center;
}

.sfp-btn:hover,
.sfp-btn:focus {
    background-color: #17384f;
    color: #ffffff !important;
    text-decoration: none !important;
}

.sfp-btn-orange {
    background-color: #A3481B;
}

.sfp-btn-orange:hover,
.sfp-btn-orange:focus {
    background-color: #853916;
}

.sfp-actions {
    margin-top: 16px;
}

.sfp-actions .sfp-btn {
    margin-right: 8px;
    margin-bottom: 8px;
}


/* ==========================================================
   6. GEMEINSAMER CTA
   ========================================================== */

.sfp-cta {
    clear: both;
    margin: 34px 0 24px 0;
    padding: 18px 20px;
    background-color: #f4f6f7;
    border-left: 4px solid #A3481B;
}

.sfp-cta-title {
    margin: 0 0 8px 0;
    color: #244867;
    font-size: 21px;
    line-height: 1.35;
}


/* ==========================================================
   7. GEMEINSAME CONTENT- UND LAYOUT-HILFEN
   ========================================================== */

.sfp-content-block {
    margin-bottom: 24px;
}

.sfp-content-block h3 {
    margin: 0 0 8px 0;
    padding: 0;
    color: #244867;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
}

.sfp-content-block p {
    margin: 0 0 15px 0;
}

.sfp-content-block p:last-child {
    margin-bottom: 0;
}

.sfp-equal-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.sfp-equal-row > [class*="col-"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.sfp-equal-row .sfp-card {
    width: 100%;
}


/* ==========================================================
   8. GEMEINSAME FORMULAR-/EMBED-HILFEN
   ========================================================== */

.sfp-embed {
    display: block;
    width: 100%;
    border: 0;
    background: #ffffff;
}

.sfp-karten-embed {
    height: 320px;
}

.sfp-hinweis-klein {
    margin: 12px 0 0;
    font-size: 13px;
}

.sfp-label {
    display: block;
    margin-bottom: 4px;
    color: #244867;
    font-weight: 700;
}

.sfp-adresse {
    margin: 0;
    font-style: normal;
    overflow-wrap: anywhere;
}

/* Einzige echte Kontakt-Ausnahme: Höhe des Zoho-Formulars */
.sfp-kontaktformular {
    height: 850px;
}


/* ==========================================================
   9. STARTSEITE – STRETCHFOLIEN-FINDER
   ========================================================== */

.sfp-startseite .sfp-finder-wrap {
    margin: 30px 10px;
    padding-top: 10px;
    border: 1px solid #A3481B;
}

.sfp-startseite .finder-center {
    padding-top: 12px;
    text-align: center;
}

.sfp-startseite .finder-title {
    margin: 0 auto 6px auto;
    color: #044d71;
    border: 0;
    text-align: center;
}

.sfp-startseite .finder-table {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.sfp-startseite .finder-table td {
    text-align: left;
}

.sfp-startseite .finder-table td:nth-child(1) {
    width: 174px;
}

.sfp-startseite .finder-table td:nth-child(2) {
    width: 95px;
}

.sfp-startseite .finder-table td:nth-child(3) {
    width: 90px;
}

.sfp-startseite .sfp-finder-form {
    text-align: center;
}

.sfp-startseite .sfp-finder-product-image {
    max-height: 135px;
}

.sfp-startseite .finder-left .sfp-finder-product-image {
    margin: 17px 0 0 0;
}

.sfp-startseite .finder-right .sfp-finder-product-image {
    margin: 17px 0 0 3px;
}


/* ==========================================================
   10. STARTSEITE – KATEGORIEN
   ========================================================== */

.sfp-startseite .sfp-category-title {
    margin: 8px 0 0 0;
    padding: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 400;
    overflow-wrap: anywhere;
    word-break: normal;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.sfp-startseite .sfp-category-title a {
    color: #244867;
    font-weight: 400;
    text-decoration: none;
}

.sfp-startseite .sfp-category-title a:hover,
.sfp-startseite .sfp-category-title a:focus {
    color: #A3481B;
    text-decoration: underline;
}


/* ==========================================================
   11. STARTSEITE – RATGEBER- UND SERVICE-KARTEN
   ========================================================== */

.sfp-startseite .sfp-card-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.sfp-startseite .sfp-card-col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
}

.sfp-startseite .sfp-info-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #d8dee4;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.sfp-startseite .sfp-info-card-title {
    margin: 0;
    padding: 0;
    background: #244867;
    border-bottom: 3px solid #A3481B;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.sfp-startseite .sfp-info-card-title a,
.sfp-startseite .sfp-info-card-title span {
    display: block;
    padding: 12px 14px;
    color: #ffffff;
    text-decoration: none;
}

.sfp-startseite .sfp-info-card-title a:hover,
.sfp-startseite .sfp-info-card-title a:focus {
    color: #ffffff;
    background: #1d3b56;
    text-decoration: none;
}

.sfp-startseite .sfp-info-card-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 14px;
    color: #444444;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.sfp-startseite .sfp-info-card-body p {
    margin: 0 0 12px 0;
}

.sfp-startseite .sfp-info-card-more {
    margin-top: auto !important;
    margin-bottom: 0 !important;
}

.sfp-startseite .sfp-info-card-more a {
    color: #A3481B;
    font-weight: 700;
    text-decoration: none;
}

.sfp-startseite .sfp-info-card-more a:hover,
.sfp-startseite .sfp-info-card-more a:focus {
    color: #7f3515;
    text-decoration: underline;
}

.sfp-startseite .sfp-pdf-button {
    display: inline-block;
    padding: 8px 12px;
    color: #ffffff !important;
    background: #A3481B;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none !important;
}

.sfp-startseite .sfp-pdf-button:hover,
.sfp-startseite .sfp-pdf-button:focus {
    color: #ffffff !important;
    background: #853916;
    text-decoration: none !important;
}

.sfp-startseite .sfp-service-section {
    margin-top: 62px;
}


/* ==========================================================
   12. STARTSEITE – AUSWAHLHILFE
   ========================================================== */

.sfp-startseite .sfp-selection-intro {
    margin: 18px 0;
    color: #444444;
    font-size: 14px;
    line-height: 1.55;
}

.sfp-startseite .sfp-selection-list {
    padding-right: 16px;
}

.sfp-startseite .sfp-selection-item {
    padding: 0 0 14px 0;
    margin: 0 0 14px 0;
    border-bottom: 1px solid #d9dde1;
}

.sfp-startseite .sfp-selection-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.sfp-startseite .sfp-selection-item h3 {
    margin: 0 0 5px 0;
    color: #244867;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
}

.sfp-startseite .sfp-selection-item p {
    margin: 0 0 6px 0;
    color: #444444;
    font-size: 14px;
    line-height: 1.5;
}

.sfp-startseite .sfp-selection-links {
    margin: 0 !important;
}

.sfp-startseite .sfp-selection-links a {
    color: #A3481B;
    font-weight: 700;
    text-decoration: none;
}

.sfp-startseite .sfp-selection-links a:hover,
.sfp-startseite .sfp-selection-links a:focus {
    color: #7f3515;
    text-decoration: underline;
}

.sfp-startseite .sfp-quality-checklist {
    padding: 22px 24px;
    background-color: #244867;
    color: #ffffff;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.sfp-startseite .sfp-quality-checklist h3 {
    margin: 0 0 12px 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

.sfp-startseite .sfp-quality-checklist ul {
    margin: 0 0 16px 18px;
    padding: 0;
}

.sfp-startseite .sfp-quality-checklist li {
    margin-bottom: 8px;
    line-height: 1.45;
}

.sfp-startseite .sfp-quality-checklist p {
    margin: 0;
    line-height: 1.5;
}

.sfp-startseite .sfp-quality-checklist .sfp-checklist-cta {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.sfp-startseite .sfp-quality-checklist strong {
    color: #ffffff;
}



/* ==========================================================
   13. GEMEINSAME RECHTSTEXTE / LANGE INFOSEITEN
   z.B. Datenschutz, AGB, Impressum
   ========================================================== */

.sfp-rechtstext {
    color: #333333;
    line-height: 1.55;
}

.sfp-rechtstext h2 {
    position: relative;
    margin: 38px 0 18px 0;
    padding: 0 0 9px 0;
    color: #044d71;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    border-bottom: 1px solid #e2e5e8;
}

.sfp-rechtstext h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 65px;
    height: 3px;
    background-color: #A3481B;
}

.sfp-rechtstext h2:first-child {
    margin-top: 0;
}

.sfp-rechtstext h3 {
    margin: 25px 0 9px 0;
    padding: 0;
    color: #244867;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
}

.sfp-rechtstext p {
    margin: 0 0 15px 0;
}

.sfp-rechtstext ul,
.sfp-rechtstext ol {
    margin-top: 8px;
    margin-bottom: 18px;
}

.sfp-rechtstext li {
    margin-bottom: 6px;
}

.sfp-rechtstext a {
    color: #A3481B;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sfp-rechtstext a:hover,
.sfp-rechtstext a:focus {
    color: #7f3515;
}


/* ==========================================================
   14. MOBIL
   ========================================================== */

@media (max-width: 767px) {

    .sfp-seite,
    .sfp-startseite,
    .sfp-umzugseite,
    .sfp-kontaktseite {
        font-size: 15px;
        line-height: 1.55;
    }


    .sfp-section {
        margin-top: 30px;
        margin-bottom: 16px;
    }

    .sfp-section-header {
        margin-bottom: 13px;
    }

    .sfp-section-title {
        font-size: 20px;
        line-height: 1.3;
    }

    .sfp-section-line {
        width: 65px;
        height: 3px;
        margin-top: 6px;
    }

    .sfp-section-intro {
        margin-bottom: 16px;
        font-size: 15px;
        line-height: 1.55;
    }

    .sfp-info-box {
        margin-top: 18px;
        padding: 18px 20px;
    }

    .sfp-card {
        margin-bottom: 14px;
    }

    .sfp-card-title {
        font-size: 17px;
    }

    .sfp-btn {
        display: block;
        width: 100%;
        margin: 0 0 10px 0;
    }

    .sfp-actions .sfp-btn {
        margin-right: 0;
    }

    .sfp-cta {
        margin-top: 30px;
        padding: 18px;
    }

    .sfp-content-block {
        margin-bottom: 20px;
    }

    .sfp-equal-row {
        display: block;
    }

    .sfp-equal-row > [class*="col-"] {
        display: block;
    }

    .sfp-kontaktformular {
        height: 1100px;
    }


    /* Rechtstexte */
    .sfp-rechtstext h2 {
        margin-top: 30px;
        margin-bottom: 15px;
        font-size: 20px;
    }

    .sfp-rechtstext h3 {
        margin-top: 22px;
        font-size: 17px;
    }


    /* Startseite: Kategorien */
    .sfp-startseite .sfp-category-title {
        margin-top: 7px;
        font-size: 13px;
        line-height: 1.25;
    }

    /* Startseite: Karten */
    .sfp-startseite .sfp-service-section {
        margin-top: 42px;
    }

    .sfp-startseite .sfp-card-col {
        margin-bottom: 14px;
    }

    .sfp-startseite .sfp-info-card-title {
        font-size: 17px;
        line-height: 1.3;
    }

    .sfp-startseite .sfp-info-card-title a,
    .sfp-startseite .sfp-info-card-title span {
        padding: 10px 12px;
    }

    .sfp-startseite .sfp-info-card-body {
        padding: 11px 12px 12px 12px;
        font-size: 15px;
        line-height: 1.5;
    }

    .sfp-startseite .sfp-info-card-body p {
        margin-bottom: 10px;
    }

    .sfp-startseite .sfp-pdf-button {
        padding: 10px 14px;
    }

    /* Startseite: Auswahlhilfe */
    .sfp-startseite .sfp-selection-intro {
        margin-top: 15px;
        margin-bottom: 16px;
        font-size: 15px;
        line-height: 1.55;
    }

    .sfp-startseite .sfp-selection-list {
        padding-right: 0;
    }

    .sfp-startseite .sfp-selection-item {
        margin-bottom: 14px;
        padding-bottom: 14px;
    }

    .sfp-startseite .sfp-selection-item h3 {
        font-size: 17px;
    }

    .sfp-startseite .sfp-selection-item p {
        font-size: 15px;
        line-height: 1.5;
    }

    .sfp-startseite .sfp-quality-checklist {
        margin-top: 18px;
        padding: 18px 20px;
    }

    /* Startseite: Finder */
    .sfp-startseite .finder-center {
        float: none;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .sfp-startseite .finder-title {
        margin-bottom: 14px !important;
        font-size: 18px;
        line-height: 1.25;
        white-space: nowrap;
    }

    .sfp-startseite .finder-table {
        display: none;
    }

    .sfp-startseite .sfp-finder-form {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }

    .sfp-startseite .sfp-finder-form select {
        display: block;
        width: 100% !important;
        max-width: 100%;
        height: 36px;
        margin: 0 0 10px 0 !important;
        padding: 5px 8px;
    }

    .sfp-startseite .finder-center .search_go2 {
        display: block;
        margin: 4px auto 0 auto !important;
    }

    .sfp-startseite .sfp-finder-form hr {
        margin: 12px 0 0 0;
    }
}