/* ==========================================================================
   MediaFutureRT 2026
   Complete Design System
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
    --mf-navy: #12223c;
    --mf-navy-light: #1b3153;

    --mf-blue: #496cac;
    --mf-blue-deep: #31558f;

    --mf-cyan: #24a7a1;

    --mf-text: #25344a;
    --mf-muted: #6c788a;
    --mf-soft: #8b96a6;

    --mf-white: #ffffff;

    --mf-surface: #f6f8fb;
    --mf-surface-blue: #f1f6fb;

    --mf-line: #e5eaf1;

    --mf-radius-sm: 14px;
    --mf-radius-md: 22px;
    --mf-radius-lg: 30px;

    --mf-shadow-sm:
        0 8px 30px rgba(18, 34, 60, .06);

    --mf-shadow-md:
        0 18px 50px rgba(18, 34, 60, .10);

    --mf-shadow-lg:
        0 28px 75px rgba(18, 34, 60, .13);

    --mf-container:
        1520px;

    --mf-container-text:
        1180px;
}


/* ==========================================================================
   2. RESET / GLOBAL
   ========================================================================== */

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(73, 108, 172, .07),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 7%,
            rgba(36, 167, 161, .07),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #f8fbff 0,
            #ffffff 390px
        );

    color: var(--mf-text);

    font-family:
        "Open Sans",
        Arial,
        sans-serif !important;

    font-size: 16px;
    line-height: 1.65;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
picture {
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: var(--mf-navy);
    text-decoration: none;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}

a:hover {
    color: var(--mf-blue);
    text-decoration: none;
}

.text-style {
    color: var(--mf-text);

    font-family:
        "Open Sans",
        Arial,
        sans-serif !important;

    font-size: 16px;
}

body,
.mediafuturert {
    word-break: normal;
    overflow-wrap: break-word;
}

.mediafuturert {
    width: 100%;

    color: var(--mf-text);
    background: transparent;
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.mediafuturert h1,
.mediafuturert h2,
.mediafuturert h3,
.mediafuturert h4,
.mediafuturert h5,
.mediafuturert h6 {
    color: var(--mf-navy);

    font-weight: 700;

    letter-spacing: -.035em;
}

.mediafuturert h1 {
    font-size: clamp(2.8rem, 4.7vw, 5rem);
    line-height: .99;
}

.mediafuturert h2 {
    font-size: clamp(2.15rem, 3.7vw, 3.9rem);
    line-height: 1.04;
}

.mediafuturert h3 {
    font-size: clamp(1.4rem, 2vw, 2rem);
    line-height: 1.15;
}

.mediafuturert p {
    color: var(--mf-text);
}

.mf-eyebrow {
    display: inline-block;

    margin: 0 0 14px;

    color: var(--mf-blue);

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

    line-height: 1.3;

    letter-spacing: .16em;

    text-transform: uppercase;
}


/* ==========================================================================
   4. CONTAINERS / TYPO3 FRAMES
   ========================================================================== */

.mediafuturert #content {
    position: relative;

    width: 100%;
    max-width: none;

    margin: 86px auto 0;

    z-index: 1;
}

.mediafuturert #maincontent {
    width: 100%;

    padding: 0 0 32px;
}

.frame {
    position: relative;

    width: 100%;

    margin: 0 !important;

    padding: 16px 0 !important;
}

.frame-container,
.frame-container-default,
.content-max-width {
    width: min(
        var(--mf-container),
        calc(100% - 64px)
    ) !important;

    max-width: var(--mf-container) !important;

    margin-right: auto !important;
    margin-left: auto !important;
}

.frame-greybox {
    margin: 0 !important;
}

.frame-container {
    padding-right: 0;
    padding-left: 0;
}


/* ==========================================================================
   5. HEADER
   ========================================================================== */

.fixedheader,
.mf-site-header {
    position: fixed !important;

    top: 0;
    right: 0;
    left: 0;

    width: 100%;
    min-height: 86px;

    border: 0 !important;
    border-bottom:
        1px solid rgba(18, 34, 60, .065) !important;

    background:
        rgba(255, 255, 255, .93) !important;

    box-shadow:
        0 8px 28px rgba(18, 34, 60, .055) !important;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    z-index: 9999 !important;
}

.fixedheader > .row,
.mf-site-header > .row {
    display: flex;

    width: min(
        var(--mf-container),
        calc(100% - 64px)
    ) !important;

    max-width: var(--mf-container) !important;

    min-height: 86px;

    margin: 0 auto !important;

    align-items: center;

    flex-wrap: nowrap;
}


/* Brand */

.logo {
    display: flex;

    min-height: 86px;
    height: auto !important;

    padding: 0 !important;

    flex-direction: column;
    justify-content: center;
}

.logo a {
    display: inline-flex;

    width: fit-content;

    align-items: center;

    gap: 10px;

    color: var(--mf-navy) !important;

    font-size: clamp(
        1.45rem,
        1.7vw,
        2rem
    ) !important;

    font-weight: 800 !important;

    line-height: 1.05;

    letter-spacing: -.045em;
}

.logo a:hover {
    color: var(--mf-blue) !important;
}

.logo img {
    width: 62px !important;
    max-width: 62px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    vertical-align: middle;
}

.logo .secondtitle,
.mf-brand-tagline {
    margin: 4px 0 0 72px !important;

    padding: 0 !important;

    text-indent: 0 !important;

    color: var(--mf-muted) !important;

    font-size: 10px !important;
    font-weight: 700;

    line-height: 1.25;

    letter-spacing: .11em;

    text-transform: uppercase;

    white-space: nowrap;
}


/* ==========================================================================
   6. NAVIGATION — DESKTOP
   ========================================================================== */

input#responsive-nav,
label.responsive-nav-label {
    display: none;
}

.headernavi {
    position: relative;

    display: flex;

    min-height: 86px;

    padding: 0 !important;

    align-items: center;
    justify-content: flex-end;
}

.nav_text {
    display: none;
}

.menu2 {
    position: static !important;

    display: flex !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    align-items: center;

    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    transform: none !important;

    opacity: 1 !important;
}

