/* ==========================================================================
   Makrolar Homepage – Design-System
   Basis: Bootstrap 5.3; Farben aus Logo (blaue Kugel) abgeleitet.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    --mk-blue: #1f3fd1;
    --mk-blue-strong: #1530a8;
    --mk-blue-soft: #e8edff;
    --mk-navy: #0b1640;
    --mk-navy-2: #14246b;
    --mk-accent: #7b2cbf;
    --mk-surface: #ffffff;
    --mk-surface-alt: #f4f6fb;
    --mk-border: #e2e6f0;
    --mk-text: #1b2033;
    --mk-muted: #5b6275;
    --mk-radius: 14px;
    --mk-shadow: 0 1px 2px rgba(11, 22, 64, .06), 0 8px 24px rgba(11, 22, 64, .06);
    --mk-shadow-hover: 0 2px 4px rgba(11, 22, 64, .08), 0 16px 40px rgba(11, 22, 64, .12);
    --bs-body-bg: var(--mk-surface);
    --bs-body-color: var(--mk-text);
    --bs-primary: var(--mk-blue);
    --bs-primary-rgb: 31, 63, 209;
    --bs-link-color: var(--mk-blue);
    --bs-link-color-rgb: 31, 63, 209;
    --bs-link-hover-color: var(--mk-blue-strong);
    --bs-link-hover-color-rgb: 21, 48, 168;
    --bs-border-color: var(--mk-border);
    --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-bs-theme="dark"] {
    --mk-blue: #6f8cff;
    --mk-blue-strong: #91a8ff;
    --mk-blue-soft: #1a2350;
    --mk-surface: #0e1222;
    --mk-surface-alt: #151a2e;
    --mk-border: #262d48;
    --mk-text: #e6e8f0;
    --mk-muted: #a3a9bd;
    --mk-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .25);
    --mk-shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .4);
    --bs-body-bg: var(--mk-surface);
    --bs-body-color: var(--mk-text);
    --bs-primary-rgb: 111, 140, 255;
    --bs-link-color: var(--mk-blue);
    --bs-link-color-rgb: 111, 140, 255;
    --bs-link-hover-color: var(--mk-blue-strong);
    --bs-link-hover-color-rgb: 145, 168, 255;
    --bs-border-color: var(--mk-border);
    --bs-secondary-color: var(--mk-muted);
    --bs-tertiary-bg: var(--mk-surface-alt);
}

html { scroll-padding-top: 84px; }

body {
    background: var(--mk-surface);
    color: var(--mk-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display-5, .display-6 { letter-spacing: -.015em; }

.text-body-secondary { color: var(--mk-muted) !important; }

.skip-link {
    position: absolute;
    left: 1rem;
    top: .5rem;
    z-index: 2000;
    padding: .5rem 1rem;
    background: var(--mk-surface);
    border-radius: 8px;
}

/* ---------- Buttons ---------- */

.btn { border-radius: 10px; font-weight: 500; }

.btn-primary {
    --bs-btn-bg: var(--mk-blue);
    --bs-btn-border-color: var(--mk-blue);
    --bs-btn-hover-bg: var(--mk-blue-strong);
    --bs-btn-hover-border-color: var(--mk-blue-strong);
    --bs-btn-active-bg: var(--mk-blue-strong);
    --bs-btn-active-border-color: var(--mk-blue-strong);
    --bs-btn-disabled-bg: var(--mk-blue);
    --bs-btn-disabled-border-color: var(--mk-blue);
}

[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #0b1640;
    --bs-btn-hover-color: #0b1640;
    --bs-btn-active-color: #0b1640;
}

.btn-outline-primary {
    --bs-btn-color: var(--mk-blue);
    --bs-btn-border-color: var(--mk-blue);
    --bs-btn-hover-bg: var(--mk-blue);
    --bs-btn-hover-border-color: var(--mk-blue);
    --bs-btn-active-bg: var(--mk-blue);
    --bs-btn-active-border-color: var(--mk-blue);
}

.btn-light-on-dark {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .45);
    --bs-btn-hover-color: var(--mk-navy);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
}

