/*
Theme Name: Burghard Stephan Möbeldesign
Theme URI: https://md-stephan.de
Author: Xpress Webdesign
Description: Individuelles WordPress Custom Theme für Burghard Stephan Möbeldesign.
Version: 1.0.0
Text Domain: md-stephan
*/


/* ==========================================================
   ROOT / VARIABLES
========================================================== */

:root {

    /* Farben */

    --md-ivory: #f4f0e8;
    --md-ivory-soft: #faf8f3;

    --md-beige: #e5ddd0;
    --md-beige-soft: #eee8df;
    --md-beige-dark: #cfc1ae;

    --md-charcoal: #181715;
    --md-charcoal-soft: #24221f;
    --md-charcoal-light: #34312d;

    --md-wood: #705747;
    --md-wood-dark: #4e392e;
    --md-wood-light: #a48a76;

    --md-red: #a82f2d;
    --md-red-dark: #7e211f;
    --md-red-soft: #c15b55;

    --md-white: #ffffff;

    --md-text: #25211e;
    --md-text-soft: #716b64;

    --md-border:
        rgba(37, 33, 30, 0.13);

    --md-border-light:
        rgba(255, 255, 255, 0.13);


    /* Schatten */

    --md-shadow:
        0 24px 65px rgba(38, 30, 24, 0.10);

    --md-shadow-soft:
        0 15px 40px rgba(38, 30, 24, 0.07);

    --md-shadow-dark:
        0 30px 80px rgba(0, 0, 0, 0.24);


    /* Fonts */

    --md-font-display:
        "Cormorant Garamond",
        Georgia,
        "Times New Roman",
        serif;

    --md-font-body:
        "Manrope",
        Arial,
        Helvetica,
        sans-serif;


    /* Layout */

    --md-container:
        1420px;

    --md-container-small:
        1060px;

    --md-side:
        clamp(20px, 4vw, 72px);

    --md-section:
        clamp(100px, 9vw, 165px);

    --md-header-height:
        100px;


    /* Radius */

    --md-radius-sm:
        12px;

    --md-radius:
        22px;

    --md-radius-lg:
        34px;

    --md-radius-pill:
        999px;


    /* Animation */

    --md-ease:
        cubic-bezier(.22, 1, .36, 1);

}


/* ==========================================================
   RESET
========================================================== */

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


html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--md-header-height) + 25px);
}


body {
    margin: 0;

    overflow-x: hidden;

    background:
        var(--md-ivory);

    color:
        var(--md-text);

    font-family:
        var(--md-font-body);

    font-size:
        16px;

    line-height:
        1.72;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


body.md-menu-open {
    overflow: hidden;
}


img {
    display: block;

    max-width: 100%;

    height: auto;
}


figure {
    margin: 0;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


a {
    color: inherit;

    text-decoration: none;
}


ul,
ol {
    margin-top: 0;
}


::selection {
    background: var(--md-red);

    color: #fff;
}


/* ==========================================================
   GENERAL LAYOUT
========================================================== */

.md-main {
    position: relative;

    overflow: hidden;
}


.md-container {
    width:
        min(
            calc(100% - (var(--md-side) * 2)),
            var(--md-container)
        );

    margin-inline:
        auto;
}


.md-section {
    position: relative;

    padding:
        var(--md-section) 0;
}


/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    color:
        var(--md-charcoal);

    font-family:
        var(--md-font-display);

    font-weight:
        500;

    line-height:
        0.98;

    letter-spacing:
        -0.025em;
}


h1 {
    font-size:
        clamp(4rem, 8vw, 8.5rem);
}


h2 {
    font-size:
        clamp(3rem, 5.6vw, 6rem);
}


h3 {
    font-size:
        clamp(1.8rem, 3vw, 2.8rem);
}


p {
    margin:
        0 0 1.25em;
}


.md-lead {
    color:
        var(--md-charcoal);

    font-size:
        clamp(1.08rem, 1.8vw, 1.34rem);

    line-height:
        1.72;
}


/* ==========================================================
   EYEBROW
========================================================== */

.md-eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-bottom:
        18px;

    color:
        var(--md-red);

    font-size:
        0.71rem;

    font-weight:
        700;

    letter-spacing:
        0.18em;

    line-height:
        1.3;

    text-transform:
        uppercase;
}


.md-eyebrow::before {
    content: "";

    flex:
        0 0 auto;

    width:
        28px;

    height:
        1px;

    background:
        currentColor;
}


/* ==========================================================
   SECTION HEAD
========================================================== */

.md-section-head {
    width:
        min(100%, 1000px);

    margin:
        0 auto clamp(50px, 6vw, 90px);

    text-align:
        center;
}


.md-section-head--center {
    text-align:
        center;
}


.md-section-head h1,
.md-section-head h2 {
    margin:
        0;
}


.md-section-head h2 span {
    color:
        var(--md-red);

    font-style:
        italic;
}


.md-section-head p {
    width:
        min(100%, 720px);

    margin:
        25px auto 0;

    color:
        var(--md-text-soft);

    font-size:
        clamp(.98rem, 1.4vw, 1.12rem);
}


.md-section-head--split {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, .55fr);

    gap:
        55px;

    align-items:
        end;

    width:
        100%;

    max-width:
        1160px;

    text-align:
        left;
}


.md-section-head--split p {
    margin:
        0;

    text-align:
        left;
}


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

.md-btn {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        58px;

    padding:
        15px 29px;

    border:
        1px solid transparent;

    border-radius:
        var(--md-radius-pill);

    font-size:
        .75rem;

    font-weight:
        700;

    letter-spacing:
        .085em;

    line-height:
        1.2;

    text-align:
        center;

    text-transform:
        uppercase;

    transition:
        transform .35s var(--md-ease),
        background-color .35s ease,
        border-color .35s ease,
        color .35s ease,
        box-shadow .35s ease;
}


.md-btn:hover {
    transform:
        translateY(-3px);
}


.md-btn--primary {
    background:
        var(--md-red);

    color:
        #fff;

    box-shadow:
        0 12px 28px rgba(168, 47, 45, .22);
}


.md-btn--primary:hover {
    background:
        var(--md-red-dark);

    box-shadow:
        0 18px 38px rgba(168, 47, 45, .28);
}


.md-btn--ghost {
    border-color:
        rgba(255, 255, 255, .42);

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

    color:
        #fff;

    backdrop-filter:
        blur(12px);
}


.md-btn--ghost:hover {
    border-color:
        #fff;

    background:
        #fff;

    color:
        var(--md-charcoal);
}


.md-btn--dark {
    background:
        var(--md-charcoal);

    color:
        #fff;
}


.md-btn--dark:hover {
    background:
        var(--md-red);
}


.md-btn--small {
    min-height:
        50px;

    padding:
        13px 23px;

    background:
        var(--md-charcoal);

    color:
        #fff;
}


.md-btn--small:hover {
    background:
        var(--md-red);
}


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

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    color:
        var(--md-charcoal);

    font-size:
        .73rem;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    transition:
        color .3s ease,
        gap .3s var(--md-ease);
}


.md-text-link:hover {
    gap:
        17px;

    color:
        var(--md-red);
}


/* ==========================================================
   SKIP LINK
========================================================== */

.md-skip-link {
    position:
        fixed;

    top:
        10px;

    left:
        10px;

    z-index:
        999999;

    padding:
        11px 16px;

    border-radius:
        8px;

    background:
        #000;

    color:
        #fff;

    transform:
        translateY(-150%);
}


.md-skip-link:focus {
    transform:
        translateY(0);
}


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

.md-header {
    position:
        fixed;

    top:
        0;

    left:
        0;

    z-index:
        1200;

    width:
        100%;

    height:
        var(--md-header-height);

    border-bottom:
        1px solid transparent;

    background:
        transparent;

    transition:
        transform .45s var(--md-ease),
        height .35s ease,
        background-color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.md-header.is-scrolled {
    height:
        82px;

    border-color:
        rgba(255, 255, 255, .08);

    background:
        rgba(24, 23, 21, .94);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .15);

    backdrop-filter:
        blur(18px);
}


.md-header.is-hidden {
    transform:
        translateY(-110%);
}


body.md-menu-open .md-header {
    transform:
        none !important;

    background:
        rgba(24, 23, 21, .98);
}