.menu2 ul,
.menu2 li {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.menu2 ul.level1 {
    display: flex !important;

    width: auto !important;
    min-height: 0 !important;

    gap: 6px;

    align-items: center;
    justify-content: flex-end;
}

.menu2 ul.level1 > li {
    position: relative;

    display: block !important;

    width: auto !important;
    min-height: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    color: var(--mf-text) !important;
}

.menu2 ul.level1 > li > a,
.menu2 ul.level1 > li > .active_div {
    display: inline-flex !important;

    width: auto !important;

    padding: 11px 14px !important;

    align-items: center;

    gap: 6px;

    border-radius: 999px;

    background: transparent !important;

    color: var(--mf-text) !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    white-space: nowrap;
}

.menu2 ul.level1 > li > a:hover,
.menu2 ul.level1 > li > a:focus,
.menu2 ul.level1 > li > .active_div {
    background:
        rgba(73, 108, 172, .08) !important;

    color: var(--mf-blue) !important;
}


/* Kontakt als Primary Navigation CTA */

.menu2 ul.level1 > li:last-child > a {
    padding-right: 18px !important;
    padding-left: 18px !important;

    background: var(--mf-navy) !important;

    color: #fff !important;

    box-shadow:
        0 10px 22px rgba(18, 34, 60, .13);
}

.menu2 ul.level1 > li:last-child > a:hover {
    background: var(--mf-blue) !important;

    color: #fff !important;

    transform: translateY(-1px);
}

.menu2 ul.level1 li i,
.menu2 .inner_a .fa-sort-down,
.menu2 .inner_cur .fas {
    color: currentColor !important;
}


/* Dropdown */

.menu2 div.megadd {
    display: none !important;

    position: absolute !important;

    top: calc(100% + 2px) !important;
    right: 0 !important;
    left: auto !important;

    width: max-content !important;
    min-width: 270px !important;
    max-width: 360px !important;

    padding: 9px !important;

    border:
        1px solid rgba(18, 34, 60, .08) !important;

    border-radius: 18px !important;

    background:
        rgba(255, 255, 255, .99) !important;

    box-shadow:
        var(--mf-shadow-lg) !important;

    transform: none !important;

    z-index: 10000 !important;
}

.menu2 ul.level1 > li:hover > div.megadd,
.menu2 ul.level1 > li:focus-within > div.megadd {
    display: block !important;
}

.menu2 ul.level2,
.menu2 ul.level3 {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    border: 0 !important;

    background: transparent !important;

    transform: none !important;
}

.menu2 ul.level2 li,
.menu2 ul.level3 li {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}

.menu2 ul.level2 li a,
.menu2 ul.level3 li a,
.menu2 ul.level2 .active_div {
    display: block !important;

    width: 100% !important;

    padding: 10px 12px !important;

    border: 0 !important;
    border-radius: 10px;

    background: transparent !important;

    color: var(--mf-text) !important;

    font-size: 14px !important;
    font-weight: 600 !important;
}

.menu2 ul.level2 li a:hover,
.menu2 ul.level3 li a:hover {
    background:
        rgba(73, 108, 172, .08) !important;

    color: var(--mf-blue) !important;
}


/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

.mediafuturert .btn,
.mediafuturert a.btn,
.mf-btn-primary,
.mf-btn-secondary {
    display: inline-flex !important;

    min-height: 48px;

    padding: 12px 21px !important;

    align-items: center;
    justify-content: center;

    border-radius: 999px !important;

    font-size: 14px;
    font-weight: 800 !important;

    line-height: 1.2;

    text-align: center;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.mediafuturert .btn,
.mediafuturert a.btn,
.mf-btn-primary {
    border:
        1px solid var(--mf-navy) !important;

    background:
        var(--mf-navy) !important;

    color:
        #fff !important;
}

.mediafuturert .btn:hover,
.mediafuturert a.btn:hover,
.mf-btn-primary:hover {
    border-color:
        var(--mf-blue) !important;

    background:
        var(--mf-blue) !important;

    color:
        #fff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 26px
        rgba(73, 108, 172, .20);
}

.mf-btn-secondary {
    border:
        1px solid #dce3ec !important;

    background:
        #fff !important;

    color:
        var(--mf-navy) !important;

    box-shadow: none !important;
}

.mf-btn-secondary:hover {
    border-color:
        var(--mf-blue) !important;

    background:
        var(--mf-blue) !important;

    color:
        #fff !important;
}


/* ==========================================================================
   8. HOMEPAGE HERO
   ========================================================================== */

.mf-home-hero-text {
    width: min(
        var(--mf-container-text),
        calc(100% - 48px)
    );

    margin: 0 auto;

    padding:
        74px 0 30px;

    text-align: center;
}

.mf-home-hero-text .mf-eyebrow {
    margin-bottom: 16px;
}

.mf-home-hero-text h1 {
    max-width: 1080px;

    margin:
        0 auto 24px !important;

    color:
        var(--mf-navy) !important;

    font-size:
        clamp(3rem, 4.25vw, 5rem) !important;

    line-height:
        .98 !important;

    letter-spacing:
        -.055em !important;
}

.mf-home-hero-text .mf-home-hero__lead {
    max-width: 880px;

    margin:
        0 auto 12px !important;

    color:
        #405066 !important;

    font-size:
        18px !important;

    line-height:
        1.65 !important;
}

.mf-home-hero-text > p:not(.mf-home-hero__lead) {
    max-width: 900px;

    margin:
        0 auto !important;

    color:
        var(--mf-muted) !important;

    line-height:
        1.65 !important;
}

.mf-home-hero__actions {
    display: flex;

    margin:
        25px 0 18px;

    gap: 10px;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;
}

.mf-techline {
    display: flex;

    gap: 7px;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;
}

.mf-techline span {
    padding:
        6px 11px;

    border:
        1px solid #e0e6ee;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .84);

    color:
        var(--mf-muted);

    font-size:
        11px;

    font-weight:
        700;
}


/* ==========================================================================
   9. HERO IMAGE — TYPO3 TEXT/MEDIA OR IMAGE ELEMENT
   Zusatzklasse am TYPO3-Element: mf-home-hero-image
   ========================================================================== */

.mf-home-hero-image {
    width:
        min(
            1420px,
            calc(100% - 64px)
        ) !important;

    margin:
        0 auto 38px !important;

    padding:
        0 !important;
}

.mf-home-hero-image .frame-container,
.mf-home-hero-image .frame-container-default {
    width:
        100% !important;

    max-width:
        none !important;
}

.mf-home-hero-image figure,
.mf-home-hero-image .gallery,
.mf-home-hero-image .textmedia-gallery,
.mf-home-hero-image .textpic-gallery {
    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}

.mf-home-hero-image picture {
    display:
        block;

    width:
        100%;
}

.mf-home-hero-image img {
    display:
        block !important;

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        auto !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    border-radius:
        24px;

    object-fit:
        contain !important;

    box-shadow:
        0 22px 60px
        rgba(18, 34, 60, .09);
}


/* ==========================================================================
   10. SECTION SHARED
   ========================================================================== */

.mf-home-services,
.mf-home-projects {
    width:
        min(
            1480px,
            calc(100% - 48px)
        );

    margin-right:
        auto;

    margin-left:
        auto;

    padding:
        48px 0;
}

.mf-section-head,
.mf-projects-intro {
    max-width:
        880px;

    margin:
        0 auto 32px;

    text-align:
        center;
}

.mf-section-head h2,
.mf-projects-intro h2 {
    margin:
        0 0 16px !important;

    color:
        var(--mf-navy) !important;

    font-size:
        clamp(2.35rem, 3.7vw, 4rem) !important;

    line-height:
        1.02 !important;

    letter-spacing:
        -.05em !important;
}

.mf-section-head p,
.mf-projects-intro > p {
    max-width:
        760px;

    margin:
        0 auto !important;

    color:
        var(--mf-muted) !important;

    font-size:
        16px !important;

    line-height:
        1.65 !important;
}


/* ==========================================================================
   11. USP
   ========================================================================== */

.mf-usps {
    width:
        min(
            1480px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        22px 0 40px;
}

.mf-usps .row {
    margin-right:
        -8px;

    margin-left:
        -8px;
}

.mf-usps [class*="col-"] {
    padding:
        8px;
}

.mf-usp {
    display:
        flex;

    height:
        100%;

    padding:
        20px;

    gap:
        15px;

    align-items:
        flex-start;

    border:
        1px solid rgba(18, 34, 60, .065);

    border-radius:
        20px;

    background:
        rgba(255, 255, 255, .84);

    box-shadow:
        var(--mf-shadow-sm);

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

.mf-usp:hover {
    border-color:
        rgba(73, 108, 172, .18);

    box-shadow:
        var(--mf-shadow-md);

    transform:
        translateY(-3px);
}

.mf-usp__icon {
    display:
        flex;

    width:
        46px;

    height:
        46px;

    flex:
        0 0 46px;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            rgba(73, 108, 172, .13),
            rgba(36, 167, 161, .08)
        );

    color:
        var(--mf-blue);

    font-size:
        19px;
}

.mf-usp__content {
    min-width:
        0;
}

.mf-usp h3 {
    margin:
        0 0 5px !important;

    color:
        var(--mf-navy) !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;

    letter-spacing:
        -.02em !important;
}

.mf-usp p {
    margin:
        0 !important;

    color:
        var(--mf-muted) !important;

    font-size:
        12.5px !important;

    line-height:
        1.55 !important;
}


/* ==========================================================================
   12. SERVICES
   ========================================================================== */

.mf-service-card {
    position:
        relative;

    height:
        100%;

    padding:
        clamp(26px, 3vw, 38px);

    border:
        1px solid rgba(18, 34, 60, .065);

    border-radius:
        26px;

    background:
        #fff;

    box-shadow:
        var(--mf-shadow-sm);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.mf-service-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        var(--mf-shadow-md);
}

.mf-service-card__number {
    position:
        absolute;

    top:
        24px;

    right:
        26px;

    color:
        #a3adbb;

    font-size:
        11px;

    font-weight:
        800;
}

.mf-service-card__icon {
    display:
        grid;

    width:
        50px;

    height:
        50px;

    margin-bottom:
        22px;

    place-items:
        center;

    border-radius:
        15px;

    background:
        rgba(73, 108, 172, .10);

    color:
        var(--mf-blue);

    font-size:
        20px;
}

.mf-service-card h3 {
    margin:
        0 0 12px !important;

    font-size:
        clamp(1.45rem, 1.8vw, 1.9rem) !important;
}

.mf-service-card p,
.mf-service-card li {
    color:
        var(--mf-muted) !important;

    line-height:
        1.6;
}

.mf-service-card ul {
    margin:
        20px 0;

    padding-left:
        19px;
}

.mf-service-card li {
    margin:
        4px 0;
}

.mf-text-link {
    display:
        inline-flex;

    gap:
        8px;

    align-items:
        center;

    color:
        var(--mf-navy) !important;

    font-weight:
        800;

    text-decoration:
        none !important;
}

.mf-text-link i {
    transition:
        transform .2s ease;
}

.mf-text-link:hover i {
    transform:
        translateX(4px);
}


/* ==========================================================================
   13. STARTSEITEN-PROJEKTKARTEN
   TYPO3 Text & Medien:
   zusätzliche CSS-Klasse = mf-project-card
   ========================================================================== */

.mf-project-card {
    height:
        100%;

    margin-bottom:
        22px !important;

    padding:
        0 !important;

    overflow:
        hidden;

    border:
        1px solid rgba(18, 34, 60, .07);

    border-radius:
        26px;

    background:
        #fff;

    box-shadow:
        var(--mf-shadow-sm);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.mf-project-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        var(--mf-shadow-md);
}

.mf-project-card > .frame-container,
.mf-project-card > .frame-container-default {
    width:
        100% !important;

    max-width:
        none !important;
}

.mf-project-card .frame-inner,
.mf-project-card .textmedia,
.mf-project-card .textpic {
    display:
        flex;

    width:
        100%;

    height:
        100%;

    flex-direction:
        column;

    gap:
        0 !important;
}

.mf-project-card .gallery,
.mf-project-card .textmedia-gallery,
.mf-project-card .textpic-gallery,
.mf-project-card figure {
    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}

.mf-project-card picture {
    display:
        block;

    width:
        100%;
}

.mf-project-card img {
    display:
        block !important;

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        auto !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        16px !important;

    background:
        linear-gradient(
            145deg,
            #f7f9fc,
            #eef4f9
        );

    object-fit:
        contain !important;
}

.mf-project-card .text,
.mf-project-card .textmedia-text,
.mf-project-card .textpic-text {
    width:
        100% !important;

    padding:
        22px 26px 26px !important;
}

.mf-project-card .mf-project-type {
    margin:
        0 0 6px !important;

    color:
        #657b9e !important;

    font-size:
        10.5px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}

.mf-project-card h3 {
    margin:
        0 0 10px !important;

    color:
        var(--mf-navy) !important;

    font-size:
        clamp(1.55rem, 1.9vw, 2rem) !important;

    letter-spacing:
        -.035em !important;
}

.mf-project-card p {
    color:
        var(--mf-muted) !important;

    line-height:
        1.6 !important;
}

.mf-btn-project {
    min-height:
        42px !important;

    padding:
        9px 15px !important;

    font-size:
        12px !important;
}


/* ==========================================================================
   14. CUSTOM HOME PROJECT CARDS
   Falls die mf-home-project-HTML-Version noch verwendet wird
   ========================================================================== */

.mf-home-project {
    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid rgba(18, 34, 60, .07);

    border-radius:
        26px;

    background:
        #fff;

    box-shadow:
        var(--mf-shadow-sm);
}

.mf-home-project > a {
    display:
        block;

    height:
        100%;

    color:
        inherit !important;
}

.mf-home-project__image {
    padding:
        16px;

    background:
        #f3f7fb;
}

.mf-home-project__image img {
    display:
        block;

    width:
        100% !important;

    height:
        auto !important;

    object-fit:
        contain !important;
}

.mf-home-project__body {
    padding:
        24px 26px 28px;
}

.mf-project-type {
    color:
        #687d9d;

    font-size:
        10.5px;

    font-weight:
        800;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}

.mf-home-project h3 {
    margin:
        7px 0 10px !important;

    color:
        var(--mf-navy) !important;

    font-size:
        1.9rem !important;
}

.mf-home-project p {
    color:
        var(--mf-muted) !important;

    line-height:
        1.6;
}


/* ==========================================================================
   15. /PROJEKTE — EXISTING BOOTSTRAP CARD-GROUP CASE STUDIES
   ========================================================================== */

.mediafuturert .card-group {
    display:
        grid !important;

    width:
        min(
            1420px,
            calc(100% - 64px)
        ) !important;

    margin:
        16px auto 52px !important;

    padding:
        22px !important;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, .95fr) !important;

    gap:
        0 !important;

    row-gap:
        26px !important;

    border:
        1px solid rgba(18, 34, 60, .055);

    border-radius:
        34px;

    background:
        radial-gradient(
            circle at 0 10%,
            rgba(73, 108, 172, .07),
            transparent 28%
        ),
        radial-gradient(
            circle at 100% 50%,
            rgba(36, 167, 161, .055),
            transparent 25%
        ),
        rgba(246, 249, 253, .76);
}

.mediafuturert .card-group > .card,
.mediafuturert .card-group > .card:first-child {
    grid-column:
        auto !important;

    min-width:
        0;

    min-height:
        450px;

    margin:
        0 !important;

    overflow:
        hidden;

    border:
        1px solid rgba(18, 34, 60, .065) !important;

    background:
        #fff !important;

    box-shadow:
        var(--mf-shadow-sm) !important;

    transform:
        none !important;
}


/* linke Projektseite */

.mediafuturert .card-group > .card:nth-child(odd) {
    border-right:
        0 !important;

    border-radius:
        25px 0 0 25px !important;

    background:
        linear-gradient(
            145deg,
            #f5f8fc,
            #eef4f9
        ) !important;
}


/* rechte Infoseite */

.mediafuturert .card-group > .card:nth-child(even) {
    display:
        flex !important;

    border-left:
        0 !important;

    border-radius:
        0 25px 25px 0 !important;

    flex-direction:
        column;

    justify-content:
        center;
}

.mediafuturert .card-img-top {
    width:
        100%;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden;

    background:
        transparent;
}

.mediafuturert .card-img-top picture {
    display:
        block !important;

    width:
        100% !important;

    height:
        auto !important;
}

.mediafuturert .card-img-top img {
    display:
        block !important;

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        auto !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        24px !important;

    object-fit:
        contain !important;

    object-position:
        center !important;
}

.mediafuturert .card-body {
    padding:
        30px 34px !important;
}

.mediafuturert .card-title {
    margin:
        0 0 11px !important;

    color:
        var(--mf-navy) !important;

    font-size:
        clamp(1.55rem, 2vw, 2.2rem) !important;

    font-weight:
        800 !important;

    letter-spacing:
        -.035em;
}

.mediafuturert .card-text {
    color:
        var(--mf-muted) !important;

    line-height:
        1.65;
}

.mediafuturert .card table {
    width:
        100%;

    margin-top:
        22px;

    border-collapse:
        collapse;
}

.mediafuturert .card table td,
.mediafuturert .card table th {
    padding:
        12px 7px;

    border-bottom:
        1px solid var(--mf-line);

    vertical-align:
        top;
}

.mediafuturert .card table td:first-child,
.mediafuturert .card table th:first-child {
    width:
        31%;

    color:
        var(--mf-muted);

    font-size:
        12.5px;

    font-weight:
        800;
}

.mediafuturert .card-footer {
    margin-top:
        auto !important;

    padding:
        0 34px 30px !important;

    border:
        0 !important;

    background:
        transparent !important;
}


/* ==========================================================================
   16. ABOUT
   ========================================================================== */

.mf-home-about {
    width:
        min(
            1380px,
            calc(100% - 48px)
        );

    margin:
        46px auto;

    padding:
        clamp(40px, 5vw, 66px);

    border:
        1px solid rgba(18, 34, 60, .06);

    border-radius:
        30px;

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(73, 108, 172, .10),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 90%,
            rgba(36, 167, 161, .08),
            transparent 30%
        ),
        #f3f7fb;

    box-shadow:
        var(--mf-shadow-sm);
}

.mf-home-about h2 {
    margin:
        0 !important;

    color:
        var(--mf-navy) !important;

    font-size:
        clamp(2.45rem, 3.6vw, 4rem) !important;

    line-height:
        1 !important;

    letter-spacing:
        -.055em !important;
}

.mf-home-about__content {
    padding-left:
        clamp(0px, 3vw, 45px);
}

.mf-home-about__lead {
    color:
        #34445b !important;

    font-size:
        17px !important;

    line-height:
        1.7 !important;
}

.mf-about-facts {
    margin-top:
        28px;
}

.mf-about-fact {
    height:
        100%;

    margin-bottom:
        14px;

    padding:
        16px;

    border:
        1px solid rgba(18, 34, 60, .065);

    border-radius:
        16px;

    background:
        rgba(255, 255, 255, .74);
}

.mf-about-fact strong,
.mf-about-fact span {
    display:
        block;
}

.mf-about-fact strong {
    margin-bottom:
        3px;

    color:
        var(--mf-navy);
}

.mf-about-fact span {
    color:
        var(--mf-muted);

    font-size:
        12px;
}


/* ==========================================================================
   17. FINAL CTA
   ========================================================================== */

.mf-home-cta {
    width:
        min(
            1320px,
            calc(100% - 48px)
        );

    margin:
        50px auto;

    padding:
        clamp(48px, 6vw, 76px)
        28px;

    border-radius:
        30px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(73, 108, 172, .38),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(36, 167, 161, .20),
            transparent 32%
        ),
        var(--mf-navy);

    color:
        #fff;

    text-align:
        center;

    box-shadow:
        var(--mf-shadow-md);
}

