* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    color: #18324a;
    background: #ffffff;
}


/* NAVIGATION */

header {
    height: 75px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 7%;

    border-bottom: 1px solid #e5edf5;

    background: white;
}

.logo {
    font-size: 22px;
    font-weight: bold;
    color: #102a43;
}

nav {
    display: flex;
    gap: 25px;
}

nav a {
    text-decoration: none;
    color: #496178;
    font-size: 14px;
    font-weight: 600;
}

nav a:hover {
    color: #1677ff;
}


/* HERO */

.hero {
    min-height: 560px;

    display: flex;
    align-items: center;

    padding: 70px 7%;

    background:
        radial-gradient(
            circle at 80% 20%,
            #d7ebff,
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #f7fbff,
            #eaf4ff
        );
}

.hero-content {
    max-width: 750px;
}

.eyebrow {
    color: #1677ff;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
}

.hero h1 {
    font-size: 58px;
    line-height: 1.05;

    margin-top: 15px;

    color: #102a43;
}

.hero p {
    margin-top: 25px;

    font-size: 18px;
    line-height: 1.7;

    color: #526b82;

    max-width: 650px;
}

.hero-buttons {
    display: flex;
    gap: 15px;

    margin-top: 30px;
}

.button {
    display: inline-block;

    padding: 14px 22px;

    border-radius: 10px;

    background: #1677ff;

    color: white;

    text-decoration: none;

    font-weight: bold;
}

.button.secondary {
    background: white;

    color: #1677ff;

    border: 1px solid #b9d5f5;
}


/* SECTIONS */

section {
    padding: 80px 7%;
}

.section-title {
    text-align: center;

    margin-bottom: 40px;
}

.section-title span {
    color: #1677ff;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 2px;
}

.section-title h2 {
    margin-top: 10px;

    font-size: 36px;

    color: #102a43;
}

.section-title p {
    margin-top: 12px;

    color: #65788b;
}


/* KATEGORIEN */

.categories {
    background: white;
}

.category-grid {
    display: grid;

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

    gap: 18px;
}

.category-card {
    padding: 25px;

    border: 1px solid #dbe7f5;

    border-radius: 18px;

    text-decoration: none;

    color: inherit;

    transition: .2s;
}

.category-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px
        rgba(20, 60, 100, .10);
}

.category-icon {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    background: #edf5ff;

    border-radius: 14px;

    font-size: 25px;

    margin-bottom: 15px;
}

.category-card h3 {
    color: #102a43;

    margin-bottom: 8px;
}

.category-card p {
    color: #65788b;

    font-size: 13px;

    line-height: 1.5;
}


/* PRODUKTE */

.recommendations {
    background: #f7fbff;
}

.product-grid {
    display: grid;

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

    gap: 25px;
}

.product-card {
    background: white;

    border: 1px solid #dbe7f5;

    border-radius: 18px;

    overflow: hidden;

    transition: .2s;
}

.product-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px
        rgba(20, 60, 100, .10);
}

.product-image {
    height: 180px;

    display: grid;

    place-items: center;

    font-size: 65px;

    background:
        linear-gradient(
            135deg,
            #dceeff,
            #c7e1fb
        );
}

.product-content {
    padding: 25px;
}

.product-category {
    font-size: 11px;

    font-weight: bold;

    color: #1677ff;

    letter-spacing: 1px;
}

.product-content h3 {
    margin-top: 10px;

    font-size: 20px;

    color: #102a43;
}

.product-content p {
    margin-top: 12px;

    font-size: 14px;

    line-height: 1.6;

    color: #65788b;
}

.read-more {
    display: inline-block;

    margin-top: 20px;

    color: #1677ff;

    font-weight: bold;

    text-decoration: none;
}


/* NEWSLETTER */

.newsletter {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    margin: 60px 7%;

    padding: 45px;

    border-radius: 22px;

    color: white;

    background:
        linear-gradient(
            120deg,
            #102f52,
            #1b4c78
        );
}

.newsletter span {
    font-size: 12px;

    letter-spacing: 2px;

    font-weight: bold;
}

.newsletter h2 {
    margin-top: 10px;

    font-size: 30px;
}

.newsletter p {
    margin-top: 10px;

    color: #d7e6f5;
}

.newsletter form {
    display: flex;

    gap: 10px;
}

.newsletter input {
    padding: 14px;

    border: none;

    border-radius: 8px;

    min-width: 240px;
}

.newsletter button {
    padding: 14px 20px;

    border: none;

    border-radius: 8px;

    background: white;

    color: #102a43;

    font-weight: bold;

    cursor: pointer;
}


/* FOOTER */

footer {
    padding: 40px 7%;

    background: #0d2238;

    color: #d6e3ef;
}

.footer-logo {
    font-weight: bold;

    font-size: 20px;
}

footer p {
    margin-top: 8px;

    color: #9fb3c7;
}

.footer-links {
    display: flex;

    gap: 20px;

    margin-top: 20px;
}

.footer-links a {
    color: #d6e3ef;

    text-decoration: none;

    font-size: 13px;
}


/* MOBILE */

@media (max-width: 900px) {

    nav {
        display: none;
    }

    .category-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

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

    .newsletter {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .hero h1 {
        font-size: 42px;
    }

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

    .hero-buttons {
        flex-direction: column;
    }

    .newsletter form {
        flex-direction: column;

        width: 100%;
    }

    .newsletter input {
        width: 100%;
    }

}/* =========================
   ARTIKEL
========================= */

.article-container {
    width: min(900px, 90%);
    margin: 0 auto;
}

.article-hero {
    padding: 90px 0 60px;
    background: #f7f8fc;
}

.back-link {
    display: inline-block;
    margin-bottom: 35px;
    text-decoration: none;
    color: #555;
}

.article-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.05;
    margin: 15px 0 25px;
}

.article-intro {
    font-size: 1.25rem;
    line-height: 1.7;
    max-width: 750px;
}