.btn-icon {
    --bs-btn-color: var(--mk-muted);
    --bs-btn-hover-color: var(--mk-blue);
    --bs-btn-hover-bg: var(--mk-blue-soft);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.btn-link-arrow {
    font-weight: 600;
    text-decoration: none;
}

    .btn-link-arrow::after {
        content: "\2192";
        display: inline-block;
        margin-left: .35rem;
        transition: transform .2s ease;
    }

    .btn-link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Header ---------- */

.site-header {
    background: color-mix(in srgb, var(--mk-surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--mk-border);
}

    .site-header .navbar { min-height: 68px; }

    .site-header .nav-link {
        font-weight: 500;
        color: var(--mk-text);
        border-radius: 8px;
        padding-inline: .8rem !important;
        white-space: nowrap;
    }

    .site-header .btn { white-space: nowrap; }

@media (max-width: 1199.98px) {
    .site-header .navbar-collapse { padding-bottom: 1rem; }
}

        .site-header .nav-link:hover,
        .site-header .nav-link.active { color: var(--mk-blue); }

        .site-header .nav-link.active { background: var(--mk-blue-soft); }

.brand-logo { height: 26px; width: auto; }

[data-bs-theme="dark"] .brand-logo { filter: invert(1) hue-rotate(180deg) brightness(1.1); }

.dropdown-menu {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    padding: .5rem;
}

.dropdown-menu-products { min-width: 360px; }

.dropdown-item {
    border-radius: 8px;
    padding: .5rem .75rem;
    white-space: normal;
}

    .dropdown-item:active { background: var(--mk-blue); }

.lang-switch .btn { min-width: 40px; }

/* ---------- Hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(111, 140, 255, .45), transparent 60%),
        radial-gradient(800px 400px at -10% 110%, rgba(123, 44, 191, .35), transparent 60%),
        linear-gradient(135deg, var(--mk-navy) 0%, var(--mk-navy-2) 55%, #1d2f8f 100%);
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 7vw, 5.5rem);
}

    /* Kreis-Motiv aus dem Logo */
    .hero::before,
    .hero::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .hero::before {
        width: 520px;
        height: 520px;
        right: -140px;
        top: -160px;
        border: 2px solid rgba(255, 255, 255, .08);
        box-shadow: 0 0 0 60px rgba(255, 255, 255, .025), 0 0 0 120px rgba(255, 255, 255, .02);
    }

    .hero::after {
        width: 180px;
        height: 180px;
        right: 12%;
        bottom: -60px;
        background: radial-gradient(circle at 35% 35%, #ffffff 0%, #8fa4ff 18%, #2a3fe0 55%, #0f1a8a 100%);
        opacity: .35;
        filter: blur(.5px);
    }

    .hero .lead { color: rgba(255, 255, 255, .82); max-width: 40rem; }

    .hero h1 { font-weight: 800; }

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mk-blue);
    margin-bottom: .75rem;
}

.hero .hero-kicker {
    color: #c9d3ff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    padding: .3rem .8rem;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.hero-stat {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--mk-radius);
    padding: 1.1rem 1.25rem;
    backdrop-filter: blur(4px);
}

    .hero-stat strong {
        display: block;
        font-size: 1.75rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .hero-stat span { color: rgba(255, 255, 255, .75); font-size: .875rem; }

.page-hero {
    background:
        radial-gradient(700px 260px at 90% 0%, rgba(31, 63, 209, .12), transparent 70%),
        var(--mk-surface-alt);
    border-bottom: 1px solid var(--mk-border);
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3rem);
}

    .page-hero .lead { color: var(--mk-muted); max-width: 48rem; }

/* ---------- Sections ---------- */

.section { padding: clamp(3rem, 7vw, 5rem) 0; }

.section-alt { background: var(--mk-surface-alt); }

.section-title { font-weight: 750; margin-bottom: .5rem; }

.section-lead { color: var(--mk-muted); max-width: 46rem; }

.prose { max-width: 52rem; }

    .prose h2, .prose h3, .prose h4 { margin-top: 2rem; }

    .prose h5 { margin-top: 1.25rem; font-size: 1.05rem; }

/* ---------- Cards ---------- */

.mk-card {
    height: 100%;
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    box-shadow: var(--mk-shadow);
    padding: 1.5rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

a.mk-card,
.mk-card-link {
    color: inherit;
    text-decoration: none;
}

    a.mk-card:hover,
    .mk-card-hover:hover {
        transform: translateY(-3px);
        box-shadow: var(--mk-shadow-hover);
        border-color: color-mix(in srgb, var(--mk-blue) 35%, var(--mk-border));
    }

.mk-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--mk-blue);
    background: var(--mk-blue-soft);
    margin-bottom: 1rem;
}