.mf-home-cta .mf-eyebrow {
    color:
        #a9bfe8;
}

.mf-home-cta h2 {
    max-width:
        900px;

    margin:
        0 auto 18px !important;

    color:
        #fff !important;

    font-size:
        clamp(2.5rem, 4vw, 4.3rem) !important;

    line-height:
        1 !important;

    letter-spacing:
        -.055em !important;
}

.mf-home-cta p {
    max-width:
        740px;

    margin:
        0 auto 26px !important;

    color:
        #cbd5e4 !important;

    font-size:
        16px !important;

    line-height:
        1.65;
}

.mf-home-cta .mf-btn-primary {
    border-color:
        #fff !important;

    background:
        #fff !important;

    color:
        var(--mf-navy) !important;
}

.mf-home-cta .mf-btn-primary:hover {
    border-color:
        #fff !important;

    background:
        #eef3fa !important;

    color:
        var(--mf-navy) !important;
}

.mf-home-cta__meta {
    margin-top:
        20px;

    color:
        #96a8c2;

    font-size:
        11px;
}

.mf-home-cta__meta span {
    padding:
        0 6px;
}


/* ==========================================================================
   18. FOOTER
   ========================================================================== */

.mediafuturert .footer {
    position:
        relative;

    width:
        100%;

    min-height:
        0 !important;

    margin:
        54px 0 0 !important;

    padding:
        22px 0 !important;

    overflow:
        hidden;

    background:
        linear-gradient(
            110deg,
            #0e1d35,
            #12223c 60%,
            #18345e
        ) !important;

    color:
        #dce6f5 !important;
}