.md-header__inner {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        min(
            calc(100% - (var(--md-side) * 2)),
            1560px
        );

    height:
        100%;

    margin-inline:
        auto;
}


/* ==========================================================
   HEADER LOGO
========================================================== */

.md-brand {
    position:
        relative;

    z-index:
        10;

    display:
        flex;

    align-items:
        center;

    flex:
        0 0 auto;

    width:
        175px;

    height:
        78px;

    outline:
        none !important;
}


.md-brand__logo {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    object-position:
        left center;

    filter:
        drop-shadow(0 5px 14px rgba(0, 0, 0, .18));

    transition:
        transform .35s var(--md-ease);
}


.md-brand:hover .md-brand__logo {
    transform:
        scale(1.025);
}


/* ==========================================================
   DESKTOP NAVIGATION
========================================================== */

.md-desktop-nav {
    position:
        absolute;

    left:
        50%;

    transform:
        translateX(-50%);
}


.md-desktop-nav__list {
    display:
        flex;

    align-items:
        center;

    gap:
        clamp(16px, 1.5vw, 31px);

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.md-desktop-nav a {
    position:
        relative;

    display:
        block;

    padding:
        12px 0;

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

    font-size:
        clamp(.65rem, .7vw, .76rem);

    font-weight:
        600;

    letter-spacing:
        .045em;

    white-space:
        nowrap;

    transition:
        color .3s ease;
}


.md-desktop-nav a::after {
    content: "";

    position:
        absolute;

    bottom:
        4px;

    left:
        50%;

    width:
        0;

    height:
        1px;

    background:
        var(--md-red-soft);

    transform:
        translateX(-50%);

    transition:
        width .35s var(--md-ease);
}


.md-desktop-nav a:hover,
.md-desktop-nav a.is-active {
    color:
        #fff;
}


.md-desktop-nav a:hover::after,
.md-desktop-nav a.is-active::after {
    width:
        100%;
}


/* ==========================================================
   HEADER CTA
========================================================== */

.md-header__cta {
    flex:
        0 0 auto;
}


.md-header__cta-link {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-height:
        46px;

    padding:
        10px 18px;

    border:
        1px solid rgba(255, 255, 255, .28);

    border-radius:
        var(--md-radius-pill);

    color:
        #fff;

    font-size:
        .67rem;

    font-weight:
        700;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}


.md-header__cta-link:hover {
    border-color:
        #fff;

    background:
        #fff;

    color:
        var(--md-charcoal);
}


.md-header__cta-arrow {
    font-size:
        1rem;
}


/* ==========================================================
   BURGER
========================================================== */

.md-menu-toggle {
    position:
        relative;

    z-index:
        20;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        52px;

    padding:
        0;

    border:
        1px solid rgba(255, 255, 255, .26);

    border-radius:
        50%;

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

    outline:
        none;

    backdrop-filter:
        blur(12px);
}


.md-menu-toggle__box {
    position:
        relative;

    display:
        block;

    width:
        22px;

    height:
        16px;
}


.md-menu-toggle__line {
    position:
        absolute;

    left:
        0;

    width:
        100%;

    height:
        1.5px;

    border-radius:
        50px;

    background:
        #fff;

    transform-origin:
        center;

    transition:
        top .22s ease,
        transform .22s ease,
        opacity .16s ease;
}


.md-menu-toggle__line--1 {
    top:
        0;
}


.md-menu-toggle__line--2 {
    top:
        7px;
}


.md-menu-toggle__line--3 {
    top:
        14px;
}


.md-menu-toggle[aria-expanded="true"]
.md-menu-toggle__line--1 {
    top:
        7px;

    transform:
        rotate(45deg);
}


.md-menu-toggle[aria-expanded="true"]
.md-menu-toggle__line--2 {
    opacity:
        0;
}


.md-menu-toggle[aria-expanded="true"]
.md-menu-toggle__line--3 {
    top:
        7px;

    transform:
        rotate(-45deg);
}


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

.md-mobile-menu {
    position:
        fixed;

    inset:
        0;

    z-index:
        1100;

    display:
        flex;

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}


.md-mobile-menu.is-open {
    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;
}


.md-mobile-menu__backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 50% 10%,
            #352a23 0%,
            #191816 48%,
            #10100f 100%
        );
}


.md-mobile-menu__grain {
    position:
        absolute;

    inset:
        0;

    opacity:
        .035;

    pointer-events:
        none;

    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .15) 0,
            rgba(255, 255, 255, .15) 1px,
            transparent 1px,
            transparent 5px
        );
}


.md-mobile-menu__inner {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        100%;

    padding:
        calc(var(--md-header-height) + 22px)
        24px
        28px;

    text-align:
        center;
}


.md-mobile-nav {
    width:
        min(100%, 620px);
}


.md-mobile-nav__list {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        clamp(7px, 1vh, 15px);

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.md-mobile-nav__item {
    width:
        100%;

    opacity:
        0;

    transform:
        translateY(16px);

    transition:
        opacity .32s ease,
        transform .4s var(--md-ease);
}


.md-mobile-menu.is-open
.md-mobile-nav__item {
    opacity:
        1;

    transform:
        none;
}


.md-mobile-menu.is-open
.md-mobile-nav__item:nth-child(1) {
    transition-delay:
        .02s;
}

.md-mobile-menu.is-open
.md-mobile-nav__item:nth-child(2) {
    transition-delay:
        .05s;
}

.md-mobile-menu.is-open
.md-mobile-nav__item:nth-child(3) {
    transition-delay:
        .08s;
}

.md-mobile-menu.is-open
.md-mobile-nav__item:nth-child(4) {
    transition-delay:
        .11s;
}

.md-mobile-menu.is-open
.md-mobile-nav__item:nth-child(5) {
    transition-delay:
        .14s;
}

.md-mobile-menu.is-open
.md-mobile-nav__item:nth-child(6) {
    transition-delay:
        .17s;
}

.md-mobile-menu.is-open
.md-mobile-nav__item:nth-child(7) {
    transition-delay:
        .20s;
}

.md-mobile-menu.is-open
.md-mobile-nav__item:nth-child(8) {
    transition-delay:
        .23s;
}


.md-mobile-nav__link {
    display:
        inline-flex;

    align-items:
        baseline;

    justify-content:
        center;

    gap:
        14px;

    padding:
        3px 12px;

    color:
        rgba(255, 255, 255, .94);
}


.md-mobile-nav__number {
    color:
        var(--md-red-soft);

    font-family:
        var(--md-font-body);

    font-size:
        .55rem;

    font-weight:
        700;

    letter-spacing:
        .12em;
}


.md-mobile-nav__text {
    font-family:
        var(--md-font-display);

    font-size:
        clamp(2rem, 7vw, 3.8rem);

    font-weight:
        500;

    line-height:
        1;

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


.md-mobile-nav__link:hover
.md-mobile-nav__text {
    color:
        var(--md-red-soft);

    transform:
        translateX(4px);
}


.md-mobile-menu__footer {
    width:
        100%;

    margin-top:
        clamp(25px, 4vh, 50px);

    color:
        rgba(255, 255, 255, .55);
}


.md-mobile-menu__contact {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        8px 24px;

    font-size:
        .76rem;
}


.md-mobile-menu__contact a:hover {
    color:
        #fff;
}


.md-mobile-menu__meta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        13px;

    color:
        rgba(255, 255, 255, .32);

    font-size:
        .62rem;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


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

.md-hero {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        100svh;

    overflow:
        hidden;

    background:
        var(--md-charcoal);
}


.md-hero__visual {
    position:
        absolute;

    inset:
        0;
}


.md-hero__image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(1.04);

    animation:
        mdHeroZoom 15s ease-in-out infinite alternate;
}


@keyframes mdHeroZoom {

    from {
        transform:
            scale(1.04);
    }

    to {
        transform:
            scale(1.09);
    }

}


.md-hero__shade {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(15, 14, 13, .57) 0%,
            rgba(15, 14, 13, .46) 38%,
            rgba(15, 14, 13, .76) 100%
        );
}


.md-hero__shade::after {
    content: "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 0, 0, .02),
            rgba(0, 0, 0, .40) 85%
        );
}