.product-card .product-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    flex: none;
}

.product-name { font-weight: 700; }

.product-card h3 { font-size: 1.1rem; }

.product-card .headline {
    color: var(--mk-muted);
    font-size: .925rem;
}

.check-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .check-list li {
        position: relative;
        padding-left: 1.6rem;
        margin-bottom: .4rem;
    }

        .check-list li::before {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: .1rem;
            font-size: .8rem;
            color: var(--mk-blue);
        }

@media (min-width: 768px) {
    .columns-md-2 { columns: 2; column-gap: 2rem; }

        .columns-md-2 li { break-inside: avoid; }
}

/* ---------- Product details ---------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.stat {
    background: var(--mk-surface-alt);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    padding: 1.1rem 1.25rem;
}

    .stat strong {
        display: block;
        font-size: 1.6rem;
        font-weight: 800;
        line-height: 1.1;
        color: var(--mk-blue);
    }

    .stat span {
        display: block;
        color: var(--mk-muted);
        font-size: .875rem;
        /* lange deutsche Komposita auf schmalen Bildschirmen trennen */
        hyphens: auto;
        overflow-wrap: break-word;
    }

.stat { min-width: 0; }

    /* längere Kennwerte (z.B. "DIN ISO 20457") ohne Umbruch */
    .stat.stat-text strong { font-size: 1.2rem; }

@media (min-width: 400px) {
    .stat.stat-text strong { white-space: nowrap; }
}

.system-requirements {
    list-style: none;
    padding: 0;
    color: var(--mk-muted);
}

    .system-requirements li {
        display: flex;
        gap: .6rem;
        margin-bottom: .45rem;
    }

    .system-requirements i {
        flex: none;
        width: 1rem;
        margin-top: .2rem;
        text-align: center;
        color: var(--mk-blue);
    }

/* ---------- Downloads ---------- */

.download-list {
    display: grid;
    gap: 1rem;
}

.download-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 2rem;
    align-items: center;
    scroll-margin-top: 90px;
}

    .download-item:target { border-color: var(--mk-blue); box-shadow: 0 0 0 3px var(--mk-blue-soft), var(--mk-shadow); }

.download-product {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.download-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .6rem;
}

.download-extras {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

    .download-extras li { margin-bottom: .2rem; }

@media (max-width: 767.98px) {
    .download-item { grid-template-columns: 1fr; }

    .download-actions { align-items: stretch; }

    .download-extras { text-align: left; }
}

/* ---------- Buch ---------- */

.book-cover img {
    border-radius: 6px;
    box-shadow: 0 14px 40px rgba(11, 22, 64, .25);
}

.chapter-list {
    counter-reset: chapter;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .chapter-list li {
        counter-increment: chapter;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: .25rem .75rem;
        padding: .6rem 0 .6rem 2.5rem;
        position: relative;
        border-bottom: 1px dashed var(--mk-border);
    }

        .chapter-list li::before {
            content: counter(chapter, decimal-leading-zero);
            position: absolute;
            left: 0;
            font-weight: 700;
            color: var(--mk-blue);
        }

.chapter-product {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    padding: .1rem .55rem .1rem .3rem;
    border-radius: 999px;
    background: var(--mk-blue-soft);
    text-decoration: none;
}

    .chapter-product img { border-radius: 4px; }

/* ---------- Stichwort-Register ---------- */

.keyword-toolbar {
    display: grid;
    gap: .9rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 992px) {
    .keyword-toolbar { position: sticky; top: 76px; z-index: 5; }
}

.keyword-products {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.chip-toggle { cursor: pointer; }

    .chip-toggle.active {
        background: var(--mk-blue);
        border-color: var(--mk-blue);
        color: #fff;
    }

[data-bs-theme="dark"] .chip-toggle.active { color: var(--mk-navy); }

.letter-index {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: 1.5rem;
}

    .letter-index a {
        min-width: 2rem;
        text-align: center;
        padding: .2rem .4rem;
        border-radius: 8px;
        font-weight: 700;
        text-decoration: none;
    }

        .letter-index a:hover { background: var(--mk-blue-soft); }

        .letter-index a.disabled {
            pointer-events: none;
            color: var(--mk-muted);
            opacity: .4;
        }

.keyword-group { scroll-margin-top: 260px; }

.keyword-letter {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--mk-blue);
    border-bottom: 2px solid var(--mk-border);
    padding-bottom: .25rem;
    margin: 1.5rem 0 .25rem;
}

.keyword-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .keyword-list li {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: .35rem 1rem;
        padding: .5rem 0;
        border-bottom: 1px dashed var(--mk-border);
    }

.keyword-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.chapter-product.is-optional {
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--mk-blue) 50%, var(--mk-border));
}

    .chapter-product.is-optional small { font-weight: 500; color: var(--mk-muted); }