.mediafuturert .footer::before {
    content:
        "";

    position:
        absolute;

    top:
        14px;

    right:
        32px;

    width:
        80px;

    height:
        80px;

    background-image:
        radial-gradient(
            rgba(255, 255, 255, .14)
            1px,
            transparent 1px
        );

    background-size:
        13px 13px;

    opacity:
        .30;

    pointer-events:
        none;
}

.mediafuturert .footer > .row {
    display:
        grid !important;

    width:
        min(
            var(--mf-container),
            calc(100% - 64px)
        ) !important;

    max-width:
        var(--mf-container) !important;

    min-height:
        56px;

    margin:
        0 auto !important;

    grid-template-columns:
        1fr auto auto;

    gap:
        28px;

    align-items:
        center;
}

.mediafuturert .foot_copy {
    width:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #dce6f5 !important;

    font-size:
        12px !important;

    font-weight:
        600;

    text-align:
        left !important;
}

.mediafuturert ul.footNav,
.mediafuturert ul.footSocialMedia {
    display:
        flex !important;

    width:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        3px;

    align-items:
        center;

    list-style:
        none !important;
}

.mediafuturert ul.footNav {
    justify-content:
        center;
}

.mediafuturert ul.footSocialMedia {
    justify-content:
        flex-end;
}