.affiliate-disclosure {
    margin-top: 30px;
    padding: 18px 20px;
    background: white;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.article-section {
    padding: 70px 0;
}

.article-section h2 {
    font-size: 2rem;
    margin-top: 60px;
    margin-bottom: 20px;
}

.article-section p {
    line-height: 1.8;
}

.article-highlight {
    margin: 35px 0;
    padding: 25px;
    background: #f7f8fc;
    border-left: 4px solid #5b5bd6;
    border-radius: 10px;
    line-height: 1.7;
}


/* FUNKTIONEN */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.feature-box {
    padding: 25px;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
}

.feature-box span {
    font-size: 2rem;
}

.feature-box h3 {
    margin: 15px 0 10px;
}


/* LISTEN */

.article-list {
    line-height: 2;
    padding-left: 25px;
}


/* VORTEILE / NACHTEILE */

.pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 30px;
}

.pros,
.cons {
    padding: 30px;
    border-radius: 16px;
    background: #f7f8fc;
}

.pros h3,
.cons h3 {
    margin-top: 0;
}

.pros ul,
.cons ul {
    padding-left: 20px;
    line-height: 1.8;
}


/* CTA */

.article-cta {
    margin-top: 70px;
    padding: 45px;
    text-align: center;
    background: #111827;
    color: white;
    border-radius: 20px;
}

.article-cta h2 {
    margin-top: 15px;
}

.article-cta p {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.article-cta .btn {
    display: inline-block;
    margin-top: 15px;
}

.affiliate-small {
    margin-top: 20px !important;
    font-size: 0.8rem;
    opacity: 0.7;
}


/* HANDY */

@media (max-width: 700px) {

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

    .article-hero {
        padding: 60px 0 40px;
    }

    .article-cta {
        padding: 30px 20px;
    }

}/* =========================
   THE CLEVER CLICK
   HELLES DESIGN
========================= */

body {
    background: #fbfaf7;
    color: #1f2937;
}


/* HEADER */

.header {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid #eeeeee;
}

.logo {
    color: #171717;
}

.nav a {
    color: #4b5563;
}

.nav a:hover {
    color: #6c63ff;
}


/* HERO */

.hero,
.article-hero {
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8f7ff 55%,
            #fffaf1 100%
        );
}

.hero h1,
.article-hero h1 {
    color: #171717;
}

.hero-text,
.article-intro {
    color: #5f6470;
}


/* KARTEN */

.tool-card,
.recommendation-card,
.feature-box {
    background: #ffffff;
    border: 1px solid #eeeeee;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
}

.tool-card:hover,
.feature-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}


/* KLEINE LABELS */

.eyebrow,
.category-label {
    color: #6c63ff;
}


/* BUTTON */

.btn-primary {
    background: #6c63ff;
    color: white;
    border: none;
}

.btn-primary:hover {
    background: #5952e8;
    transform: translateY(-2px);
}

.btn-secondary {
    background: white;
    color: #222;
    border: 1px solid #dddddd;
}


/* ARTIKEL */

.article-section {
    background: #ffffff;
}

.article-highlight {
    background: #f8f7ff;
    border-left-color: #6c63ff;
}

.pros,
.cons {
    background: #fafafa;
    border: 1px solid #eeeeee;
}


/* HELLER CTA */

.article-cta {
    background:
        linear-gradient(
            135deg,
            #f4f1ff,
            #fff8eb
        );

    color: #222;
    border: 1px solid #ebe7ff;
}

.article-cta h2 {
    color: #171717;
}

.article-cta p {
    color: #60646c;
}


/* FOOTER */

.footer {
    background: #f7f6f2;
    color: #555;
    border-top: 1px solid #eeeeee;
}

.footer a {
    color: #555;
}/* =========================
   DARK HEADER + HERO
========================= */

/* KOPFZEILE */

header,
.header {
    background: #0d2238;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.logo {
    color: #ffffff;
}

nav a,
.nav a {
    color: #d6e3ef;
}

nav a:hover,
.nav a:hover {
    color: #67aaff;
}


/* HERO-BEREICH */

.hero {
    background:
        radial-gradient(
            circle at 80% 20%,
            #1b4c78,
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #0d2238,
            #102f52
        );
}


/* HERO-TEXTE */

.hero h1 {
    color: #ffffff;
}

.hero p,
.hero-text {
    color: #c5d6e6;
}

.hero .eyebrow {
    color: #67aaff;
}


/* ZWEITER BUTTON IM HERO */

.hero .button.secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero .button.secondary:hover {
    background: rgba(255, 255, 255, 0.08);
}/* =========================
   HELLER SEITENHINTERGRUND
========================= */

body {
    background: #f4f7fa;
}

.categories {
    background: #f4f7fa;
}

.recommendations {
    background: #eef4f9;
}/* =========================
   SALBEIGRÜNER SEITENHINTERGRUND
========================= */

body {
    background: #eef2ec;
}

.categories {
    background: #eef2ec;
}

.recommendations {
    background: #e4ebe1;
}
/* =========================
   HELLBLAUER SEITENHINTERGRUND
========================= */

body {
    background: #f2f7fc;
}

.categories {
    background: #f2f7fc;
}

.recommendations {
    background: #e7f1fa;
}
/* =========================
   MINTGRÜNER SEITENHINTERGRUND
========================= */

body {
    background: #f0faf6;
}

.categories {
    background: #f0faf6;
}

.recommendations {
    background: #e2f4ec;
}/* =========================
   PREISE
========================= */

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

.price-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #dfe8e4;
    border-radius: 18px;
    padding: 30px 25px;
    box-shadow: 0 10px 30px rgba(13, 34, 56, 0.06);
}

.price-card.featured {
    border: 2px solid #1677ff;
    transform: translateY(-8px);
}

.price-name {
    display: block;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #1677ff;
}

.price-card h3 {
    font-size: 36px;
    color: #102a43;
    margin: 15px 0 0;
}

.price-period {
    margin-top: 3px !important;
    color: #65788b;
}

.price-card ul {
    margin-top: 25px;
    padding-left: 20px;
    line-height: 1.9;
}