/* ---------- Versionshinweise ---------- */

.chip-link { text-decoration: none; }

    .chip-link:hover { border-color: var(--mk-blue); color: var(--mk-blue); }

.release-card { scroll-margin-top: 90px; }

    .release-card:target { border-color: var(--mk-blue); box-shadow: 0 0 0 3px var(--mk-blue-soft), var(--mk-shadow); }

.release-list {
    list-style: none;
    padding: 0 0 0 1.25rem;
    margin: 0;
    border-left: 2px solid var(--mk-border);
}

    .release-list > li {
        position: relative;
        padding-bottom: 1rem;
    }

        .release-list > li::before {
            content: "";
            position: absolute;
            left: calc(-1.25rem - 7px);
            top: .35rem;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--mk-surface);
            border: 3px solid var(--mk-blue);
        }

.release-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
}

.release-version { font-weight: 700; }

.release-head time {
    font-size: .8rem;
    color: var(--mk-muted);
}

.release-notes {
    margin: .35rem 0 0;
    padding-left: 1.1rem;
    font-size: .9rem;
    color: var(--mk-muted);
}

    .release-notes li { margin-bottom: .2rem; }

/* ---------- Dokumentation ---------- */

.doc-card {
    position: relative;
    scroll-margin-top: 90px;
}

    .doc-card:target,
    .doc-card:has(.doc-anchor:target) { border-color: var(--mk-blue); box-shadow: 0 0 0 3px var(--mk-blue-soft), var(--mk-shadow); }

.doc-anchor {
    position: absolute;
    top: -90px;
}

.doc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .doc-list li {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: .5rem 1rem;
        padding: .6rem 0;
        border-top: 1px dashed var(--mk-border);
    }

.doc-title { font-weight: 600; }

.doc-files {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
}

    .steps li {
        counter-increment: step;
        position: relative;
        padding-left: 2.75rem;
        margin-bottom: 1rem;
        min-height: 2rem;
    }

        .steps li::before {
            content: counter(step);
            position: absolute;
            left: 0;
            top: -.15rem;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: var(--mk-blue);
            background: var(--mk-blue-soft);
        }

.manual-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    margin: -.5rem;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}

    .manual-link:hover { background: var(--mk-blue-soft); color: inherit; }

.product-tabs .nav-link {
    font-weight: 600;
    color: var(--mk-muted);
}

    .product-tabs .nav-link.active { color: var(--mk-blue); }

/* viele Reiter: auf schmalen Bildschirmen horizontal scrollen statt umbrechen */
.product-tabs-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

    .product-tabs-scroll .nav-link { white-space: nowrap; }

.screenshot-caption {
    margin: .5rem 0 2.25rem;
    text-align: center;
    font-size: .85rem;
    color: var(--mk-muted);
}

/* Auswahlkriterien (PolSelec) */
.criteria-tree { font-size: .92rem; }

.criteria-list {
    list-style: none;
    margin: 0;
    padding-left: 1.1rem;
    border-left: 1px dashed var(--mk-border);
}

