/* ================================================================
   GRUNDLEGENDE EINSTELLUNGEN
   ================================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

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

    color: #172033;
    background: #eef2f8;
}


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

.site-header {
    background: linear-gradient(
        135deg,
        #171b3a 0%,
        #24245a 55%,
        #34306b 100%
    );

    color: white;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 8px 30px rgba(20, 25, 55, 0.18);
}

.header-inner {
    max-width: 1180px;

    margin: 0 auto;

    padding: 34px 28px;
}

.brand h1 {
    margin: 0;

    font-size: 30px;

    font-weight: 650;

    letter-spacing: -0.8px;
}

.brand span {
    display: block;

    margin-top: 5px;

    color: #bfc5ee;

    font-size: 14px;

    letter-spacing: 0.8px;
}


/* ================================================================
   HAUPTBEREICH
   ================================================================ */

.main-content {
    min-height: calc(100vh - 150px);
}


/* ================================================================
   HERO / STARTBEREICH
   ================================================================ */

.hero {
    background: #f4f6fb;

    padding: 105px 28px 100px;

    border-bottom: 1px solid #dfe4ef;
}

.hero-content {
    max-width: 900px;

    margin: 0 auto;
}


/* Kleine Beschriftung oberhalb der Überschrift */

.badge {
    display: inline-block;

    margin-bottom: 20px;

    padding: 7px 12px;

    border: 1px solid #c9cde4;

    border-radius: 6px;

    color: #50558a;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


/* Große Überschrift */

.hero h2 {
    margin: 0;

    color: #171b3a;

    font-size: clamp(52px, 8vw, 86px);

    line-height: 0.95;

    letter-spacing: -4px;
}


/* Kurzer Satz direkt unter ModPiEn */

.hero-subtitle {
    margin: 18px 0 0;

    color: #34306b;

    font-size: clamp(23px, 3vw, 32px);

    font-weight: 500;
}


/* Beschreibung */

.intro {
    max-width: 720px;

    margin: 25px 0 0;

    color: #596276;

    font-size: 19px;

    line-height: 1.7;
}


/* Hinweis zur Kompatibilität */

.compatibility {
    max-width: 720px;

    margin: 24px 0 0;

    padding-left: 16px;

    border-left: 3px solid #34306b;

    color: #697286;

    font-size: 14px;

    line-height: 1.65;
}


/* ================================================================
   BUTTONS
   ================================================================ */

.actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 36px;
}