.price-badge {
    position: absolute;
    top: -13px;
    right: 20px;

    background: #1677ff;
    color: white;

    padding: 7px 12px;
    border-radius: 20px;

    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.price-note {
    font-size: 13px;
    color: #65788b;
}


/* =========================
   FAQ
========================= */

.faq {
    margin-top: 30px;
}

.faq details {
    background: #ffffff;
    border: 1px solid #dfe8e4;
    border-radius: 14px;

    margin-bottom: 12px;
    padding: 20px 22px;
}

.faq summary {
    cursor: pointer;
    font-weight: bold;
    color: #102a43;
}

.faq details p {
    margin-top: 15px;
    color: #526b82;
}


/* MOBILE */

@media (max-width: 800px) {

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

    .price-card.featured {
        transform: none;
    }

}/* =========================
   KI TOOL ÜBERSICHT
========================= */

.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 35px 0 55px;
}


/* TOOL KARTE */

.tool-card {
    background: #ffffff;
    border: 1px solid #dce9e4;
    border-radius: 20px;

    padding: 28px;

    box-shadow:
        0 10px 30px rgba(13, 34, 56, 0.06);

    display: flex;
    flex-direction: column;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* HOVER EFFEKT */

.tool-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 16px 40px rgba(13, 34, 56, 0.10);
}


/* OBERER BEREICH */

.tool-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}


/* ICON */

.tool-icon {
    font-size: 32px;
}


/* KATEGORIE */

.tool-category {
    font-size: 10px;
    font-weight: bold;

    letter-spacing: 1.5px;

    color: #1677ff;

    background: #eef6ff;

    padding: 7px 10px;

    border-radius: 20px;
}


/* ÜBERSCHRIFT */

.tool-card h3 {
    font-size: 24px;
    color: #102a43;

    margin: 0 0 12px;
}


/* TEXT */

.tool-card p {
    color: #526b82;

    line-height: 1.7;

    margin-bottom: 20px;
}


/* TAGS */

.tool-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 25px;
}


.tool-tags span {
    background: #f0faf6;

    color: #315c4c;

    border: 1px solid #d6ebe2;

    padding: 6px 10px;

    border-radius: 20px;

    font-size: 12px;
}


/* BUTTON UNTEN HALTEN */

.tool-card .btn {
    margin-top: auto;
}


/* DEMNÄCHST KARTEN */

.tool-card-coming {
    opacity: 0.82;
}


.coming-soon {
    margin-top: auto;

    font-size: 13px;
    font-weight: bold;

    color: #718096;
}


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

@media (max-width: 900px) {

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

}/* =========================
   VERGLEICHSTABELLE
========================= */

.comparison-table-wrapper {
    width: 100%;
    overflow-x: auto;

    margin: 30px 0 45px;

    border-radius: 16px;

    box-shadow:
        0 10px 30px rgba(13, 34, 56, 0.06);
}


.comparison-table {
    width: 100%;
    border-collapse: collapse;

    background: #ffffff;
}


.comparison-table th,
.comparison-table td {
    padding: 18px 20px;

    text-align: left;

    border-bottom:
        1px solid #e2ece8;
}


.comparison-table th {
    background: #102f52;
    color: #ffffff;

    font-size: 14px;
}


.comparison-table td:first-child {
    font-weight: bold;
    color: #102a43;
}


.comparison-table tr:last-child td {
    border-bottom: none;
}


/* =========================
   ANWENDUNGSFÄLLE
========================= */

.use-case-grid {
    display: grid;

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

    gap: 20px;

    margin: 30px 0 45px;
}


.use-case-card {
    background: #ffffff;

    border:
        1px solid #dce9e4;

    border-radius: 18px;

    padding: 26px;

    box-shadow:
        0 10px 30px
        rgba(13, 34, 56, 0.05);
}


.use-case-card > span {
    font-size: 30px;
}


.use-case-card h3 {
    color: #102a43;

    margin:
        15px 0 10px;
}


.use-case-card p {
    color: #526b82;

    line-height: 1.7;
}


/* BUTTONS IM VERGLEICH */

.comparison-buttons {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 25px;
}


/* MOBILE */

@media (max-width: 700px) {

    .use-case-grid {
        grid-template-columns: 1fr;
    }

    .comparison-table {
        min-width: 650px;
    }

}/* =========================
   STARTSEITEN HERO MIT BILD
========================= */

.hero {
    padding: 70px 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            #1b4c78,
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #0d2238,
            #102f52
        );
}

.hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 55px;
}

.hero-content {
    max-width: 620px;
}

.hero-content h1 {
    color: #ffffff;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.05;
    margin: 15px 0 22px;
}

.hero-content h1 span {
    color: #7ee2c2;
}

.hero-text {
    color: #c5d6e6;
    font-size: 18px;
    line-height: 1.7;
    max-width: 560px;
}


/* BUTTONS */

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero-buttons .btn {
    display: inline-block;
    padding: 13px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
}

.hero-buttons .btn-primary {
    background: #1677ff;
    color: #ffffff;
}

.hero-buttons .btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
}


/* HERO BILD */

.hero-image {
    position: relative;
}

.hero-image img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;

    border-radius: 24px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.30);
}

.hero-image::before {
    content: "";
    position: absolute;

    width: 70%;
    height: 70%;

    top: 15%;
    left: 15%;

    background: rgba(70, 220, 185, 0.18);

    filter: blur(60px);

    z-index: 0;
}


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

@media (max-width: 900px) {

    .hero-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-content {
        max-width: none;
    }

    .hero-content h1 {
        font-size: 44px;
    }

    .hero-image {
        max-width: 650px;
    }
}

@media (max-width: 550px) {

    .hero-content h1 {
        font-size: 36px;
    }

    .hero-text {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }
}/* =========================
   HERO BILD WEICH EINBLENDEN
========================= */

.hero-image {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
}

/* Dunkelblauer Schleier über dem Bild */
.hero-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(13, 34, 56, 0.65) 0%,
            rgba(13, 34, 56, 0.25) 35%,
            rgba(13, 34, 56, 0.15) 100%
        );

    z-index: 2;
    pointer-events: none;
}