.criteria-tree > .criteria-list { padding-left: 0; border-left: 0; }

.criteria-list li { margin: .15rem 0; }

.criteria-list summary {
    cursor: pointer;
    padding: .15rem 0;
}

    .criteria-list summary::marker { color: var(--mk-blue); }

.criteria-node { font-weight: 600; }

.criteria-leaf { font-style: italic; color: var(--mk-muted); }

.criteria-count {
    font-size: .72rem;
    font-weight: 600;
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--mk-blue-soft);
    color: var(--mk-blue);
}

.criteria-hit {
    background: color-mix(in srgb, #ffc107 35%, transparent);
    border-radius: 3px;
}

.material-table-scroll { max-height: 640px; overflow-y: auto; }

    .material-table-scroll thead th { z-index: 1; }

.editions-table th[scope="row"] { font-weight: 500; }

/* Unter-Reiter innerhalb eines Moduls (PolCycleTime) */
.module-pills {
    gap: .35rem;
    padding: .35rem;
    border-radius: 12px;
    background: var(--mk-surface-alt);
    border: 1px solid var(--mk-border);
    display: inline-flex;
    flex-wrap: wrap;
}

    .module-pills .nav-link {
        border-radius: 9px;
        padding: .35rem .85rem;
        font-size: .9rem;
        color: var(--mk-text);
    }

        .module-pills .nav-link.active { background: var(--mk-blue); color: #fff; }

[data-bs-theme="dark"] .module-pills .nav-link.active { color: var(--mk-navy); }

.module-badge-1 { background: #82a8fc; }

.module-badge-2 { background: #3472fc; }

.module-badge-3 { background: #0645d2; }

/* Geometrie-Galerie (PolCycleTime) */
.geometry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
}

.geometry {
    margin: 0;
    padding: .6rem;
    background: #fff;
    border: 1px solid var(--mk-border);
    border-radius: 12px;
    text-align: center;
}

    .geometry img {
        width: 100%;
        height: auto;
        aspect-ratio: 654 / 630;
        object-fit: contain;
    }

/* Variante für Abbildungen mit unterschiedlichen Seitenverhältnissen (PolPartDesign) */
.geometry-grid-wide { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

    .geometry-grid-wide .geometry img { aspect-ratio: 4 / 3; }

    .geometry figcaption {
        margin-top: .4rem;
        font-size: .82rem;
        font-weight: 600;
        color: #1b2033;
        hyphens: auto;
    }

.definition-list dt { font-weight: 700; }

.definition-list dd {
    margin: 0 0 .75rem;
    padding-left: 1rem;
    border-left: 3px solid var(--mk-blue-soft);
    color: var(--mk-muted);
}

.editions-table td, .editions-table th { padding: .7rem 1rem; }

.product-table { overflow: hidden; }

    .product-table thead th {
        background: var(--mk-surface-alt);
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--mk-muted);
        white-space: nowrap;
    }

    .product-table td,
    .product-table th { padding-inline: 1rem; }

    .product-table tbody { font-size: .9rem; }

/* width/height-Attribute nur für das Seitenverhältnis beim Laden – Höhe skaliert mit der Breite */
.screenshot-carousel .carousel-item img { height: auto; }

.screenshot-carousel .carousel-indicators { margin-bottom: -.25rem; }

    .screenshot-carousel .carousel-indicators [data-bs-target] { background-color: var(--mk-blue); }

    .screenshot-carousel .carousel-control-prev-icon,
    .screenshot-carousel .carousel-control-next-icon {
        background-color: rgba(11, 22, 64, .55);
        border-radius: 50%;
        background-size: 55%;
        width: 2.5rem;
        height: 2.5rem;
    }

/* ---------- Keyword chips ---------- */

.chip-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.chip {
    display: inline-block;
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 500;
    color: var(--mk-text);
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
}

    .chip:nth-child(3n+1) { border-color: color-mix(in srgb, var(--mk-blue) 45%, var(--mk-border)); }

    .chip:nth-child(3n+2) { background: var(--mk-blue-soft); border-color: transparent; }

/* ---------- Book ---------- */

.book-card {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.5rem;
    align-items: start;
}

    .book-card img {
        width: 100%;
        height: auto;
        border-radius: 6px;
        box-shadow: 0 10px 30px rgba(11, 22, 64, .25);
        transform: rotate(-2deg);
        transition: transform .3s ease;
    }

        .book-card img:hover { transform: rotate(0) scale(1.03); }

@media (max-width: 575.98px) {
    .book-card { grid-template-columns: 96px 1fr; gap: 1rem; }
}

/* ---------- News timeline ---------- */

.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--mk-border);
}

    .timeline li {
        position: relative;
        padding: 0 0 1.25rem 1.5rem;
    }

        .timeline li::before {
            content: "";
            position: absolute;
            left: -7px;
            top: .35rem;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--mk-surface);
            border: 3px solid var(--mk-blue);
        }

    .timeline time {
        display: block;
        font-size: .8rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--mk-blue);
        margin-bottom: .15rem;
    }