.md-hero__inner {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        100svh;

    padding:
        calc(var(--md-header-height) + 60px)
        0
        80px;

    text-align:
        center;
}


.md-hero__content {
    width:
        min(100%, 1120px);

    margin-inline:
        auto;
}


.md-hero .md-eyebrow {
    color:
        rgba(255, 255, 255, .72);
}


.md-hero__title {
    margin:
        0;

    color:
        #fff;

    text-shadow:
        0 8px 40px rgba(0, 0, 0, .25);
}


.md-hero__title span {
    display:
        block;

    color:
        #e5c9bb;

    font-style:
        italic;
}


.md-hero__lead {
    width:
        min(100%, 720px);

    margin:
        28px auto 0;

    color:
        rgba(255, 255, 255, .82);

    font-size:
        clamp(1.05rem, 1.7vw, 1.34rem);

    line-height:
        1.7;
}


.md-hero__actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        38px;
}


/* ==========================================================
   ABOUT
========================================================== */

.md-about {
    background:
        var(--md-ivory-soft);
}


.md-about::before {
    content: "";

    position:
        absolute;

    top:
        0;

    left:
        50%;

    width:
        1px;

    height:
        72px;

    background:
        var(--md-beige-dark);
}


.md-about__grid {
    display:
        grid;

    grid-template-columns:
        minmax(320px, .8fr)
        minmax(420px, 1fr);

    gap:
        clamp(50px, 8vw, 125px);

    align-items:
        center;

    max-width:
        1240px;
}


.md-about__portrait {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.md-about__portrait img {
    width:
        min(100%, 560px);

    filter:
        drop-shadow(0 26px 40px rgba(50, 38, 29, .15));
}


.md-about__content {
    text-align:
        center;
}


.md-about__content h2 {
    margin-bottom:
        8px;
}


.md-about__role {
    margin-bottom:
        30px;

    color:
        var(--md-red);

    font-size:
        .72rem;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.md-about__content p:not(.md-about__role) {
    width:
        min(100%, 670px);

    margin-left:
        auto;

    margin-right:
        auto;
}


.md-about__signature {
    width:
        min(220px, 52%);

    margin:
        30px auto 0;
}


/* ==========================================================
   QUOTE
========================================================== */

.md-quote {
    position:
        relative;

    padding:
        clamp(100px, 12vw, 180px) 0;

    overflow:
        hidden;

    background:
        var(--md-charcoal);

    color:
        #fff;
}


.md-quote::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at center,
            rgba(112, 87, 71, .23),
            transparent 67%
        );
}


.md-quote__inner {
    position:
        relative;

    z-index:
        2;

    width:
        min(100%, 1120px);

    margin:
        auto;

    text-align:
        center;
}


.md-quote__mark {
    display:
        block;

    height:
        67px;

    color:
        var(--md-red-soft);

    font-family:
        var(--md-font-display);

    font-size:
        7rem;

    line-height:
        1;
}


.md-quote blockquote {
    margin:
        0;

    color:
        #fff;

    font-family:
        var(--md-font-display);

    font-size:
        clamp(2.7rem, 5.2vw, 6rem);

    font-style:
        italic;

    font-weight:
        400;

    line-height:
        1.06;

    letter-spacing:
        -.025em;
}


.md-quote__name {
    display:
        block;

    margin-top:
        36px;

    color:
        rgba(255, 255, 255, .45);

    font-size:
        .66rem;

    font-weight:
        700;

    letter-spacing:
        .17em;

    text-transform:
        uppercase;
}


/* ==========================================================
   SERVICES
========================================================== */

.md-services {
    background:
        var(--md-ivory);
}


.md-services__grid {
    display:
        grid;

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

    gap:
        18px;
}


.md-service-card {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    min-height:
        330px;

    padding:
        42px 30px;

    border:
        1px solid var(--md-border);

    border-radius:
        var(--md-radius);

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

    text-align:
        center;

    overflow:
        hidden;

    transition:
        transform .45s var(--md-ease),
        border-color .35s ease,
        background .35s ease,
        box-shadow .45s ease;
}


.md-service-card::before {
    content: "";

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    height:
        0;

    background:
        var(--md-charcoal);

    transition:
        height .55s var(--md-ease);
}


.md-service-card > * {
    position:
        relative;

    z-index:
        2;
}


.md-service-card:hover {
    border-color:
        transparent;

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

    transform:
        translateY(-9px);
}


.md-service-card:hover::before {
    height:
        100%;
}


/* neue qualitative Icons */

.md-service-card__icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        72px;

    height:
        72px;

    margin:
        0 auto 27px;

    border:
        1px solid rgba(168, 47, 45, .24);

    border-radius:
        50%;

    background:
        rgba(168, 47, 45, .035);

    color:
        var(--md-red);

    transition:
        transform .4s var(--md-ease),
        color .35s ease,
        border-color .35s ease,
        background .35s ease;
}


.md-service-card__icon svg {
    width:
        31px;

    height:
        31px;
}


.md-service-card:hover
.md-service-card__icon {
    border-color:
        rgba(255, 255, 255, .28);

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

    color:
        #fff;

    transform:
        translateY(-3px);
}


.md-service-card h3 {
    margin:
        0 0 17px;

    font-size:
        clamp(1.8rem, 2.6vw, 2.55rem);

    transition:
        color .35s ease;
}


.md-service-card p {
    width:
        min(100%, 360px);

    margin:
        0;

    color:
        var(--md-text-soft);

    font-size:
        .9rem;

    transition:
        color .35s ease;
}


.md-service-card:hover h3 {
    color:
        #fff;
}


.md-service-card:hover p {
    color:
        rgba(255, 255, 255, .66);
}


/* Leistungen-Truhe */

.md-services__showcase {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        min(100%, 760px);

    margin:
        70px auto 0;

    padding:
        30px;

    border:
        1px solid var(--md-border);

    border-radius:
        var(--md-radius-lg);

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

    overflow:
        hidden;
}


.md-services__showcase img {
    width:
        100%;

    max-height:
        520px;

    object-fit:
        contain;

    filter:
        drop-shadow(0 22px 35px rgba(45, 34, 26, .14));
}


/* ==========================================================
   FEATURED
========================================================== */

.md-featured {
    background:
        var(--md-charcoal);

    color:
        #fff;
}


.md-featured .md-section-head h2 {
    color:
        #fff;
}


.md-featured .md-eyebrow {
    color:
        var(--md-red-soft);
}


.md-featured__grid {
    display:
        grid;

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

    gap:
        20px;
}


.md-feature-card {
    position:
        relative;

    min-height:
        590px;

    border:
        1px solid rgba(255, 255, 255, .10);

    border-radius:
        var(--md-radius);

    background:
        #111;

    overflow:
        hidden;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .20);
}


.md-feature-card__media {
    position:
        absolute;

    inset:
        0;
}


.md-feature-card__media::after {
    content: "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .04) 20%,
            rgba(0, 0, 0, .85) 100%
        );
}


.md-feature-card__media img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .9s var(--md-ease);
}


.md-feature-card:hover
.md-feature-card__media img {
    transform:
        scale(1.065);
}


.md-feature-card__content {
    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    z-index:
        2;

    padding:
        38px 32px;

    text-align:
        center;
}


.md-feature-card__content > span {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #dbc8bc;

    font-size:
        .62rem;

    font-weight:
        700;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;
}


.md-feature-card__content h3 {
    margin:
        0 0 10px;

    color:
        #fff;

    font-size:
        clamp(2.2rem, 3.5vw, 3.7rem);
}


.md-feature-card__content p {
    margin:
        0;

    color:
        rgba(255, 255, 255, .64);

    font-size:
        .9rem;
}


/* ==========================================================
   SLIDER BASE
========================================================== */

.md-slider {
    position:
        relative;

    width:
        100%;
}


.md-slider__viewport {
    width:
        100%;

    overflow:
        hidden;

    touch-action:
        pan-y;
}


.md-slider__viewport.is-dragging {
    cursor:
        grabbing;

    user-select:
        none;
}


.md-slider__track {
    display:
        flex;

    align-items:
        stretch;

    gap:
        22px;

    transition:
        transform .7s var(--md-ease);

    will-change:
        transform;
}