/* Bild etwas dezenter machen */
.hero-image img {
    opacity: 0.78;
}/* =========================================
   HERO – BILD WIE IM BEISPIEL WEICH EINBLENDEN
========================================= */

.hero {
    position: relative;
    overflow: hidden;

    padding: 70px 0;

    background:
        radial-gradient(
            circle at 75% 30%,
            #244c78 0%,
            #18395f 30%,
            #102a49 60%,
            #0d2238 100%
        );
}


/* TEXT + BILD NEBENEINANDER */

.hero-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.3fr;

    align-items: center;

    gap: 20px;
}


/* TEXT IM VORDERGRUND */

.hero-content {
    position: relative;
    z-index: 5;

    max-width: 650px;
}


.hero-content h1 {
    color: #ffffff;

    font-size: clamp(42px, 4.5vw, 68px);
    line-height: 1.08;

    margin: 15px 0 25px;
}


.hero-content h1 span {
    color: #7ee2c2;
}


.hero-text {
    color: #d1dfeb;

    font-size: 18px;
    line-height: 1.7;

    max-width: 600px;
}


/* =========================================
   BILD
========================================= */

.hero-image {
    position: relative;

    /* Bild etwas in Richtung Text ziehen */
    margin-left: -70px;

    overflow: hidden;

    /* KEIN sichtbarer Kartenrahmen */
    border-radius: 0;
}


/* DAS EIGENTLICHE BILD */

.hero-image img {
    display: block;

    width: 100%;
    height: 600px;

    object-fit: cover;

    border-radius: 0;

    /* Bild etwas zurücknehmen */
    opacity: 0.72;

    /* etwas dunkler und bläulicher */
    filter:
        brightness(0.75)
        saturate(0.85)
        contrast(0.95);

    box-shadow: none;
}


/* =========================================
   WEICHER ÜBERGANG ZUM HINTERGRUND
========================================= */

.hero-image::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:

        /* LINKS: Bild verschwindet im Hintergrund */
        linear-gradient(
            90deg,
            #102a49 0%,
            rgba(16, 42, 73, 0.95) 5%,
            rgba(16, 42, 73, 0.75) 12%,
            rgba(16, 42, 73, 0.35) 23%,
            rgba(16, 42, 73, 0.08) 38%,
            transparent 55%
        ),

        /* leichter blauer Schleier über dem gesamten Bild */
        linear-gradient(
            0deg,
            rgba(13, 34, 56, 0.25),
            rgba(13, 34, 56, 0.25)
        );
}


/* Alten Leuchteffekt abschalten */

.hero-image::before {
    display: none;
}


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

.hero-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 30px;
}


.hero-buttons .btn {
    display: inline-block;

    padding: 14px 22px;

    border-radius: 10px;

    text-decoration: none;

    font-weight: 700;
}


.hero-buttons .btn-primary {
    background: #347cff;
    color: #ffffff;

    border: 1px solid #347cff;
}


.hero-buttons .btn-secondary {
    background: transparent;

    color: #ffffff;

    border:
        1px solid rgba(255, 255, 255, 0.35);
}


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

@media (max-width: 900px) {

    .hero {
        padding: 50px 0;
    }


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

        gap: 35px;
    }


    .hero-image {
        margin-left: 0;
    }


    .hero-image img {
        height: auto;
    }


    .hero-image::after {
        background:

            linear-gradient(
                180deg,
                #102a49 0%,
                rgba(16, 42, 73, 0.45) 15%,
                transparent 40%
            ),

            linear-gradient(
                0deg,
                rgba(13, 34, 56, 0.20),
                rgba(13, 34, 56, 0.20)
            );
    }

}


@media (max-width: 550px) {

    .hero-content h1 {
        font-size: 38px;
    }


    .hero-text {
        font-size: 16px;
    }


    .hero-buttons {
        flex-direction: column;
    }


    .hero-buttons .btn {
        width: 100%;

        text-align: center;
    }

}/* =========================================
   HERO FINAL – BILD ALS HINTERGRUND
========================================= */

.hero {
    position: relative;
    overflow: hidden;

    min-height: 680px;

    display: flex;
    align-items: center;

    background: #102a49;
}


/* =========================================
   INHALT
========================================= */

.hero-layout {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
}


/* TEXT */

.hero-content {
    position: relative;
    z-index: 5;

    width: 48%;
    max-width: 650px;

    padding: 70px 0;
}


.hero-content h1 {
    color: #ffffff;

    font-size: clamp(44px, 4.5vw, 68px);
    line-height: 1.08;

    margin: 15px 0 25px;
}


.hero-content h1 span {
    color: #7ee2c2;
}


.hero-text {
    color: #d1dfeb;

    font-size: 18px;
    line-height: 1.7;

    max-width: 590px;
}


/* =========================================
   BILD ÜBER DIE RECHTE HERO-HÄLFTE
========================================= */

.hero-image {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: 68%;

    z-index: 1;

    margin: 0;

    overflow: hidden;

    border-radius: 0;
}


/* BILD FÜLLT DEN KOMPLETTEN BEREICH */

.hero-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    opacity: 0.76;

    border-radius: 0;
    box-shadow: none;

    filter:
        brightness(0.72)
        saturate(0.82)
        contrast(0.95);
}


/* =========================================
   UNSICHTBARER ÜBERGANG
========================================= */

.hero-image::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        /* LINKS: sehr weicher Übergang zum Text */
        linear-gradient(
            90deg,
            #102a49 0%,
            rgba(16, 42, 73, 0.98) 7%,
            rgba(16, 42, 73, 0.90) 14%,
            rgba(16, 42, 73, 0.68) 23%,
            rgba(16, 42, 73, 0.38) 33%,
            rgba(16, 42, 73, 0.15) 43%,
            transparent 57%
        ),

        /* OBEN */
        linear-gradient(
            180deg,
            rgba(16, 42, 73, 0.45) 0%,
            transparent 20%
        ),

        /* UNTEN */
        linear-gradient(
            0deg,
            rgba(16, 42, 73, 0.45) 0%,
            transparent 20%
        ),

        /* BLAUER SCHLEIER */
        rgba(13, 34, 56, 0.08);
}