/* ---------- Customer logos ---------- */

.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
}

    .logo-grid a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 72px;
        padding: .75rem;
        background: #fff;
        border: 1px solid var(--mk-border);
        border-radius: 12px;
        transition: box-shadow .2s ease, transform .2s ease;
    }

        .logo-grid a:hover { box-shadow: var(--mk-shadow-hover); transform: translateY(-2px); }

    .logo-grid img {
        max-width: 100%;
        max-height: 44px;
        object-fit: contain;
        filter: grayscale(1);
        opacity: .75;
        transition: filter .2s ease, opacity .2s ease;
    }

    .logo-grid a:hover img { filter: none; opacity: 1; }

/* ---------- Discount sticker ---------- */

.discount-sticker {
    display: block;
    max-width: 240px;
    padding: 1.1rem 1.25rem;
    border-radius: 18px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(145deg, #8b3fd1 0%, #5a189a 100%);
    box-shadow: 0 12px 30px rgba(61, 14, 102, .45);
    transform: rotate(-5deg);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .discount-sticker:hover,
    .discount-sticker:focus-visible {
        color: #fff;
        transform: rotate(0) scale(1.04);
        box-shadow: 0 16px 36px rgba(61, 14, 102, .55);
    }

    .discount-sticker:focus-visible { outline: 3px solid #ffc107; outline-offset: 4px; }

    .discount-sticker .top,
    .discount-sticker .bottom {
        display: block;
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .discount-sticker .main {
        display: block;
        margin: .3rem 0;
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .discount-sticker .bottom { color: #ffe69c; }

/* Container ausblenden, wenn ein bedingter Inhalt (z.B. Aktionssticker) nichts rendert */
.empty-hidden:not(:has(*)) { display: none !important; }

/* ---------- CTA band ---------- */

.cta-band {
    border-radius: calc(var(--mk-radius) + 6px);
    color: #fff;
    background:
        radial-gradient(600px 240px at 100% 0%, rgba(111, 140, 255, .4), transparent 70%),
        linear-gradient(135deg, var(--mk-navy) 0%, var(--mk-navy-2) 100%);
    padding: clamp(2rem, 5vw, 3rem);
}

    .cta-band p { color: rgba(255, 255, 255, .8); }

/* ---------- Contact ---------- */

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .contact-list li {
        display: flex;
        gap: .75rem;
        padding: .6rem 0;
        border-bottom: 1px dashed var(--mk-border);
    }

        .contact-list li:last-child { border-bottom: 0; }

    .contact-list i { color: var(--mk-blue); width: 1.25rem; margin-top: .2rem; text-align: center; }

/* ---------- Footer ---------- */

.site-footer {
    background: var(--mk-navy);
    color: rgba(255, 255, 255, .75);
}

    .site-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }

        .site-footer a:hover { color: #fff; text-decoration: underline; }

    .site-footer li { margin-bottom: .4rem; }

.footer-brand { color: #fff; font-weight: 700; }

.footer-heading {
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 1.25rem 0;
}

/* ---------- Cookie consent ---------- */

.cookie-consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1080;
    background: var(--mk-surface);
    border-top: 3px solid var(--mk-blue);
    animation: mk-slide-up .3s ease-out;
}

    .cookie-consent[hidden] { display: none; }

@keyframes mk-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}