.button {
    display: inline-block;

    padding: 13px 21px;

    border-radius: 7px;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

.button:hover {
    transform: translateY(-1px);
}


/* Hauptbutton */

.primary {
    color: white;

    background: #34306b;

    box-shadow:
        0 5px 18px rgba(52, 48, 107, 0.22);
}

.primary:hover {
    background: #403a80;
}


/* ================================================================
   ALLGEMEINE SEKTIONS-EINSTELLUNGEN
   ================================================================ */

.section-inner {
    max-width: 1180px;

    margin: 0 auto;

    padding-left: 28px;

    padding-right: 28px;
}


/* Kleine Überschrift über den großen Abschnittsüberschriften */

.section-label {
    display: block;

    margin-bottom: 14px;

    color: #686e91;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


/* ================================================================
   FUNKTIONEN
   ================================================================ */

.features {
    background: #eef2f8;

    padding: 90px 0;
}

.section-heading {
    max-width: 680px;

    margin-bottom: 45px;
}

.section-heading h2 {
    margin: 0;

    color: #171b3a;

    font-size: clamp(32px, 5vw, 48px);

    letter-spacing: -1.8px;
}

.section-heading p {
    margin: 18px 0 0;

    color: #697286;

    font-size: 17px;

    line-height: 1.65;
}


/* Anordnung der Funktionskarten */

.feature-grid {
    display: grid;

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

    gap: 18px;
}


/* Einzelne Funktionskarte */

.feature-card {
    position: relative;

    min-height: 205px;

    padding: 27px;

    background: #ffffff;

    border: 1px solid #dfe3ec;

    border-radius: 10px;

    box-shadow:
        0 5px 20px rgba(30, 40, 70, 0.04);
}


/* Nummer der Funktion */

.feature-number {
    margin-bottom: 23px;

    color: #a3a8c4;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;
}

.feature-card h3 {
    margin: 0 0 11px;

    color: #29275a;

    font-size: 19px;
}

.feature-card p {
    margin: 0;

    color: #687084;

    font-size: 14px;

    line-height: 1.65;
}


/* ================================================================
   FÜR WEN?
   ================================================================ */

.audience {
    background: #e7ebf3;

    padding: 95px 0;
}

.audience-layout {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}

.audience-text h2 {
    margin: 0;

    color: #171b3a;

    font-size: clamp(34px, 5vw, 52px);

    line-height: 1.05;

    letter-spacing: -2px;
}

.audience-text p {
    max-width: 620px;

    margin: 24px 0 0;

    color: #626c80;

    font-size: 16px;

    line-height: 1.7;
}


/* Liste der Zielgruppen */

.audience-list {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;
}

.audience-list > div {
    padding: 22px;

    background: rgba(255, 255, 255, 0.65);

    border: 1px solid #d5dae5;

    border-radius: 9px;
}

.audience-list strong {
    display: block;

    margin-bottom: 7px;

    color: #29275a;

    font-size: 15px;
}

.audience-list span {
    display: block;

    color: #70798b;

    font-size: 13px;

    line-height: 1.5;
}


/* ================================================================
   LOKAL / OHNE CLOUD
   ================================================================ */

.local {
    background: #f4f6fb;

    padding: 100px 28px;
}

.local-inner {
    max-width: 820px;

    margin: 0 auto;

    text-align: center;
}

.local h2 {
    margin: 0;

    color: #171b3a;

    font-size: clamp(38px, 6vw, 58px);

    letter-spacing: -2px;
}

.local p {
    max-width: 650px;

    margin: 22px auto 0;

    color: #626c80;

    font-size: 18px;

    line-height: 1.7;
}


/* Hervorgehobener Bereich */

.local-highlight {
    display: inline-flex;

    flex-direction: column;

    gap: 6px;

    margin-top: 35px;

    padding: 20px 28px;

    background: #ffffff;

    border: 1px solid #dfe3ec;

    border-radius: 9px;

    box-shadow:
        0 5px 20px rgba(30, 40, 70, 0.04);
}

.local-highlight strong {
    color: #34306b;

    font-size: 16px;
}

.local-highlight span {
    color: #737c8e;

    font-size: 13px;
}


/* ================================================================
   INTERESSENTENLISTE
   ================================================================ */

.interest {
    background: #eef2f8;

    padding: 100px 0;
}

.interest .section-inner {
    max-width: 820px;
}

.interest h2 {
    margin: 0;

    color: #171b3a;

    font-size: clamp(34px, 5vw, 50px);

    letter-spacing: -1.8px;
}

.interest p {
    color: #626c80;

    font-size: 16px;

    line-height: 1.7;
}

.interest-intro {
    margin-top: 25px;
}

.fine-print {
    margin-top: 30px;

    color: #7b8392 !important;

    font-size: 12px !important;

    line-height: 1.6 !important;
}

.license-note {
    margin-top: 25px;

    padding-top: 25px;

    border-top: 1px solid #d9deea;

    color: #858c9a !important;

    font-size: 12px !important;

    line-height: 1.6 !important;
}


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

.site-footer {
    padding: 25px 28px;

    background: #171b3a;

    color: #aeb4d1;

    text-align: center;

    font-size: 13px;
}

.site-footer p {
    margin: 0;
}


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

@media (max-width: 850px) {

    /* Funktionskarten untereinander bzw. zweispaltig */
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Zielgruppen untereinander */
    .audience-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }
}


@media (max-width: 600px) {

    /* Header */
    .header-inner {
        padding: 26px 20px;
    }


    /* Hero */
    .hero {
        padding: 75px 20px 80px;
    }


    .hero h2 {
        letter-spacing: -2.5px;
    }


    .intro {
        font-size: 17px;
    }


    /* Allgemeiner Seitenabstand */
    .section-inner {
        padding-left: 20px;

        padding-right: 20px;
    }


    /* Funktionen */
    .features {
        padding: 70px 0;
    }


    .feature-grid {
        grid-template-columns: 1fr;
    }


    .feature-card {
        min-height: auto;
    }


    /* Zielgruppen */
    .audience {
        padding: 75px 0;
    }


    .audience-list {
        grid-template-columns: 1fr;
    }


    /* Lokal */
    .local {
        padding: 75px 20px;
    }


    /* Interessenten */
    .interest {
        padding: 75px 0;
    }


    /* Buttons */
    .button {
        width: 100%;

        text-align: center;
    }

}

```css
/* ================================================================
   INTERESSENTENLISTE
   ================================================================ */

.interest-layout {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: start;
}


/* Formular-Karte */

.interest-form-card {
    padding: 32px;

    background: #ffffff;

    border: 1px solid #dfe3ec;

    border-radius: 10px;

    box-shadow:
        0 8px 30px rgba(30, 40, 70, 0.06);
}

.interest-form-card h3 {
    margin: 0;

    color: #29275a;

    font-size: 22px;
}

.form-description {
    margin: 12px 0 28px !important;

    color: #727b8d !important;

    font-size: 14px !important;
}


/* Formular */

.interest-form {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.interest-form label {
    color: #343a52;

    font-size: 13px;

    font-weight: 600;
}

.interest-form input[type="text"],
.interest-form input[type="email"] {
    width: 100%;

    margin-bottom: 12px;

    padding: 12px 13px;

    background: #f7f8fb;

    border: 1px solid #d7dce7;

    border-radius: 6px;

    color: #172033;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


/* Eingabefeld beim Anklicken */

.interest-form input[type="text"]:focus,
.interest-form input[type="email"]:focus {
    border-color: #6864a0;

    box-shadow:
        0 0 0 3px rgba(52, 48, 107, 0.08);
}


/* Datenschutz-/Einwilligungs-Checkbox */

.interest-form .consent {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin: 8px 0 10px;

    color: #747d8e;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.55;
}

.interest-form .consent input {
    flex-shrink: 0;

    margin-top: 3px;
}


/* Button im Formular */

.interest-form .button {
    border: 0;

    cursor: pointer;

    font-family: inherit;
}


/* Hinweis unter dem Formular */

.form-note {
    margin: 18px 0 0 !important;

    color: #8a91a0 !important;

    font-size: 11px !important;

    text-align: center;
}


/* ================================================================
   RECHTLICHE SEITEN
   ================================================================ */

.legal-page {
    min-height: calc(100vh - 150px);

    padding: 75px 20px 100px;

    background: #f4f6fb;
}

.legal-inner {
    max-width: 850px;

    margin: 0 auto;
}


/* Zurück-Link */

.back-link {
    display: inline-block;

    margin-bottom: 55px;

    color: #686e91;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;
}

.back-link:hover {
    color: #34306b;
}


/* Große Überschrift */

.legal-inner > h2 {
    margin: 0 0 35px;

    color: #171b3a;

    font-size: clamp(38px, 6vw, 58px);

    letter-spacing: -2px;
}


/* Karte mit dem rechtlichen Inhalt */

.legal-card {
    padding: 40px;

    background: #ffffff;

    border: 1px solid #dfe3ec;

    border-radius: 10px;

    box-shadow:
        0 5px 20px rgba(30, 40, 70, 0.04);
}


/* Überschriften innerhalb der rechtlichen Seite */

.legal-card h3 {
    margin: 32px 0 12px;

    color: #29275a;

    font-size: 18px;
}


/* Erste Überschrift braucht keinen oberen Abstand */

.legal-card h3:first-child {
    margin-top: 0;
}


/* Text */

.legal-card p {
    margin: 0 0 16px;

    color: #626c80;

    font-size: 14px;

    line-height: 1.75;
}


/* Listen */

.legal-card ul {
    margin: 0 0 20px;

    padding-left: 22px;

    color: #626c80;

    font-size: 14px;

    line-height: 1.75;
}


/* Links */

.legal-card a {
    color: #34306b;

    font-weight: 600;
}


/* Header-Link auf den rechtlichen Seiten */

.brand a {
    color: inherit;

    text-decoration: none;
}


/* Links im Footer */

.site-footer a {
    color: #bfc5ee;

    text-decoration: none;
}

.site-footer a:hover {
    color: #ffffff;
}

.footer-separator {
    margin: 0 7px;

    color: #656b89;
}


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

@media (max-width: 750px) {

    .interest-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .interest-form-card {
        padding: 25px;
    }

    .legal-card {
        padding: 27px;
    }

    .legal-page {
        padding-top: 55px;
    }

}


```css
/* ================================================================
   DANKESCHÖN-SEITE
   ================================================================ */

.thank-you-card {
    max-width: 700px;

    margin: 0 auto;

    text-align: center;
}


/* Häkchen oben */

.thank-you-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: #34306b;

    color: #ffffff;

    font-size: 22px;

    font-weight: 600;
}