/* Alten Glow komplett entfernen */

.hero-image::before {
    display: none;
}


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

.hero-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 30px;
}


.hero-buttons .btn {
    display: inline-block;

    padding: 14px 22px;

    border-radius: 10px;

    text-decoration: none;
    font-weight: 700;
}


.hero-buttons .btn-primary {
    background: #347cff;
    color: #ffffff;

    border: 1px solid #347cff;
}


.hero-buttons .btn-secondary {
    background: rgba(13, 34, 56, 0.25);

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.30);
}


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

@media (max-width: 900px) {

    .hero {
        min-height: auto;
    }


    .hero-content {
        width: 100%;

        padding: 60px 0 30px;
    }


    .hero-image {
        position: relative;

        width: 100%;
        height: 400px;

        top: auto;
        right: auto;
        bottom: auto;
    }


    .hero-image::after {
        background:

            linear-gradient(
                180deg,
                #102a49 0%,
                rgba(16, 42, 73, 0.65) 15%,
                transparent 40%
            ),

            rgba(13, 34, 56, 0.10);
    }

}


@media (max-width: 550px) {

    .hero-content h1 {
        font-size: 38px;
    }


    .hero-text {
        font-size: 16px;
    }


    .hero-buttons {
        flex-direction: column;
    }


    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }


    .hero-image {
        height: 300px;
    }

}/* =========================================
   HERO – OBERE UND UNTERE BILDKANTE AUSBLENDEN
========================================= */

.hero-image::after {
    background:

        /* LINKS */
        linear-gradient(
            90deg,
            #102a49 0%,
            rgba(16, 42, 73, 0.98) 7%,
            rgba(16, 42, 73, 0.90) 14%,
            rgba(16, 42, 73, 0.68) 23%,
            rgba(16, 42, 73, 0.38) 33%,
            rgba(16, 42, 73, 0.15) 43%,
            transparent 57%
        ),

        /* OBEN – stärker und länger */
        linear-gradient(
            180deg,
            #102a49 0%,
            rgba(16, 42, 73, 0.95) 4%,
            rgba(16, 42, 73, 0.75) 9%,
            rgba(16, 42, 73, 0.40) 15%,
            rgba(16, 42, 73, 0.12) 22%,
            transparent 30%
        ),

        /* UNTEN – stärker und länger */
        linear-gradient(
            0deg,
            #102a49 0%,
            rgba(16, 42, 73, 0.95) 4%,
            rgba(16, 42, 73, 0.75) 9%,
            rgba(16, 42, 73, 0.40) 15%,
            rgba(16, 42, 73, 0.12) 22%,
            transparent 30%
        ),

          /* leichter Blauschleier */
        rgba(13, 34, 56, 0.08);
}

/* =========================================
   NEU & INTERESSANT
========================================= */

.latest-content {
    padding: 80px 0;
    background: #f0faf6;
}

.latest-heading {
    max-width: 700px;
    margin-bottom: 38px;
}

.latest-heading h2 {
    margin: 8px 0 12px;

    font-size: 36px;
    color: #102a43;
}

.latest-heading p {
    margin: 0;

    font-size: 17px;
    line-height: 1.7;

    color: #526b82;
}


/* KARTEN */

.latest-grid {
    display: grid;

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

    gap: 22px;
}

.latest-card {
    display: flex;
    flex-direction: column;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #dce9e4;
    border-radius: 20px;

    box-shadow:
        0 10px 30px rgba(13, 34, 56, 0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.latest-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(13, 34, 56, 0.10);
}

.latest-icon {
    margin-bottom: 18px;

    font-size: 34px;
}

.latest-category {
    margin-bottom: 9px;

    color: #1677ff;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.latest-card h3 {
    margin: 0 0 12px;

    color: #102a43;

    font-size: 24px;
}

.latest-card p {
    margin: 0 0 20px;

    color: #526b82;

    line-height: 1.7;
}


/* TAGS */

.latest-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 25px;
}

.latest-tags span {
    padding: 6px 10px;

    background: #f0faf6;

    border: 1px solid #d6ebe2;
    border-radius: 20px;

    color: #315c4c;

    font-size: 12px;
}


/* LINK */

.latest-link {
    margin-top: auto;

    color: #1677ff;

    font-weight: 700;
    text-decoration: none;
}

.latest-link:hover {
    text-decoration: underline;
}


/* HANDY / TABLET */

@media (max-width: 900px) {

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

}/* =========================================
   CLEVER CLICK EMPFEHLUNG
========================================= */

.featured-tool {
    padding: 85px 0;
    background: #e2f4ec;
}

.featured-label {
    margin-bottom: 16px;

    color: #1677ff;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}


/* GROSSE EMPFEHLUNGSKARTE */

.featured-tool-box {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: 1.5fr 0.7fr;
    gap: 50px;
    align-items: center;

    padding: 55px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(74, 222, 181, 0.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #102a43,
            #163b60
        );

    border-radius: 26px;

    box-shadow:
        0 20px 50px rgba(13, 34, 56, 0.15);
}


/* TEXTBEREICH */

.featured-tool-content {
    position: relative;
    z-index: 2;
}

.featured-category {
    display: inline-block;

    margin-bottom: 12px;

    color: #8ee5c6;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.featured-tool-content h2 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 44px;
}

.featured-tool-content h3 {
    max-width: 650px;

    margin: 0 0 20px;

    color: #dce9f4;

    font-size: 23px;
    line-height: 1.4;
}

.featured-tool-content > p {
    max-width: 680px;

    color: #b9cbdc;

    font-size: 16px;
    line-height: 1.8;
}


/* FUNKTIONEN */

.featured-features {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin: 26px 0;
}

.featured-features span {
    padding: 9px 13px;

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

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;

    color: #ffffff;

    font-size: 13px;
}


/* BUTTONS */

.featured-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}

.featured-btn {
    display: inline-block;

    padding: 13px 20px;

    border-radius: 9px;

    font-weight: 700;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.featured-btn:hover {
    transform: translateY(-2px);
}

.featured-btn-primary {
    background: #4b83ff;
    color: #ffffff;
}

.featured-btn-primary:hover {
    background: #3974f5;
}

.featured-btn-secondary {
    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.25);

    color: #ffffff;
}