.mediafuturert .footer li {
    display:
        block !important;

    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;
}

.mediafuturert .footer a,
.mediafuturert .footer [data-omcookie-panel-show] {
    display:
        inline-flex !important;

    padding:
        8px 10px !important;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    color:
        #dce6f5 !important;

    font-size:
        11.5px !important;

    text-decoration:
        none !important;

    cursor:
        pointer;
}

.mediafuturert .footer a:hover,
.mediafuturert .footer [data-omcookie-panel-show]:hover {
    background:
        rgba(255, 255, 255, .08) !important;

    color:
        #fff !important;
}


/* ==========================================================================
   19. LEGACY TYPO3 / BOOTSTRAP IMAGE SAFETY
   ========================================================================== */

.img-responsive,
.imagewrap img,
.gallery-item img,
.textmedia img,
.textpic img,
.csc-textpic-imagewrap img {
    max-width:
        100% !important;

    height:
        auto !important;
}

.csc-textpic-imagewrap {
    width:
        100% !important;
}

.gallery-row {
    width:
        100%;
}

.textmedia,
.textpic {
    gap:
        0;
}


/*
   Alte feste 180 / 200px Bildgrenzen entfernen
*/

#spalte1 img,
#spalte2 img,
#spalte3 img,
#spalte4 img,
#spalte10 img,
#spalte20 img,
#spalte30 img,
#spalte40 img,
#spalte101 img,
#spalte201 img {
    max-width:
        100% !important;

    max-height:
        none !important;

    height:
        auto !important;

    object-fit:
        contain;

    padding-top:
        0;
}


/* Legacy Spalten */

.mediafuturert #spalte1,
.mediafuturert #spalte2,
.mediafuturert #spalte3,
.mediafuturert #spalte4,
.mediafuturert #spalte10,
.mediafuturert #spalte20,
.mediafuturert #spalte30,
.mediafuturert #spalte40 {
    min-width:
        0;

    padding:
        0 6px;

    font-size:
        14px;

    text-align:
        center;
}

.mediafuturert #spalte101,
.mediafuturert #spalte201 {
    min-width:
        0;

    padding:
        10px;

    font-size:
        14px;

    text-align:
        center;
}


/* ==========================================================================
   20. NEWS / TABLES
   ========================================================================== */

.news-list-item {
    margin-bottom:
        20px !important;

    padding:
        0 10px !important;
}

.news-list-item h3 {
    padding-top:
        8px;

    font-size:
        18px;
}

.news-list-item .lead {
    font-size:
        16px;
}

.table-responsive {
    max-width:
        100%;

    overflow-x:
        auto;
}

table {
    max-width:
        100%;
}


/* ==========================================================================
   21. SLIDER / CAROUSEL LEGACY
   ========================================================================== */

.tx-ws-flexslider {
    margin:
        0;

    overflow:
        hidden;
}

.flexslider {
    margin:
        0 0 20px;

    border:
        0;
}

.flexslider .slides img {
    display:
        block;

    width:
        100%;

    height:
        auto;
}

.slidercontent.wsflexslider-style1 {
    width:
        100%;

    height:
        auto;

    overflow:
        hidden;
}

.carousel .item {
    height:
        auto;
}


/* ==========================================================================
   22. COOKIE CONSENT
   ========================================================================== */

.cc-color-override--1471537634.cc-window {
    padding:
        20px;

    background-color:
        rgba(18, 34, 60, .94) !important;

    color:
        #fff !important;
}

.cc-color-override--1471537634 .cc-link,
.cc-color-override--1471537634 .cc-link:active,
.cc-color-override--1471537634 .cc-link:visited {
    color:
        #e5ebf4 !important;
}


/* ==========================================================================
   23. SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar {
    width:
        7px;
}

::-webkit-scrollbar-thumb {
    border-radius:
        5px;

    background:
        rgba(18, 34, 60, .42);
}


/* ==========================================================================
   24. MOBILE NAVIGATION
   ========================================================================== */