.md-slider__slide {
    flex:
        0 0 auto;
}


.md-slider__arrow {
    position:
        absolute;

    top:
        50%;

    z-index:
        20;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        58px;

    height:
        58px;

    padding:
        0;

    border:
        1px solid rgba(24, 23, 21, .15);

    border-radius:
        50%;

    background:
        rgba(250, 248, 243, .94);

    color:
        var(--md-charcoal);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .08);

    transform:
        translateY(-50%);

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


.md-slider__arrow:hover:not(:disabled) {
    background:
        var(--md-charcoal);

    color:
        #fff;
}


.md-slider__arrow:disabled {
    opacity:
        .30;

    cursor:
        default;
}


.md-slider__arrow--prev {
    left:
        -27px;
}


.md-slider__arrow--next {
    right:
        -27px;
}


/* ==========================================================
   PROJECTS
========================================================== */

.md-projects {
    background:
        var(--md-ivory-soft);
}


.md-project-card {
    width:
        clamp(310px, 39vw, 560px);

    border:
        1px solid var(--md-border);

    border-radius:
        var(--md-radius);

    background:
        #fff;

    overflow:
        hidden;

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


.md-project-card__media {
    aspect-ratio:
        4 / 3;

    overflow:
        hidden;

    background:
        var(--md-beige);
}


.md-project-card__media img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .75s var(--md-ease);
}


.md-project-card:hover
.md-project-card__media img {
    transform:
        scale(1.055);
}


.md-project-card__content {
    padding:
        31px;

    text-align:
        center;
}


.md-project-card__category {
    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--md-red);

    font-size:
        .61rem;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}


.md-project-card h3 {
    margin:
        0 0 14px;
}


.md-project-card p {
    margin:
        0;

    color:
        var(--md-text-soft);

    font-size:
        .89rem;
}


/* ==========================================================
   ARCHIREGAL
========================================================== */

.md-archiregal {
    background:
        var(--md-beige);
}


.md-archiregal-slider {
    width:
        min(100%, 1250px);

    margin-inline:
        auto;
}


.md-archiregal-card {
    width:
        clamp(300px, 36vw, 530px);

    border:
        1px solid rgba(37, 33, 30, .08);

    border-radius:
        var(--md-radius);

    background:
        #fff;

    overflow:
        hidden;

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


.md-archiregal-card img {
    width:
        100%;

    aspect-ratio:
        4 / 3;

    object-fit:
        cover;
}


.md-archiregal-card figcaption {
    padding:
        20px 18px;

    color:
        var(--md-charcoal);

    font-family:
        var(--md-font-display);

    font-size:
        1.55rem;

    text-align:
        center;
}


/* ==========================================================
   PHILOSOPHY
========================================================== */

.md-philosophy {
    background:
        var(--md-charcoal);

    color:
        #fff;
}


.md-philosophy__grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:
        clamp(50px, 7vw, 110px);

    align-items:
        center;
}


.md-philosophy__content {
    text-align:
        center;
}


.md-philosophy__content .md-eyebrow {
    color:
        var(--md-red-soft);
}


.md-philosophy__content h2 {
    color:
        #fff;
}


.md-philosophy__content h2 span {
    display:
        block;

    color:
        #d9b8a6;

    font-style:
        italic;
}


.md-philosophy__content p {
    width:
        min(100%, 650px);

    margin-left:
        auto;

    margin-right:
        auto;

    color:
        rgba(255, 255, 255, .64);
}


.md-philosophy__content .md-lead {
    color:
        rgba(255, 255, 255, .91);
}