.featured-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
}


/* AFFILIATE HINWEIS */

.featured-tool-content .affiliate-note {
    margin-top: 22px;
    margin-bottom: 0;

    max-width: 650px;

    color: #8fa8bd;

    font-size: 12px;
    line-height: 1.6;
}


/* RECHTE SEITE */

.featured-tool-visual {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 260px;

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

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 22px;
}

.featured-tool-icon {
    margin-bottom: 14px;

    font-size: 72px;
}

.featured-tool-visual span {
    color: #ffffff;

    font-size: 20px;
    font-weight: 800;
}


/* DEKORATIVER HINTERGRUND */

.featured-tool-box::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    right: -100px;
    bottom: -160px;

    background: rgba(104, 229, 193, 0.12);

    border-radius: 50%;
    filter: blur(10px);
}


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

@media (max-width: 900px) {

    .featured-tool-box {
        grid-template-columns: 1fr;

        padding: 38px 28px;
    }

    .featured-tool-content h2 {
        font-size: 36px;
    }

    .featured-tool-visual {
        min-height: 180px;
    }

}


@media (max-width: 550px) {

    .featured-tool {
        padding: 60px 0;
    }

    .featured-tool-content h2 {
        font-size: 32px;
    }

    .featured-buttons {
        flex-direction: column;
    }

    .featured-btn {
        text-align: center;
    }

}
/* =========================================
   FUNNELCOCKPIT BILD – FINAL
========================================= */

.featured-tool-box {
    grid-template-columns: 0.9fr 1.4fr;
    padding: 40px;
    gap: 35px;
    align-items: center;
}


/* BILDBEREICH */

.featured-tool-visual {
    min-height: 0;
    height: auto;

    overflow: hidden;

    border: none;
    border-radius: 20px;

    background: transparent;
}


/* BILD */

.featured-tool-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    border-radius: 20px;
}


/* TABLET */

@media (max-width: 900px) {

    .featured-tool-box {
        grid-template-columns: 1fr;
        padding: 30px;
    }

    .featured-tool-visual {
        height: auto;
    }

}


/* HANDY */

@media (max-width: 550px) {

    .featured-tool-image {
        width: 100%;
        height: auto;
    }

}/* =========================================
   WARUM THE CLEVER CLICK
========================================= */

.why-clever {
    padding: 95px 0;
    background: #f0faf6;
}


/* ÜBERSCHRIFT */

.why-heading {
    max-width: 720px;
    margin-bottom: 45px;
}

.why-heading .eyebrow {
    display: inline-block;
    margin-bottom: 10px;

    color: #1677ff;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.why-heading h2 {
    margin: 0 0 18px;

    color: #102a43;

    font-size: 42px;
    line-height: 1.15;
}

.why-heading p {
    margin: 0;

    color: #526b82;

    font-size: 17px;
    line-height: 1.7;
}


/* DREI KARTEN */

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}


/* EINZELNE KARTE */

.why-card {
    position: relative;
    overflow: hidden;

    min-height: 260px;
    padding: 32px;

    background: #ffffff;

    border: 1px solid #dce9e4;
    border-radius: 20px;

    box-shadow:
        0 10px 30px rgba(13, 34, 56, 0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.why-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(13, 34, 56, 0.10);
}


/* GROSSE NUMMER RECHTS OBEN */

.why-number {
    position: absolute;

    top: 22px;
    right: 25px;

    color: #dcefe8;

    font-size: 42px;
    font-weight: 800;
}


/* ICON */

.why-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    margin-bottom: 25px;

    background: #e8f7f1;

    border-radius: 14px;

    font-size: 25px;
}


/* TEXT */

.why-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 12px;

    color: #102a43;

    font-size: 21px;
}

.why-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #526b82;

    font-size: 15px;
    line-height: 1.7;
}


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

@media (max-width: 900px) {

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

    .why-heading h2 {
        font-size: 36px;
    }

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

}


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

@media (max-width: 550px) {

    .why-clever {
        padding: 65px 0;
    }

    .why-heading h2 {
        font-size: 32px;
    }

    .why-card {
        padding: 26px;
    }

}/* =========================================
   EMPFEHLUNGEN – FEINSCHLIFF
========================================= */

/* Tags */

.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin: 4px 0 20px;
}

.product-tags span {
    padding: 6px 10px;

    background: #f0faf6;
    border: 1px solid #d6ebe2;
    border-radius: 20px;

    color: #315c4c;

    font-size: 12px;
    font-weight: 600;
}


/* FunnelCockpit leicht hervorheben */

.product-card-featured {
    border: 1px solid rgba(77, 132, 255, 0.45);
    box-shadow:
        0 12px 35px rgba(22, 119, 255, 0.08);
}


/* Demnächst-Karten etwas zurücknehmen */

.product-card-coming {
    opacity: 0.82;
}

.product-card-coming:hover {
    opacity: 1;
}
/* =========================================
   NEWSLETTER – FEINSCHLIFF
========================================= */

.newsletter {
    max-width: 1600px;
    margin: 60px auto;

    padding: 48px 46px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;

    background: linear-gradient(
        135deg,
        #17375f,
        #315f91
    );

    border-radius: 22px;
}


/* LINKE SEITE */

.newsletter-content {
    max-width: 650px;
}

.newsletter-label {
    display: block;
    margin-bottom: 10px;

    color: #8fdcc5;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.newsletter-content h2 {
    margin: 0 0 12px;

    color: #ffffff;
    font-size: 30px;
}

.newsletter-content p {
    margin: 0 0 18px;

    color: #d4e3f1;
    line-height: 1.6;
}


/* VORTEILE */

.newsletter-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.newsletter-benefits span {
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
}


/* FORMULAR */

.newsletter-form-wrapper {
    width: 100%;
}