@media (max-width: 991.98px) {

    .fixedheader,
    .mf-site-header {
        min-height:
            72px;
    }

    .fixedheader > .row,
    .mf-site-header > .row {
        width:
            calc(100% - 28px) !important;

        min-height:
            72px;

        flex-wrap:
            nowrap !important;
    }

    .fixedheader .logo {
        width:
            auto !important;

        max-width:
            calc(100% - 62px);

        min-height:
            72px;

        flex:
            1 1 auto;
    }

    .logo img {
        width:
            48px !important;

        max-width:
            48px !important;
    }

    .logo a {
        font-size:
            1.35rem !important;
    }

    .logo .secondtitle,
    .mf-brand-tagline {
        margin-left:
            58px !important;

        font-size:
            9px !important;

        letter-spacing:
            .07em;
    }

    .fixedheader .headernavi {
        position:
            static;

        width:
            54px !important;

        min-height:
            72px;

        padding:
            0 !important;

        flex:
            0 0 54px;

        justify-content:
            flex-end;
    }

    input#responsive-nav,
    label.responsive-nav-label {
        display:
            block !important;
    }

    input#responsive-nav {
        position:
            absolute;

        opacity:
            0;

        pointer-events:
            none;
    }

    label.responsive-nav-label {
        position:
            absolute !important;

        top:
            13px !important;

        right:
            14px !important;

        width:
            44px !important;

        height:
            44px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        border-radius:
            13px;

        background:
            var(--mf-navy);

        cursor:
            pointer;

        z-index:
            10002;
    }

    .line {
        position:
            absolute;

        right:
            8px;

        width:
            28px;

        height:
            3px;

        border-radius:
            10px;

        background:
            #fff;

        transition:
            transform .25s ease,
            opacity .25s ease;
    }

    .line:nth-child(1) {
        top:
            11px;
    }

    .line:nth-child(2) {
        top:
            20px;
    }

    .line:nth-child(3) {
        top:
            29px;
    }

    #responsive-nav:checked
    + .responsive-nav-label
    .line:nth-child(1) {
        transform:
            translateY(9px)
            rotate(45deg);
    }

    #responsive-nav:checked
    + .responsive-nav-label
    .line:nth-child(2) {
        opacity:
            0;
    }

    #responsive-nav:checked
    + .responsive-nav-label
    .line:nth-child(3) {
        transform:
            translateY(-9px)
            rotate(-45deg);
    }

    .menu2 {
        position:
            absolute !important;

        top:
            calc(100% + 8px) !important;

        right:
            14px !important;

        left:
            auto !important;

        display:
            none !important;

        width:
            min(
                370px,
                calc(100vw - 28px)
            ) !important;

        height:
            auto !important;

        margin:
            0 !important;

        padding:
            10px !important;

        overflow:
            visible !important;

        border:
            1px solid rgba(18, 34, 60, .08) !important;

        border-radius:
            18px !important;

        background:
            #fff !important;

        box-shadow:
            var(--mf-shadow-lg) !important;

        transform:
            none !important;

        z-index:
            10001 !important;
    }

    input#responsive-nav:checked ~ .menu2 {
        display:
            block !important;
    }

    .menu2 ul.level1 {
        display:
            block !important;

        width:
            100% !important;
    }

    .menu2 ul.level1 > li {
        display:
            block !important;

        width:
            100% !important;
    }

    .menu2 ul.level1 > li > a,
    .menu2 ul.level1 > li > .active_div {
        display:
            flex !important;

        width:
            100% !important;

        padding:
            11px 13px !important;

        border-radius:
            11px;
    }

    .menu2 ul.level1 > li:last-child > a {
        margin-top:
            3px;

        justify-content:
            center;
    }

    .menu2 div.megadd {
        position:
            static !important;

        display:
            block !important;

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        padding:
            4px 0 5px 14px !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;
    }

    .menu2 ul.level2,
    .menu2 ul.level3 {
        width:
            100% !important;
    }


    /* Main */

    .mediafuturert #content {
        margin-top:
            72px !important;
    }

    .frame-container,
    .frame-container-default,
    .content-max-width {
        width:
            calc(100% - 28px) !important;

        max-width:
            none !important;
    }


    /* Hero */

    .mf-home-hero-text {
        width:
            calc(100% - 28px);

        padding:
            52px 0 24px;
    }

    .mf-home-hero-text h1 {
        font-size:
            clamp(2.5rem, 8vw, 4rem) !important;
    }

    .mf-home-hero-image {
        width:
            calc(100% - 28px) !important;

        margin-bottom:
            30px !important;
    }


    /* Sections */

    .mf-usps,
    .mf-home-services,
    .mf-home-projects,
    .mf-home-about,
    .mf-home-cta {
        width:
            calc(100% - 28px);
    }

    .mf-home-services,
    .mf-home-projects {
        padding:
            40px 0;
    }

    .mf-section-head,
    .mf-projects-intro {
        margin-bottom:
            26px;
    }


    /* Project overview */

    .mediafuturert .card-group {
        width:
            calc(100% - 28px) !important;

        padding:
            14px !important;

        grid-template-columns:
            1fr !important;

        row-gap:
            0 !important;

        border-radius:
            26px;
    }

    .mediafuturert .card-group > .card,
    .mediafuturert .card-group > .card:first-child {
        grid-column:
            1 / -1 !important;

        min-height:
            0;
    }

    .mediafuturert .card-group > .card:nth-child(odd) {
        border-right:
            1px solid rgba(18, 34, 60, .065) !important;

        border-bottom:
            0 !important;

        border-radius:
            21px 21px 0 0 !important;
    }

    .mediafuturert .card-group > .card:nth-child(even) {
        margin-bottom:
            22px !important;

        border-top:
            0 !important;

        border-left:
            1px solid rgba(18, 34, 60, .065) !important;

        border-radius:
            0 0 21px 21px !important;
    }


    /* About */

    .mf-home-about {
        margin-top:
            38px;

        margin-bottom:
            38px;

        padding:
            36px 28px;
    }

    .mf-home-about__content {
        margin-top:
            30px;

        padding-left:
            0;
    }


    /* CTA */

    .mf-home-cta {
        margin-top:
            38px;

        margin-bottom:
            38px;

        padding:
            48px 24px;
    }


    /* Footer */

    .mediafuturert .footer {
        margin-top:
            44px !important;
    }

    .mediafuturert .footer > .row {
        width:
            calc(100% - 28px) !important;

        max-width:
            none !important;

        grid-template-columns:
            1fr;

        justify-items:
            center;

        gap:
            8px;

        text-align:
            center;
    }

    .mediafuturert .foot_copy {
        text-align:
            center !important;
    }

    .mediafuturert ul.footNav,
    .mediafuturert ul.footSocialMedia {
        justify-content:
            center;

        flex-wrap:
            wrap;
    }
}


/* ==========================================================================
   25. SMALL MOBILE
   ========================================================================== */

@media (max-width: 575.98px) {

    .fixedheader > .row,
    .mf-site-header > .row,
    .frame-container,
    .frame-container-default,
    .content-max-width {
        width:
            calc(100% - 20px) !important;
    }

    .logo a {
        font-size:
            1.12rem !important;
    }

    .logo img {
        width:
            43px !important;

        max-width:
            43px !important;
    }

    .logo .secondtitle,
    .mf-brand-tagline {
        display:
            none !important;
    }

    .mf-home-hero-text {
        width:
            calc(100% - 20px);

        padding-top:
            42px;
    }

    .mf-home-hero-text h1 {
        font-size:
            clamp(2.25rem, 11vw, 3.4rem) !important;
    }

    .mf-home-hero-text .mf-home-hero__lead {
        font-size:
            16px !important;
    }

    .mf-home-hero-image,
    .mf-usps,
    .mf-home-services,
    .mf-home-projects,
    .mf-home-about,
    .mf-home-cta {
        width:
            calc(100% - 20px) !important;
    }

    .mf-home-hero-image img {
        border-radius:
            18px;
    }

    .mf-section-head h2,
    .mf-projects-intro h2 {
        font-size:
            clamp(2.1rem, 9vw, 3rem) !important;
    }

    .mf-service-card {
        padding:
            24px 21px;
    }

    .mf-home-about {
        padding:
            28px 21px;

        border-radius:
            23px;
    }

    .mf-home-cta {
        padding:
            42px 20px;

        border-radius:
            23px;
    }

    .mf-home-cta h2 {
        font-size:
            clamp(2.15rem, 9vw, 3rem) !important;
    }

    .mediafuturert .card-group {
        width:
            calc(100% - 20px) !important;

        padding:
            9px !important;
    }

    .mediafuturert .card-body {
        padding:
            24px 20px !important;
    }

    .mediafuturert .card-footer {
        padding:
            0 20px 24px !important;
    }

    .mediafuturert .footer > .row {
        width:
            calc(100% - 20px) !important;
    }
}


/* ==========================================================================
   26. ACCESSIBILITY / REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }
}

/* ==========================================================================
   MediaFutureRT 2026 – FINAL HOMEPAGE POLISH
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. PROJECT LINKS
   -------------------------------------------------------------------------- */

.mf-text-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;

    margin-top: 6px;

    color: #12223c !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    text-decoration: none !important;
}

.mf-text-link:hover {
    color: #496cac !important;
}


/* --------------------------------------------------------------------------
   2. PROJECT CARDS – etwas hochwertiger
   -------------------------------------------------------------------------- */

.mf-home-project {
    border-radius: 24px;

    border: 1px solid rgba(18, 34, 60, .075);

    box-shadow:
        0 8px 26px rgba(18, 34, 60, .055);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.mf-home-project:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 45px rgba(18, 34, 60, .095);
}

.mf-home-project__image {
    padding: 10px;

    background:
        linear-gradient(
            145deg,
            #f5f8fb,
            #edf3f8
        );
}

.mf-home-project__body {
    padding: 22px 24px 25px;
}

.mf-home-project h3 {
    margin: 6px 0 9px !important;

    font-size: 1.65rem !important;

    font-weight: 800 !important;
}