/* Überschrift */

.thank-you-card h2 {
    margin: 0;

    color: #171b3a;

    font-size: clamp(36px, 6vw, 54px);

    letter-spacing: -2px;
}


/* Erster Text */

.thank-you-intro {
    margin-top: 22px !important;

    color: #34306b !important;

    font-size: 18px !important;

    font-weight: 500;

    line-height: 1.6 !important;
}


/* Weitere Texte */

.thank-you-card p:not(.thank-you-intro) {
    max-width: 570px;

    margin-left: auto;

    margin-right: auto;
}


/* ================================================================
   INTERESSENTENZÄHLER
   ================================================================ */

.interest-counter {
    margin-top: 28px;

    padding-top: 24px;

    border-top: 1px solid #e3e6ee;

    text-align: center;
}


/* Zahl */

.counter-number {
    color: #29275a;

    font-size: 26px;

    font-weight: 700;

    letter-spacing: -0.5px;
}


/* Beschriftung */

.counter-label {
    margin-top: 3px;

    color: #7b8394;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* Balken */

.counter-bar {
    width: 100%;

    height: 8px;

    margin-top: 18px;

    overflow: hidden;

    background: #e7eaf2;

    border-radius: 20px;
}


/* Fortschritt */

.counter-progress {
    width: 0;

    height: 100%;

    background: linear-gradient(
        90deg,
        #34306b,
        #6864a0
    );

    border-radius: 20px;

    transition: width 0.8s ease;
}


/* Text unter dem Balken */

.counter-note {
    margin: 12px 0 0 !important;

    color: #858c9c !important;

    font-size: 12px !important;
}


/* ================================================================
   SCREENSHOTS
   ================================================================ */

.screenshots {
    display: flex;

    flex-direction: column;

    gap: 18px;

    margin-bottom: 45px;
}


/* Einzelne Screenshot-Karte */

.screenshot-card {
    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #dfe3ec;

    border-radius: 10px;

    box-shadow:
        0 5px 20px rgba(30, 40, 70, 0.04);
}


/* ================================================================
   GUI
   ================================================================ */

.screenshot-gui {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;
}

.screenshot-gui img {
    display: block;

    width: 100%;

    max-width: 700px;

    height: auto;

    margin: 0 auto;
}

.screenshot-clickable {
    display: block;

    width: 100%;

    max-width: 700px;

    color: inherit;

    text-decoration: none;

    cursor: zoom-in;
}

.screenshot-clickable img {
    display: block;

    width: 100%;

    height: auto;

    margin: 0 auto;
}

.screenshot-zoom-hint {
    display: block;

    margin-top: 10px;

    color: #7b8394;

    font-size: 12px;

    text-align: center;
}

.screenshot-clickable:hover .screenshot-zoom-hint {
    color: #34306b;
}


/* ================================================================
   VORHER / NACHHER
   ================================================================ */

.screenshot-before-after img {
    display: block;

    width: 100%;

    max-width: 1000px;

    height: auto;

    margin: 0 auto;
}


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

@media (max-width: 600px) {

    .screenshot-card {
        padding: 15px;
    }

    .screenshot-gui img {
        max-width: 100%;
    }

    .screenshot-before-after img {
        max-width: 100%;
    }

}


/* ================================================================
   HONEYPOT
   ================================================================ */
   
.honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}