.newsletter-form label {
    display: block;

    margin-bottom: 8px;

    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.newsletter-input-group {
    display: flex;
    gap: 10px;
}

.newsletter-input-group input {
    flex: 1;

    min-width: 0;

    padding: 15px 16px;

    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;

    background: #ffffff;

    color: #102a43;

    font-size: 14px;

    outline: none;
}

.newsletter-input-group input:focus {
    border-color: #8fdcc5;

    box-shadow:
        0 0 0 3px rgba(143, 220, 197, 0.15);
}

.newsletter-input-group button {
    padding: 15px 22px;

    border: 0;
    border-radius: 10px;

    background: #8fdcc5;

    color: #102a43;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.newsletter-input-group button:hover {
    transform: translateY(-2px);
    background: #a7e7d4;
}


/* DATENSCHUTZ-HINWEIS */

.newsletter-note {
    margin: 12px 0 0;

    color: #bcd0e2;

    font-size: 12px;
    line-height: 1.5;
}

.newsletter-note a {
    color: #ffffff;
}


/* HANDY */

@media (max-width: 900px) {

    .newsletter {
        margin: 40px 20px;
        padding: 35px 25px;

        grid-template-columns: 1fr;
        gap: 30px;
    }

    .newsletter-input-group {
        flex-direction: column;
    }

    .newsletter-input-group button {
        width: 100%;
    }

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

.site-footer {
    background: #102a43;
    color: #ffffff;
    padding: 65px 0 0;
}

.footer-container {
    width: min(92%, 1500px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 70px;
}


/* LOGO + BESCHREIBUNG */

.footer-brand {
    max-width: 360px;
}

.footer-logo {
    font-size: 23px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 15px;
}

.footer-brand p {
    margin: 0;
    color: #9fb6ca;
    font-size: 15px;
    line-height: 1.7;
}


/* FOOTER SPALTEN */

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-column h3 {
    margin: 0 0 8px;

    color: #8ee6c7;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.footer-column a {
    color: #c8d7e5;
    text-decoration: none;
    font-size: 14px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-column a:hover {
    color: #8ee6c7;
    transform: translateX(3px);
}


/* UNTERE ZEILE */

.footer-bottom {
    width: min(92%, 1500px);
    margin: 50px auto 0;

    padding: 22px 0;

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

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

.footer-bottom p {
    margin: 0;
    color: #7893aa;
    font-size: 13px;
}


/* TABLET */

@media (max-width: 900px) {

    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

}


/* HANDY */

@media (max-width: 600px) {

    .site-footer {
        padding-top: 45px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 40px;
    }

}/* =========================================
   ONLINE-BUSINESS SEITE
========================================= */


/* HERO */

.business-hero {
    padding: 100px 0 90px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(43, 101, 145, 0.35),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #102a43,
            #183858
        );

    color: #ffffff;
}

.business-hero-inner {
    width: min(92%, 1500px);
    margin: 0 auto;
}

.business-eyebrow {
    display: block;
    margin-bottom: 15px;

    color: #8ee6c7;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.business-hero h1 {
    max-width: 750px;

    margin: 0 0 20px;

    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.05;

    color: #ffffff;
}

.business-hero h1 span {
    color: #8ee6c7;
}

.business-hero p {
    max-width: 720px;

    margin: 0;

    color: #c4d6e6;

    font-size: 18px;
    line-height: 1.7;
}


/* =========================================
   ONLINE-BUSINESS TOOLS
========================================= */

.business-tools {
    padding: 90px 0 110px;

    background: #f0faf6;
}

.business-section-heading {
    width: min(92%, 1500px);
    margin: 0 auto 45px;
}

.business-section-heading > span {
    color: #1677ff;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.business-section-heading h2 {
    margin: 10px 0 12px;

    color: #102a43;

    font-size: 38px;
}

.business-section-heading p {
    max-width: 700px;

    margin: 0;

    color: #526b82;

    font-size: 16px;
    line-height: 1.7;
}


/* KARTEN */

.business-grid {
    width: min(92%, 1500px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.business-card {
    display: flex;
    flex-direction: column;

    min-height: 360px;
    padding: 32px;

    background: #ffffff;

    border: 1px solid #dce9e4;
    border-radius: 20px;

    box-shadow:
        0 10px 30px rgba(13, 34, 56, 0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.business-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(13, 34, 56, 0.10);
}


/* ICON */

.business-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 25px;

    background: #edf4ff;

    border-radius: 15px;

    font-size: 29px;
}


/* KATEGORIE */

.business-card-category {
    margin-bottom: 10px;

    color: #1677ff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


/* ÜBERSCHRIFT */

.business-card h3 {
    margin: 0 0 13px;

    color: #102a43;

    font-size: 25px;
}


/* TEXT */

.business-card p {
    margin: 0 0 22px;

    color: #526b82;

    font-size: 15px;
    line-height: 1.7;
}


/* TAGS */

.business-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 25px;
}

.business-tags span {
    padding: 6px 10px;

    background: #f0faf6;

    border: 1px solid #d6ebe2;
    border-radius: 20px;

    color: #315c4c;

    font-size: 12px;
}


/* LINK */

.business-link {
    margin-top: auto;

    color: #1677ff;

    font-weight: 700;
    text-decoration: none;
}

.business-link:hover {
    text-decoration: underline;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .business-hero {
        padding: 75px 0;
    }

    .business-tools {
        padding: 70px 0;
    }

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

}


@media (max-width: 550px) {

    .business-hero h1 {
        font-size: 40px;
    }

    .business-section-heading h2 {
        font-size: 30px;
    }

    .business-card {
        min-height: auto;
        padding: 25px;
    }

}/* =========================================
   PRODUKTIVITÄT SEITE
========================================= */


/* HERO */

.productivity-hero {
    padding: 90px 0 95px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(91, 167, 255, 0.18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #132b4b,
            #203f66
        );
}

.productivity-hero-inner {
    width: min(1500px, calc(100% - 80px));
    margin: 0 auto;
}

.productivity-eyebrow {
    display: block;

    margin-bottom: 18px;

    color: #91e4c7;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.productivity-hero h1 {
    max-width: 760px;

    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(48px, 5vw, 72px);
    line-height: 1;
}

.productivity-hero h1 span {
    color: #91e4c7;
}

.productivity-hero p {
    max-width: 720px;

    margin: 0;

    color: #d6e3ef;

    font-size: 18px;
    line-height: 1.7;
}


/* =========================================
   PRODUKTIVITÄTS-TOOLS
========================================= */

.productivity-tools {
    padding: 90px 0 110px;

    background: #18211e;
}

.productivity-section-heading {
    width: min(1500px, calc(100% - 80px));

    margin: 0 auto 45px;
}

.productivity-section-heading > span {
    display: block;

    margin-bottom: 12px;

    color: #5f8cff;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.productivity-section-heading h2 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 36px;
}

.productivity-section-heading p {
    max-width: 720px;

    margin: 0;

    color: #9bb5cd;

    font-size: 16px;
    line-height: 1.7;
}


/* KARTEN */

.productivity-grid {
    width: min(1500px, calc(100% - 80px));

    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.productivity-card {
    display: flex;
    flex-direction: column;

    min-height: 320px;

    padding: 32px;

    background: #101211;

    border: 1px solid #36423e;
    border-radius: 20px;

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

.productivity-card:hover {
    transform: translateY(-6px);

    border-color: #91e4c7;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.18);
}


/* ICON */

.productivity-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 25px;

    background: #1c2824;

    border-radius: 14px;

    font-size: 28px;
}


/* KATEGORIE */

.productivity-card-category {
    margin-bottom: 10px;

    color: #5f8cff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
}


/* ÜBERSCHRIFT */

.productivity-card h3 {
    margin: 0 0 14px;

    color: #ffffff;

    font-size: 24px;
}


/* TEXT */

.productivity-card p {
    margin: 0 0 22px;

    color: #9bb5cd;

    line-height: 1.7;
}


/* TAGS */

.productivity-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 28px;
}

.productivity-tags span {
    padding: 6px 11px;

    background: #18211e;

    border: 1px solid #34443e;
    border-radius: 20px;

    color: #91e4c7;

    font-size: 12px;
}


/* DEMNÄCHST */

.productivity-coming {
    margin-top: auto;

    color: #91e4c7;

    font-size: 13px;
    font-weight: 700;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .productivity-hero-inner,
    .productivity-section-heading,
    .productivity-grid {
        width: min(100% - 40px, 1500px);
    }

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

    .productivity-hero {
        padding: 70px 0;
    }

    .productivity-tools {
        padding: 70px 0;
    }
}


@media (max-width: 550px) {

    .productivity-hero h1 {
        font-size: 42px;
    }

    .productivity-section-heading h2 {
        font-size: 30px;
    }

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

}/* =========================================
   VERGLEICHE SEITE
========================================= */

/* HERO */

.compare-hero {
    padding: 95px 0;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(108, 99, 255, 0.22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #102a43,
            #193b5d
        );
}

.compare-hero-inner {
    width: min(1500px, calc(100% - 80px));
    margin: 0 auto;
}

.compare-eyebrow {
    display: block;
    margin-bottom: 18px;

    color: #8ee6c7;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.compare-hero h1 {
    max-width: 850px;

    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(48px, 5vw, 72px);
    line-height: 1.05;
}

.compare-hero h1 span {
    color: #8ee6c7;
}

.compare-hero p {
    max-width: 720px;

    margin: 0;

    color: #c4d6e6;

    font-size: 18px;
    line-height: 1.7;
}


/* =========================================
   VERGLEICHE
========================================= */

.compare-section {
    padding: 90px 0 110px;

    background: #f0faf6;
}

.compare-heading {
    width: min(1500px, calc(100% - 80px));
    margin: 0 auto 45px;
}

.compare-heading > span {
    color: #1677ff;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.compare-heading h2 {
    margin: 10px 0 12px;

    color: #102a43;

    font-size: 38px;
}

.compare-heading p {
    max-width: 700px;

    margin: 0;

    color: #526b82;

    font-size: 16px;
    line-height: 1.7;
}


/* KARTEN */

.compare-grid {
    width: min(1500px, calc(100% - 80px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.compare-card {
    display: flex;
    flex-direction: column;

    min-height: 380px;
    padding: 32px;

    background: #ffffff;

    border: 1px solid #dce9e4;
    border-radius: 20px;

    box-shadow:
        0 10px 30px rgba(13, 34, 56, 0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.compare-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(13, 34, 56, 0.10);
}


/* ERSTER ECHTER VERGLEICH */

.compare-card-featured {
    border: 1px solid rgba(22, 119, 255, 0.40);
}


/* ICONS + VS */

.compare-tools {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 25px;
}

.compare-tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    background: #edf4ff;

    border-radius: 14px;

    font-size: 27px;
}

.compare-vs {
    color: #7890a5;

    font-size: 11px;
    font-weight: 800;
}


/* TEXT */

.compare-category {
    margin-bottom: 10px;

    color: #1677ff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.compare-card h3 {
    margin: 0 0 13px;

    color: #102a43;

    font-size: 25px;
}

.compare-card p {
    margin: 0 0 22px;

    color: #526b82;

    line-height: 1.7;
}


/* TAGS */

.compare-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 25px;
}

.compare-tags span {
    padding: 6px 10px;

    background: #f0faf6;

    border: 1px solid #d6ebe2;
    border-radius: 20px;

    color: #315c4c;

    font-size: 12px;
}


/* LINK */

.compare-link {
    margin-top: auto;

    color: #1677ff;

    font-weight: 700;
    text-decoration: none;
}

.compare-link:hover {
    text-decoration: underline;
}

.compare-coming {
    margin-top: auto;

    color: #7890a5;

    font-size: 13px;
    font-weight: 700;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .compare-hero-inner,
    .compare-heading,
    .compare-grid {
        width: min(100% - 40px, 1500px);
    }

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

    .compare-hero {
        padding: 70px 0;
    }

    .compare-section {
        padding: 70px 0;
    }

}

@media (max-width: 550px) {

    .compare-hero h1 {
        font-size: 42px;
    }

    .compare-heading h2 {
        font-size: 30px;
    }

    .compare-card {
        min-height: auto;
        padding: 25px;
    }

}