.mf-home-project p {
    margin-bottom: 10px !important;

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


/* --------------------------------------------------------------------------
   3. SERVICES – etwas kompakter
   -------------------------------------------------------------------------- */

.mf-service-card {
    padding: 30px 30px 28px;
}

.mf-service-card h3 {
    margin-bottom: 10px !important;
}

.mf-service-card ul {
    margin: 17px 0;
}

.mf-service-card li {
    margin-bottom: 3px;
}


/* --------------------------------------------------------------------------
   4. ABOUT – bessere Headline
   -------------------------------------------------------------------------- */

.mf-home-about {
    margin-top: 42px;
    margin-bottom: 42px;
}

.mf-home-about h2 {
    max-width: 430px;

    font-size:
        clamp(2.45rem, 3.25vw, 3.75rem) !important;

    line-height:
        1.03 !important;

    letter-spacing:
        -.055em !important;
}


/* --------------------------------------------------------------------------
   5. CTA – Button sichtbar und hochwertig
   -------------------------------------------------------------------------- */

.mf-home-cta {
    margin-top: 44px;
    margin-bottom: 44px;

    padding:
        clamp(48px, 5.5vw, 72px)
        28px;
}

.mf-home-cta__actions {
    display: flex;

    justify-content: center;

    margin-top: 24px;
    margin-bottom: 19px;
}

.mf-home-cta a.mf-btn-primary,
.mf-home-cta .mf-btn-primary {
    display: inline-flex !important;

    min-height: 48px;

    padding: 13px 23px !important;

    align-items: center;
    justify-content: center;

    border: 1px solid #fff !important;
    border-radius: 999px !important;

    background: #fff !important;

    color: #12223c !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, .16) !important;
}

.mf-home-cta a.mf-btn-primary:hover,
.mf-home-cta .mf-btn-primary:hover {
    background: #eef4fa !important;

    color: #12223c !important;

    transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   6. CTA typography
   -------------------------------------------------------------------------- */

.mf-home-cta h2 {
    max-width: 820px;

    font-size:
        clamp(2.5rem, 4vw, 4rem) !important;

    line-height:
        1.02 !important;
}

.mf-home-cta p {
    max-width: 720px;

    font-size: 14px !important;
}

.mf-home-cta__meta {
    margin-top: 16px;

    font-size: 10px;
}


/* --------------------------------------------------------------------------
   7. SECTIONS – gleichmäßiger Rhythmus
   -------------------------------------------------------------------------- */

.mf-home-services,
.mf-home-projects {
    padding-top: 42px;
    padding-bottom: 42px;
}

.mf-section-head {
    margin-bottom: 28px;
}

.mf-usps {
    padding-bottom: 34px;
}


/* --------------------------------------------------------------------------
   8. FINAL BUTTON "ALLE PROJEKTE"
   -------------------------------------------------------------------------- */

.mf-home-projects .text-center {
    margin-top: 6px !important;
}

.mf-home-projects .text-center .btn {
    min-height: 43px;

    padding: 10px 18px !important;

    font-size: 12px !important;
}


/* --------------------------------------------------------------------------
   9. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    .mf-home-about h2 {
        max-width: none;

        font-size:
            clamp(2.3rem, 10vw, 3.3rem) !important;
    }

    .mf-home-cta {
        padding:
            42px 20px;
    }

    .mf-home-services,
    .mf-home-projects {
        padding-top: 34px;
        padding-bottom: 34px;
    }

}
/* ==========================================================================
   MEDIAFUTURERT 2026
   TYPO3 BOOTSTRAP PACKAGE – CARD GROUP ELEMENT
   Projekte / Case Studies
   ========================================================================== */


/* --------------------------------------------------------------------------
   HAUPTCONTAINER
   -------------------------------------------------------------------------- */

.mediafuturert .card-group-element {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr) !important;

    gap: 0 !important;

    width: min(1420px, calc(100% - 64px)) !important;

    margin:
        24px auto 54px !important;

    padding:
        0 !important;

    align-items:
        stretch !important;
}


/* Bootstrap Package Spaltenbreiten neutralisieren */

.mediafuturert .card-group-element > .card-group-element-item {
    display: block !important;

    width: auto !important;
    max-width: none !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: none !important;
}


/* --------------------------------------------------------------------------
   JEDE CARD
   -------------------------------------------------------------------------- */

.mediafuturert .card-group-element-item > .card {
    display: flex !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid rgba(18, 34, 60, .075) !important;

    background:
        #fff !important;

    box-shadow:
        0 12px 34px rgba(18, 34, 60, .065) !important;

    transform: none !important;
}


/* ==========================================================================
   LINKER TEIL EINES PROJEKTS
   1 / 3 / 5 / 7
   ========================================================================== */

.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(odd)
> .card {

    border-right:
        0 !important;

    border-radius:
        26px 0 0 26px !important;

    background:
        linear-gradient(
            145deg,
            #f7f9fc 0%,
            #eef4f9 100%
        ) !important;
}


/* --------------------------------------------------------------------------
   PROJEKTBILD
   -------------------------------------------------------------------------- */

.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(odd)
.card-img-top {

    display: flex !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    aspect-ratio:
        16 / 10;

    margin: 0 !important;

    padding:
        18px !important;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        transparent !important;
}


.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(odd)
.card-img-top picture {

    display: flex !important;

    width: 100% !important;
    height: 100% !important;

    align-items: center;
    justify-content: center;
}


.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(odd)
.card-img-top img {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit:
        contain !important;

    object-position:
        center !important;
}


/* --------------------------------------------------------------------------
   PROJEKTNAME LINKS
   -------------------------------------------------------------------------- */

.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(odd)
.card-body {

    display: block !important;

    flex:
        0 0 auto !important;

    padding:
        14px 30px
        26px !important;
}


.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(odd)
.card-title {

    margin:
        0 !important;

    color:
        #12223c !important;

    font-size:
        clamp(1.5rem, 1.8vw, 2rem) !important;

    font-weight:
        800 !important;

    line-height:
        1.1 !important;

    letter-spacing:
        -.04em !important;
}


/* ==========================================================================
   RECHTER TEIL EINES PROJEKTS
   2 / 4 / 6 / 8
   ========================================================================== */

.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(even)
> .card {

    display: flex !important;

    flex-direction:
        column;

    justify-content:
        center !important;

    border-left:
        0 !important;

    border-radius:
        0 26px 26px 0 !important;

    background:
        #fff !important;
}


/* --------------------------------------------------------------------------
   TEXTE RECHTS
   -------------------------------------------------------------------------- */

.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(even)
.card-body {

    flex:
        0 0 auto !important;

    padding:
        36px 42px
        12px !important;
}


.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(even)
.card-title {

    max-width:
        650px;

    margin:
        0 0 16px !important;

    color:
        #24a7a1 !important;

    font-size:
        clamp(1.8rem, 2.45vw, 2.65rem) !important;

    font-weight:
        700 !important;

    line-height:
        1.08 !important;

    letter-spacing:
        -.045em !important;
}


.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(even)
.card-title a {

    color:
        inherit !important;

    text-decoration:
        none !important;
}


.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(even)
.card-title a:hover {

    color:
        #496cac !important;
}


/* Subtitle wie bei FC Reutlingen */

.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(even)
.card-subtitle {

    margin:
        -5px 0 15px !important;

    color:
        #78869a !important;

    font-size:
        12px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


/* Beschreibung */

.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(even)
.card-body p {

    max-width:
        680px;

    margin:
        0 !important;

    color:
        #34445a !important;

    font-size:
        15px !important;

    line-height:
        1.7 !important;
}


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

.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(even)
.card-footer {

    flex:
        0 0 auto !important;

    margin:
        0 !important;

    padding:
        12px 42px
        36px !important;

    border:
        0 !important;

    background:
        transparent !important;
}


.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(even)
.card-footer .btn {

    display:
        inline-flex !important;

    width:
        auto !important;

    min-width:
        0 !important;

    min-height:
        44px;

    margin:
        0 !important;

    padding:
        10px 17px !important;

    gap:
        7px;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #12223c !important;

    border-radius:
        999px !important;

    background:
        #12223c !important;

    color:
        #fff !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;

    line-height:
        1.2 !important;

    box-shadow:
        0 10px 22px rgba(18, 34, 60, .15) !important;
}


.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(even)
.card-footer .btn:hover {

    border-color:
        #496cac !important;

    background:
        #496cac !important;

    color:
        #fff !important;

    transform:
        translateY(-2px);
}


.mediafuturert
.card-group-element
.card-footer .btn-icon {

    display:
        inline-flex;

    align-items:
        center;
}


.mediafuturert
.card-group-element
.card-footer svg {

    width:
        14px !important;

    height:
        14px !important;
}


/* ==========================================================================
   TRENNUNG ZWISCHEN PROJEKTEN
   ========================================================================== */

/*
   Nach jedem rechten Element kommt ein neues Projekt.
   Wir erzeugen den Abstand also beim nächsten linken Element.
*/

.mediafuturert
.card-group-element
> .card-group-element-item:nth-child(n+3) {

    margin-top:
        28px !important;
}


/* ==========================================================================
   HOVER
   ========================================================================== */

.mediafuturert
.card-group-element-item
> .card {

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


.mediafuturert
.card-group-element-item
> .card:hover {

    border-color:
        rgba(73, 108, 172, .16) !important;

    box-shadow:
        0 18px 46px rgba(18, 34, 60, .09) !important;
}


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

@media (max-width: 991.98px) {

    .mediafuturert .card-group-element {

        grid-template-columns:
            1fr !important;

        width:
            calc(100% - 28px) !important;

        margin-bottom:
            42px !important;
    }


    .mediafuturert
    .card-group-element
    > .card-group-element-item {

        grid-column:
            1 / -1 !important;
    }


    /* Bildteil */

    .mediafuturert
    .card-group-element
    > .card-group-element-item:nth-child(odd)
    > .card {

        border:
            1px solid rgba(18, 34, 60, .075) !important;

        border-bottom:
            0 !important;

        border-radius:
            24px 24px 0 0 !important;
    }


    /* Infoteil */

    .mediafuturert
    .card-group-element
    > .card-group-element-item:nth-child(even)
    > .card {

        margin-bottom:
            26px !important;

        border:
            1px solid rgba(18, 34, 60, .075) !important;

        border-top:
            0 !important;

        border-radius:
            0 0 24px 24px !important;
    }


    /*
       Desktop-Abstand wieder entfernen,
       weil rechts bereits margin-bottom besitzt.
    */

    .mediafuturert
    .card-group-element
    > .card-group-element-item:nth-child(n+3) {

        margin-top:
            0 !important;
    }


    .mediafuturert
    .card-group-element
    > .card-group-element-item:nth-child(even)
    .card-body {

        padding:
            27px 28px 10px !important;
    }


    .mediafuturert
    .card-group-element
    > .card-group-element-item:nth-child(even)
    .card-footer {

        padding:
            10px 28px
            27px !important;
    }

}


/* ==========================================================================
   SMARTPHONE
   ========================================================================== */

@media (max-width: 575.98px) {

    .mediafuturert .card-group-element {

        width:
            calc(100% - 20px) !important;
    }


    .mediafuturert
    .card-group-element
    > .card-group-element-item:nth-child(odd)
    .card-img-top {

        aspect-ratio:
            auto !important;

        padding:
            10px !important;
    }


    .mediafuturert
    .card-group-element
    > .card-group-element-item:nth-child(odd)
    .card-img-top picture {

        height:
            auto !important;
    }


    .mediafuturert
    .card-group-element
    > .card-group-element-item:nth-child(odd)
    .card-img-top img {

        height:
            auto !important;
    }


    .mediafuturert
    .card-group-element
    > .card-group-element-item:nth-child(odd)
    .card-body {

        padding:
            13px 20px
            20px !important;
    }


    .mediafuturert
    .card-group-element
    > .card-group-element-item:nth-child(even)
    .card-body {

        padding:
            23px 20px
            8px !important;
    }


    .mediafuturert
    .card-group-element
    > .card-group-element-item:nth-child(even)
    .card-footer {

        padding:
            10px 20px
            23px !important;
    }


    .mediafuturert
    .card-group-element
    > .card-group-element-item:nth-child(even)
    .card-title {

        font-size:
            1.65rem !important;
    }

}
/* ==========================================================================
   LEISTUNGEN – HERO IMAGE
   TYPO3 Content Element #c2845
   ========================================================================== */

#c2845,
#c2855 {
    width: min(1420px, calc(100% - 64px)) !important;
    max-width: 1420px !important;
    margin: 4px auto 40px !important;
    padding: 0 !important;
}
#c2845 .frame-container,
#c2845 .frame-container-default,
#c2855 .frame-container,
#c2855 .frame-container-default {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#c2845 figure,
#c2845 .gallery,
#c2845 .gallery-row,
#c2845 .gallery-item,
#c2845 .image,
#c2845 picture,
#c2855 figure,
#c2855 .gallery,
#c2855 .gallery-row,
#c2855 .gallery-item,
#c2855 .image,
#c2855 picture {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#c2845 img,
#c2855 img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 24px;
    object-fit: contain !important;
    box-shadow: 0 20px 55px rgba(18, 34, 60, .09);
}

@media (max-width: 991.98px) {
    #c2845,
    #c2855 {
        width: calc(100% - 28px) !important;
        margin-bottom: 32px !important;
    }
}