.md-philosophy__visual {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.md-philosophy__visual img {
    width:
        min(100%, 650px);

    max-height:
        700px;

    object-fit:
        contain;

    border-radius:
        var(--md-radius-lg);

    filter:
        drop-shadow(0 30px 55px rgba(0, 0, 0, .24));
}


/* ==========================================================
   UNIQUE
========================================================== */

.md-unique {
    background:
        var(--md-ivory-soft);
}


.md-unique__intro {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:
        clamp(50px, 7vw, 110px);

    align-items:
        center;
}


.md-unique__content {
    text-align:
        center;
}


.md-unique__content h2 span {
    display:
        block;

    color:
        var(--md-red);

    font-style:
        italic;
}


.md-unique__content p {
    width:
        min(100%, 650px);

    margin-left:
        auto;

    margin-right:
        auto;
}


.md-unique__visual {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.md-unique__visual img {
    width:
        min(100%, 630px);

    max-height:
        650px;

    object-fit:
        contain;

    filter:
        drop-shadow(0 28px 45px rgba(58, 44, 33, .14));
}


/* ==========================================================
   UNIQUE PROCESS
========================================================== */

.md-process {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        18px;

    margin-top:
        clamp(70px, 8vw, 125px);
}


.md-process::before {
    content: "";

    position:
        absolute;

    top:
        36px;

    right:
        11%;

    left:
        11%;

    height:
        1px;

    background:
        var(--md-beige-dark);
}


.md-process__item {
    position:
        relative;

    z-index:
        2;

    padding:
        0 20px;

    text-align:
        center;
}


.md-process__icon {
    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    width:
        72px !important;

    height:
        72px !important;

    margin:
        0 auto 23px !important;

    border:
        1px solid var(--md-beige-dark);

    border-radius:
        50%;

    background:
        var(--md-ivory-soft);

    color:
        var(--md-red);

    transition:
        transform .35s var(--md-ease),
        background .35s ease,
        color .35s ease,
        border-color .35s ease;
}


.md-process__icon svg {
    width:
        29px;

    height:
        29px;
}


.md-process__item:hover
.md-process__icon {
    border-color:
        var(--md-charcoal);

    background:
        var(--md-charcoal);

    color:
        #fff;

    transform:
        translateY(-4px);
}


.md-process__item h3 {
    margin:
        0 0 10px;

    font-size:
        2rem;
}


.md-process__item p {
    margin:
        0;

    color:
        var(--md-text-soft);

    font-size:
        .86rem;
}


/* ==========================================================
   UNIQUE OBJECTS
========================================================== */

.md-unique__objects {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        14px;

    margin-top:
        75px;
}


.md-unique__objects > img {
    width:
        100%;

    aspect-ratio:
        1;

    padding:
        20px;

    border:
        1px solid var(--md-border);

    border-radius:
        var(--md-radius);

    background:
        #fff;

    object-fit:
        contain;

    transition:
        transform .4s var(--md-ease),
        box-shadow .4s ease;
}


.md-unique__objects > img:hover {
    transform:
        translateY(-7px);

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


/* ==========================================================
   SHOP
========================================================== */

.md-shop {
    background:
        var(--md-ivory);
}


.md-shop-card {
    width:
        clamp(315px, 40vw, 560px);

    border:
        1px solid var(--md-border);

    border-radius:
        var(--md-radius);

    background:
        #fff;

    overflow:
        hidden;

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


.md-shop-card__media {
    aspect-ratio:
        4 / 3;

    padding:
        22px;

    background:
        #f1ece4;

    overflow:
        hidden;
}


.md-shop-card__media img {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    transition:
        transform .7s var(--md-ease);
}


.md-shop-card:hover
.md-shop-card__media img {
    transform:
        scale(1.045);
}


.md-shop-card__body {
    padding:
        31px;

    text-align:
        center;
}


.md-shop-card__head {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        17px;
}


.md-shop-card__head h3 {
    margin:
        0;
}


.md-shop-card__price {
    color:
        var(--md-red);

    font-size:
        1.05rem;

    font-weight:
        700;
}


.md-shop-card__body > p {
    color:
        var(--md-text-soft);

    font-size:
        .88rem;
}


.md-shop-card__details {
    display:
        grid;

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

    gap:
        1px;

    margin:
        24px 0;

    border:
        1px solid var(--md-border);

    background:
        var(--md-border);
}


.md-shop-card__details > div {
    padding:
        16px 13px;

    background:
        #fff;

    text-align:
        center;
}


.md-shop-card__details dt {
    margin-bottom:
        5px;

    color:
        var(--md-red);

    font-size:
        .55rem;

    font-weight:
        700;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


.md-shop-card__details dd {
    margin:
        0;

    color:
        var(--md-charcoal);

    font-size:
        .75rem;

    line-height:
        1.5;
}


.md-shop__notice {
    width:
        min(100%, 760px);

    margin:
        35px auto 0;

    color:
        var(--md-text-soft);

    font-size:
        .73rem;

    text-align:
        center;
}


/* ==========================================================
   REFERENCES
========================================================== */

.md-references {
    background:
        var(--md-charcoal);

    color:
        #fff;
}


.md-references .md-section-head h2 {
    color:
        #fff;
}


.md-references .md-section-head h2 span {
    color:
        var(--md-red-soft);
}


.md-references .md-eyebrow {
    color:
        var(--md-red-soft);
}


.md-references__featured {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    width:
        min(100%, 1100px);

    margin:
        0 auto 60px;
}


.md-references__featured span {
    padding:
        11px 18px;

    border:
        1px solid rgba(255, 255, 255, .13);

    border-radius:
        var(--md-radius-pill);

    color:
        rgba(255, 255, 255, .75);

    font-size:
        .7rem;
}


/* Marquee */

.md-reference-marquee {
    position:
        relative;

    width:
        100%;

    padding:
        21px 0;

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

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

    overflow:
        hidden;
}


.md-reference-marquee__track {
    display:
        flex;

    align-items:
        center;

    gap:
        46px;

    width:
        max-content;

    will-change:
        transform;
}


.md-reference-marquee__item {
    position:
        relative;

    flex:
        0 0 auto;

    color:
        rgba(255, 255, 255, .60);

    font-family:
        var(--md-font-display);

    font-size:
        clamp(1.4rem, 2.3vw, 2rem);

    white-space:
        nowrap;
}


.md-reference-marquee__item::after {
    content:
        "•";

    position:
        absolute;

    right:
        -27px;

    color:
        var(--md-red-soft);
}


/* Referenz-Collagen */

.md-references__collage {
    display:
        grid;

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

    gap:
        20px;

    width:
        min(100%, 1080px);

    margin:
        62px auto 0;
}


.md-references__collage img {
    width:
        100%;

    height:
        100%;

    min-height:
        300px;

    border:
        1px solid rgba(255, 255, 255, .08);

    border-radius:
        var(--md-radius);

    object-fit:
        cover;
}


/* ==========================================================
   CONTACT
========================================================== */

.md-contact {
    background:
        var(--md-ivory-soft);
}


.md-contact__grid {
    display:
        grid;

    grid-template-columns:
        minmax(340px, .78fr)
        minmax(460px, 1.22fr);

    gap:
        24px;

    width:
        min(100%, 1240px);

    margin:
        0 auto;
}


.md-contact__info,
.md-contact__form {
    padding:
        clamp(35px, 4.4vw, 62px);

    border:
        1px solid var(--md-border);

    border-radius:
        var(--md-radius-lg);

    background:
        #fff;

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


.md-contact__info {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;
}


.md-contact__person {
    margin-bottom:
        34px;

    text-align:
        center;
}


.md-contact__person > span {
    color:
        var(--md-red);

    font-size:
        .61rem;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}


.md-contact__person h3 {
    margin:
        9px 0 3px;
}


.md-contact__person p {
    margin:
        0;

    color:
        var(--md-text-soft);
}


.md-contact__desktop-links {
    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    max-width:
        430px;

    border-top:
        1px solid var(--md-border);
}


.md-contact__desktop-links a {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        17px 4px;

    border-bottom:
        1px solid var(--md-border);

    transition:
        padding .25s ease,
        color .25s ease;
}


.md-contact__desktop-links a:hover {
    padding-right:
        9px;

    padding-left:
        9px;

    color:
        var(--md-red);
}


.md-contact__desktop-links span {
    color:
        var(--md-text-soft);

    font-size:
        .65rem;

    font-weight:
        700;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


.md-contact__desktop-links strong {
    font-size:
        .89rem;

    font-weight:
        600;
}


.md-contact__mobile-actions {
    display:
        none;
}


.md-contact__address {
    margin-top:
        31px;

    color:
        var(--md-text-soft);

    font-size:
        .88rem;

    font-style:
        normal;

    text-align:
        center;
}


/* Contact form */

.md-contact__form {
    text-align:
        center;
}


.md-contact__form-head {
    margin-bottom:
        32px;

    text-align:
        center;
}


.md-contact__form-head > span {
    color:
        var(--md-red);

    font-size:
        .61rem;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}


.md-contact__form-head h3 {
    margin:
        10px 0 0;
}


/* ==========================================================
   FORMINATOR
========================================================== */

.md-forminator-wrap {
    width:
        100%;

    text-align:
        left;
}


.md-forminator-wrap
.forminator-ui {
    font-family:
        var(--md-font-body) !important;
}


.md-forminator-wrap
.forminator-row {
    margin-bottom:
        15px !important;
}


.md-forminator-wrap
.forminator-label {
    margin-bottom:
        7px !important;

    color:
        var(--md-charcoal) !important;

    font-family:
        var(--md-font-body) !important;

    font-size:
        .64rem !important;

    font-weight:
        700 !important;

    letter-spacing:
        .08em !important;

    text-transform:
        uppercase !important;
}


.md-forminator-wrap
.forminator-input,
.md-forminator-wrap
.forminator-textarea,
.md-forminator-wrap
.forminator-select2-selection {
    width:
        100% !important;

    min-height:
        54px !important;

    padding:
        14px 16px !important;

    border:
        1px solid var(--md-border) !important;

    border-radius:
        11px !important;

    background:
        var(--md-ivory-soft) !important;

    color:
        var(--md-charcoal) !important;

    font-family:
        var(--md-font-body) !important;

    font-size:
        .89rem !important;

    box-shadow:
        none !important;

    outline:
        none !important;

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


.md-forminator-wrap
.forminator-textarea {
    min-height:
        150px !important;

    resize:
        vertical !important;
}


.md-forminator-wrap
.forminator-input:focus,
.md-forminator-wrap
.forminator-textarea:focus {
    border-color:
        var(--md-red) !important;

    background:
        #fff !important;

    box-shadow:
        0 0 0 4px rgba(168, 47, 45, .08) !important;
}


.md-forminator-wrap
.forminator-button-submit {
    width:
        100% !important;

    min-height:
        58px !important;

    margin-top:
        7px !important;

    border:
        0 !important;

    border-radius:
        var(--md-radius-pill) !important;

    background:
        var(--md-red) !important;

    color:
        #fff !important;

    font-family:
        var(--md-font-body) !important;

    font-size:
        .72rem !important;

    font-weight:
        700 !important;

    letter-spacing:
        .09em !important;

    text-transform:
        uppercase !important;

    box-shadow:
        0 13px 30px rgba(168, 47, 45, .20) !important;

    transition:
        background .3s ease,
        transform .3s var(--md-ease) !important;
}


.md-forminator-wrap
.forminator-button-submit:hover {
    background:
        var(--md-red-dark) !important;

    transform:
        translateY(-2px) !important;
}


.md-form-placeholder {
    padding:
        40px 20px;

    border:
        1px dashed var(--md-beige-dark);

    border-radius:
        var(--md-radius);

    color:
        var(--md-text-soft);

    text-align:
        center;
}


.md-form-placeholder p {
    margin:
        0;
}


/* ==========================================================
   GOOGLE MAPS
========================================================== */

.md-contact-map {
    width:
        min(100%, 1240px);

    margin:
        clamp(50px, 6vw, 82px)
        auto 0;
}


.md-contact-map__head {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        20px;

    margin-bottom:
        25px;

    text-align:
        center;
}


.md-contact-map__head > div {
    width:
        100%;

    text-align:
        center;
}


.md-contact-map__head h3 {
    margin:
        0;

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


.md-contact-map__frame {
    position:
        relative;

    width:
        100%;

    min-height:
        520px;

    border:
        1px solid var(--md-border);

    border-radius:
        var(--md-radius-lg);

    background:
        var(--md-beige);

    overflow:
        hidden;

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


.md-contact-map__frame iframe {
    display:
        block;

    width:
        100%;

    height:
        520px;

    border:
        0;

    filter:
        saturate(.76)
        contrast(.96)
        sepia(.08);
}


.md-contact-map__address {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        7px 14px;

    margin-top:
        19px;

    text-align:
        center;
}


.md-contact-map__address strong {
    font-family:
        var(--md-font-display);

    font-size:
        1.34rem;

    font-weight:
        600;
}


.md-contact-map__address span {
    color:
        var(--md-text-soft);

    font-size:
        .82rem;
}


/* Maps Consent */

.md-map-consent {
    position:
        absolute;

    inset:
        0;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        28px;

    background:
        linear-gradient(
            145deg,
            var(--md-beige),
            var(--md-ivory-soft)
        );

    text-align:
        center;
}


.md-map-consent__inner {
    width:
        min(100%, 560px);
}


.md-map-consent__icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        66px;

    height:
        66px;

    margin:
        0 auto 20px;

    border-radius:
        50%;

    background:
        var(--md-charcoal);

    color:
        #fff;
}


.md-map-consent__icon::before {
    content: "";

    display:
        block;

    width:
        28px;

    height:
        28px;

    background:
        currentColor;

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7m0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7m0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5'/%3E%3C/svg%3E");

    -webkit-mask-repeat:
        no-repeat;

    mask-repeat:
        no-repeat;

    -webkit-mask-position:
        center;

    mask-position:
        center;

    -webkit-mask-size:
        contain;

    mask-size:
        contain;
}


.md-map-consent h3 {
    margin-bottom:
        13px;
}


.md-map-consent p {
    color:
        var(--md-text-soft);

    font-size:
        .86rem;
}


.md-map-consent__privacy {
    margin:
        16px 0 0 !important;
}


.md-map-consent__privacy a {
    color:
        var(--md-red);

    font-size:
        .72rem;

    text-decoration:
        underline;

    text-underline-offset:
        3px;
}


/* ==========================================================
   ICON SYSTEM
========================================================== */

.md-contact-action__icon,
.md-floating-action__icon {
    display:
        block;

    width:
        24px;

    height:
        24px;

    background:
        currentColor;

    -webkit-mask-repeat:
        no-repeat;

    mask-repeat:
        no-repeat;

    -webkit-mask-position:
        center;

    mask-position:
        center;

    -webkit-mask-size:
        contain;

    mask-size:
        contain;
}


/* Telefon */

.md-icon-phone {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.62 10.79a15.46 15.46 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.62 10.79a15.46 15.46 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02z'/%3E%3C/svg%3E");
}


/* Mobil */

.md-icon-mobile {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m0 3v14h10V5zm4 15h2v1h-2z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m0 3v14h10V5zm4 15h2v1h-2z'/%3E%3C/svg%3E");
}


/* Mail */

.md-icon-mail {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
}


/* Location */

.md-icon-location {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7m0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7m0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5'/%3E%3C/svg%3E");
}


/* WhatsApp */

.md-icon-whatsapp {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.04 2a9.84 9.84 0 0 0-8.42 14.92L2 22l5.24-1.56A9.94 9.94 0 1 0 12.04 2m0 17.98a8.04 8.04 0 0 1-4.1-1.12l-.29-.17-3.11.93.94-3.03-.19-.31A7.85 7.85 0 1 1 12.04 19.98m4.43-5.86c-.24-.12-1.43-.7-1.65-.78-.22-.08-.38-.12-.54.12-.16.24-.62.78-.76.94-.14.16-.28.18-.52.06-.24-.12-1.01-.37-1.93-1.19-.71-.63-1.19-1.42-1.33-1.66-.14-.24-.01-.37.11-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.19-.47-.39-.41-.54-.42h-.46c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.69 2.58 4.1 3.62.57.25 1.02.39 1.37.5.58.18 1.1.16 1.51.1.46-.07 1.43-.58 1.63-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.46-.28'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.04 2a9.84 9.84 0 0 0-8.42 14.92L2 22l5.24-1.56A9.94 9.94 0 1 0 12.04 2m0 17.98a8.04 8.04 0 0 1-4.1-1.12l-.29-.17-3.11.93.94-3.03-.19-.31A7.85 7.85 0 1 1 12.04 19.98m4.43-5.86c-.24-.12-1.43-.7-1.65-.78-.22-.08-.38-.12-.54.12-.16.24-.62.78-.76.94-.14.16-.28.18-.52.06-.24-.12-1.01-.37-1.93-1.19-.71-.63-1.19-1.42-1.33-1.66-.14-.24-.01-.37.11-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.19-.47-.39-.41-.54-.42h-.46c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.69 2.58 4.1 3.62.57.25 1.02.39 1.37.5.58.18 1.1.16 1.51.1.46-.07 1.43-.58 1.63-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.46-.28'/%3E%3C/svg%3E");
}


/* ==========================================================
   FLOATING ACTIONS
========================================================== */

.md-floating-actions {
    position:
        fixed;

    right:
        15px;

    bottom:
        26px;

    z-index:
        800;

    display:
        none;

    flex-direction:
        column;

    gap:
        9px;
}


.md-floating-action {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        52px;

    border:
        1px solid rgba(255, 255, 255, .17);

    border-radius:
        50%;

    background:
        var(--md-charcoal);

    color:
        #fff;

    box-shadow:
        0 9px 25px rgba(0, 0, 0, .21);

    transition:
        transform .25s var(--md-ease);
}


.md-floating-action:hover {
    transform:
        scale(1.07);
}


.md-floating-action--whatsapp {
    background:
        #25d366;
}


.md-floating-action__label {
    position:
        absolute;

    right:
        62px;

    padding:
        6px 10px;

    border-radius:
        7px;

    background:
        var(--md-charcoal);

    color:
        #fff;

    font-size:
        .63rem;

    white-space:
        nowrap;

    opacity:
        0;

    pointer-events:
        none;

    transform:
        translateX(5px);

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


.md-floating-action:hover
.md-floating-action__label {
    opacity:
        1;

    transform:
        none;
}


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

.md-footer {
    position:
        relative;

    background:
        #11110f;

    color:
        rgba(255, 255, 255, .68);
}


.md-footer__main {
    padding:
        clamp(85px, 10vw, 140px)
        0
        62px;
}


.md-footer__brand {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;
}


.md-footer__logo-link {
    display:
        block;

    width:
        min(300px, 74vw);
}


.md-footer__logo {
    width:
        100%;

    filter:
        drop-shadow(0 15px 30px rgba(0, 0, 0, .30));
}


.md-footer__claim {
    margin:
        19px 0 0;

    color:
        rgba(255, 255, 255, .56);

    font-family:
        var(--md-font-display);

    font-size:
        clamp(1.35rem, 2.4vw, 2rem);

    line-height:
        1.35;

    text-align:
        center;
}


.md-footer__grid {
    display:
        grid;

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

    gap:
        30px;

    width:
        min(100%, 1100px);

    margin:
        68px auto 0;

    text-align:
        center;
}


.md-footer__column {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;
}


.md-footer__title {
    margin:
        0 0 22px;

    color:
        #fff;

    font-family:
        var(--md-font-body);

    font-size:
        .63rem;

    font-weight:
        700;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;
}


.md-footer-nav__list {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        8px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.md-footer-nav a {
    color:
        rgba(255, 255, 255, .56);

    font-size:
        .81rem;

    transition:
        color .2s ease;
}


.md-footer-nav a:hover {
    color:
        #fff;
}


.md-footer-contact {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        13px;
}


.md-footer-contact__item {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        2px;
}


.md-footer-contact__label {
    color:
        rgba(255, 255, 255, .33);

    font-size:
        .55rem;

    font-weight:
        700;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


.md-footer-contact strong {
    color:
        rgba(255, 255, 255, .72);

    font-size:
        .83rem;

    font-weight:
        500;
}


.md-footer-address {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    color:
        rgba(255, 255, 255, .55);

    font-size:
        .81rem;

    font-style:
        normal;

    text-align:
        center;
}


.md-footer-address strong {
    margin-bottom:
        4px;

    color:
        rgba(255, 255, 255, .82);

    font-weight:
        600;
}


.md-footer__route {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        16px;

    color:
        var(--md-red-soft);

    font-size:
        .66rem;

    font-weight:
        700;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


.md-footer__statement {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    margin-top:
        76px;

    text-align:
        center;
}


.md-footer__statement span {
    color:
        var(--md-red-soft);

    font-size:
        .59rem;

    font-weight:
        700;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;
}


.md-footer__statement strong {
    margin-top:
        4px;

    color:
        #fff;

    font-family:
        var(--md-font-display);

    font-size:
        clamp(2.2rem, 4vw, 4rem);

    font-weight:
        400;
}


.md-footer__bottom {
    padding:
        20px 0;

    border-top:
        1px solid rgba(255, 255, 255, .08);
}


.md-footer__bottom-inner {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        11px 34px;

    text-align:
        center;
}


.md-footer__copyright {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    color:
        rgba(255, 255, 255, .35);

    font-size:
        .66rem;
}


.md-footer-legal {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        17px;
}


.md-footer-legal a {
    color:
        rgba(255, 255, 255, .42);

    font-size:
        .66rem;
}


.md-footer-legal a:hover {
    color:
        #fff;
}


/* ==========================================================
   BACK TO TOP
========================================================== */

.md-back-to-top {
    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    z-index:
        750;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        50px;

    height:
        50px;

    padding:
        0;

    border:
        1px solid rgba(255, 255, 255, .16);

    border-radius:
        50%;

    background:
        var(--md-charcoal);

    color:
        #fff;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .18);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(12px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s var(--md-ease);
}


.md-back-to-top.is-visible {
    opacity:
        1;

    visibility:
        visible;

    transform:
        none;
}


/* ==========================================================
   LEGAL PAGES
========================================================== */

.md-legal-page {
    background:
        var(--md-ivory-soft);
}


.md-legal-hero {
    padding-top:
        calc(var(--md-header-height) + 95px);

    padding-bottom:
        75px;

    background:
        var(--md-charcoal);
}


.md-legal-hero .md-section-head {
    margin-bottom:
        0;
}


.md-legal-hero h1 {
    color:
        #fff;

    font-size:
        clamp(3.8rem, 7vw, 7rem);
}


.md-legal-hero p {
    color:
        rgba(255, 255, 255, .53);
}


.md-legal-content__inner {
    width:
        min(
            calc(100% - (var(--md-side) * 2)),
            920px
        );
}


.md-legal-block {
    padding:
        clamp(30px, 4vw, 48px);

    border-bottom:
        1px solid var(--md-border);

    text-align:
        center;
}


.md-legal-block h2 {
    margin:
        0 0 23px;

    font-size:
        clamp(2rem, 3vw, 3.15rem);
}


.md-legal-block p {
    width:
        min(100%, 760px);

    margin-left:
        auto;

    margin-right:
        auto;

    color:
        var(--md-text-soft);
}


.md-legal-block ul {
    display:
        inline-block;

    margin:
        10px auto 24px;

    padding-left:
        20px;

    color:
        var(--md-text-soft);

    text-align:
        left;
}


.md-legal-block a:not(.md-btn) {
    color:
        var(--md-red);

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;
}


.md-legal-block--highlight {
    margin-top:
        30px;

    border:
        0;

    border-radius:
        var(--md-radius);

    background:
        var(--md-beige);
}


.md-legal-back {
    margin-top:
        42px;

    text-align:
        center;
}


/* ==========================================================
   INDEX
========================================================== */

.md-index {
    background:
        var(--md-ivory-soft);
}


.md-index-hero {
    padding-top:
        calc(var(--md-header-height) + 95px);
}


.md-index-grid {
    display:
        grid;

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

    gap:
        22px;
}


.md-index-card {
    border:
        1px solid var(--md-border);

    border-radius:
        var(--md-radius);

    background:
        #fff;

    overflow:
        hidden;
}


.md-index-card__media {
    display:
        block;

    aspect-ratio:
        4 / 3;

    overflow:
        hidden;
}


.md-index-card__media img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.md-index-card__content {
    padding:
        27px;

    text-align:
        center;
}


.md-index-card__date {
    color:
        var(--md-red);

    font-size:
        .60rem;

    font-weight:
        700;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


.md-index-card__title {
    margin:
        10px 0;

    font-size:
        2rem;
}


.md-index-card__excerpt {
    color:
        var(--md-text-soft);

    font-size:
        .85rem;
}


.md-empty-state {
    padding:
        70px 20px;

    text-align:
        center;
}


/* ==========================================================
   REVEAL ANIMATIONS
   WICHTIG:
   Inhalt ist standardmäßig IMMER sichtbar.
========================================================== */

[data-reveal] {
    opacity:
        1;

    transform:
        none;
}


/*
   Erst nachdem main.js vollständig initialisiert wurde,
   bekommt body die Klasse .md-ready.
*/

body.md-ready
[data-reveal] {
    transition:
        opacity .8s ease,
        transform .9s var(--md-ease);
}


body.md-ready
[data-reveal="up"]:not(.is-visible) {
    opacity:
        0;

    transform:
        translateY(42px);
}


body.md-ready
[data-reveal="left"]:not(.is-visible) {
    opacity:
        0;

    transform:
        translateX(-46px);
}


body.md-ready
[data-reveal="right"]:not(.is-visible) {
    opacity:
        0;

    transform:
        translateX(46px);
}


body.md-ready
[data-reveal="scale"]:not(.is-visible) {
    opacity:
        0;

    transform:
        scale(.95);
}


body.md-ready
[data-reveal].is-visible {
    opacity:
        1;

    transform:
        none;
}


/* ==========================================================
   TABLET / SMALL DESKTOP
========================================================== */

@media (max-width: 1250px) {

    :root {
        --md-header-height:
            90px;
    }


    .md-desktop-nav,
    .md-header__cta {
        display:
            none;
    }


    .md-menu-toggle {
        display:
            flex;
    }


    .md-brand {
        width:
            164px;

        height:
            70px;
    }


    .md-services__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .md-slider__arrow--prev {
        left:
            8px;
    }


    .md-slider__arrow--next {
        right:
            8px;
    }

}


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

@media (max-width: 980px) {

    :root {
        --md-section:
            100px;
    }


    .md-section-head--split {
        grid-template-columns:
            1fr;

        gap:
            20px;

        text-align:
            center;
    }


    .md-section-head--split p {
        margin:
            0 auto;

        text-align:
            center;
    }


    .md-about__grid,
    .md-philosophy__grid,
    .md-unique__intro,
    .md-contact__grid {
        grid-template-columns:
            1fr;
    }


    .md-about__grid {
        gap:
            45px;
    }


    .md-about__portrait img {
        width:
            min(100%, 500px);
    }


    .md-philosophy__grid,
    .md-unique__intro {
        gap:
            48px;
    }


    .md-featured__grid {
        grid-template-columns:
            1fr;

        width:
            min(100%, 700px);

        margin:
            auto;
    }


    .md-feature-card {
        min-height:
            520px;
    }


    .md-process {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            48px 20px;
    }


    .md-process::before {
        display:
            none;
    }


    .md-unique__objects {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .md-references__collage {
        grid-template-columns:
            1fr;
    }


    .md-footer__grid {
        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .md-index-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 720px) {

    :root {
        --md-side:
            18px;

        --md-header-height:
            78px;

        --md-section:
            82px;
    }


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


    body {
        font-size:
            15px;
    }


    h1 {
        font-size:
            clamp(3.5rem, 16vw, 5.3rem);
    }


    h2 {
        font-size:
            clamp(2.85rem, 12.5vw, 4.25rem);
    }


    h3 {
        font-size:
            clamp(1.8rem, 8vw, 2.5rem);
    }


    /* Header */

    .md-header {
        height:
            var(--md-header-height);
    }


    .md-header.is-scrolled {
        height:
            70px;
    }


    .md-header__inner {
        width:
            calc(100% - 30px);
    }


    /*
       Logo bleibt geöffnet und geschlossen
       exakt gleich groß und an derselben Position.
    */

    .md-brand,
    .md-header.is-scrolled .md-brand {
        width:
            138px;

        height:
            61px;
    }


    .md-brand__logo {
        object-position:
            left center;
    }


    .md-menu-toggle {
        width:
            47px;

        height:
            47px;
    }


    /* Mobile menu */

    .md-mobile-menu__inner {
        justify-content:
            center;

        padding:
            92px 18px 18px;
    }


    .md-mobile-nav__list {
        gap:
            4px;
    }


    .md-mobile-nav__link {
        gap:
            10px;

        padding:
            4px 8px;
    }


    .md-mobile-nav__text {
        font-size:
            clamp(1.85rem, 8.4vw, 2.8rem);
    }


    .md-mobile-nav__number {
        font-size:
            .49rem;
    }


    .md-mobile-menu__footer {
        margin-top:
            20px;
    }


    /* Hero */

    .md-hero {
        min-height:
            100svh;
    }


    .md-hero__inner {
        min-height:
            100svh;

        padding:
            105px 0 65px;
    }


    .md-hero__image {
        object-position:
            center center;
    }


    .md-hero__title {
        font-size:
            clamp(3.6rem, 15.5vw, 5.6rem);

        line-height:
            .96;
    }


    .md-hero__lead {
        width:
            min(100%, 520px);

        margin-top:
            22px;

        font-size:
            .98rem;
    }


    .md-hero__actions {
        flex-direction:
            column;

        width:
            min(100%, 340px);

        margin:
            29px auto 0;
    }


    .md-hero__actions .md-btn {
        width:
            100%;
    }


    /* About */

    .md-about {
        text-align:
            center;
    }


    .md-about::before {
        height:
            45px;
    }


    .md-about__portrait img {
        width:
            min(100%, 410px);
    }


    .md-about__role {
        margin-bottom:
            23px;
    }


    /* Quote */

    .md-quote {
        padding:
            88px 0;
    }


    .md-quote__mark {
        height:
            47px;

        font-size:
            5rem;
    }


    .md-quote blockquote {
        font-size:
            clamp(2.5rem, 10.5vw, 3.9rem);
    }


    /* General section heads */

    .md-section-head {
        margin-bottom:
            44px;
    }


    .md-section-head p {
        margin-top:
            17px;

        font-size:
            .92rem;
    }


    .md-eyebrow {
        gap:
            10px;

        font-size:
            .66rem;

        letter-spacing:
            .15em;
    }


    /* Services */

    .md-services__grid {
        grid-template-columns:
            1fr;
    }


    .md-service-card {
        min-height:
            0;

        padding:
            34px 22px;
    }


    .md-service-card__icon {
        width:
            68px;

        height:
            68px;

        margin-bottom:
            23px;
    }


    .md-services__showcase {
        margin-top:
            50px;

        padding:
            18px;

        border-radius:
            20px;
    }


    /* Featured */

    .md-feature-card {
        min-height:
            470px;
    }


    .md-feature-card__content {
        padding:
            28px 21px;
    }


    /* Sliders */

    .md-slider__track {
        gap:
            14px;
    }


    .md-project-card,
    .md-shop-card,
    .md-archiregal-card {
        width:
            calc(100vw - 54px);

        max-width:
            500px;
    }


    .md-slider__arrow {
        top:
            auto;

        bottom:
            -2px;

        width:
            48px;

        height:
            48px;

        transform:
            none;
    }


    .md-slider__arrow--prev {
        left:
            calc(50% - 57px);
    }


    .md-slider__arrow--next {
        right:
            calc(50% - 57px);
    }


    .md-project-slider,
    .md-shop-slider,
    .md-archiregal-slider {
        padding-bottom:
            70px;
    }


    .md-project-card__content,
    .md-shop-card__body {
        padding:
            24px 19px;
    }


    /* Philosophy */

    .md-philosophy__visual img {
        width:
            min(100%, 500px);

        max-height:
            520px;

        border-radius:
            22px;
    }


    /* Unique */

    .md-unique__intro {
        gap:
            40px;
    }


    .md-process {
        grid-template-columns:
            1fr;

        gap:
            34px;
    }


    .md-process__item {
        padding:
            0 8px;
    }


    .md-process__icon {
        margin-bottom:
            15px !important;
    }


    .md-unique__objects {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            10px;

        margin-top:
            50px;
    }


    .md-unique__objects > img {
        padding:
            13px;

        border-radius:
            16px;
    }


    /* Shop */

    .md-shop-card__details {
        grid-template-columns:
            1fr;
    }


    /* References */

    .md-references__featured {
        gap:
            8px;

        margin-bottom:
            42px;
    }


    .md-references__featured span {
        padding:
            9px 12px;

        font-size:
            .60rem;
    }


    .md-reference-marquee__track {
        gap:
            35px;
    }


    .md-references__collage {
        margin-top:
            43px;
    }


    .md-references__collage img {
        min-height:
            220px;
    }


    /* Contact */

    .md-contact__grid {
        gap:
            15px;
    }


    .md-contact__info,
    .md-contact__form {
        padding:
            31px 19px;

        border-radius:
            22px;
    }


    .md-contact__desktop-links {
        display:
            none;
    }


    .md-contact__mobile-actions {
        display:
            grid;

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

        gap:
            9px;

        width:
            100%;

        margin-top:
            5px;
    }


    .md-contact-action {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            9px;

        min-height:
            102px;

        padding:
            14px 8px;

        border:
            1px solid var(--md-border);

        border-radius:
            14px;

        background:
            var(--md-ivory-soft);

        color:
            var(--md-charcoal);

        font-size:
            .65rem;

        font-weight:
            700;

        letter-spacing:
            .05em;

        text-align:
            center;

        text-transform:
            uppercase;
    }


    .md-contact-action__icon {
        width:
            27px;

        height:
            27px;

        color:
            var(--md-red);
    }


    .md-contact-action--whatsapp {
        color:
            #168b47;
    }


    .md-contact-action--whatsapp
    .md-contact-action__icon {
        color:
            #25d366;
    }


    .md-contact__address {
        margin-top:
            27px;
    }


    /* Maps */

    .md-contact-map {
        margin-top:
            52px;
    }


    .md-contact-map__frame {
        min-height:
            420px;

        border-radius:
            22px;
    }


    .md-contact-map__frame iframe {
        height:
            420px;
    }


    .md-map-consent {
        padding:
            22px;
    }


    /* Floating buttons */

    .md-floating-actions {
        display:
            flex;
    }


    .md-back-to-top {
        right:
            16px;

        bottom:
            206px;

        width:
            46px;

        height:
            46px;
    }


    /* Footer */

    .md-footer__main {
        padding:
            72px 0 48px;
    }


    .md-footer__logo-link {
        width:
            min(260px, 72vw);
    }


    .md-footer__grid {
        margin-top:
            52px;

        gap:
            44px;
    }


    .md-footer__statement {
        margin-top:
            56px;
    }


    .md-footer__bottom-inner {
        flex-direction:
            column;

        gap:
            8px;
    }


    .md-footer__copyright {
        flex-direction:
            column;

        gap:
            1px;
    }


    /* Legal */

    .md-legal-hero {
        padding-top:
            122px;

        padding-bottom:
            52px;
    }


    .md-legal-content__inner {
        width:
            calc(100% - 24px);
    }


    .md-legal-block {
        padding:
            31px 14px;
    }


    /* Index */

    .md-index-grid {
        grid-template-columns:
            1fr;
    }

}


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

@media (max-width: 420px) {

    .md-brand,
    .md-header.is-scrolled .md-brand {
        width:
            128px;

        height:
            57px;
    }


    .md-mobile-nav__text {
        font-size:
            1.86rem;
    }


    .md-mobile-menu__contact {
        flex-direction:
            column;

        gap:
            3px;
    }


    .md-project-card,
    .md-shop-card,
    .md-archiregal-card {
        width:
            calc(100vw - 42px);
    }


    .md-contact__mobile-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .md-unique__objects {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================
   VERY SHORT MOBILE SCREENS
   z.B. geöffnetes Menü auf kleinen iPhones
========================================================== */

@media (max-width: 720px) and (max-height: 720px) {

    .md-mobile-menu__inner {
        justify-content:
            flex-start;

        overflow-y:
            auto;

        padding-top:
            88px;
    }


    .md-mobile-nav__text {
        font-size:
            1.75rem;
    }


    .md-mobile-menu__footer {
        margin-top:
            16px;

        padding-bottom:
            20px;
    }

}


/* ==========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================== */

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

    html {
        scroll-behavior:
            auto;
    }


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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }


    [data-reveal],
    body.md-ready [data-reveal] {
        opacity:
            1 !important;

        transform:
            none !important;
    }


    .md-hero__image {
        animation:
            none !important;
    }

}