@media (max-width: 575.98px) {
    #c2845,
    #c2855 {
        width: calc(100% - 20px) !important;
    }

    #c2845 img,
    #c2855 img {
        border-radius: 18px;
    }
}

/* ==========================================================================
   404 ERROR PAGE
   ========================================================================== */

.mf-error-page {
    width: min(980px, calc(100% - 48px));
    margin: 0 auto;

    padding: 90px 0 100px;

    text-align: center;
}

.mf-error-page h1 {
    max-width: 900px;

    margin: 0 auto 20px !important;

    color: var(--mf-navy) !important;

    font-size: clamp(3rem, 5vw, 5.2rem) !important;
    line-height: .98 !important;

    letter-spacing: -.055em !important;
}

.mf-error-page__lead {
    max-width: 700px;

    margin: 0 auto !important;

    color: var(--mf-muted) !important;

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

.mf-error-page__actions {
    display: flex;

    justify-content: center;
    flex-wrap: wrap;

    gap: 10px;

    margin: 28px 0 18px;
}

.mf-error-page__hint {
    color: #8a95a5;

    font-size: 12px;
}

@media (max-width: 575.98px) {

    .mf-error-page {
        width: calc(100% - 20px);

        padding: 60px 0 70px;
    }

    .mf-error-page h1 {
        font-size: clamp(2.4rem, 11vw, 3.5rem) !important;
    }

    .mf-error-page__lead {
        font-size: 15px !important;
    }

}