:root {
    --background: #f5f5f7;
    --background-secondary: rgba(255, 255, 255, 0.72);
    --card: rgba(255, 255, 255, 0.72);
    --card-solid: #ffffff;

    --text: #1d1d1f;
    --text-secondary: #6e6e73;

    --border: rgba(0, 0, 0, 0.08);

    --accent: #0071e3;
    --accent-hover: #0077ed;

    --shadow:
        0 10px 30px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04);

    --radius-small: 14px;
    --radius: 22px;
    --radius-large: 32px;

    --max-width: 1280px;
}


/* Grundlayout */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        Helvetica,
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at 70% 10%,
            rgba(0, 113, 227, 0.12),
            transparent 35%
        ),
        var(--background);

    color: var(--text);

    -webkit-font-smoothing: antialiased;
}


/* Links */

a {
    color: inherit;
    text-decoration: none;
}


/* Navigation */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    padding: 16px 24px 0;
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;

    height: 68px;

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

    padding: 0 18px;

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

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

    border-radius: 22px;

    box-shadow: var(--shadow);

    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
}


/* Logo */

.brand {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 17px;
    font-weight: 600;

    white-space: nowrap;
}

.brand-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: white;

    background:
        linear-gradient(
            145deg,
            #222,
            #555
        );

    font-weight: 700;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.22),
        0 4px 10px rgba(0, 0, 0, 0.12);
}


/* Navigation Links */

.nav-links {
    display: flex;
    align-items: center;

    gap: 28px;
}

.nav-links a {
    font-size: 14px;
    color: var(--text);

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

.nav-links a:hover {
    opacity: 0.6;
}


/* rechte Navigation */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* Buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 0 22px;

    border-radius: 999px;

    background: var(--accent);

    color: white;

    font-size: 15px;
    font-weight: 500;

    border: none;

    cursor: pointer;

    box-shadow:
        0 5px 16px rgba(0, 113, 227, 0.22);

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

.button:hover {
    background: var(--accent-hover);

    transform: translateY(-1px);

    box-shadow:
        0 7px 20px rgba(0, 113, 227, 0.28);
}

.button-small {
    min-height: 40px;

    padding: 0 18px;

    font-size: 14px;
}

.button-secondary {
    background: rgba(255, 255, 255, 0.78);

    color: var(--text);

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

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.05);
}

.button-secondary:hover {
    background: white;
}


/* Theme Button */

.theme-button {
    width: 40px;
    height: 40px;

    border-radius: 50%;

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

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

    color: var(--text);

    font-size: 18px;

    cursor: pointer;

    backdrop-filter: blur(16px);

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

.theme-button:hover {
    transform: scale(1.05);

    background: rgba(255, 255, 255, 0.9);
}


/* Hero */

.hero {
    padding:
        46px 24px
        30px;
}

.hero-content {
    max-width: var(--max-width);

    min-height: 650px;

    margin: 0 auto;

    padding: 70px 64px;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    gap: 50px;

    overflow: hidden;

    position: relative;

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

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(75, 150, 255, 0.20),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.95),
            rgba(235, 240, 247, 0.82)
        );

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.08);

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

.hero-content::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    right: -160px;
    top: -190px;

    background:
        radial-gradient(
            circle,
            rgba(0, 113, 227, 0.18),
            transparent 68%
        );

    pointer-events: none;
}


/* Hero Text */

.hero-text {
    position: relative;
    z-index: 2;
}

.eyebrow {
    margin: 0 0 18px;

    color: var(--text-secondary);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.13em;
}

.hero h1 {
    margin: 0;

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

    line-height: 0.98;

    letter-spacing: -0.055em;

    font-weight: 700;
}

.hero h1 span {
    color: #6e6e73;
}

.hero-description {
    max-width: 570px;

    margin: 28px 0 0;

    color: var(--text-secondary);

    font-size: 20px;
    line-height: 1.45;
}


/* Hero Buttons */

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

    gap: 12px;

    margin-top: 34px;
}


/* Hero Features */

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

    gap: 30px;

    margin-top: 50px;
}

.feature {
    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--text-secondary);

    font-size: 13px;
    line-height: 1.35;
}

.feature-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 12px;

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

    border: 1px solid rgba(0, 0, 0, 0.06);

    color: var(--text);

    font-size: 18px;
}


/* Hero Visual */

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    z-index: 2;
}

.product-placeholder {
    width: min(100%, 480px);
    aspect-ratio: 1 / 1;

    display: flex;
    flex-direction: column;

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

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.7),
            rgba(255, 255, 255, 0.25)
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 30px 60px rgba(0, 0, 0, 0.08);

    backdrop-filter: blur(26px);

    text-align: center;

    color: var(--text-secondary);
}

.placeholder-object {
    width: 220px;
    height: 220px;

    display: grid;
    place-items: center;

    margin-bottom: 24px;

    border-radius: 60px;

    background:
        linear-gradient(
            145deg,
            #202124,
            #56585e
        );

    color: rgba(255, 255, 255, 0.92);

    font-size: 70px;
    font-weight: 700;

    letter-spacing: -0.08em;

    box-shadow:
        0 35px 55px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);

    transform: rotate(-8deg);
}

.product-placeholder p {
    max-width: 260px;

    margin: 0;

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


/* Sections */

.section {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 90px 24px;
}

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

    margin-bottom: 42px;
}

.section-heading h2 {
    margin: 0;

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

    line-height: 1.05;

    letter-spacing: -0.04em;
}

.section-heading > p:last-child {
    margin-top: 18px;

    color: var(--text-secondary);

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


/* Leistungen */

.service-grid {
    display: grid;

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

    gap: 16px;
}

.service-card {
    min-height: 240px;

    padding: 26px;

    border-radius: var(--radius);

    background: var(--card);

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

    box-shadow: var(--shadow);

    backdrop-filter: blur(20px);

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

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

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.09);
}

.card-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    margin-bottom: 30px;

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

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

    font-size: 23px;
}

.service-card h3 {
    margin: 0 0 10px;

    font-size: 19px;
}

.service-card p {
    margin: 0;

    color: var(--text-secondary);

    line-height: 1.5;

    font-size: 14px;
}


/* Materialien */

.material-grid {
    display: grid;

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

    gap: 14px;
}

.material-card {
    overflow: hidden;

    border-radius: var(--radius);

    background: var(--card);

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

    box-shadow: var(--shadow);

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

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

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.09);
}

.material-preview {
    aspect-ratio: 1.2 / 1;

    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at 50% 40%,
            #5b5d62,
            #17181a 70%
        );

    color: white;

    font-size: 28px;
    font-weight: 700;

    letter-spacing: -0.04em;
}

.material-card h3 {
    margin:
        18px 18px
        6px;

    font-size: 17px;
}

.material-card p {
    margin:
        0 18px
        20px;

    color: var(--text-secondary);

    font-size: 13px;
    line-height: 1.45;
}


/* CTA */

.cta-card {
    padding: 50px;

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

    gap: 40px;

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

    color: white;

    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(0, 113, 227, 0.42),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #15171a,
            #282b30
        );

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.14);
}

.cta-card .eyebrow {
    color: rgba(255, 255, 255, 0.6);
}

.cta-card h2 {
    margin: 0;

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

    letter-spacing: -0.04em;
}

.cta-card p:not(.eyebrow) {
    max-width: 620px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 17px;

    line-height: 1.5;
}


/* Footer */

.footer {
    padding:
        20px 24px
        60px;
}

.footer-container {
    max-width: var(--max-width);

    margin: 0 auto;

    padding-top: 30px;

    display: flex;

    justify-content: space-between;

    gap: 30px;

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

    color: var(--text-secondary);

    font-size: 13px;
}

.footer strong {
    color: var(--text);
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a:hover {
    color: var(--text);
}


/* Responsive */

@media (max-width: 1050px) {

    .nav-links {
        display: none;
    }

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

        padding: 60px 40px;
    }

    .hero-visual {
        margin-top: 20px;
    }

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

    .material-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }
}


@media (max-width: 650px) {

    .navbar {
        padding:
            10px 12px
            0;
    }

    .nav-container {
        height: 60px;

        padding: 0 12px;
    }

    .brand span {
        font-size: 14px;
    }

    .button-small {
        display: none;
    }

    .hero {
        padding:
            20px 12px
            20px;
    }

    .hero-content {
        min-height: auto;

        padding:
            46px 24px;

        border-radius: 24px;
    }

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

    .hero-description {
        font-size: 17px;
    }

    .hero-features {
        flex-direction: column;

        gap: 15px;
    }

    .product-placeholder {
        width: 100%;
    }

    .placeholder-object {
        width: 160px;
        height: 160px;

        font-size: 50px;

        border-radius: 45px;
    }

    .section {
        padding:
            65px 16px;
    }

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

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

    .cta-card {
        padding: 34px 26px;

        flex-direction: column;

        align-items: flex-start;
    }

    .footer-container {
        flex-direction: column;
    }

    .footer-links {
        flex-wrap: wrap;
    }
}/* DARK MODE */

html[data-theme="dark"] {
    --background: #0d0d0f;
    --background-secondary: rgba(30, 30, 32, 0.72);

    --card: rgba(30, 30, 32, 0.72);
    --card-solid: #1c1c1e;

    --text: #f5f5f7;
    --text-secondary: #a1a1a6;

    --border: rgba(255, 255, 255, 0.10);

    --shadow:
        0 14px 35px rgba(0, 0, 0, 0.30),
        0 1px 2px rgba(255, 255, 255, 0.03);
}


html[data-theme="dark"] body {
    background:
        radial-gradient(
            circle at 70% 10%,
            rgba(0, 113, 227, 0.15),
            transparent 35%
        ),
        var(--background);
}


html[data-theme="dark"] .nav-container {
    background: rgba(28, 28, 30, 0.72);

    border-color: rgba(255, 255, 255, 0.10);
}


html[data-theme="dark"] .hero-content {
    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(0, 113, 227, 0.18),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(30, 30, 32, 0.96),
            rgba(22, 22, 24, 0.90)
        );

    border-color: rgba(255, 255, 255, 0.08);
}


html[data-theme="dark"] .hero h1 span {
    color: #a1a1a6;
}


html[data-theme="dark"] .button-secondary {
    background: rgba(50, 50, 54, 0.8);

    color: var(--text);

    border-color: rgba(255, 255, 255, 0.10);
}


html[data-theme="dark"] .button-secondary:hover {
    background: rgba(65, 65, 70, 0.95);
}


html[data-theme="dark"] .theme-button {
    background: rgba(50, 50, 54, 0.75);

    border-color: rgba(255, 255, 255, 0.10);
}


html[data-theme="dark"] .product-placeholder {
    background:
        linear-gradient(
            145deg,
            rgba(50, 50, 54, 0.75),
            rgba(30, 30, 32, 0.50)
        );

    border-color: rgba(255, 255, 255, 0.10);
}


html[data-theme="dark"] .feature-icon,
html[data-theme="dark"] .card-icon {
    background: rgba(55, 55, 58, 0.80);

    border-color: rgba(255, 255, 255, 0.08);
}

/* Hero Bild */

.hero-image-card {
    padding: 26px;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 26px;
}


/* APPLE REDESIGN START */

body {
    background:
        radial-gradient(
            circle at 70% 0%,
            rgba(120, 150, 255, 0.13),
            transparent 32%
        ),
        #f5f5f7;

    letter-spacing: -0.012em;
}

/* Navigation */

.navbar {
    padding-top: 12px;
}

.nav-container {
    height: 58px;

    max-width: 1180px;

    padding: 0 16px;

    border-radius: 18px;

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

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

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

    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
}

.brand {
    font-size: 15px;
}

.brand-icon {
    width: 30px;
    height: 30px;

    border-radius: 9px;

    font-size: 13px;
}

.nav-links {
    gap: 24px;
}

.nav-links a {
    font-size: 13px;
}

.button-small {
    min-height: 36px;
    padding: 0 16px;
    font-size: 13px;
}

.theme-button {
    width: 36px;
    height: 36px;
}


/* Hero */

.hero {
    padding-top: 72px;
}

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

    min-height: 720px;

    padding: 92px 70px;

    grid-template-columns: 1fr 0.9fr;

    gap: 70px;

    border-radius: 0;

    background: transparent;

    border: none;

    box-shadow: none;

    overflow: visible;
}

.hero-content::before {
    width: 700px;
    height: 700px;

    right: -180px;
    top: -260px;

    opacity: 0.75;
}

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

.eyebrow {
    font-size: 11px;

    letter-spacing: 0.16em;

    margin-bottom: 22px;
}

.hero h1 {
    font-size: clamp(64px, 6.4vw, 96px);

    line-height: 0.94;

    letter-spacing: -0.065em;

    font-weight: 700;
}

.hero h1 span {
    color: #86868b;
}

.hero-description {
    margin-top: 30px;

    max-width: 560px;

    font-size: 21px;

    line-height: 1.42;

    color: #6e6e73;
}

.hero-buttons {
    margin-top: 34px;
}

.hero-features {
    margin-top: 52px;

    gap: 34px;
}

.feature {
    font-size: 12px;
}

.feature-icon {
    width: 34px;
    height: 34px;

    border-radius: 11px;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 6px 18px rgba(0,0,0,0.05);
}


/* Hero Visual */

.hero-visual {
    transform: translateY(10px);
}

.product-placeholder,
.hero-image-card {
    width: min(100%, 500px);

    aspect-ratio: 1 / 1;

    padding: 20px;

    border-radius: 36px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.68),
            rgba(255,255,255,0.28)
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        0 24px 70px rgba(60,70,100,0.13);

    backdrop-filter: blur(35px) saturate(160%);
    -webkit-backdrop-filter: blur(35px) saturate(160%);
}

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

    object-fit: cover;

    border-radius: 26px;
}


/* Allgemeine Bereiche */

.section {
    max-width: 1180px;

    padding-top: 120px;
    padding-bottom: 120px;
}

.section-heading {
    margin-bottom: 52px;

    max-width: 760px;
}

.section-heading h2 {
    font-size: clamp(46px, 5vw, 66px);

    letter-spacing: -0.055em;

    line-height: 1;
}

.section-heading > p:last-child {
    font-size: 19px;

    max-width: 650px;
}


/* Leistungskarten */

.service-grid {
    gap: 20px;
}

.service-card {
    min-height: 220px;

    padding: 30px;

    border-radius: 26px;

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

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

    box-shadow:
        0 14px 40px rgba(0,0,0,0.045);

    backdrop-filter: blur(26px) saturate(160%);
}

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

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

.card-icon {
    margin-bottom: 40px;
}


/* Materialien */

.material-grid {
    gap: 18px;
}

.material-card {
    border-radius: 26px;

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

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

    box-shadow:
        0 14px 40px rgba(0,0,0,0.045);
}

.material-card:hover {
    transform: translateY(-3px);
}

.material-preview {
    background:
        linear-gradient(
            145deg,
            #25262a,
            #4a4b50
        );
}


/* CTA */

.cta-card {
    min-height: 330px;

    padding: 64px;

    border-radius: 34px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(0,113,227,0.35),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #111214,
            #25272b
        );

    box-shadow:
        0 30px 80px rgba(0,0,0,0.16);
}


/* Dark Mode */

html[data-theme="dark"] body {
    background:
        radial-gradient(
            circle at 75% 0%,
            rgba(20,95,190,0.18),
            transparent 34%
        ),
        #000;
}

html[data-theme="dark"] .nav-container {
    background: rgba(28,28,30,0.68);

    border-color: rgba(255,255,255,0.09);

    box-shadow:
        0 12px 35px rgba(0,0,0,0.28);
}

html[data-theme="dark"] .hero-content {
    background: transparent;

    border: none;

    box-shadow: none;
}

html[data-theme="dark"] .product-placeholder,
html[data-theme="dark"] .hero-image-card {
    background:
        linear-gradient(
            145deg,
            rgba(45,45,48,0.7),
            rgba(22,22,25,0.48)
        );

    border-color:
        rgba(255,255,255,0.10);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 30px 90px rgba(0,0,0,0.42);
}

html[data-theme="dark"] .service-card,
html[data-theme="dark"] .material-card {
    background:
        rgba(30,30,32,0.72);

    border-color:
        rgba(255,255,255,0.08);

    box-shadow:
        0 14px 40px rgba(0,0,0,0.22);
}


/* Mobile */

@media (max-width: 1050px) {
    .hero-content {
        grid-template-columns: 1fr;

        padding: 70px 36px;

        text-align: center;
    }

    .hero-text {
        margin: 0 auto;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons,
    .hero-features {
        justify-content: center;
    }
}

@media (max-width: 650px) {
    .hero {
        padding-top: 30px;
    }

    .hero-content {
        padding:
            54px 18px;
    }

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

    .hero-description {
        font-size: 18px;
    }

    .section {
        padding-top: 85px;
        padding-bottom: 85px;
    }

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

/* APPLE REDESIGN END */


/* KULIMI PORTAL START */

.portal-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 90px 24px 120px;
}

.portal-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

.portal-header h1 {
    margin: 0;
    font-size: clamp(54px, 7vw, 86px);
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.portal-header > p:last-child {
    margin-top: 18px;
    color: var(--text-secondary);
    font-size: 19px;
}

.portal-window {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 720px;

    overflow: hidden;

    border-radius: 30px;

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

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

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.10);

    backdrop-filter:
        blur(35px)
        saturate(170%);

    -webkit-backdrop-filter:
        blur(35px)
        saturate(170%);
}

/* Sidebar */

.portal-sidebar {
    padding: 22px;

    background:
        rgba(245, 245, 247, 0.78);

    border-right:
        1px solid rgba(0, 0, 0, 0.06);
}

.portal-user {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 8px 24px;
}

.portal-avatar {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #0071e3,
            #6e5cff
        );

    color: white;

    font-size: 17px;
    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(0, 113, 227, 0.22);
}

.portal-user strong {
    display: block;

    font-size: 14px;
}

.portal-user span {
    display: block;

    margin-top: 3px;

    color: var(--text-secondary);

    font-size: 11px;
}

.portal-menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.portal-menu-item {
    width: 100%;

    padding: 10px 12px;

    border: none;

    border-radius: 10px;

    background: transparent;

    color: var(--text);

    text-align: left;

    font: inherit;
    font-size: 13px;

    cursor: pointer;

    transition:
        background 0.2s ease;
}

.portal-menu-item:hover {
    background:
        rgba(0, 0, 0, 0.045);
}

.portal-menu-item.active {
    background:
        rgba(0, 113, 227, 0.13);

    color: #0066cc;

    font-weight: 500;
}

/* Inhalt */

.portal-content {
    padding: 42px 46px 34px;
}

.portal-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 30px;

    margin-bottom: 34px;
}

.portal-title h2 {
    margin: 0;

    font-size: 36px;

    letter-spacing: -0.04em;
}

.portal-title p:not(.eyebrow) {
    margin-top: 10px;

    color: var(--text-secondary);

    font-size: 14px;
}

.portal-status {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 8px 12px;

    border-radius: 999px;

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

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

    color:
        var(--text-secondary);

    font-size: 12px;

    white-space: nowrap;
}

.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #34c759;

    box-shadow:
        0 0 0 4px
        rgba(52, 199, 89, 0.12);
}

/* Formular */

.portal-form {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.form-section {
    padding: 24px;

    border-radius: 20px;

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

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

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.045);
}

.form-section h3 {
    margin:
        0 0 20px;

    font-size: 16px;
}

.form-grid {
    display: grid;

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

    gap: 16px;
}

.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 7px;

    color:
        var(--text-secondary);

    font-size: 12px;
}

.full-width {
    grid-column: 1 / -1;
}

.form-grid input {
    width: 100%;

    min-height: 44px;

    padding:
        0 13px;

    border-radius: 11px;

    border:
        1px solid rgba(0, 0, 0, 0.09);

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

    color:
        var(--text);

    font:
        inherit;

    font-size: 14px;

    outline: none;

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

.form-grid input:focus {
    border-color:
        rgba(0, 113, 227, 0.65);

    box-shadow:
        0 0 0 4px
        rgba(0, 113, 227, 0.10);

    background: white;
}

.portal-savebar {
    position: sticky;
    bottom: 16px;

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

    gap: 20px;

    padding: 14px 16px;

    border-radius: 18px;

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

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

    box-shadow:
        0 16px 45px rgba(0, 0, 0, 0.10);

    backdrop-filter:
        blur(25px)
        saturate(180%);

    -webkit-backdrop-filter:
        blur(25px)
        saturate(180%);
}

.portal-savebar span {
    color:
        var(--text-secondary);

    font-size: 12px;
}

/* Dark Mode */

html[data-theme="dark"] .portal-window {
    background:
        rgba(28, 28, 30, 0.76);

    border-color:
        rgba(255, 255, 255, 0.09);

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, 0.40);
}

html[data-theme="dark"] .portal-sidebar {
    background:
        rgba(20, 20, 22, 0.78);

    border-right-color:
        rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .portal-menu-item:hover {
    background:
        rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .portal-menu-item.active {
    background:
        rgba(10, 132, 255, 0.18);

    color: #64a9ff;
}

html[data-theme="dark"] .portal-status {
    background:
        rgba(55, 55, 58, 0.68);

    border-color:
        rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .form-section {
    background:
        rgba(45, 45, 48, 0.60);

    border-color:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .form-grid input {
    background:
        rgba(58, 58, 62, 0.82);

    border-color:
        rgba(255, 255, 255, 0.09);

    color: var(--text);
}

html[data-theme="dark"] .form-grid input:focus {
    background:
        rgba(68, 68, 72, 0.95);

    border-color:
        rgba(10, 132, 255, 0.72);

    box-shadow:
        0 0 0 4px
        rgba(10, 132, 255, 0.13);
}

html[data-theme="dark"] .portal-savebar {
    background:
        rgba(38, 38, 41, 0.82);

    border-color:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.35);
}

/* Mobile */

@media (max-width: 850px) {
    .portal-window {
        grid-template-columns: 1fr;
    }

    .portal-sidebar {
        border-right: none;

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

    .portal-menu {
        display: grid;

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

    .portal-content {
        padding:
            30px 22px;
    }
}

@media (max-width: 600px) {
    .portal-main {
        padding:
            60px 12px 90px;
    }

    .portal-header h1 {
        font-size: 54px;
    }

    .portal-title {
        flex-direction: column;
    }

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

    .full-width {
        grid-column: auto;
    }

    .portal-savebar {
        flex-direction: column;

        align-items: stretch;
    }

    .portal-savebar .button {
        width: 100%;
    }
}

/* KULIMI PORTAL END */


/* SUBPAGES START */

.subpage-main {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 90px 24px 120px;
}

.subpage-hero {
    max-width: 920px;
    margin: 0;
    padding: 90px 0 110px;
}

.subpage-hero .eyebrow {
    margin-bottom: 20px;
}

.subpage-hero h1 {
    margin: 0;

    font-size: clamp(58px, 7vw, 92px);
    line-height: 0.98;
    letter-spacing: -0.06em;
    font-weight: 700;

    color: var(--text);
}

.subpage-hero > p:last-child {
    max-width: 720px;

    margin: 28px 0 0;

    font-size: 20px;
    line-height: 1.5;

    color: var(--text-secondary);
}

.subpage-content {
    width: 100%;
    padding-bottom: 50px;
}

.subpage-placeholder {
    width: 100%;
    min-height: 360px;

    padding: 48px;

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.78),
            rgba(255, 255, 255, 0.42)
        );

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

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.07);

    backdrop-filter: blur(30px) saturate(170%);
    -webkit-backdrop-filter: blur(30px) saturate(170%);
}

.subpage-placeholder h2 {
    margin: 0 0 14px;

    font-size: 36px;
    letter-spacing: -0.045em;
}

.subpage-placeholder p {
    max-width: 680px;

    margin: 0;

    color: var(--text-secondary);

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


/* Dark Mode */

html[data-theme="dark"] .subpage-placeholder {
    background:
        linear-gradient(
            145deg,
            rgba(40, 40, 43, 0.78),
            rgba(24, 24, 27, 0.58)
        );

    border-color: rgba(255, 255, 255, 0.09);

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.32);
}


/* Tablet */

@media (max-width: 850px) {

    .subpage-main {
        padding:
            70px 22px
            100px;
    }

    .subpage-hero {
        padding:
            70px 0
            85px;
    }
}


/* iPhone */

@media (max-width: 650px) {

    .subpage-main {
        padding:
            55px 16px
            80px;
    }

    .subpage-hero {
        padding:
            50px 0
            65px;
    }

    .subpage-hero h1 {
        font-size: 50px;
    }

    .subpage-hero > p:last-child {
        font-size: 17px;
    }

    .subpage-placeholder {
        min-height: 280px;

        padding: 30px 24px;

        border-radius: 24px;
    }
}

/* SUBPAGES END */


/* SERVICES PAGE START */

.service-feature {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;

    gap: 80px;

    padding: 110px 0;

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

.service-feature-large {
    border-top: none;
    padding-top: 10px;
}

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

.service-feature-reverse .service-feature-text {
    order: 2;
}

.service-feature-reverse .service-feature-visual {
    order: 1;
}

.service-feature-text h2 {
    margin: 0;

    max-width: 700px;

    font-size: clamp(44px, 5vw, 68px);
    line-height: 1;
    letter-spacing: -0.055em;
}

.service-feature-text > p:not(.eyebrow) {
    max-width: 620px;

    margin-top: 24px;

    color: var(--text-secondary);

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

.service-checklist {
    list-style: none;

    margin: 34px 0 0;
    padding: 0;

    display: grid;
    gap: 14px;
}

.service-checklist li {
    position: relative;

    padding-left: 30px;

    color: var(--text);

    font-size: 15px;
}

.service-checklist li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: -1px;

    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: white;
    background: var(--accent);

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

.service-feature-visual {
    display: flex;
    justify-content: center;
}

.service-visual-card {
    width: min(100%, 460px);
    aspect-ratio: 1 / 1;

    display: grid;
    place-items: center;

    border-radius: 36px;

    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(0, 113, 227, 0.24),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,0.82),
            rgba(235,240,247,0.55)
        );

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

    box-shadow:
        0 30px 80px rgba(40, 60, 100, 0.12);

    backdrop-filter:
        blur(30px)
        saturate(170%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(170%);
}

.service-visual-alt {
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(110, 92, 255, 0.24),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,0.82),
            rgba(240,235,248,0.58)
        );
}

.service-symbol {
    font-size: clamp(80px, 10vw, 140px);
    font-weight: 700;

    letter-spacing: -0.08em;

    color: var(--text);
}


/* Bento */

.service-bento {
    display: grid;

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

    gap: 20px;

    padding: 110px 0;
}

.service-bento-card {
    min-height: 290px;

    padding: 34px;

    border-radius: 30px;

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

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

    box-shadow:
        0 16px 48px rgba(0,0,0,0.055);

    backdrop-filter:
        blur(28px)
        saturate(165%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(165%);
}

.service-bento-wide {
    grid-column: 1 / -1;

    min-height: 420px;

    padding: 56px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(0,113,227,0.20),
            transparent 30%
        ),
        rgba(255,255,255,0.68);
}

.service-bento-card h2 {
    margin: 0;

    max-width: 720px;

    font-size: clamp(44px, 5vw, 66px);

    line-height: 1;

    letter-spacing: -0.055em;
}

.service-bento-card h3 {
    margin: 0;

    font-size: 28px;

    letter-spacing: -0.04em;
}

.service-bento-card p:not(.eyebrow) {
    max-width: 650px;

    color: var(--text-secondary);

    font-size: 16px;

    line-height: 1.55;
}

.service-stat {
    margin-top: 70px;

    display: flex;
    align-items: baseline;

    gap: 16px;
}

.service-stat strong {
    font-size: 54px;

    letter-spacing: -0.05em;
}

.service-stat span {
    color: var(--text-secondary);

    font-size: 14px;
}


/* Prozess */

.service-process {
    padding: 120px 0;
}

.process-grid {
    display: grid;

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

    gap: 16px;

    margin-top: 50px;
}

.process-step {
    padding: 26px;

    border-radius: 24px;

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

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

.process-step span {
    color: var(--accent);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.08em;
}

.process-step h3 {
    margin: 28px 0 10px;

    font-size: 22px;
}

.process-step p {
    margin: 0;

    color: var(--text-secondary);

    font-size: 14px;

    line-height: 1.5;
}


/* CTA */

.service-cta {
    min-height: 330px;

    padding: 60px;

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

    gap: 40px;

    border-radius: 34px;

    color: white;

    background:
        radial-gradient(
            circle at 82% 10%,
            rgba(0,113,227,0.42),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #111214,
            #272a30
        );

    box-shadow:
        0 30px 80px rgba(0,0,0,0.15);
}

.service-cta .eyebrow {
    color:
        rgba(255,255,255,0.55);
}

.service-cta h2 {
    margin: 0;

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

    letter-spacing: -0.05em;
}

.service-cta p:not(.eyebrow) {
    max-width: 600px;

    color:
        rgba(255,255,255,0.68);

    line-height: 1.5;
}


/* Dark Mode */

html[data-theme="dark"] .service-visual-card {
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(10,132,255,0.22),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(42,42,46,0.80),
            rgba(22,22,25,0.62)
        );

    border-color:
        rgba(255,255,255,0.09);

    box-shadow:
        0 30px 90px rgba(0,0,0,0.40);
}

html[data-theme="dark"] .service-bento-card,
html[data-theme="dark"] .process-step {
    background:
        rgba(30,30,32,0.70);

    border-color:
        rgba(255,255,255,0.08);
}


/* Tablet */

@media (max-width: 950px) {

    .service-feature,
    .service-feature-reverse {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .service-feature-reverse .service-feature-text,
    .service-feature-reverse .service-feature-visual {
        order: initial;
    }

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


/* Mobile */

@media (max-width: 650px) {

    .service-feature {
        padding: 80px 0;
    }

    .service-feature-text h2 {
        font-size: 46px;
    }

    .service-bento {
        grid-template-columns: 1fr;

        padding: 80px 0;
    }

    .service-bento-wide {
        grid-column: auto;

        padding: 34px;
    }

    .service-stat {
        margin-top: 45px;

        flex-direction: column;

        gap: 4px;
    }

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

    .service-cta {
        padding: 38px 28px;

        flex-direction: column;

        align-items: flex-start;
    }
}

/* SERVICES PAGE END */


/* MATERIALS PAGE START */

.materials-intro {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    gap: 40px;

    align-items: end;

    padding: 30px 0 100px;
}

.materials-intro-text h2 {
    margin: 0;

    max-width: 720px;

    font-size: clamp(44px, 5vw, 66px);

    line-height: 1;

    letter-spacing: -0.055em;
}

.materials-intro-text p:not(.eyebrow) {
    max-width: 650px;

    margin-top: 24px;

    color: var(--text-secondary);

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

.materials-highlight {
    padding: 28px;

    display: flex;
    flex-direction: column;

    gap: 10px;

    border-radius: 26px;

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

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

    box-shadow:
        0 14px 40px rgba(0,0,0,0.05);
}

.materials-highlight strong {
    font-size: 17px;
}

.materials-highlight span {
    color: var(--text-secondary);

    font-size: 14px;

    line-height: 1.5;
}


/* Karten */

.materials-grid {
    display: grid;

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

    gap: 20px;
}

.material-detail-card {
    min-height: 360px;

    padding: 36px;

    display: flex;
    flex-direction: column;

    border-radius: 30px;

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

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

    box-shadow:
        0 18px 50px rgba(0,0,0,0.055);

    backdrop-filter:
        blur(28px)
        saturate(165%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(165%);
}

.material-detail-large {
    grid-column: 1 / -1;

    min-height: 480px;

    padding: 54px;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(0,113,227,0.18),
            transparent 28%
        ),
        rgba(255,255,255,0.68);
}

.material-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: auto;
}

.material-code {
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.12em;

    color: var(--accent);
}

.material-badge {
    padding: 7px 11px;

    border-radius: 999px;

    background:
        rgba(0,113,227,0.10);

    color: var(--accent);

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

.material-detail-card h2 {
    max-width: 760px;

    margin:
        90px 0 0;

    font-size:
        clamp(44px, 5vw, 66px);

    line-height: 1;

    letter-spacing: -0.055em;
}

.material-detail-card h3 {
    margin:
        70px 0 0;

    font-size: 30px;

    letter-spacing: -0.045em;
}

.material-detail-card > p {
    max-width: 680px;

    margin-top: 18px;

    color: var(--text-secondary);

    font-size: 16px;

    line-height: 1.55;
}

.material-properties {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 28px;
}

.material-properties span {
    padding: 8px 12px;

    border-radius: 999px;

    background:
        rgba(0,0,0,0.045);

    color: var(--text-secondary);

    font-size: 12px;
}


/* Vergleich */

.material-comparison {
    padding: 130px 0;
}

.comparison-table {
    overflow: hidden;

    margin-top: 45px;

    border-radius: 28px;

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

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

    box-shadow:
        0 16px 50px rgba(0,0,0,0.05);
}

.comparison-row {
    display: grid;

    grid-template-columns:
        0.35fr 1fr 0.8fr;

    gap: 20px;

    padding:
        20px 24px;

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

    font-size: 14px;
}

.comparison-row:last-child {
    border-bottom: none;
}

.comparison-head {
    color: var(--text-secondary);

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

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


/* Dark */

html[data-theme="dark"] .materials-highlight,
html[data-theme="dark"] .material-detail-card,
html[data-theme="dark"] .comparison-table {
    background:
        rgba(30,30,32,0.70);

    border-color:
        rgba(255,255,255,0.08);

    box-shadow:
        0 18px 55px rgba(0,0,0,0.28);
}

html[data-theme="dark"] .material-detail-large {
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(10,132,255,0.18),
            transparent 30%
        ),
        rgba(30,30,32,0.72);
}

html[data-theme="dark"] .material-properties span {
    background:
        rgba(255,255,255,0.07);
}


/* Tablet */

@media (max-width: 850px) {

    .materials-intro {
        grid-template-columns: 1fr;
    }
}


/* Mobile */

@media (max-width: 650px) {

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

    .material-detail-large {
        grid-column: auto;

        padding: 34px;
    }

    .material-detail-card {
        min-height: 320px;

        padding: 30px;
    }

    .material-detail-card h2,
    .material-detail-card h3 {
        margin-top: 60px;
    }

    .comparison-table {
        overflow-x: auto;
    }

    .comparison-row {
        min-width: 700px;
    }
}

/* MATERIALS PAGE END */


/* PROJECTS PAGE START */

.projects-feature {
    min-height: 620px;

    display: grid;
    grid-template-columns: 1fr 0.9fr;

    align-items: center;

    gap: 70px;

    padding: 70px;

    border-radius: 36px;

    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(0,113,227,0.22),
            transparent 30%
        ),
        rgba(255,255,255,0.68);

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

    box-shadow:
        0 28px 80px rgba(0,0,0,0.08);

    backdrop-filter:
        blur(30px)
        saturate(170%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(170%);
}

.projects-feature-text h2 {
    margin: 0;

    max-width: 700px;

    font-size:
        clamp(46px, 5vw, 68px);

    line-height: 1;

    letter-spacing: -0.055em;
}

.projects-feature-text > p:not(.eyebrow) {
    max-width: 620px;

    margin:
        24px 0 32px;

    color:
        var(--text-secondary);

    font-size: 18px;

    line-height: 1.55;
}

.projects-feature-visual {
    display: flex;
    justify-content: center;
}

.projects-visual-object {
    width: min(100%, 400px);
    aspect-ratio: 1 / 1;

    display: grid;
    place-items: center;

    border-radius: 34%;

    background:
        linear-gradient(
            145deg,
            #1f2024,
            #51545b
        );

    box-shadow:
        0 40px 70px
        rgba(0,0,0,0.22),
        inset 0 1px 1px
        rgba(255,255,255,0.20);

    transform: rotate(-8deg);
}

.projects-visual-object span {
    color: white;

    font-size: 100px;

    font-weight: 700;

    letter-spacing: -0.08em;
}


/* Projektkarten */

.projects-grid {
    display: grid;

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

    gap: 20px;

    padding: 120px 0;
}

.project-card {
    min-height: 390px;

    display: flex;
    flex-direction: column;

    padding: 36px;

    border-radius: 30px;

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

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

    box-shadow:
        0 18px 50px
        rgba(0,0,0,0.055);

    backdrop-filter:
        blur(28px)
        saturate(165%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(165%);
}

.project-card-large {
    grid-column: 1 / -1;

    min-height: 500px;

    padding: 54px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(110,92,255,0.20),
            transparent 28%
        ),
        rgba(255,255,255,0.68);
}

.project-card-label {
    color: var(--accent);

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

    letter-spacing: 0.12em;
}

.project-card-content {
    margin-top: auto;
}

.project-card h2 {
    max-width: 760px;

    margin: 0;

    font-size:
        clamp(44px,5vw,64px);

    line-height: 1;

    letter-spacing: -0.055em;
}

.project-card h3 {
    max-width: 480px;

    margin: 0;

    font-size: 30px;

    letter-spacing: -0.045em;
}

.project-card p {
    max-width: 640px;

    margin-top: 18px;

    color:
        var(--text-secondary);

    font-size: 16px;

    line-height: 1.55;
}

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

    gap: 8px;

    margin-top: 26px;
}

.project-tags span {
    padding: 8px 12px;

    border-radius: 999px;

    background:
        rgba(0,0,0,0.05);

    color:
        var(--text-secondary);

    font-size: 12px;
}


/* Timeline */

.project-process {
    padding: 100px 0 130px;
}

.project-process-intro {
    max-width: 800px;
}

.project-process-intro h2 {
    margin: 0;

    font-size:
        clamp(44px,5vw,66px);

    line-height: 1;

    letter-spacing: -0.055em;
}

.project-timeline {
    margin-top: 60px;

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

.timeline-item {
    display: grid;

    grid-template-columns:
        100px 1fr;

    gap: 30px;

    padding: 34px 0;

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

.timeline-item > span {
    color:
        var(--accent);

    font-size: 13px;

    font-weight: 700;
}

.timeline-item h3 {
    margin: 0;

    font-size: 24px;
}

.timeline-item p {
    max-width: 620px;

    margin:
        8px 0 0;

    color:
        var(--text-secondary);

    line-height: 1.5;
}


/* CTA */

.project-showcase {
    min-height: 360px;

    display: flex;

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

    gap: 50px;

    padding: 60px;

    border-radius: 34px;

    color: white;

    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(0,113,227,0.45),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #111214,
            #292c32
        );

    box-shadow:
        0 30px 80px
        rgba(0,0,0,0.16);
}

.project-showcase .eyebrow {
    color:
        rgba(255,255,255,0.55);
}

.project-showcase h2 {
    max-width: 700px;

    margin: 0;

    font-size:
        clamp(40px,5vw,60px);

    letter-spacing: -0.05em;
}

.project-showcase p:not(.eyebrow) {
    max-width: 620px;

    color:
        rgba(255,255,255,0.68);

    line-height: 1.55;
}


/* Dark Mode */

html[data-theme="dark"] .projects-feature,
html[data-theme="dark"] .project-card {
    background:
        rgba(30,30,32,0.72);

    border-color:
        rgba(255,255,255,0.08);

    box-shadow:
        0 20px 60px
        rgba(0,0,0,0.30);
}

html[data-theme="dark"] .projects-feature {
    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(10,132,255,0.18),
            transparent 30%
        ),
        rgba(30,30,32,0.72);
}

html[data-theme="dark"] .project-tags span {
    background:
        rgba(255,255,255,0.07);
}


/* Tablet */

@media (max-width: 900px) {

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

        padding: 50px;
    }
}


/* Mobile */

@media (max-width: 650px) {

    .projects-feature {
        padding: 34px 26px;

        min-height: auto;
    }

    .projects-grid {
        grid-template-columns: 1fr;

        padding: 80px 0;
    }

    .project-card-large {
        grid-column: auto;

        padding: 34px;
    }

    .project-card {
        min-height: 330px;

        padding: 30px;
    }

    .timeline-item {
        grid-template-columns:
            60px 1fr;
    }

    .project-showcase {
        padding: 38px 28px;

        flex-direction: column;

        align-items: flex-start;
    }
}

/* PROJECTS PAGE END */


/* ABOUT PAGE START */

.about-feature {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;

    gap: 70px;

    align-items: center;

    padding: 40px 0 120px;
}

.about-feature-text h2 {
    margin: 0;

    font-size: clamp(46px, 5vw, 68px);
    line-height: 1;
    letter-spacing: -0.055em;
}

.about-feature-text p:not(.eyebrow) {
    max-width: 650px;

    color: var(--text-secondary);

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

.about-feature-card {
    min-height: 360px;

    padding: 42px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    border-radius: 32px;

    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(0,113,227,0.18),
            transparent 30%
        ),
        rgba(255,255,255,0.68);

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

    box-shadow:
        0 20px 60px rgba(0,0,0,0.07);
}

.about-big-number {
    margin-bottom: auto;

    color: var(--accent);

    font-size: 70px;
    font-weight: 700;

    letter-spacing: -0.07em;
}

.about-feature-card strong {
    font-size: 24px;
}

.about-feature-card p {
    margin-bottom: 0;

    color: var(--text-secondary);

    line-height: 1.5;
}


.about-values {
    display: grid;

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

    gap: 18px;

    padding: 20px 0 120px;
}

.about-value-card {
    min-height: 310px;

    padding: 32px;

    border-radius: 28px;

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

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

    box-shadow:
        0 15px 45px rgba(0,0,0,0.05);
}

.about-value-card > span {
    color: var(--accent);

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

.about-value-card h3 {
    margin-top: 70px;

    font-size: 28px;

    letter-spacing: -0.04em;
}

.about-value-card p {
    color: var(--text-secondary);

    line-height: 1.55;
}


.about-story {
    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap: 80px;

    padding: 120px 0;

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

.about-story h2 {
    margin: 0;

    font-size: clamp(42px, 5vw, 64px);

    line-height: 1;

    letter-spacing: -0.055em;
}

.about-story-text p {
    margin-top: 0;
    margin-bottom: 24px;

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.6;
}


html[data-theme="dark"] .about-feature-card,
html[data-theme="dark"] .about-value-card {
    background:
        rgba(30,30,32,0.72);

    border-color:
        rgba(255,255,255,0.08);

    box-shadow:
        0 18px 50px rgba(0,0,0,0.28);
}


@media (max-width: 900px) {

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

    .about-values {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 650px) {

    .about-feature {
        gap: 40px;
    }

    .about-feature-card {
        min-height: 300px;

        padding: 30px;
    }

    .about-story {
        gap: 40px;
    }
}

/* ABOUT PAGE END */


/* CONTACT PAGE START */

.contact-layout {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;

    gap: 24px;

    align-items: start;

    padding: 20px 0 120px;
}


.contact-info-card,
.contact-form-card {
    border-radius: 32px;

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

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

    box-shadow:
        0 18px 55px rgba(0,0,0,0.06);

    backdrop-filter:
        blur(30px)
        saturate(170%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(170%);
}


.contact-info-card {
    position: sticky;
    top: 110px;

    padding: 40px;
}


.contact-info-card h2 {
    margin: 0;

    font-size:
        clamp(38px, 4vw, 52px);

    line-height: 1;

    letter-spacing: -0.05em;
}


.contact-info-card > p:not(.eyebrow) {
    margin-top: 20px;

    color: var(--text-secondary);

    line-height: 1.55;
}


.contact-direct-list {
    display: grid;

    gap: 12px;

    margin-top: 44px;
}


.contact-direct-item {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 18px 20px;

    border-radius: 20px;

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

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

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


.contact-direct-item:hover {
    transform: translateY(-2px);

    background: white;
}


.contact-direct-label {
    color: var(--text-secondary);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}


.contact-direct-item strong {
    font-size: 14px;
}


/* Formular */

.contact-form-card {
    padding: 42px;
}


.contact-form-heading h2 {
    margin: 0;

    font-size:
        clamp(40px, 4vw, 56px);

    line-height: 1;

    letter-spacing: -0.05em;
}


.contact-form-heading > p:not(.eyebrow) {
    max-width: 650px;

    color: var(--text-secondary);

    line-height: 1.55;
}


.contact-form {
    margin-top: 42px;
}


.contact-form-grid {
    display: grid;

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

    gap: 18px;
}


.contact-field {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.contact-field-full {
    grid-column: 1 / -1;
}


.contact-field label,
.contact-field > label {
    color: var(--text-secondary);

    font-size: 12px;

    font-weight: 500;
}


.contact-field input,
.contact-field textarea,
.contact-field select {
    width: 100%;

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

    border-radius: 16px;

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

    color: var(--text);

    font: inherit;

    font-size: 15px;

    outline: none;

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


.contact-field input,
.contact-field select {
    height: 50px;

    padding: 0 16px;
}


.contact-field textarea {
    min-height: 170px;

    resize: vertical;

    padding: 15px 16px;

    line-height: 1.5;
}


.contact-field input:focus,
.contact-field textarea:focus,
.contact-field select:focus {
    border-color:
        rgba(0,113,227,0.55);

    background: white;

    box-shadow:
        0 0 0 4px
        rgba(0,113,227,0.10);
}


.contact-upload-placeholder {
    min-height: 110px;

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

    gap: 20px;

    padding: 20px;

    border-radius: 18px;

    border:
        1px dashed
        rgba(0,0,0,0.15);

    background:
        rgba(255,255,255,0.45);
}


.contact-upload-placeholder > div {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


.contact-upload-placeholder strong {
    font-size: 14px;
}


.contact-upload-placeholder span:not(.contact-upload-badge) {
    color: var(--text-secondary);

    font-size: 12px;
}


.contact-upload-badge {
    white-space: nowrap;

    padding: 7px 10px;

    border-radius: 999px;

    background:
        rgba(0,113,227,0.09);

    color: var(--accent);

    font-size: 11px;

    font-weight: 600;
}


.contact-consent {
    display: flex;

    gap: 12px;

    margin-top: 26px;

    color: var(--text-secondary);

    font-size: 12px;

    line-height: 1.5;
}


.contact-consent input {
    margin-top: 2px;
}


.contact-consent a {
    color: var(--accent);
}


.contact-submit-row {
    display: flex;

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

    gap: 20px;

    margin-top: 30px;
}


.contact-form-status {
    margin: 0;

    color: var(--text-secondary);

    font-size: 12px;
}


/* Ablauf */

.contact-process {
    padding: 20px 0 120px;
}


/* Dark Mode */

html[data-theme="dark"] .contact-info-card,
html[data-theme="dark"] .contact-form-card {
    background:
        rgba(30,30,32,0.72);

    border-color:
        rgba(255,255,255,0.08);

    box-shadow:
        0 18px 55px rgba(0,0,0,0.30);
}


html[data-theme="dark"] .contact-direct-item,
html[data-theme="dark"] .contact-field input,
html[data-theme="dark"] .contact-field textarea,
html[data-theme="dark"] .contact-field select,
html[data-theme="dark"] .contact-upload-placeholder {
    background:
        rgba(45,45,48,0.72);

    border-color:
        rgba(255,255,255,0.09);
}


html[data-theme="dark"] .contact-direct-item:hover,
html[data-theme="dark"] .contact-field input:focus,
html[data-theme="dark"] .contact-field textarea:focus,
html[data-theme="dark"] .contact-field select:focus {
    background:
        rgba(55,55,59,0.95);
}


/* Tablet */

@media (max-width: 900px) {

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-info-card {
        position: static;
    }
}


/* Mobile */

@media (max-width: 650px) {

    .contact-form-card,
    .contact-info-card {
        padding: 28px 24px;
    }

    .contact-form-grid {
        grid-template-columns: 1fr;
    }

    .contact-field-full {
        grid-column: auto;
    }

    .contact-submit-row {
        align-items: stretch;

        flex-direction: column;
    }

    .contact-submit-row .button {
        width: 100%;
    }

    .contact-upload-placeholder {
        align-items: flex-start;

        flex-direction: column;
    }
}

/* CONTACT PAGE END */


/* LIVE MATERIALS START */

.materials-live {
    padding: 120px 0;
}

.live-material-grid {
    display: grid;

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

    gap: 18px;
}

.live-material-card {
    min-height: 210px;

    padding: 28px;

    border-radius: 26px;

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

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

    box-shadow:
        0 15px 45px rgba(0,0,0,0.05);

    backdrop-filter:
        blur(26px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(26px)
        saturate(160%);
}

.live-material-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.live-material-type {
    color: var(--accent);

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

    letter-spacing: 0.12em;
}

.live-material-card h3 {
    margin: 8px 0 0;

    font-size: 25px;

    letter-spacing: -0.04em;
}

.live-material-card > p {
    color: var(--text-secondary);

    line-height: 1.5;
}

.live-material-color {
    margin-top: 28px;
}

.material-status {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 10px;

    border-radius: 999px;

    background:
        rgba(0,0,0,0.045);

    color: var(--text-secondary);

    font-size: 11px;

    white-space: nowrap;
}

.material-status i {
    width: 8px;
    height: 8px;

    display: block;

    border-radius: 50%;
}

.material-status-available i {
    background: #34c759;
}

.material-status-low i {
    background: #ff9f0a;
}

.material-status-on_request i {
    background: #0a84ff;
}

.material-status-unavailable i {
    background: #8e8e93;
}

.live-material-loading,
.live-material-empty,
.live-material-error {
    grid-column: 1 / -1;

    padding: 30px;

    border-radius: 24px;

    color: var(--text-secondary);

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

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


/* Dark Mode */

html[data-theme="dark"] .live-material-card,
html[data-theme="dark"] .live-material-loading,
html[data-theme="dark"] .live-material-empty,
html[data-theme="dark"] .live-material-error {
    background:
        rgba(30,30,32,0.72);

    border-color:
        rgba(255,255,255,0.08);

    box-shadow:
        0 16px 50px rgba(0,0,0,0.28);
}

html[data-theme="dark"] .material-status {
    background:
        rgba(255,255,255,0.07);
}


/* Mobile */

@media (max-width: 650px) {
    .live-material-grid {
        grid-template-columns: 1fr;
    }

    .live-material-top {
        flex-direction: column;
    }
}

/* LIVE MATERIALS END */

/* MATERIAL GROUPS START */

.material-group-card {
    overflow: hidden;

    border-radius: 28px;

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

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

    box-shadow:
        0 16px 50px
        rgba(0,0,0,0.055);

    backdrop-filter:
        blur(28px)
        saturate(165%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(165%);
}

.material-group-header {
    width: 100%;

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

    gap: 30px;

    padding: 30px;

    border: 0;

    background: transparent;

    color: var(--text);

    text-align: left;

    font: inherit;

    cursor: pointer;
}

.material-group-main {
    max-width: 620px;
}

.material-group-main h3 {
    margin: 7px 0 0;

    font-size: 30px;

    letter-spacing: -0.045em;
}

.material-group-main p {
    margin: 10px 0 0;

    color: var(--text-secondary);

    line-height: 1.5;
}

.material-group-meta {
    display: flex;
    align-items: center;

    gap: 14px;

    flex-shrink: 0;
}

.material-color-count {
    color: var(--text-secondary);

    font-size: 12px;
}

.material-chevron {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(0,0,0,0.05);

    font-size: 20px;

    line-height: 1;
}

.material-group-panel {
    padding:
        0 30px 30px;
}

.material-colors-grid {
    display: grid;

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

    gap: 10px;

    padding-top: 22px;

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

.material-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 13px 15px;

    border-radius: 15px;

    background:
        rgba(0,0,0,0.025);
}

.material-color-name {
    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 14px;
}

.material-color-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;
}

.material-color-dot-available {
    background: #34c759;
}

.material-color-dot-low {
    background: #ff9f0a;
}

.material-color-dot-on_request {
    background: #0a84ff;
}

.material-color-dot-unavailable {
    background: #8e8e93;
}

.material-color-status {
    color: var(--text-secondary);

    font-size: 11px;
}

html[data-theme="dark"] .material-group-card {
    background:
        rgba(30,30,32,0.72);

    border-color:
        rgba(255,255,255,0.08);
}

html[data-theme="dark"] .material-color-row,
html[data-theme="dark"] .material-chevron {
    background:
        rgba(255,255,255,0.06);
}

@media (max-width: 750px) {

    .material-group-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .material-group-meta {
        width: 100%;

        flex-wrap: wrap;
    }

    .material-chevron {
        margin-left: auto;
    }

    .material-colors-grid {
        grid-template-columns: 1fr;
    }
}

/* MATERIAL GROUPS END */

/* MATERIAL GROUPS FIX START */

.live-material-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
}

.material-group-card {
    width: 100% !important;
    min-height: 0 !important;

    overflow: hidden;

    border-radius: 30px;

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

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

    box-shadow:
        0 18px 55px rgba(0,0,0,0.06);

    backdrop-filter:
        blur(30px)
        saturate(170%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(170%);
}

.material-group-header {
    width: 100%;

    min-height: 170px;

    display: grid;

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

    align-items: center;

    gap: 40px;

    padding: 34px 38px;

    border: 0;

    background: transparent;

    color: var(--text);

    text-align: left;

    font: inherit;

    cursor: pointer;
}

.material-group-main {
    max-width: 720px;
}

.material-group-main .live-material-type {
    display: block;

    margin-bottom: 8px;

    color: var(--accent);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.12em;
}

.material-group-main h3 {
    margin: 0;

    font-size:
        clamp(34px, 4vw, 48px);

    line-height: 1;

    letter-spacing: -0.05em;
}

.material-group-main p {
    max-width: 600px;

    margin: 14px 0 0;

    color: var(--text-secondary);

    font-size: 15px;

    line-height: 1.5;
}

.material-group-meta {
    display: flex;

    align-items: center;

    gap: 14px;
}

.material-color-count {
    color: var(--text-secondary);

    font-size: 12px;
}

.material-chevron {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(0,0,0,0.05);

    font-size: 22px;

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

.material-group-header:hover
.material-chevron {
    background:
        rgba(0,0,0,0.08);
}

.material-group-panel {
    padding:
        0 38px 34px;
}

.material-colors-grid {
    display: grid;

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

    gap: 10px;

    padding-top: 26px;

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

.material-color-row {
    min-height: 54px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding: 14px 16px;

    border-radius: 16px;

    background:
        rgba(0,0,0,0.028);
}

.material-color-name {
    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 14px;

    font-weight: 500;
}

.material-color-status {
    color: var(--text-secondary);

    font-size: 11px;

    white-space: nowrap;
}

.material-status {
    padding: 8px 12px;

    border-radius: 999px;

    background:
        rgba(0,0,0,0.045);
}

html[data-theme="dark"]
.material-group-card {
    background:
        rgba(30,30,32,0.78);

    border-color:
        rgba(255,255,255,0.08);
}

html[data-theme="dark"]
.material-color-row,
html[data-theme="dark"]
.material-chevron,
html[data-theme="dark"]
.material-status {
    background:
        rgba(255,255,255,0.06);
}

@media (max-width: 900px) {

    .material-group-header {
        grid-template-columns: 1fr;

        gap: 24px;
    }

    .material-group-meta {
        justify-content:
            space-between;
    }

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

@media (max-width: 650px) {

    .material-group-header {
        padding: 28px 24px;
    }

    .material-group-panel {
        padding:
            0 24px 26px;
    }

    .material-group-meta {
        flex-wrap: wrap;
    }

    .material-colors-grid {
        grid-template-columns: 1fr;
    }
}

/* MATERIAL GROUPS FIX END */

/* ADMIN PAGE START */

.admin-page {
    min-height: 100vh;

    display: grid;

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

    background:
        var(--background);
}

.admin-sidebar {
    position: sticky;

    top: 0;

    height: 100vh;

    display: flex;

    flex-direction: column;

    padding: 24px 18px;

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

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

    backdrop-filter:
        blur(34px)
        saturate(170%);
}

.admin-brand {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 8px 10px 28px;
}

.admin-brand-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #0071e3,
            #48a8ff
        );

    color: white;

    font-weight: 700;
}

.admin-brand > div {
    display: flex;

    flex-direction: column;
}

.admin-brand strong {
    font-size: 14px;
}

.admin-brand div span {
    color:
        var(--text-secondary);

    font-size: 11px;
}

.admin-nav {
    display: grid;

    gap: 5px;
}

.admin-nav-item {
    padding: 11px 14px;

    border: 0;

    border-radius: 11px;

    background: transparent;

    color: var(--text);

    font: inherit;

    font-size: 13px;

    text-align: left;

    cursor: pointer;
}

.admin-nav-item:hover {
    background:
        rgba(0,0,0,0.045);
}

.admin-nav-item.active {
    background:
        rgba(0,113,227,0.12);

    color: var(--accent);

    font-weight: 600;
}

.admin-sidebar-footer {
    margin-top: auto;

    padding: 15px 10px;
}

.admin-back-link {
    color:
        var(--text-secondary);

    font-size: 12px;
}

.admin-content {
    width: 100%;

    max-width: 1250px;

    padding:
        55px 55px 120px;
}

.admin-topbar {
    display: flex;

    justify-content:
        space-between;

    align-items: flex-end;

    gap: 30px;

    margin-bottom: 50px;
}

.admin-topbar h1 {
    margin: 0;

    font-size:
        clamp(42px, 5vw, 64px);

    line-height: 1;

    letter-spacing: -0.055em;
}

.admin-cloud-status {
    display: flex;

    align-items: center;

    gap: 7px;

    padding: 8px 12px;

    border-radius: 999px;

    background:
        rgba(0,0,0,0.05);

    color:
        var(--text-secondary);

    font-size: 11px;
}

.admin-cloud-status i {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #8e8e93;
}

.admin-cloud-status.connected i {
    background: #34c759;
}

.admin-panel {
    display: none;
}

.admin-panel.active {
    display: block;
}

.admin-stat-grid {
    display: grid;

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

    gap: 16px;
}

.admin-stat-card,
.admin-info-card,
.admin-settings-card,
.admin-material-card {
    border-radius: 26px;

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

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

    box-shadow:
        0 16px 45px
        rgba(0,0,0,0.055);
}

.admin-stat-card {
    min-height: 190px;

    padding: 26px;

    display: flex;

    flex-direction: column;
}

.admin-stat-card span {
    color:
        var(--text-secondary);

    font-size: 12px;
}

.admin-stat-card strong {
    margin-top: auto;

    font-size: 36px;

    letter-spacing: -0.05em;
}

.admin-stat-card p {
    margin:
        5px 0 0;

    color:
        var(--text-secondary);

    font-size: 12px;
}

.admin-info-card {
    margin-top: 20px;

    padding: 36px;
}

.admin-info-card h2 {
    max-width: 750px;

    margin: 0;

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

    line-height: 1.05;

    letter-spacing: -0.05em;
}

.admin-info-card p {
    max-width: 700px;

    color:
        var(--text-secondary);

    line-height: 1.55;
}

.admin-section-heading {
    display: flex;

    align-items: flex-end;

    justify-content:
        space-between;

    gap: 30px;

    margin-bottom: 30px;
}

.admin-section-heading h2 {
    margin: 0;

    font-size:
        clamp(34px,4vw,48px);

    letter-spacing: -0.05em;
}

.admin-section-heading p:not(.eyebrow) {
    color:
        var(--text-secondary);
}

.admin-secondary-button {
    padding: 9px 14px;

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

    border-radius: 12px;

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

    color: var(--text);

    cursor: pointer;
}

.admin-material-list {
    display: grid;

    gap: 16px;
}

.admin-material-card {
    padding: 28px;
}

.admin-material-head {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;
}

.admin-material-type {
    color: var(--accent);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .1em;
}

.admin-material-head h3 {
    margin: 5px 0 0;

    font-size: 26px;

    letter-spacing: -0.04em;
}

.admin-material-stock {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    margin-top: 24px;

    padding: 15px 17px;

    border-radius: 16px;

    background:
        rgba(0,0,0,0.035);
}

.admin-material-stock span {
    color:
        var(--text-secondary);

    font-size: 12px;
}

.admin-material-form {
    display: grid;

    gap: 16px;

    margin-top: 22px;
}

.admin-material-form label {
    display: grid;

    gap: 7px;

    color:
        var(--text-secondary);

    font-size: 12px;
}

.admin-material-form input,
.admin-material-form textarea,
.admin-settings-card input {
    width: 100%;

    box-sizing: border-box;

    padding: 12px 14px;

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

    border-radius: 13px;

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

    color: var(--text);

    font: inherit;
}

.admin-switch-row {
    display: flex !important;

    grid-template-columns: auto 1fr;

    align-items: center;

    gap: 10px !important;
}

.admin-switch-row input {
    width: auto;
}

.admin-save-state {
    color:
        var(--text-secondary);

    font-size: 11px;
}

.admin-settings-card {
    padding: 32px;
}

.admin-key-row {
    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 10px;

    margin-top: 10px;
}

.admin-settings-card > p {
    color:
        var(--text-secondary);

    font-size: 12px;
}

.admin-loading,
.admin-error {
    padding: 30px;

    border-radius: 22px;

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

    color:
        var(--text-secondary);
}

html[data-theme="dark"] .admin-sidebar,
html[data-theme="dark"] .admin-stat-card,
html[data-theme="dark"] .admin-info-card,
html[data-theme="dark"] .admin-settings-card,
html[data-theme="dark"] .admin-material-card,
html[data-theme="dark"] .admin-loading,
html[data-theme="dark"] .admin-error {
    background:
        rgba(30,30,32,0.78);

    border-color:
        rgba(255,255,255,0.08);
}

@media (max-width: 850px) {

    .admin-page {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;

        width: auto;

        height: auto;
    }

    .admin-content {
        padding:
            35px 22px 100px;
    }

    .admin-stat-grid {
        grid-template-columns: 1fr;
    }

    .admin-topbar {
        align-items:
            flex-start;

        flex-direction: column;
    }
}

/* ADMIN PAGE END */

.admin-material-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-save-material:disabled {
    opacity: .55;
    cursor: default;
}

.admin-material-form input[type="number"] {
    max-width: 140px;
}

/* ADMIN MATERIAL REDESIGN START */

.admin-material-card {
    padding: 26px 28px 24px;
}

.admin-material-head {
    align-items: flex-start;
}

.admin-material-stock {
    margin-top: 18px;
    padding: 12px 14px;

    border-radius: 14px;

    background:
        rgba(0,0,0,0.028);
}

.admin-material-stock strong {
    font-size: 16px;
}

.admin-material-form {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 150px;

    gap: 16px 18px;

    margin-top: 20px;
}

.admin-material-form label {
    font-size: 11px;
}

.admin-material-form label:nth-of-type(2) {
    grid-column: 1 / -1;
}

.admin-material-form textarea {
    min-height: 92px;
    resize: vertical;
}

.admin-switch-row {
    grid-column: 1 / -1;

    display: flex !important;
    align-items: center;

    gap: 12px !important;

    padding-top: 2px;
}

.admin-switch-row input[type="checkbox"] {
    appearance: none;

    width: 42px;
    height: 24px;

    position: relative;

    border: 0;

    border-radius: 999px;

    background: #d1d1d6;

    cursor: pointer;

    transition:
        background .2s ease;
}

.admin-switch-row input[type="checkbox"]::after {
    content: "";

    position: absolute;

    top: 2px;
    left: 2px;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 1px 4px rgba(0,0,0,.18);

    transition:
        transform .2s ease;
}

.admin-switch-row input[type="checkbox"]:checked {
    background: #34c759;
}

.admin-switch-row input[type="checkbox"]:checked::after {
    transform: translateX(18px);
}

.admin-material-actions {
    grid-column: 1 / -1;

    display: flex;

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

    gap: 12px;

    margin-top: 2px;
}

.admin-save-material {
    min-width: 120px;
}

.admin-save-state {
    margin-right: auto;
}

.admin-material-form input,
.admin-material-form textarea {
    background:
        rgba(255,255,255,0.78);
}

html[data-theme="dark"]
.admin-material-stock {
    background:
        rgba(255,255,255,0.05);
}

html[data-theme="dark"]
.admin-material-form input,
html[data-theme="dark"]
.admin-material-form textarea {
    background:
        rgba(45,45,48,0.82);

    border-color:
        rgba(255,255,255,0.08);
}

@media (max-width: 700px) {

    .admin-material-form {
        grid-template-columns: 1fr;
    }

    .admin-material-form label:nth-of-type(2),
    .admin-switch-row,
    .admin-material-actions {
        grid-column: auto;
    }

    .admin-material-actions {
        justify-content: flex-start;
    }
}

/* ADMIN MATERIAL REDESIGN END */

/* ADMIN COMPACT MATERIAL LIST START */

.admin-list-group {
    overflow: hidden;

    margin-bottom: 18px;

    border-radius: 24px;

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

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

    box-shadow:
        0 14px 42px rgba(0,0,0,0.045);
}

.admin-list-group-title {
    min-height: 86px;

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

    gap: 20px;

    padding: 20px 24px;

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

.admin-list-group-title h3 {
    margin: 3px 0 0;

    font-size: 27px;

    letter-spacing: -0.04em;
}

.admin-list-group-title > span {
    color: var(--text-secondary);

    font-size: 12px;
}

.admin-list-item + .admin-list-item {
    border-top:
        1px solid var(--border);
}

.admin-list-row {
    width: 100%;

    min-height: 66px;

    display: grid;

    grid-template-columns:
        minmax(220px, 1fr)
        120px
        150px
        70px
        30px;

    align-items: center;

    gap: 20px;

    padding: 12px 22px;

    border: 0;

    background: transparent;

    color: var(--text);

    font: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        background .18s ease;
}

.admin-list-row:hover {
    background:
        rgba(0,0,0,0.025);
}

.admin-list-name {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.admin-list-name strong {
    font-size: 14px;
}

.admin-list-name span {
    color: var(--text-secondary);

    font-size: 11px;
}

.admin-list-stock {
    font-size: 13px;
    font-weight: 600;

    text-align: right;
}

.admin-list-status {
    display: flex;
    justify-content: flex-end;
}

.admin-list-online {
    color: var(--text-secondary);

    font-size: 11px;

    text-align: right;
}

.admin-list-chevron {
    color: var(--text-secondary);

    font-size: 22px;

    text-align: center;
}

.admin-list-details {
    padding:
        0 22px 22px;

    background:
        rgba(0,0,0,0.018);
}

.admin-list-details[hidden] {
    display: none;
}

.admin-list-form {
    display: grid;

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

    gap: 16px;

    padding-top: 20px;

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

.admin-list-form label {
    display: grid;

    gap: 7px;

    color: var(--text-secondary);

    font-size: 11px;
}

.admin-list-form input,
.admin-list-form textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 11px 13px;

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

    border-radius: 12px;

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

    color: var(--text);

    font: inherit;
}

.admin-list-description {
    grid-column: 1 / -1;
}

.admin-list-description textarea {
    min-height: 85px;

    resize: vertical;
}

.admin-list-form
.admin-switch-row {
    grid-column: 1 / -1;
}

.admin-list-actions {
    grid-column: 1 / -1;

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

    gap: 12px;
}

.admin-list-actions
.admin-save-state {
    margin-right: auto;
}

html[data-theme="dark"]
.admin-list-group {
    background:
        rgba(30,30,32,0.72);

    border-color:
        rgba(255,255,255,0.08);
}

html[data-theme="dark"]
.admin-list-row:hover,
html[data-theme="dark"]
.admin-list-details {
    background:
        rgba(255,255,255,0.035);
}

html[data-theme="dark"]
.admin-list-form input,
html[data-theme="dark"]
.admin-list-form textarea {
    background:
        rgba(45,45,48,0.8);

    border-color:
        rgba(255,255,255,0.08);
}

@media (max-width: 850px) {

    .admin-list-row {
        grid-template-columns:
            minmax(0,1fr)
            auto
            28px;
    }

    .admin-list-status {
        display: none;
    }

    .admin-list-online {
        display: none;
    }

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

    .admin-list-description,
    .admin-list-form .admin-switch-row,
    .admin-list-actions {
        grid-column: auto;
    }
}

/* ADMIN COMPACT MATERIAL LIST END */

/* ADMIN CONTENT EDITOR START */

.admin-content-editor {
    display: grid;
    gap: 18px;
}

.admin-content-section {
    padding: 28px;

    border-radius: 24px;

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

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

    box-shadow:
        0 14px 42px rgba(0,0,0,0.045);
}

.admin-content-section-head {
    display: flex;

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

    margin-bottom: 24px;
}

.admin-content-section-head h3 {
    margin: 4px 0 0;

    font-size: 27px;

    letter-spacing: -0.04em;
}

.admin-content-fields {
    display: grid;

    gap: 16px;
}

.admin-content-two-columns {
    grid-template-columns:
        repeat(2, minmax(0,1fr));
}

.admin-content-fields label {
    display: grid;

    gap: 7px;

    color:
        var(--text-secondary);

    font-size: 11px;
}

.admin-content-fields input,
.admin-content-fields textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 12px 14px;

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

    border-radius: 13px;

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

    color: var(--text);

    font: inherit;
}

.admin-content-fields textarea {
    resize: vertical;

    line-height: 1.5;
}

.admin-content-save-row {
    display: flex;

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

    gap: 14px;

    padding-top: 4px;
}

.admin-content-save-row
.admin-save-state {
    margin-right: auto;
}

html[data-theme="dark"]
.admin-content-section {
    background:
        rgba(30,30,32,0.72);

    border-color:
        rgba(255,255,255,0.08);
}

html[data-theme="dark"]
.admin-content-fields input,
html[data-theme="dark"]
.admin-content-fields textarea {
    background:
        rgba(45,45,48,0.8);

    border-color:
        rgba(255,255,255,0.08);
}

@media (max-width: 700px) {

    .admin-content-two-columns {
        grid-template-columns: 1fr;
    }
}

/* ADMIN CONTENT EDITOR END */

/* ADMIN CONTENT ACCORDION START */

.admin-content-editor {
    display: grid;
    gap: 14px;
}

.admin-content-section {
    padding: 0;
    overflow: hidden;
}

.admin-content-section-head {
    margin: 0;
}

.admin-content-section-head > div {
    width: 100%;
}

.admin-content-section-head h3 {
    margin: 0;
}

.admin-content-section-toggle {
    width: 100%;

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

    gap: 20px;

    padding: 22px 24px;

    border: 0;

    background: transparent;

    color: var(--text);

    font: inherit;

    text-align: left;

    cursor: pointer;
}

.admin-content-section-toggle:hover {
    background:
        rgba(0,0,0,0.025);
}

.admin-content-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-content-toggle-info strong {
    font-size: 17px;
}

.admin-content-toggle-info span {
    color: var(--text-secondary);
    font-size: 11px;
}

.admin-content-toggle-chevron {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(0,0,0,0.05);

    color: var(--text-secondary);

    font-size: 20px;
}

.admin-content-fields {
    padding: 0 24px 24px;
}

.admin-content-fields[hidden] {
    display: none;
}

html[data-theme="dark"]
.admin-content-section-toggle:hover {
    background:
        rgba(255,255,255,0.035);
}

html[data-theme="dark"]
.admin-content-toggle-chevron {
    background:
        rgba(255,255,255,0.06);
}

/* ADMIN CONTENT ACCORDION END */

/* ADMIN CONTENT CLEANUP START */

#admin-panel-content .admin-content-editor {
    display: grid;
    gap: 18px;
}

#admin-panel-content .admin-content-section {
    padding: 0 !important;
    overflow: hidden;

    border-radius: 24px;

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

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

    box-shadow:
        0 14px 42px rgba(0,0,0,0.045);
}


/* Kartenkopf */

#admin-panel-content
.admin-content-section-head {
    margin: 0 !important;

    padding: 22px 26px 20px;

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

#admin-panel-content
.admin-content-section-head > div {
    width: auto;
}

#admin-panel-content
.admin-content-section-head
.admin-material-type {
    display: block;

    margin: 0 0 6px;

    color: var(--accent);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .13em;

    line-height: 1.2;
}

#admin-panel-content
.admin-content-section-head h3 {
    margin: 0;

    font-size: 23px;

    line-height: 1.15;

    letter-spacing: -0.035em;
}


/* Formularbereich */

#admin-panel-content
.admin-content-fields {
    display: grid;

    gap: 18px;

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

#admin-panel-content
.admin-content-two-columns {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

#admin-panel-content
.admin-content-fields label {
    display: grid;

    gap: 8px;

    color:
        var(--text-secondary);

    font-size: 11px;

    font-weight: 500;
}

#admin-panel-content
.admin-content-fields input,
#admin-panel-content
.admin-content-fields textarea {
    width: 100%;

    box-sizing: border-box;

    border:
        1px solid rgba(0,0,0,0.09);

    border-radius: 13px;

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

    color: var(--text);

    font: inherit;

    font-size: 13px;

    outline: none;

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

#admin-panel-content
.admin-content-fields input {
    min-height: 44px;

    padding: 0 14px;
}

#admin-panel-content
.admin-content-fields textarea {
    min-height: 90px;

    padding: 12px 14px;

    resize: vertical;

    line-height: 1.5;
}

#admin-panel-content
.admin-content-fields input:focus,
#admin-panel-content
.admin-content-fields textarea:focus {
    border-color:
        rgba(0,113,227,.48);

    background: white;

    box-shadow:
        0 0 0 4px
        rgba(0,113,227,.08);
}


/* Speichern */

#admin-panel-content
.admin-content-save-row {
    position: sticky;

    bottom: 18px;

    z-index: 4;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 14px;

    margin-top: 8px;

    padding: 14px 16px;

    border-radius: 18px;

    background:
        rgba(245,245,247,.82);

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

    box-shadow:
        0 12px 35px rgba(0,0,0,.07);

    backdrop-filter:
        blur(24px)
        saturate(170%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(170%);
}

#admin-panel-content
.admin-content-save-row
.admin-save-state {
    margin-right: auto;
}


/* Dark Mode */

html[data-theme="dark"]
#admin-panel-content
.admin-content-section {
    background:
        rgba(30,30,32,.76);

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

html[data-theme="dark"]
#admin-panel-content
.admin-content-fields input,
html[data-theme="dark"]
#admin-panel-content
.admin-content-fields textarea {
    background:
        rgba(45,45,48,.86);

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

html[data-theme="dark"]
#admin-panel-content
.admin-content-save-row {
    background:
        rgba(28,28,30,.84);

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


/* Mobile */

@media (max-width: 700px) {

    #admin-panel-content
    .admin-content-two-columns {
        grid-template-columns: 1fr;
    }

    #admin-panel-content
    .admin-content-section-head {
        padding:
            20px 20px 18px;
    }

    #admin-panel-content
    .admin-content-fields {
        padding:
            20px !important;
    }
}

/* ADMIN CONTENT CLEANUP END */

/* CONTENT HEADER TOGGLES START */

#admin-panel-content
.admin-content-section-head {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    cursor: pointer;

    user-select: none;

    transition:
        background .18s ease;
}

#admin-panel-content
.admin-content-section-head:hover {
    background:
        rgba(0,0,0,0.025);
}

.admin-content-head-chevron {
    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        rgba(0,0,0,0.05);

    color:
        var(--text-secondary);

    font-size: 20px;

    line-height: 1;
}

#admin-panel-content
.admin-content-section-head:focus-visible {
    outline:
        3px solid rgba(0,113,227,.18);

    outline-offset: -3px;
}

#admin-panel-content
.admin-content-fields[hidden] {
    display: none !important;
}

html[data-theme="dark"]
#admin-panel-content
.admin-content-section-head:hover {
    background:
        rgba(255,255,255,0.035);
}

html[data-theme="dark"]
.admin-content-head-chevron {
    background:
        rgba(255,255,255,0.07);
}

/* CONTENT HEADER TOGGLES END */

/* ADMIN ORDERS START */

.admin-order-stats {
    display: grid;

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

    gap: 12px;

    margin-bottom: 20px;
}

.admin-order-stat {
    padding: 18px 20px;

    border-radius: 18px;

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

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

.admin-order-stat span {
    color: var(--text-secondary);

    font-size: 11px;
}

.admin-order-stat strong {
    display: block;

    margin-top: 6px;

    font-size: 28px;

    letter-spacing: -.04em;
}


.admin-order-list {
    overflow: hidden;

    border-radius: 24px;

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

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

    box-shadow:
        0 14px 42px rgba(0,0,0,.045);
}

.admin-order-item +
.admin-order-item {
    border-top:
        1px solid var(--border);
}

.admin-order-row {
    width: 100%;

    min-height: 72px;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        160px
        80px
        30px;

    align-items: center;

    gap: 18px;

    padding: 14px 22px;

    border: 0;

    background: transparent;

    color: var(--text);

    font: inherit;

    text-align: left;

    cursor: pointer;
}

.admin-order-row:hover {
    background:
        rgba(0,0,0,.025);
}

.admin-order-main {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.admin-order-type {
    color: var(--accent);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .1em;
}

.admin-order-main > strong {
    font-size: 14px;
}

.admin-order-main > span:last-child {
    color: var(--text-secondary);

    font-size: 11px;
}

.admin-order-status {
    font-size: 12px;

    text-align: right;
}

.admin-order-sync {
    color: var(--text-secondary);

    font-size: 11px;

    text-align: right;
}

.admin-order-chevron {
    color: var(--text-secondary);

    font-size: 22px;

    text-align: center;
}


.admin-order-details {
    padding: 22px;

    background:
        rgba(0,0,0,.018);

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

.admin-order-details[hidden] {
    display: none;
}

.admin-order-detail-grid {
    display: grid;

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

    gap: 12px;
}

.admin-order-detail-block,
.admin-order-message,
.admin-order-section {
    padding: 20px;

    border-radius: 18px;

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

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

.admin-order-detail-block h4 {
    margin:
        5px 0 12px;

    font-size: 20px;
}

.admin-order-detail-block p {
    margin: 5px 0;

    color: var(--text-secondary);

    font-size: 12px;
}

.admin-order-message {
    margin-top: 12px;
}

.admin-order-message p {
    margin:
        10px 0 0;

    line-height: 1.55;
}


.admin-order-section {
    margin-top: 12px;
}

.admin-order-section-head {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    margin-bottom: 12px;
}

.admin-order-section-head h4 {
    margin: 0;

    font-size: 17px;
}

.admin-order-section-head span {
    color: var(--text-secondary);

    font-size: 11px;
}


.admin-order-position {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 20px;

    padding: 12px 0;

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

.admin-order-position:first-child {
    border-top: 0;
}

.admin-order-position > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.admin-order-position span {
    color: var(--text-secondary);

    font-size: 11px;
}


.admin-order-event {
    display: grid;

    grid-template-columns:
        12px 1fr;

    gap: 12px;

    padding: 12px 0;
}

.admin-order-event i {
    width: 8px;
    height: 8px;

    margin-top: 5px;

    border-radius: 50%;

    background: var(--accent);
}

.admin-order-event strong {
    font-size: 13px;
}

.admin-order-event p {
    margin:
        5px 0;

    color: var(--text-secondary);

    font-size: 12px;
}

.admin-order-event span {
    color: var(--text-secondary);

    font-size: 10px;
}

.admin-order-empty,
.admin-order-loading {
    color: var(--text-secondary);

    font-size: 12px;
}


html[data-theme="dark"]
.admin-order-stat,
html[data-theme="dark"]
.admin-order-list,
html[data-theme="dark"]
.admin-order-detail-block,
html[data-theme="dark"]
.admin-order-message,
html[data-theme="dark"]
.admin-order-section {
    background:
        rgba(30,30,32,.72);

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

html[data-theme="dark"]
.admin-order-details,
html[data-theme="dark"]
.admin-order-row:hover {
    background:
        rgba(255,255,255,.035);
}


@media (max-width: 750px) {

    .admin-order-stats {
        grid-template-columns: 1fr;
    }

    .admin-order-row {
        grid-template-columns:
            minmax(0,1fr)
            28px;
    }

    .admin-order-status,
    .admin-order-sync {
        display: none;
    }

    .admin-order-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ADMIN ORDERS END */

/* CONTACT FORM CLOUD STATUS START */

.contact-form-status {
    min-height: 20px;

    margin-top: 12px;

    font-size: 12px;

    line-height: 1.45;

    color:
        var(--text-secondary);
}

.contact-form-status[data-state="success"] {
    color: #16833d;
}

.contact-form-status[data-state="error"] {
    color: #c9342f;
}

.contact-form-status[data-state="loading"] {
    color: var(--text-secondary);
}

.contact-form button[type="submit"]:disabled {
    opacity: .55;

    cursor: wait;
}

/* CONTACT FORM CLOUD STATUS END */

/* CONTACT SEPARATED UPLOADS START */

.contact-upload-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 10px;
}

.contact-upload-box {
    padding: 18px;

    border-radius: 18px;

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

    border:
        1px solid rgba(0,0,0,.07);
}

.contact-upload-head {
    display: flex;
    flex-direction: column;

    gap: 4px;

    margin-bottom: 14px;
}

.contact-upload-head strong {
    font-size: 14px;
}

.contact-upload-head span {
    color: var(--text-secondary);

    font-size: 11px;

    line-height: 1.4;
}

.contact-upload-button {
    display: inline-flex;

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

    min-height: 38px;

    padding: 0 14px;

    border-radius: 11px;

    background:
        rgba(0,113,227,.09);

    color: var(--accent);

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

    cursor: pointer;
}

.contact-upload-button:hover {
    background:
        rgba(0,113,227,.14);
}

.contact-upload-file-list {
    display: grid;

    gap: 6px;

    margin-top: 12px;

    color: var(--text-secondary);

    font-size: 11px;
}

.contact-upload-file {
    display: flex;

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

    gap: 12px;

    padding: 8px 10px;

    border-radius: 10px;

    background:
        rgba(0,0,0,.035);
}

.contact-upload-file span {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.contact-upload-file small {
    flex-shrink: 0;

    color: var(--text-secondary);
}

html[data-theme="dark"]
.contact-upload-box {
    background:
        rgba(255,255,255,.035);

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

html[data-theme="dark"]
.contact-upload-file {
    background:
        rgba(255,255,255,.05);
}

@media (max-width: 700px) {

    .contact-upload-grid {
        grid-template-columns: 1fr;
    }
}

/* CONTACT SEPARATED UPLOADS END */

/* CONTACT SUCCESS START */

.contact-success-card {
    max-width: 720px;

    margin: 40px auto;

    padding: 48px;

    text-align: center;

    border-radius: 28px;

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

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

    box-shadow:
        0 22px 70px rgba(0,0,0,.08);

    backdrop-filter:
        blur(24px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(160%);
}

.contact-success-card[hidden] {
    display: none !important;
}

.contact-success-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin:
        0 auto 20px;

    border-radius: 50%;

    background:
        rgba(32,185,87,.12);

    color:
        #1c9b4b;

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

.contact-success-card h2 {
    margin:
        8px 0 12px;

    font-size: 32px;

    letter-spacing:
        -.04em;
}

.contact-success-card > p {
    max-width: 530px;

    margin:
        0 auto;

    color:
        var(--text-secondary);

    line-height: 1.6;
}

.contact-success-reference {
    max-width: 420px;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 20px;

    margin:
        28px auto;

    padding:
        14px 16px;

    border-radius: 14px;

    background:
        rgba(0,0,0,.035);

    text-align: left;
}

.contact-success-reference span {
    color:
        var(--text-secondary);

    font-size: 11px;
}

.contact-success-reference strong {
    overflow: hidden;

    font-size: 11px;

    text-overflow:
        ellipsis;

    white-space: nowrap;
}

html[data-theme="dark"]
.contact-success-card {
    background:
        rgba(30,30,32,.76);

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

html[data-theme="dark"]
.contact-success-reference {
    background:
        rgba(255,255,255,.05);
}

/* CONTACT SUCCESS END */

/* ========================================
   LEISTUNGEN
======================================== */

.services-page {
    overflow: hidden;
}

.services-hero {
    padding: 150px 0 110px;
}

.services-hero h1 {
    max-width: 900px;
    margin: 14px 0 26px;
    font-size: clamp(3.4rem, 8vw, 6.8rem);
    line-height: .94;
    letter-spacing: -.065em;
}

.services-hero-text {
    max-width: 720px;
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.55;
    color: var(--text-secondary, #6e6e73);
}

.services-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}


/* Übersicht */

.services-overview,
.services-process,
.services-usecases {
    padding: 100px 0;
}

.services-section-head {
    max-width: 760px;
    margin-bottom: 44px;
}

.services-section-head h2 {
    margin: 10px 0 0;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.services-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.service-card {
    min-height: 300px;
    padding: 30px;
    border: 1px solid
        rgba(0, 0, 0, .07);
    border-radius: 28px;
    background:
        rgba(255, 255, 255, .72);
    backdrop-filter:
        blur(24px);
    -webkit-backdrop-filter:
        blur(24px);
    box-shadow:
        0 12px 40px
        rgba(0, 0, 0, .045);
}

.service-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 44px;
    border-radius: 14px;
    background: #0071e3;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
}

.service-card h3 {
    margin: 0 0 12px;
    font-size: 1.45rem;
    letter-spacing: -.025em;
}

.service-card p {
    margin: 0;
    line-height: 1.6;
    color: var(--text-secondary, #6e6e73);
}


/* Ablauf */

.services-process {
    background:
        rgba(0, 0, 0, .025);
}

.process-list {
    max-width: 900px;
}

.process-item {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 24px;
    padding: 30px 0;
    border-bottom:
        1px solid
        rgba(0, 0, 0, .08);
}

.process-number {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #0071e3;
    color: #fff;
    font-weight: 700;
}

.process-item h3 {
    margin: 2px 0 8px;
    font-size: 1.35rem;
}

.process-item p {
    max-width: 650px;
    margin: 0;
    line-height: 1.6;
    color: var(--text-secondary, #6e6e73);
}


/* Material */

.services-materials {
    padding: 100px 0;
}

.services-material-card {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: clamp(32px, 6vw, 64px);
    border-radius: 32px;
    background:
        rgba(255, 255, 255, .72);
    border:
        1px solid
        rgba(0, 0, 0, .07);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.services-material-card > div {
    max-width: 690px;
}

.services-material-card h2 {
    margin: 10px 0 18px;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -.045em;
}

.services-material-card p {
    line-height: 1.6;
    color: var(--text-secondary, #6e6e73);
}


/* Anwendungen */

.usecase-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.usecase-item {
    padding: 24px;
    border-radius: 20px;
    background:
        rgba(255, 255, 255, .66);
    border:
        1px solid
        rgba(0, 0, 0, .07);
    font-weight: 600;
}


/* CTA */

.services-cta {
    padding: 80px 0 140px;
}

.services-cta-card {
    padding: clamp(40px, 8vw, 90px);
    text-align: center;
    border-radius: 36px;
    background:
        linear-gradient(
            145deg,
            rgba(0, 113, 227, .11),
            rgba(255, 255, 255, .74)
        );
    border:
        1px solid
        rgba(0, 113, 227, .12);
}

.services-cta-card h2 {
    max-width: 800px;
    margin: 12px auto 18px;
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.services-cta-card p {
    max-width: 600px;
    margin: 0 auto 28px;
    color: var(--text-secondary, #6e6e73);
    font-size: 1.1rem;
    line-height: 1.6;
}


/* Dark Mode */

html[data-theme="dark"] .service-card,
html[data-theme="dark"] .services-material-card,
html[data-theme="dark"] .usecase-item {
    background:
        rgba(30, 30, 32, .72);
    border-color:
        rgba(255, 255, 255, .09);
}

html[data-theme="dark"] .services-process {
    background:
        rgba(255, 255, 255, .025);
}

html[data-theme="dark"] .process-item {
    border-color:
        rgba(255, 255, 255, .09);
}

html[data-theme="dark"] .services-cta-card {
    background:
        linear-gradient(
            145deg,
            rgba(0, 113, 227, .16),
            rgba(30, 30, 32, .75)
        );
    border-color:
        rgba(255, 255, 255, .09);
}


/* Responsive */

@media (max-width: 900px) {

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

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

    .services-material-card {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 600px) {

    .services-hero {
        padding:
            115px 0 70px;
    }

    .services-overview,
    .services-process,
    .services-usecases,
    .services-materials {
        padding:
            70px 0;
    }

    .services-grid,
    .usecase-grid {
        grid-template-columns: 1fr;
    }

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

    .process-item {
        grid-template-columns:
            48px 1fr;
        gap: 16px;
    }

    .services-cta {
        padding:
            50px 0 90px;
    }
}


/* ========================================
   LEISTUNGEN – HERO KORREKTUR
======================================== */

.services-hero {
    padding:
        190px 0 90px !important;
}

.services-hero .container {
    max-width:
        1180px;
}

.services-hero h1 {
    max-width:
        980px;

    margin:
        12px 0 24px;

    font-size:
        clamp(
            3rem,
            6vw,
            5.8rem
        ) !important;

    line-height:
        .96 !important;

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

.services-hero-text {
    max-width:
        720px;

    font-size:
        clamp(
            1.05rem,
            1.8vw,
            1.35rem
        );

    line-height:
        1.55;
}

.services-hero-actions {
    margin-top:
        30px;
}


/* Abstand zum nächsten Bereich */

.services-overview {
    padding-top:
        80px !important;
}


/* Buttons angleichen */

.services-hero-actions .button,
.services-hero-actions .button-secondary {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    padding:
        0 22px;

    border-radius:
        999px;

    text-decoration:
        none;
}


/* Mobile */

@media (max-width: 700px) {

    .services-hero {
        padding:
            130px 0 65px !important;
    }

    .services-hero h1 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4.3rem
            ) !important;
    }

    .services-hero-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .services-hero-actions .button,
    .services-hero-actions .button-secondary {
        width:
            100%;
    }
}


/* ========================================
   LEISTUNGEN – SAUBERE SEITENRÄNDER
======================================== */

.services-page .container {
    width:
        min(
            calc(100% - 64px),
            1180px
        );

    margin-left:
        auto;

    margin-right:
        auto;
}


/* Tablet */

@media (max-width: 900px) {

    .services-page .container {
        width:
            min(
                calc(100% - 40px),
                1180px
            );
    }
}


/* Handy */

@media (max-width: 600px) {

    .services-page .container {
        width:
            min(
                calc(100% - 28px),
                1180px
            );
    }
}


/* ========================================
   LEISTUNGEN – MATERIALKARTE FEINSCHLIFF
======================================== */

.services-material-card {
    min-height: 0 !important;
    padding: 54px 58px !important;
    align-items: center !important;
}

.services-material-card .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 22px;

    border-radius: 999px;

    background:
        rgba(0, 0, 0, .055);

    color:
        inherit;

    text-decoration:
        none;

    font-weight: 500;

    white-space:
        nowrap;

    transition:
        transform .18s ease,
        background .18s ease;
}

.services-material-card .button-secondary:hover {
    background:
        rgba(0, 0, 0, .09);

    transform:
        translateY(-1px);
}

html[data-theme="dark"]
.services-material-card
.button-secondary {
    background:
        rgba(255, 255, 255, .10);
}

html[data-theme="dark"]
.services-material-card
.button-secondary:hover {
    background:
        rgba(255, 255, 255, .16);
}

@media (max-width: 700px) {

    .services-material-card {
        padding:
            34px 28px !important;
    }

    .services-material-card
    .button-secondary {
        width: 100%;
        margin-top: 10px;
    }
}


/* ========================================
   LEISTUNGEN – MATERIAL BUTTON FIX
======================================== */

.services-material-card .button-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 46px !important;
    padding: 0 22px !important;

    border-radius: 999px !important;

    background: #f2f2f2 !important;
    color: #1d1d1f !important;

    border: 1px solid
        rgba(0, 0, 0, .08) !important;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, .05) !important;

    text-decoration: none !important;

    font-size: .95rem !important;
    font-weight: 500 !important;

    white-space: nowrap !important;

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease !important;
}

.services-material-card .button-secondary:hover {
    background: #e8e8ed !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 18px
        rgba(0, 0, 0, .08) !important;
}

html[data-theme="dark"]
.services-material-card
.button-secondary {
    background:
        rgba(255, 255, 255, .10) !important;

    color:
        #f5f5f7 !important;

    border-color:
        rgba(255, 255, 255, .10) !important;
}

html[data-theme="dark"]
.services-material-card
.button-secondary:hover {
    background:
        rgba(255, 255, 255, .16) !important;
}


/* =========================================================
   SUBPAGE HERO – PREMIUM EINSTIEG
   Leistungen / Materialien / Projekte / Über uns / Kontakt
========================================================= */

.subpage-body {
    --page-accent-rgb: 0, 113, 227;

    background:
        #f5f5f7;
}


/* leichte Variation je Seite */

.page-services {
    --page-accent-rgb: 0, 113, 227;
}

.page-materials {
    --page-accent-rgb: 72, 104, 255;
}

.page-projects {
    --page-accent-rgb: 92, 73, 203;
}

.page-about {
    --page-accent-rgb: 0, 122, 255;
}

.page-contact {
    --page-accent-rgb: 61, 91, 255;
}


/* erster Bereich jeder Unterseite */

.subpage-body main > section:first-child {
    width:
        min(
            calc(100% - 64px),
            1080px
        );

    min-height:
        510px;

    margin:
        215px auto 100px !important;

    padding:
        clamp(
            48px,
            7vw,
            82px
        ) !important;

    box-sizing:
        border-box;

    position:
        relative;

    overflow:
        hidden;

    isolation:
        isolate;

    border-radius:
        38px;

    border:
        1px solid
        rgba(0, 0, 0, .065);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .96),
            rgba(255, 255, 255, .78)
        );

    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, .07);

    backdrop-filter:
        blur(30px);

    -webkit-backdrop-filter:
        blur(30px);
}


/* große weiche Lichtfläche */

.subpage-body
main > section:first-child::before {
    content: "";

    position:
        absolute;

    z-index:
        -2;

    width:
        620px;

    height:
        620px;

    right:
        -170px;

    top:
        -280px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                var(--page-accent-rgb),
                .20
            ) 0%,
            rgba(
                var(--page-accent-rgb),
                .07
            ) 42%,
            transparent 70%
        );

    filter:
        blur(4px);

    pointer-events:
        none;
}


/* zweiter subtiler Glow */

.subpage-body
main > section:first-child::after {
    content: "";

    position:
        absolute;

    z-index:
        -2;

    width:
        420px;

    height:
        420px;

    left:
        -190px;

    bottom:
        -250px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                var(--page-accent-rgb),
                .10
            ),
            transparent 70%
        );

    pointer-events:
        none;
}


/* Inhalte über den Glows */

.subpage-body
main > section:first-child > * {
    position:
        relative;

    z-index:
        1;
}


/* Eyebrow */

.subpage-body
main > section:first-child
.eyebrow {
    margin-bottom:
        22px;

    font-size:
        .72rem;

    font-weight:
        700;

    letter-spacing:
        .22em;

    color:
        rgba(
            29,
            29,
            31,
            .55
        );
}


/* Überschrift */

.subpage-body
main > section:first-child
h1 {
    max-width:
        900px;

    margin:
        0 0 26px !important;

    font-size:
        clamp(
            3.2rem,
            6vw,
            5.8rem
        ) !important;

    line-height:
        .95 !important;

    letter-spacing:
        -.06em !important;

    color:
        #1d1d1f;
}


/* Beschreibung */

.subpage-body
main > section:first-child
h1 + p,
.subpage-body
main > section:first-child
.services-hero-text {
    max-width:
        700px;

    font-size:
        clamp(
            1.05rem,
            1.6vw,
            1.25rem
        );

    line-height:
        1.6;

    color:
        #6e6e73;
}


/* Buttons etwas hochwertiger */

.subpage-body
main > section:first-child
.button {
    box-shadow:
        0 8px 24px
        rgba(
            0,
            113,
            227,
            .20
        );
}

.subpage-body
main > section:first-child
.button-secondary {
    border:
        1px solid
        rgba(0, 0, 0, .065);

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

    box-shadow:
        0 5px 18px
        rgba(
            0,
            0,
            0,
            .045
        );
}


/* Leistungen hatte vorher eigene Hero-Abstände */

.subpage-body.page-services
.services-hero {
    margin:
        215px auto 100px !important;

    padding:
        clamp(
            48px,
            7vw,
            82px
        ) !important;
}


/* Kontakt darf wegen Formular etwas breiter sein */

.page-contact
main > section:first-child {
    min-height:
        560px;
}


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"]
.subpage-body {
    background:
        #101012;
}

html[data-theme="dark"]
.subpage-body
main > section:first-child {
    border-color:
        rgba(
            255,
            255,
            255,
            .09
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                35,
                35,
                38,
                .96
            ),
            rgba(
                25,
                25,
                28,
                .84
            )
        );

    box-shadow:
        0 30px 90px
        rgba(
            0,
            0,
            0,
            .28
        );
}

html[data-theme="dark"]
.subpage-body
main > section:first-child
h1 {
    color:
        #f5f5f7;
}

html[data-theme="dark"]
.subpage-body
main > section:first-child
.eyebrow {
    color:
        rgba(
            245,
            245,
            247,
            .52
        );
}

html[data-theme="dark"]
.subpage-body
main > section:first-child
h1 + p,
html[data-theme="dark"]
.subpage-body
main > section:first-child
.services-hero-text {
    color:
        #a1a1a6;
}


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

@media (max-width: 900px) {

    .subpage-body
    main > section:first-child {

        width:
            calc(
                100% - 40px
            );

        min-height:
            460px;

        margin:
            155px auto 70px !important;

        padding:
            48px 42px !important;

        border-radius:
            30px;
    }

    .subpage-body.page-services
    .services-hero {
        margin:
            155px auto 70px !important;

        padding:
            48px 42px !important;
    }
}


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

@media (max-width: 600px) {

    .subpage-body
    main > section:first-child {

        width:
            calc(
                100% - 24px
            );

        min-height:
            auto;

        margin:
            115px auto 55px !important;

        padding:
            38px 26px !important;

        border-radius:
            26px;
    }

    .subpage-body.page-services
    .services-hero {
        margin:
            115px auto 55px !important;

        padding:
            38px 26px !important;
    }

    .subpage-body
    main > section:first-child
    h1 {
        font-size:
            clamp(
                2.7rem,
                13vw,
                4rem
            ) !important;
    }
}


/* =========================================================
   SUBPAGE HERO – KOMPAKTER & PRÄSENTER
========================================================= */

.subpage-body
main > section:first-child {
    margin:
        155px auto 72px !important;

    min-height:
        470px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


/* Leistungen ebenfalls korrigieren */

.subpage-body.page-services
.services-hero {
    margin:
        155px auto 72px !important;

    min-height:
        470px;
}


/* Inhalt etwas breiter/präsenter */

.subpage-body
main > section:first-child
h1 {
    max-width:
        940px;
}

.subpage-body
main > section:first-child
h1 + p,
.subpage-body
main > section:first-child
.services-hero-text {
    max-width:
        760px;
}


/* Karte leicht größer wirken lassen */

.subpage-body
main > section:first-child {
    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, .085);
}


/* Glow stärker, aber weiterhin dezent */

.subpage-body
main > section:first-child::before {
    width:
        720px;

    height:
        720px;

    right:
        -190px;

    top:
        -320px;
}


/* Tablet */

@media (max-width: 900px) {

    .subpage-body
    main > section:first-child,
    .subpage-body.page-services
    .services-hero {
        margin:
            130px auto 60px !important;

        min-height:
            430px;
    }
}


/* Handy */

@media (max-width: 600px) {

    .subpage-body
    main > section:first-child,
    .subpage-body.page-services
    .services-hero {
        margin:
            100px auto 48px !important;

        min-height:
            auto;
    }
}


/* =========================================================
   MATERIALIEN – PREMIUM ÜBERARBEITUNG
========================================================= */

.page-materials {
    --materials-max-width: 1080px;
}


/* Infobereich */

.materials-availability-info {
    width:
        min(
            calc(100% - 64px),
            var(--materials-max-width)
        );

    margin:
        0 auto 34px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, .8fr);

    gap:
        50px;

    align-items:
        center;

    padding:
        44px 48px;

    box-sizing:
        border-box;

    border-radius:
        30px;

    border:
        1px solid
        rgba(0, 0, 0, .065);

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

    box-shadow:
        0 18px 60px
        rgba(0, 0, 0, .045);

    backdrop-filter:
        blur(28px);

    -webkit-backdrop-filter:
        blur(28px);
}


.materials-info-copy h2 {
    margin:
        10px 0 14px;

    max-width:
        620px;

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

    line-height:
        1;

    letter-spacing:
        -.045em;
}


.materials-info-copy > p:last-child {
    max-width:
        620px;

    margin:
        0;

    line-height:
        1.6;

    color:
        #6e6e73;
}


/* Status-Legende */

.materials-status-legend {
    display:
        grid;

    gap:
        10px;
}


.materials-status-item {
    display:
        grid;

    grid-template-columns:
        14px 1fr;

    gap:
        13px;

    align-items:
        center;

    padding:
        14px 16px;

    border-radius:
        18px;

    background:
        rgba(0, 0, 0, .025);
}


.materials-status-item > div {
    display:
        grid;

    gap:
        2px;
}


.materials-status-item strong {
    font-size:
        .92rem;
}


.materials-status-item span:not(.materials-status-dot) {
    color:
        #86868b;

    font-size:
        .78rem;
}


.materials-status-dot {
    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    box-shadow:
        0 0 0 4px
        rgba(0, 0, 0, .025);
}


.materials-status-dot.available {
    background:
        #34c759;
}


.materials-status-dot.low {
    background:
        #ff9f0a;
}


.materials-status-dot.unavailable {
    background:
        #ff453a;
}


/* Live-Materialbereich */

#liveMaterials {
    width:
        min(
            calc(100% - 64px),
            var(--materials-max-width)
        );

    margin:
        0 auto 110px;
}


/* vorhandene Materialkarten */

.page-materials .material-card {
    border-radius:
        24px !important;

    border:
        1px solid
        rgba(0, 0, 0, .065) !important;

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

    box-shadow:
        0 14px 45px
        rgba(0, 0, 0, .04);

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


.page-materials .material-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(0, 113, 227, .16) !important;

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


/* Materialgruppen etwas kompakter */

.page-materials .material-grid {
    gap:
        16px !important;
}


/* Dark Mode */

html[data-theme="dark"]
.materials-availability-info {
    border-color:
        rgba(255, 255, 255, .09);

    background:
        rgba(30, 30, 32, .76);

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


html[data-theme="dark"]
.materials-info-copy > p:last-child {
    color:
        #a1a1a6;
}


html[data-theme="dark"]
.materials-status-item {
    background:
        rgba(255, 255, 255, .045);
}


html[data-theme="dark"]
.page-materials
.material-card {
    border-color:
        rgba(255, 255, 255, .09) !important;

    background:
        rgba(30, 30, 32, .75) !important;
}


/* Tablet */

@media (max-width: 850px) {

    .materials-availability-info {
        width:
            calc(100% - 40px);

        grid-template-columns:
            1fr;

        gap:
            30px;

        padding:
            38px;
    }

    #liveMaterials {
        width:
            calc(100% - 40px);
    }
}


/* Handy */

@media (max-width: 600px) {

    .materials-availability-info {
        width:
            calc(100% - 24px);

        margin-bottom:
            22px;

        padding:
            30px 24px;

        border-radius:
            24px;
    }

    #liveMaterials {
        width:
            calc(100% - 24px);

        margin-bottom:
            70px;
    }
}


/* =========================================================
   SUBPAGE HERO – BREITER
========================================================= */

.subpage-body
main > section:first-child {
    width:
        min(
            calc(100% - 48px),
            1180px
        ) !important;
}


/* Materialien ebenfalls breiter */

.page-materials
main > section:first-child {
    width:
        min(
            calc(100% - 48px),
            1180px
        ) !important;
}


/* Leistungen */

.page-services
.services-hero {
    width:
        min(
            calc(100% - 48px),
            1180px
        ) !important;
}


/* Überschrift etwas mehr Platz geben */

.subpage-body
main > section:first-child
h1 {
    max-width:
        1000px !important;
}


/* Tablet */

@media (max-width: 900px) {

    .subpage-body
    main > section:first-child,
    .page-materials
    main > section:first-child,
    .page-services
    .services-hero {
        width:
            calc(100% - 32px) !important;
    }
}


/* Handy */

@media (max-width: 600px) {

    .subpage-body
    main > section:first-child,
    .page-materials
    main > section:first-child,
    .page-services
    .services-hero {
        width:
            calc(100% - 20px) !important;
    }
}


/* =========================================================
   SUBPAGE HERO – OBEREN ABSTAND ENTFERNEN
========================================================= */

.subpage-body
main > section:first-child {
    margin-top:
        95px !important;
}


/* Leistungen */

.subpage-body.page-services
.services-hero {
    margin-top:
        95px !important;
}


/* Tablet */

@media (max-width: 900px) {

    .subpage-body
    main > section:first-child,
    .subpage-body.page-services
    .services-hero {
        margin-top:
            85px !important;
    }
}


/* Handy */

@media (max-width: 600px) {

    .subpage-body
    main > section:first-child,
    .subpage-body.page-services
    .services-hero {
        margin-top:
            75px !important;
    }
}


/* =========================================================
   SUBPAGE HERO – 10 PX UNTER NAVBAR
========================================================= */

.subpage-body
main > section:first-child {
    margin-top:
        10px !important;
}

.subpage-body.page-services
.services-hero {
    margin-top:
        10px !important;
}

@media (max-width: 900px) {

    .subpage-body
    main > section:first-child,
    .subpage-body.page-services
    .services-hero {
        margin-top:
            10px !important;
    }
}

@media (max-width: 600px) {

    .subpage-body
    main > section:first-child,
    .subpage-body.page-services
    .services-hero {
        margin-top:
            10px !important;
    }
}


/* =========================================================
   SUBPAGE HERO – RUNDE ECKEN FIX
========================================================= */

.subpage-body
main > section:first-child,
.subpage-body.page-services
.services-hero {
    border-radius:
        38px !important;

    overflow:
        hidden !important;

    background-clip:
        padding-box !important;

    isolation:
        isolate !important;

    -webkit-mask-image:
        -webkit-radial-gradient(
            white,
            black
        );
}


/* Glows ebenfalls sauber innerhalb der Box halten */

.subpage-body
main > section:first-child::before,
.subpage-body
main > section:first-child::after {
    border-radius:
        50% !important;

    pointer-events:
        none !important;
}


/* Tablet */

@media (max-width: 900px) {

    .subpage-body
    main > section:first-child,
    .subpage-body.page-services
    .services-hero {
        border-radius:
            30px !important;
    }
}


/* Handy */

@media (max-width: 600px) {

    .subpage-body
    main > section:first-child,
    .subpage-body.page-services
    .services-hero {
        border-radius:
            26px !important;
    }
}


/* =========================================================
   SEITENÜBERGÄNGE
========================================================= */

html {
    background: #f5f5f7;
}

body {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity .28s ease,
        transform .28s ease;
}

body.page-enter {
    opacity: 0;
    transform: translateY(8px);
}

body.page-leave {
    opacity: 0;
    transform: translateY(-6px);
}


/* Safari / Nutzer mit reduzierter Bewegung */

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

    body,
    body.page-enter,
    body.page-leave {
        transition: none !important;
        transform: none !important;
    }
}


/* =========================================================
   ALLE UNTERSEITEN – EINHEITLICHER ABSTAND UNTER NAVBAR
========================================================= */

.subpage-body
main > section:first-child,

.subpage-body.page-services
.services-hero,

.subpage-body.page-materials
main > section:first-child,

.subpage-body.page-projects
main > section:first-child,

.subpage-body.page-about
main > section:first-child,

.subpage-body.page-contact
main > section:first-child {
    margin-top:
        10px !important;
}


/* sicherstellen, dass kein zusätzlicher Padding-Abstand davor sitzt */

.subpage-body main {
    padding-top:
        0 !important;
}


/* Tablet */

@media (max-width: 900px) {

    .subpage-body
    main > section:first-child,

    .subpage-body.page-services
    .services-hero,

    .subpage-body.page-materials
    main > section:first-child,

    .subpage-body.page-projects
    main > section:first-child,

    .subpage-body.page-about
    main > section:first-child,

    .subpage-body.page-contact
    main > section:first-child {
        margin-top:
            10px !important;
    }
}


/* Handy */

@media (max-width: 600px) {

    .subpage-body
    main > section:first-child,

    .subpage-body.page-services
    .services-hero,

    .subpage-body.page-materials
    main > section:first-child,

    .subpage-body.page-projects
    main > section:first-child,

    .subpage-body.page-about
    main > section:first-child,

    .subpage-body.page-contact
    main > section:first-child {
        margin-top:
            10px !important;
    }
}


/* =========================================================
   APPLE-ARTIGE SCROLL-ANIMATIONEN
========================================================= */

.reveal-on-scroll {
    opacity: 0;
    transform:
        translateY(34px);

    transition:
        opacity .75s
            cubic-bezier(.22, 1, .36, 1),

        transform .85s
            cubic-bezier(.22, 1, .36, 1);
}


.reveal-on-scroll.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* große Karten etwas subtiler skalieren */

.reveal-card {
    opacity: 0;

    transform:
        translateY(36px)
        scale(.985);

    transition:
        opacity .8s
            cubic-bezier(.22, 1, .36, 1),

        transform .9s
            cubic-bezier(.22, 1, .36, 1);
}


.reveal-card.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* leichte Verzögerung für Gruppen */

.reveal-delay-1 {
    transition-delay:
        .06s;
}

.reveal-delay-2 {
    transition-delay:
        .12s;
}

.reveal-delay-3 {
    transition-delay:
        .18s;
}

.reveal-delay-4 {
    transition-delay:
        .24s;
}


/* Falls der Nutzer Animationen reduziert */

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

    .reveal-on-scroll,
    .reveal-card {
        opacity:
            1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }
}


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

.legal-page {
    padding-bottom: 110px;
}


/* Hero */

.legal-hero {
    width:
        min(
            calc(100% - 48px),
            1180px
        );

    margin:
        10px auto 28px;

    padding:
        64px 68px;

    box-sizing:
        border-box;

    border-radius:
        38px;

    overflow:
        hidden;

    position:
        relative;

    border:
        1px solid
        rgba(0, 0, 0, .065);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .96),
            rgba(255, 255, 255, .80)
        );

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, .065);
}


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

    position: absolute;

    width: 520px;
    height: 520px;

    right: -160px;
    top: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 113, 227, .18),
            transparent 68%
        );

    pointer-events: none;
}


.legal-hero h1 {
    margin:
        10px 0 18px;

    font-size:
        clamp(
            3.3rem,
            6vw,
            5.8rem
        );

    line-height: .96;

    letter-spacing:
        -.06em;
}


.legal-hero > p:last-child {
    max-width: 620px;

    margin: 0;

    color: #6e6e73;

    font-size: 1.15rem;

    line-height: 1.6;
}


/* Inhalt */

.legal-content {
    width:
        min(
            calc(100% - 48px),
            1180px
        );

    margin:
        0 auto;

    display:
        grid;

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

    gap: 16px;
}


.legal-card {
    padding:
        36px 38px;

    box-sizing:
        border-box;

    border-radius:
        28px;

    border:
        1px solid
        rgba(0, 0, 0, .06);

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

    box-shadow:
        0 12px 40px
        rgba(0, 0, 0, .035);
}


.legal-label {
    display: block;

    margin-bottom: 12px;

    color: #86868b;

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .17em;
}


.legal-card h2 {
    margin:
        0 0 18px;

    font-size:
        1.55rem;

    letter-spacing:
        -.025em;
}


.legal-card p,
.legal-card address {
    margin:
        0 0 10px;

    color: #515154;

    font-style: normal;

    line-height: 1.65;
}


.legal-contact-row {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 24px;

    padding:
        16px 0;

    border-top:
        1px solid
        rgba(0, 0, 0, .06);
}


.legal-contact-row span {
    color: #86868b;
}


.legal-contact-row a {
    color: #0071e3;

    text-decoration: none;

    font-weight: 500;
}


.legal-note-card {
    grid-column:
        1 / -1;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 32px;
}


.legal-note-card p {
    max-width: 700px;

    margin: 0;
}


/* Dark Mode */

html[data-theme="dark"]
.legal-hero,
html[data-theme="dark"]
.legal-card {
    border-color:
        rgba(255, 255, 255, .09);

    background:
        rgba(30, 30, 32, .78);
}


html[data-theme="dark"]
.legal-card p,
html[data-theme="dark"]
.legal-card address {
    color: #b5b5ba;
}


html[data-theme="dark"]
.legal-hero > p:last-child {
    color: #a1a1a6;
}


html[data-theme="dark"]
.legal-contact-row {
    border-color:
        rgba(255, 255, 255, .08);
}


/* Mobile */

@media (max-width: 750px) {

    .legal-hero,
    .legal-content {
        width:
            calc(100% - 20px);
    }

    .legal-hero {
        padding:
            44px 30px;

        border-radius:
            28px;
    }

    .legal-content {
        grid-template-columns:
            1fr;
    }

    .legal-note-card {
        grid-column: auto;

        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .legal-contact-row {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 6px;
    }
}


/* =========================================================
   AGB / LANGE RECHTSDOKUMENTE
========================================================= */

.legal-document {
    width:
        min(
            calc(100% - 48px),
            980px
        );

    margin:
        0 auto 120px;
}


.legal-document-card {
    padding:
        54px 58px;

    border-radius:
        32px;

    border:
        1px solid
        rgba(0, 0, 0, .06);

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

    box-shadow:
        0 18px 60px
        rgba(0, 0, 0, .045);
}


.legal-section {
    padding:
        34px 0;

    border-bottom:
        1px solid
        rgba(0, 0, 0, .07);
}


.legal-section:first-child {
    padding-top:
        0;
}


.legal-section:last-child {
    padding-bottom:
        0;

    border-bottom:
        0;
}


.legal-section h2 {
    margin:
        0 0 18px;

    font-size:
        clamp(
            1.45rem,
            2vw,
            1.9rem
        );

    line-height:
        1.2;

    letter-spacing:
        -.025em;
}


.legal-section p {
    max-width:
        820px;

    margin:
        0 0 15px;

    color:
        #515154;

    font-size:
        1rem;

    line-height:
        1.75;
}


.legal-section p:last-child {
    margin-bottom:
        0;
}


.legal-section ul {
    margin:
        16px 0 20px;

    padding-left:
        22px;
}


.legal-section li {
    margin:
        8px 0;

    color:
        #515154;

    line-height:
        1.65;
}


/* Dark Mode */

html[data-theme="dark"]
.legal-document-card {
    border-color:
        rgba(255, 255, 255, .09);

    background:
        rgba(30, 30, 32, .78);
}


html[data-theme="dark"]
.legal-section {
    border-color:
        rgba(255, 255, 255, .08);
}


html[data-theme="dark"]
.legal-section p,
html[data-theme="dark"]
.legal-section li {
    color:
        #b5b5ba;
}


/* Mobile */

@media (max-width: 700px) {

    .legal-document {
        width:
            calc(100% - 20px);
    }

    .legal-document-card {
        padding:
            34px 26px;

        border-radius:
            26px;
    }

    .legal-section {
        padding:
            28px 0;
    }
}


/* =========================================================
   DATENSCHUTZ – 3D-DRUCK / DATEIUPLOADS
========================================================= */

.legal-status {
    display:
        inline-flex;

    margin-top:
        24px;

    padding:
        9px 14px;

    border:
        1px solid
        rgba(0, 113, 227, .12);

    border-radius:
        999px;

    background:
        rgba(0, 113, 227, .07);

    color:
        #0071e3;

    font-size:
        .82rem;

    font-weight:
        600;
}


.legal-section a {
    color:
        #0071e3;

    text-decoration:
        none;
}


.legal-section a:hover {
    text-decoration:
        underline;
}


/* Bereich für 3D-Dateien */

.legal-highlight-section {
    margin:
        18px -24px;

    padding:
        42px 24px;

    border:
        1px solid
        rgba(0, 113, 227, .10);

    border-radius:
        26px;

    background:
        linear-gradient(
            135deg,
            rgba(0, 113, 227, .055),
            rgba(255, 255, 255, .2)
        );
}


.file-type-grid {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin:
        22px 0 24px;
}


.file-type-grid span {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        48px;

    padding:
        9px 13px;

    border-radius:
        10px;

    border:
        1px solid
        rgba(0, 0, 0, .07);

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

    font-size:
        .8rem;

    font-weight:
        700;

    letter-spacing:
        .02em;
}


/* Dark Mode */

html[data-theme="dark"]
.legal-highlight-section {
    border-color:
        rgba(41, 151, 255, .16);

    background:
        linear-gradient(
            135deg,
            rgba(41, 151, 255, .09),
            rgba(30, 30, 32, .15)
        );
}


html[data-theme="dark"]
.file-type-grid span {
    border-color:
        rgba(255, 255, 255, .10);

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


html[data-theme="dark"]
.legal-status {
    color:
        #2997ff;

    border-color:
        rgba(41, 151, 255, .18);

    background:
        rgba(41, 151, 255, .10);
}


/* Mobile */

@media (max-width: 700px) {

    .legal-highlight-section {
        margin:
            14px -12px;

        padding:
            32px 12px;

        border-radius:
            22px;
    }

}


/* =========================================================
   DARK MODE – WHITE FLASH FIX
========================================================= */

html,
body {
    background-color:
        #f5f5f7;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color:
        #000000 !important;
}


/* Auch während Seitenanimation niemals weiß */

html[data-theme="dark"].page-loading,
html[data-theme="dark"].page-loading body,
html[data-theme="dark"] body.page-enter,
html[data-theme="dark"] body.page-leave {
    background-color:
        #000000 !important;
}


/* Browser UI korrekt informieren */

html[data-theme="dark"] {
    color-scheme:
        dark;
}

html[data-theme="light"] {
    color-scheme:
        light;
}


/* =========================================================
   DARK / LIGHT MODE – ANIMIERTER WECHSEL
========================================================= */

/* Während des Wechsels Farben weich überblenden */

html.theme-switching body,
html.theme-switching .navbar,
html.theme-switching .nav-container,
html.theme-switching main,
html.theme-switching section,
html.theme-switching article,
html.theme-switching footer,
html.theme-switching .service-card,
html.theme-switching .material-card,
html.theme-switching .legal-card,
html.theme-switching .legal-document-card {
    transition:
        background-color .55s cubic-bezier(.22, 1, .36, 1),
        background .55s cubic-bezier(.22, 1, .36, 1),
        border-color .55s cubic-bezier(.22, 1, .36, 1),
        box-shadow .55s cubic-bezier(.22, 1, .36, 1),
        color .45s ease !important;
}


/* Licht-/Schattenwelle */

.theme-transition-wave {
    position:
        fixed;

    left:
        var(--theme-x);

    top:
        var(--theme-y);

    width:
        12px;

    height:
        12px;

    border-radius:
        9999px;

    pointer-events:
        none;

    z-index:
        999999;

    transform:
        translate(-50%, -50%)
        scale(0);

    opacity:
        0;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .30) 0%,
            rgba(255, 255, 255, .12) 35%,
            transparent 72%
        );

    box-shadow:
        0 0 90px
        rgba(255, 255, 255, .30);

    animation:
        themeWaveLight
        .75s
        cubic-bezier(.22, 1, .36, 1)
        forwards;
}


/* Beim Wechsel aus Darkmode */

html[data-theme="dark"]
.theme-transition-wave {
    background:
        radial-gradient(
            circle,
            rgba(20, 20, 24, .56) 0%,
            rgba(0, 0, 0, .28) 40%,
            transparent 74%
        );

    box-shadow:
        0 0 100px
        rgba(0, 0, 0, .45);
}


@keyframes themeWaveLight {

    0% {
        transform:
            translate(-50%, -50%)
            scale(0);

        opacity:
            0;
    }

    15% {
        opacity:
            1;
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(38);

        opacity:
            0;
    }
}


/* Theme-Button selbst */

#themeToggle.theme-toggle-animate {
    animation:
        themeToggleSpin
        .65s
        cubic-bezier(.34, 1.56, .64, 1);
}


@keyframes themeToggleSpin {

    0% {
        transform:
            rotate(0deg)
            scale(1);
    }

    35% {
        transform:
            rotate(110deg)
            scale(.78);
    }

    70% {
        transform:
            rotate(210deg)
            scale(1.18);
    }

    100% {
        transform:
            rotate(360deg)
            scale(1);
    }
}


/* Kleiner Glow um den Button */

#themeToggle {
    position:
        relative;

    overflow:
        visible;
}


#themeToggle.theme-toggle-animate {
    box-shadow:
        0 0 0 8px
        rgba(0, 113, 227, .08),

        0 0 34px
        rgba(0, 113, 227, .20);
}


/* Barrierefreiheit */

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

    .theme-transition-wave {
        display:
            none !important;
    }

    #themeToggle.theme-toggle-animate {
        animation:
            none !important;
    }

}

/* =========================================================
   PAGE TRANSITION V2 – APPLE / FLYING TEXT
========================================================= */

html {
    overflow-x: hidden;
}

body {
    transform-origin:
        center top;
}


/* ---------------------------------------------------------
   EINTRITT
--------------------------------------------------------- */

.page-transition-enter {
    opacity:
        0;

    transform:
        translateY(14px)
        scale(.992);

    filter:
        blur(5px);
}


.page-transition-enter-active {
    opacity:
        1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0);

    transition:
        opacity .52s
            cubic-bezier(.22, 1, .36, 1),

        transform .62s
            cubic-bezier(.22, 1, .36, 1),

        filter .55s
            cubic-bezier(.22, 1, .36, 1);
}


/* ---------------------------------------------------------
   AUSGANG
--------------------------------------------------------- */

.page-transition-leave {
    pointer-events:
        none;
}


.page-transition-leave main,
.page-transition-leave footer {
    opacity:
        0;

    transform:
        translateY(-16px)
        scale(.993);

    filter:
        blur(6px);

    transition:
        opacity .32s
            cubic-bezier(.4, 0, 1, 1),

        transform .38s
            cubic-bezier(.4, 0, 1, 1),

        filter .32s
            ease;
}


/* Navbar bleibt fast stehen */

.page-transition-leave .navbar {
    opacity:
        .82;

    transform:
        translateY(-4px);

    transition:
        opacity .28s ease,
        transform .32s ease;
}


/* ---------------------------------------------------------
   TEXT FLIEGT EIN
--------------------------------------------------------- */

.page-fly-text {
    opacity:
        0;

    transform:
        translateY(38px);

    filter:
        blur(4px);

    transition:
        opacity .7s
            cubic-bezier(.22, 1, .36, 1),

        transform .82s
            cubic-bezier(.22, 1, .36, 1),

        filter .72s
            cubic-bezier(.22, 1, .36, 1);
}


.page-fly-text.page-fly-visible {
    opacity:
        1;

    transform:
        translateY(0);

    filter:
        blur(0);
}


/* Unterschiedliche Richtungen */

.page-fly-left {
    transform:
        translateX(-42px)
        translateY(12px);
}


.page-fly-right {
    transform:
        translateX(42px)
        translateY(12px);
}


.page-fly-left.page-fly-visible,
.page-fly-right.page-fly-visible {
    transform:
        translateX(0)
        translateY(0);
}


/* ---------------------------------------------------------
   GROSSE ELEMENTE / KARTEN
--------------------------------------------------------- */

.page-fly-card {
    opacity:
        0;

    transform:
        translateY(28px)
        scale(.975);

    filter:
        blur(3px);

    transition:
        opacity .72s
            cubic-bezier(.22, 1, .36, 1),

        transform .82s
            cubic-bezier(.22, 1, .36, 1),

        filter .7s
            ease;
}


.page-fly-card.page-fly-visible {
    opacity:
        1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0);
}


/* Staffelung */

.page-delay-1 {
    transition-delay:
        .05s;
}

.page-delay-2 {
    transition-delay:
        .11s;
}

.page-delay-3 {
    transition-delay:
        .17s;
}

.page-delay-4 {
    transition-delay:
        .23s;
}

.page-delay-5 {
    transition-delay:
        .29s;
}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

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

    .page-transition-enter,
    .page-transition-enter-active,
    .page-transition-leave main,
    .page-transition-leave footer,
    .page-fly-text,
    .page-fly-card {
        opacity:
            1 !important;

        transform:
            none !important;

        filter:
            none !important;

        transition:
            none !important;
    }

}


/* =========================================================
   FINAL WEBSITE PASS
   Footer · Kontakt · Materialien · Portal · Mobile
========================================================= */


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.premium-footer {
    width:
        min(
            calc(100% - 48px),
            1180px
        );

    margin:
        80px auto 24px;

    padding:
        46px 48px 22px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(0, 0, 0, .065);

    border-radius:
        34px;

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

    -webkit-backdrop-filter:
        blur(28px)
        saturate(160%);

    backdrop-filter:
        blur(28px)
        saturate(160%);

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


.premium-footer-container {
    width:
        100%;

    max-width:
        none;

    margin:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(260px, 1.2fr)
        minmax(420px, 1fr);

    gap:
        70px;
}


.footer-brand-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    color:
        inherit;

    text-decoration:
        none;
}


.footer-brand-icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    border-radius:
        11px;

    background:
        linear-gradient(
            145deg,
            #0a84ff,
            #0068d7
        );

    color:
        white;

    font-size:
        1rem;

    font-weight:
        750;

    box-shadow:
        0 6px 16px
        rgba(0, 113, 227, .24);
}


.footer-brand-link > span:last-child {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.footer-brand-link strong {
    font-size:
        .98rem;

    letter-spacing:
        -.015em;
}


.footer-brand-link small {
    color:
        #86868b;

    font-size:
        .72rem;
}


.footer-brand > p {
    max-width:
        390px;

    margin:
        20px 0 0;

    color:
        #6e6e73;

    font-size:
        .88rem;

    line-height:
        1.6;
}


.footer-navigation {
    display:
        grid;

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

    gap:
        34px;
}


.footer-column {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        11px;
}


.footer-column > strong {
    margin-bottom:
        5px;

    font-size:
        .78rem;
}


.footer-column a {
    color:
        #6e6e73;

    font-size:
        .82rem;

    text-decoration:
        none;

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


.footer-column a:hover {
    color:
        #0071e3;

    transform:
        translateX(2px);
}


.footer-bottom {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        38px;

    padding-top:
        18px;

    border-top:
        1px solid
        rgba(0, 0, 0, .06);

    color:
        #86868b;

    font-size:
        .72rem;
}


/* ---------------------------------------------------------
   KONTAKT – DATENSCHUTZ
--------------------------------------------------------- */

.contact-privacy-note {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    width:
        100%;

    padding:
        15px 17px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(0, 113, 227, .11);

    border-radius:
        15px;

    background:
        rgba(0, 113, 227, .045);
}


.contact-privacy-icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        21px;

    height:
        21px;

    margin-top:
        1px;

    border-radius:
        50%;

    background:
        rgba(0, 113, 227, .12);

    color:
        #0071e3;

    font-size:
        .7rem;

    font-weight:
        800;
}


.contact-privacy-note p {
    margin:
        0;

    color:
        #6e6e73;

    font-size:
        .78rem;

    line-height:
        1.55;
}


.contact-privacy-note a {
    color:
        #0071e3;

    text-decoration:
        none;

    font-weight:
        600;
}


.contact-upload-placeholder {
    position:
        relative;

    overflow:
        hidden;

    border:
        1px dashed
        rgba(0, 113, 227, .24) !important;

    background:
        linear-gradient(
            145deg,
            rgba(0, 113, 227, .045),
            rgba(255, 255, 255, .35)
        ) !important;

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


.contact-upload-placeholder:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(0, 113, 227, .48) !important;

    background:
        rgba(0, 113, 227, .065) !important;
}


/* ---------------------------------------------------------
   MATERIALIEN FINAL
--------------------------------------------------------- */

#liveMaterials {
    position:
        relative;
}


.live-material-loading {
    padding:
        60px 30px;

    border-radius:
        28px;

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

    color:
        #86868b;

    text-align:
        center;
}


.materials-availability-info {
    transition:
        transform .3s
        cubic-bezier(.22, 1, .36, 1),

        box-shadow .3s ease;
}


.materials-availability-info:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 22px 60px
        rgba(0, 0, 0, .055);
}


.materials-status-item {
    transition:
        transform .22s ease;
}


.materials-status-item:hover {
    transform:
        translateY(-2px);
}


/* ---------------------------------------------------------
   KUNDENPORTAL FINAL
--------------------------------------------------------- */

.portal-main {
    width:
        min(
            calc(100% - 48px),
            1180px
        );

    margin:
        10px auto 80px;
}


.portal-header {
    width:
        100%;

    box-sizing:
        border-box;

    margin:
        0 0 22px;

    padding:
        48px 52px;

    border:
        1px solid
        rgba(0, 0, 0, .06);

    border-radius:
        34px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .92),
            rgba(245, 250, 255, .76)
        );

    box-shadow:
        0 18px 55px
        rgba(0, 0, 0, .045);
}


.portal-header h1 {
    margin:
        8px 0 12px;

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

    line-height:
        .96;

    letter-spacing:
        -.055em;
}


.portal-header > p:last-child {
    max-width:
        620px;

    color:
        #6e6e73;

    line-height:
        1.55;
}


.portal-window {
    overflow:
        hidden;

    border:
        1px solid
        rgba(0, 0, 0, .065);

    border-radius:
        32px;

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

    box-shadow:
        0 22px 70px
        rgba(0, 0, 0, .055);

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

    backdrop-filter:
        blur(24px);
}


.portal-sidebar {
    border-right:
        1px solid
        rgba(0, 0, 0, .06);
}


.portal-menu-item {
    border-radius:
        11px;

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


.portal-menu-item:hover {
    transform:
        translateX(2px);
}


.portal-menu-item.active {
    background:
        rgba(0, 113, 227, .10);

    color:
        #0071e3;
}


.portal-avatar {
    box-shadow:
        0 8px 20px
        rgba(0, 113, 227, .18);
}


.portal-form input,
.portal-form select,
.portal-form textarea {
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.portal-form input:focus,
.portal-form select:focus,
.portal-form textarea:focus {
    outline:
        none;

    border-color:
        rgba(0, 113, 227, .55);

    box-shadow:
        0 0 0 4px
        rgba(0, 113, 227, .09);
}


/* ---------------------------------------------------------
   DARK MODE FINAL
--------------------------------------------------------- */

html[data-theme="dark"]
.premium-footer {
    border-color:
        rgba(255, 255, 255, .08);

    background:
        rgba(28, 28, 30, .72);

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


html[data-theme="dark"]
.footer-brand > p,
html[data-theme="dark"]
.footer-column a,
html[data-theme="dark"]
.footer-brand-link small,
html[data-theme="dark"]
.footer-bottom {
    color:
        #98989d;
}


html[data-theme="dark"]
.footer-bottom {
    border-color:
        rgba(255, 255, 255, .08);
}


html[data-theme="dark"]
.footer-column a:hover {
    color:
        #2997ff;
}


html[data-theme="dark"]
.contact-privacy-note {
    border-color:
        rgba(41, 151, 255, .15);

    background:
        rgba(41, 151, 255, .07);
}


html[data-theme="dark"]
.contact-privacy-note p {
    color:
        #a1a1a6;
}


html[data-theme="dark"]
.contact-upload-placeholder {
    background:
        linear-gradient(
            145deg,
            rgba(41, 151, 255, .07),
            rgba(255, 255, 255, .025)
        ) !important;
}


html[data-theme="dark"]
.live-material-loading {
    background:
        rgba(28, 28, 30, .70);
}


html[data-theme="dark"]
.portal-header {
    border-color:
        rgba(255, 255, 255, .08);

    background:
        linear-gradient(
            135deg,
            rgba(28, 28, 30, .94),
            rgba(20, 28, 38, .84)
        );
}


html[data-theme="dark"]
.portal-window {
    border-color:
        rgba(255, 255, 255, .08);

    background:
        rgba(28, 28, 30, .76);

    box-shadow:
        0 22px 70px
        rgba(0, 0, 0, .26);
}


html[data-theme="dark"]
.portal-sidebar {
    border-color:
        rgba(255, 255, 255, .08);
}


html[data-theme="dark"]
.portal-menu-item.active {
    background:
        rgba(41, 151, 255, .13);

    color:
        #2997ff;
}


/* ---------------------------------------------------------
   GENERELLE PREMIUM-HOVER-EFFEKTE
--------------------------------------------------------- */

.service-card,
.material-card,
.project-card,
.legal-card {
    transition:
        transform .3s
        cubic-bezier(.22, 1, .36, 1),

        box-shadow .3s ease,

        border-color .3s ease;
}


.service-card:hover,
.material-card:hover,
.project-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 22px 55px
        rgba(0, 0, 0, .065);
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 900px) {

    .premium-footer-container {
        grid-template-columns:
            1fr;

        gap:
            40px;
    }


    .portal-main {
        width:
            calc(100% - 28px);
    }


    .portal-window {
        border-radius:
            26px;
    }

}


@media (max-width: 700px) {

    .premium-footer {
        width:
            calc(100% - 20px);

        margin-top:
            55px;

        padding:
            34px 26px 20px;

        border-radius:
            28px;
    }


    .footer-navigation {
        grid-template-columns:
            1fr 1fr;

        gap:
            30px 20px;
    }


    .footer-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            6px;
    }


    .portal-main {
        width:
            calc(100% - 20px);

        margin-top:
            10px;
    }


    .portal-header {
        padding:
            38px 28px;

        border-radius:
            27px;
    }


    .portal-window {
        border-radius:
            24px;
    }


    .contact-privacy-note {
        padding:
            14px;
    }

}


@media (max-width: 520px) {

    .footer-navigation {
        grid-template-columns:
            1fr;
    }


    .premium-footer {
        padding:
            30px 22px 20px;
    }

}


/* Animationen auf Touch-Geräten etwas ruhiger */

@media (
    max-width: 700px
) {

    .page-fly-left,
    .page-fly-right {
        transform:
            translateY(24px);
    }


    .page-fly-card {
        transform:
            translateY(22px)
            scale(.985);
    }

}


/* =========================================================
   LIVE MATERIALIEN – GRUPPIERTE KATEGORIEN
========================================================= */

#liveMaterials.live-material-grid {
    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

    width:
        min(
            calc(100% - 48px),
            1180px
        );

    margin:
        0 auto 70px;
}


/* Hauptgruppe */

.material-group {
    overflow:
        hidden;

    border:
        1px solid
        rgba(0, 0, 0, .065);

    border-radius:
        28px;

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

    box-shadow:
        0 12px 38px
        rgba(0, 0, 0, .035);

    transition:
        transform .3s
        cubic-bezier(.22, 1, .36, 1),

        box-shadow .3s ease,

        border-color .3s ease;
}


.material-group:hover {
    transform:
        translateY(-2px);

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


/* Header */

.material-group-header {
    width:
        100%;

    padding:
        27px 30px;

    box-sizing:
        border-box;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    border:
        0;

    background:
        transparent;

    color:
        inherit;

    font:
        inherit;

    text-align:
        left;

    cursor:
        pointer;
}


.material-group-main {
    width:
        100%;
}


.material-group-topline {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        10px;
}


.material-group-type {
    color:
        #0071e3;

    font-size:
        .68rem;

    font-weight:
        750;

    letter-spacing:
        .14em;
}


.material-group-header h3 {
    margin:
        0 0 8px;

    font-size:
        clamp(
            1.55rem,
            2.5vw,
            2rem
        );

    letter-spacing:
        -.035em;
}


.material-group-header p {
    max-width:
        720px;

    margin:
        0;

    color:
        #6e6e73;

    font-size:
        .92rem;

    line-height:
        1.55;
}


.material-group-meta {
    display:
        flex;

    gap:
        16px;

    margin-top:
        15px;

    color:
        #86868b;

    font-size:
        .76rem;
}


/* Chevron */

.material-group-chevron {
    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    border-radius:
        50%;

    background:
        rgba(0, 0, 0, .04);

    transition:
        transform .35s
        cubic-bezier(.22, 1, .36, 1),

        background .2s ease;
}


.material-group-chevron svg {
    width:
        17px;

    height:
        17px;
}


.material-group.is-open
.material-group-chevron {
    transform:
        rotate(180deg);
}


/* Status */

.material-group-status,
.material-variant-status {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    flex:
        0 0 auto;

    padding:
        7px 10px;

    border-radius:
        999px;

    font-size:
        .72rem;

    white-space:
        nowrap;
}


.material-status-dot {
    display:
        inline-block;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;
}


.status-available {
    color:
        #248a3d;

    background:
        rgba(48, 209, 88, .09);
}


.status-available
.material-status-dot {
    background:
        #30d158;
}


.status-low {
    color:
        #a35d00;

    background:
        rgba(255, 159, 10, .11);
}


.status-low
.material-status-dot {
    background:
        #ff9f0a;
}


.status-unavailable {
    color:
        #c9342c;

    background:
        rgba(255, 69, 58, .10);
}


.status-unavailable
.material-status-dot {
    background:
        #ff453a;
}


.status-request {
    color:
        #646468;

    background:
        rgba(142, 142, 147, .11);
}


.status-request
.material-status-dot {
    background:
        #8e8e93;
}


/* Aufklappbarer Inhalt */

.material-group-content {
    display:
        grid;

    grid-template-rows:
        0fr;

    opacity:
        0;

    border-top:
        1px solid
        transparent;

    transition:
        grid-template-rows .45s
        cubic-bezier(.22, 1, .36, 1),

        opacity .28s ease,

        border-color .28s ease;
}


.material-group.is-open
.material-group-content {
    grid-template-rows:
        1fr;

    opacity:
        1;

    border-color:
        rgba(0, 0, 0, .06);
}


.material-variant-list {
    min-height:
        0;

    overflow:
        hidden;

    padding:
        0 30px;
}


.material-group.is-open
.material-variant-list {
    padding-top:
        10px;

    padding-bottom:
        16px;
}


/* Einzelne Farbe */

.material-variant {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    min-height:
        72px;

    padding:
        13px 0;

    border-bottom:
        1px solid
        rgba(0, 0, 0, .055);
}


.material-variant:last-child {
    border-bottom:
        0;
}


.material-variant-name {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}


.material-variant-color {
    flex:
        0 0 auto;

    width:
        28px;

    height:
        28px;

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

    border-radius:
        9px;

    background:
        var(
            --material-color,
            linear-gradient(
                135deg,
                #d8d8dc,
                #a9a9ae
            )
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, .08);
}


.material-variant-name > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.material-variant-name strong {
    font-size:
        .92rem;
}


.material-variant-name span {
    color:
        #86868b;

    font-size:
        .76rem;
}


.material-variant-stock {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.material-stock-amount {
    min-width:
        76px;

    color:
        #86868b;

    font-size:
        .76rem;

    text-align:
        right;

    font-variant-numeric:
        tabular-nums;
}


/* Fehlermeldung */

.live-material-error,
.live-material-empty {
    padding:
        42px 28px;

    border:
        1px solid
        rgba(0, 0, 0, .06);

    border-radius:
        26px;

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

    color:
        #86868b;

    text-align:
        center;
}


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"]
.material-group {
    border-color:
        rgba(255, 255, 255, .075);

    background:
        rgba(28, 28, 30, .78);

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


html[data-theme="dark"]
.material-group-header p,
html[data-theme="dark"]
.material-group-meta,
html[data-theme="dark"]
.material-variant-name span,
html[data-theme="dark"]
.material-stock-amount {
    color:
        #98989d;
}


html[data-theme="dark"]
.material-group-type {
    color:
        #2997ff;
}


html[data-theme="dark"]
.material-group-chevron {
    background:
        rgba(255, 255, 255, .07);
}


html[data-theme="dark"]
.material-group.is-open
.material-group-content {
    border-color:
        rgba(255, 255, 255, .07);
}


html[data-theme="dark"]
.material-variant {
    border-color:
        rgba(255, 255, 255, .065);
}


html[data-theme="dark"]
.material-variant-color {
    border-color:
        rgba(255, 255, 255, .13);
}


html[data-theme="dark"]
.live-material-error,
html[data-theme="dark"]
.live-material-empty {
    border-color:
        rgba(255, 255, 255, .08);

    background:
        rgba(28, 28, 30, .72);
}


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

@media (max-width: 700px) {

    #liveMaterials.live-material-grid {
        width:
            calc(100% - 20px);
    }


    .material-group {
        border-radius:
            23px;
    }


    .material-group-header {
        align-items:
            flex-start;

        padding:
            23px 20px;

        gap:
            14px;
    }


    .material-group-topline {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            8px;
    }


    .material-group-meta {
        flex-wrap:
            wrap;
    }


    .material-group-chevron {
        width:
            34px;

        height:
            34px;
    }


    .material-variant-list {
        padding-left:
            20px;

        padding-right:
            20px;
    }


    .material-variant {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            11px;

        padding:
            16px 0;
    }


    .material-variant-stock {
        width:
            100%;

        justify-content:
            space-between;
    }

}


/* =========================================================
   STARTSEITE – HERO TECH VISUAL
========================================================= */

.hero-tech-card {
    width:
        min(100%, 430px);

    padding:
        24px;

    box-sizing:
        border-box;

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

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            rgba(35,35,39,.96),
            rgba(19,20,24,.94)
        );

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

    color:
        white;

    overflow:
        hidden;

    position:
        relative;
}


.hero-tech-card::before {
    content: "";

    position:
        absolute;

    width:
        320px;

    height:
        320px;

    top:
        -180px;

    right:
        -130px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0,113,227,.35),
            transparent 68%
        );

    pointer-events:
        none;
}


.hero-tech-top {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    position:
        relative;

    z-index:
        2;
}


.hero-tech-top > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}


.hero-tech-label {
    color:
        #2997ff;

    font-size:
        .65rem;

    font-weight:
        750;

    letter-spacing:
        .16em;
}


.hero-tech-top strong {
    font-size:
        1.05rem;

    letter-spacing:
        -.02em;
}


.hero-tech-live {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        7px 10px;

    border-radius:
        999px;

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

    color:
        #b7b7bd;

    font-size:
        .68rem;
}


.hero-tech-live span {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #30d158;

    box-shadow:
        0 0 12px
        rgba(48,209,88,.7);
}


/* 3D Bühne */

.hero-tech-stage {
    height:
        275px;

    margin:
        22px 0;

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

    border-radius:
        24px;

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(0,113,227,.16),
            rgba(255,255,255,.025) 48%,
            rgba(0,0,0,.12)
        );

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;
}


.hero-tech-stage::after {
    content: "";

    position:
        absolute;

    width:
        250px;

    height:
        70px;

    bottom:
        38px;

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0,113,227,.22),
            transparent 70%
        );

    filter:
        blur(8px);
}


/* CSS Würfel */

.hero-cube {
    width:
        112px;

    height:
        112px;

    position:
        relative;

    transform:
        rotateX(-18deg)
        rotateY(32deg)
        rotateZ(2deg);

    transform-style:
        preserve-3d;

    animation:
        heroCubeFloat
        5s
        ease-in-out
        infinite;

    z-index:
        2;
}


.cube-face {
    position:
        absolute;

    width:
        112px;

    height:
        112px;

    border:
        2px solid
        rgba(155,190,255,.6);

    background:
        linear-gradient(
            145deg,
            rgba(112,153,255,.38),
            rgba(112,80,220,.18)
        );

    box-shadow:
        inset 0 0 40px
        rgba(255,255,255,.08);
}


.cube-front {
    transform:
        translateZ(56px);
}


.cube-right {
    transform:
        rotateY(90deg)
        translateZ(56px);
}


.cube-top {
    transform:
        rotateX(90deg)
        translateZ(56px);
}


@keyframes heroCubeFloat {

    0%,
    100% {
        transform:
            translateY(4px)
            rotateX(-18deg)
            rotateY(32deg)
            rotateZ(2deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotateX(-15deg)
            rotateY(42deg)
            rotateZ(-2deg);
    }

}


/* Maße */

.hero-build-volume {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;
}


.hero-build-volume span {
    position:
        absolute;

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

    font-size:
        .63rem;

    font-weight:
        600;

    letter-spacing:
        .04em;
}


.hero-build-volume span:nth-child(1) {
    top:
        23px;

    left:
        24px;
}


.hero-build-volume span:nth-child(2) {
    top:
        23px;

    right:
        24px;
}


.hero-build-volume span:nth-child(3) {
    bottom:
        24px;

    left:
        50%;

    transform:
        translateX(-50%);
}


/* Stats */

.hero-tech-stats {
    display:
        grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap:
        10px;
}


.hero-tech-stats > div {
    padding:
        14px;

    border-radius:
        16px;

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

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}


.hero-tech-stats span {
    color:
        #77777e;

    font-size:
        .58rem;

    font-weight:
        700;

    letter-spacing:
        .12em;
}


.hero-tech-stats strong {
    font-size:
        .78rem;
}


/* Footer */

.hero-tech-footer {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px 16px;

    margin-top:
        17px;

    color:
        #8e8e93;

    font-size:
        .67rem;
}


.hero-tech-footer div {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


.hero-tech-dot {
    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #0a84ff;
}


/* Light Mode */

html[data-theme="light"]
.hero-tech-card {
    border-color:
        rgba(0,0,0,.07);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f7fa
        );

    color:
        #1d1d1f;

    box-shadow:
        0 28px 70px
        rgba(0,0,0,.08);
}


html[data-theme="light"]
.hero-tech-stage {
    border-color:
        rgba(0,0,0,.055);

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(0,113,227,.11),
            rgba(255,255,255,.75) 55%,
            #f4f4f6
        );
}


html[data-theme="light"]
.hero-tech-stats > div,
html[data-theme="light"]
.hero-tech-live {
    background:
        rgba(0,0,0,.04);
}


html[data-theme="light"]
.hero-tech-live,
html[data-theme="light"]
.hero-tech-footer {
    color:
        #6e6e73;
}


@media (max-width: 700px) {

    .hero-tech-card {
        width:
            100%;
    }


    .hero-tech-stage {
        height:
            235px;
    }


    .hero-tech-stats {
        grid-template-columns:
            1fr;
    }

}


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

    .hero-cube {
        animation:
            none !important;
    }

}


/* =========================================================
   STARTSEITE – MATERIALIEN PREMIUM
========================================================= */

.home-materials {
    padding-top:
        100px;

    padding-bottom:
        110px;
}


.home-materials-heading {
    margin-bottom:
        38px;
}


.home-materials-heading-row {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;
}


.home-materials-heading-row > div {
    max-width:
        700px;
}


.home-materials-heading h2 {
    margin-bottom:
        16px;

    font-size:
        clamp(
            3rem,
            5vw,
            5.2rem
        );

    line-height:
        .98;

    letter-spacing:
        -.055em;
}


.home-materials-heading p {
    max-width:
        610px;

    color:
        #6e6e73;

    font-size:
        1.05rem;

    line-height:
        1.55;
}


.home-materials-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    flex:
        0 0 auto;

    padding:
        12px 18px;

    border:
        1px solid
        rgba(0, 0, 0, .07);

    border-radius:
        999px;

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

    color:
        #1d1d1f;

    text-decoration:
        none;

    font-size:
        .82rem;

    font-weight:
        600;

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


.home-materials-link:hover {
    transform:
        translateY(-2px);

    background:
        white;
}


.home-material-grid {
    display:
        grid;

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

    gap:
        16px;
}


.home-material-card {
    min-height:
        390px;

    padding:
        22px;

    box-sizing:
        border-box;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(0, 0, 0, .06);

    border-radius:
        30px;

    background:
        #f1f1f3;

    color:
        #1d1d1f;

    text-decoration:
        none;

    transition:
        transform .38s
        cubic-bezier(.22, 1, .36, 1),

        box-shadow .38s ease,

        border-color .3s ease;
}


.home-material-card::before {
    content: "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    right:
        -120px;

    top:
        -130px;

    border-radius:
        50%;

    background:
        var(
            --material-glow,
            rgba(0, 113, 227, .14)
        );

    filter:
        blur(12px);

    pointer-events:
        none;
}


.home-material-card:hover {
    transform:
        translateY(-7px);

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


.home-material-card-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    position:
        relative;

    z-index:
        2;
}


.material-number {
    color:
        #86868b;

    font-size:
        .68rem;

    font-weight:
        700;

    letter-spacing:
        .08em;
}


.material-arrow {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        35px;

    height:
        35px;

    border-radius:
        50%;

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

    font-size:
        .9rem;

    transition:
        transform .3s
        cubic-bezier(.22, 1, .36, 1);
}


.home-material-card:hover
.material-arrow {
    transform:
        translate(
            3px,
            -3px
        );
}


.home-material-symbol {
    margin:
        auto 0;

    position:
        relative;

    z-index:
        1;

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

    font-weight:
        750;

    letter-spacing:
        -.075em;

    color:
        rgba(29, 29, 31, .88);
}


.home-material-content {
    position:
        relative;

    z-index:
        2;
}


.home-material-tag {
    display:
        inline-block;

    margin-bottom:
        8px;

    color:
        #0071e3;

    font-size:
        .6rem;

    font-weight:
        750;

    letter-spacing:
        .13em;
}


.home-material-content h3 {
    margin:
        0 0 8px;

    font-size:
        1.35rem;

    letter-spacing:
        -.03em;
}


.home-material-content p {
    max-width:
        300px;

    margin:
        0;

    color:
        #6e6e73;

    font-size:
        .84rem;

    line-height:
        1.5;
}


.home-material-properties {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        15px;
}


.home-material-properties span {
    padding:
        6px 9px;

    border-radius:
        999px;

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

    color:
        #6e6e73;

    font-size:
        .65rem;

    font-weight:
        600;
}


/* individuelle Akzente */

.material-pla {
    --material-glow:
        rgba(180, 180, 190, .24);
}


.material-petg {
    --material-glow:
        rgba(60, 150, 255, .21);
}


.material-asa {
    --material-glow:
        rgba(85, 180, 130, .20);
}


.material-tpu {
    --material-glow:
        rgba(165, 100, 225, .20);
}


.material-abs {
    --material-glow:
        rgba(235, 130, 70, .19);
}


.material-pc {
    --material-glow:
        rgba(100, 125, 245, .20);
}


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"]
.home-material-card {
    border-color:
        rgba(255, 255, 255, .07);

    background:
        linear-gradient(
            145deg,
            #1c1c1e,
            #161618
        );

    color:
        #f5f5f7;
}


html[data-theme="dark"]
.home-material-symbol {
    color:
        rgba(245, 245, 247, .92);
}


html[data-theme="dark"]
.home-material-content p {
    color:
        #98989d;
}


html[data-theme="dark"]
.home-material-properties span,
html[data-theme="dark"]
.material-arrow {
    background:
        rgba(255, 255, 255, .075);

    color:
        #b5b5ba;
}


html[data-theme="dark"]
.home-materials-link {
    border-color:
        rgba(255, 255, 255, .08);

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

    color:
        #f5f5f7;
}


html[data-theme="dark"]
.home-materials-link:hover {
    background:
        rgba(255, 255, 255, .10);
}


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

@media (max-width: 1000px) {

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

}


@media (max-width: 700px) {

    .home-materials {
        padding-top:
            70px;

        padding-bottom:
            80px;
    }


    .home-materials-heading-row {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .home-material-grid {
        grid-template-columns:
            1fr;
    }


    .home-material-card {
        min-height:
            330px;

        border-radius:
            25px;
    }


    .home-material-symbol {
        font-size:
            4.5rem;
    }

}


/* =========================================================
   LEISTUNGEN – PREMIUM BENTO GRID
========================================================= */

.page-services .services-grid,
.page-services .service-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            12,
            minmax(0, 1fr)
        ) !important;

    gap:
        16px !important;
}


/* Karten allgemein */

.page-services .service-card {
    min-height:
        300px !important;

    padding:
        30px 30px 28px !important;

    box-sizing:
        border-box;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .07) !important;

    border-radius:
        30px !important;

    background:
        linear-gradient(
            145deg,
            rgba(27, 27, 30, .96),
            rgba(20, 20, 22, .96)
        ) !important;

    box-shadow:
        0 18px 55px
        rgba(0, 0, 0, .16);

    transition:
        transform .35s
        cubic-bezier(.22, 1, .36, 1),

        box-shadow .35s ease,

        border-color .35s ease !important;
}


/* unterschiedliche Größen */

.page-services .service-card:nth-child(1),
.page-services .service-card:nth-child(4) {
    grid-column:
        span 7;
}


.page-services .service-card:nth-child(2),
.page-services .service-card:nth-child(3),
.page-services .service-card:nth-child(5),
.page-services .service-card:nth-child(6) {
    grid-column:
        span 5;
}


/* unterschiedliche Glows */

.page-services .service-card::before {
    content: "";

    position:
        absolute;

    width:
        330px;

    height:
        330px;

    top:
        -170px;

    right:
        -150px;

    border-radius:
        50%;

    background:
        var(
            --service-glow,
            rgba(0, 113, 227, .16)
        );

    filter:
        blur(18px);

    pointer-events:
        none;
}


.page-services .service-card:nth-child(1) {
    --service-glow:
        rgba(0, 113, 227, .28);
}


.page-services .service-card:nth-child(2) {
    --service-glow:
        rgba(102, 126, 234, .24);
}


.page-services .service-card:nth-child(3) {
    --service-glow:
        rgba(48, 209, 88, .18);
}


.page-services .service-card:nth-child(4) {
    --service-glow:
        rgba(255, 159, 10, .20);
}


.page-services .service-card:nth-child(5) {
    --service-glow:
        rgba(175, 82, 222, .20);
}


.page-services .service-card:nth-child(6) {
    --service-glow:
        rgba(90, 200, 250, .20);
}


/* Hover */

.page-services .service-card:hover {
    transform:
        translateY(-6px)
        scale(1.01) !important;

    border-color:
        rgba(255, 255, 255, .12) !important;

    box-shadow:
        0 28px 75px
        rgba(0, 0, 0, .24) !important;
}


/* Nummern */

.page-services .service-card
.card-icon {
    width:
        auto !important;

    height:
        auto !important;

    padding:
        7px 11px !important;

    align-self:
        flex-start;

    border-radius:
        999px !important;

    background:
        rgba(0, 113, 227, .11) !important;

    color:
        #2997ff !important;

    font-size:
        .68rem !important;

    font-weight:
        750 !important;

    letter-spacing:
        .08em;

    box-shadow:
        none !important;
}


/* Falls die Nummern direkt als Text 01-06 drin stehen */

.page-services .service-card
> div:first-child {
    position:
        relative;

    z-index:
        2;
}


/* Überschrift */

.page-services .service-card h3 {
    position:
        relative;

    z-index:
        2;

    margin:
        auto 0 10px !important;

    font-size:
        clamp(
            1.55rem,
            2.6vw,
            2.3rem
        ) !important;

    line-height:
        1.05 !important;

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


/* Beschreibung */

.page-services .service-card p {
    position:
        relative;

    z-index:
        2;

    max-width:
        520px;

    margin:
        0 !important;

    color:
        #9a9aa0 !important;

    font-size:
        .92rem !important;

    line-height:
        1.6 !important;
}


/* zusätzliche visuelle Linie */

.page-services .service-card::after {
    content: "";

    position:
        absolute;

    left:
        30px;

    right:
        30px;

    bottom:
        0;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            rgba(41, 151, 255, .55),
            transparent 65%
        );

    opacity:
        .7;
}


/* große Karten stärker hervorheben */

.page-services .service-card:nth-child(1),
.page-services .service-card:nth-child(4) {
    min-height:
        340px !important;
}


.page-services .service-card:nth-child(1) h3,
.page-services .service-card:nth-child(4) h3 {
    font-size:
        clamp(
            2rem,
            3vw,
            3rem
        ) !important;
}


/* Light Mode */

html[data-theme="light"]
.page-services .service-card {
    border-color:
        rgba(0, 0, 0, .06) !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f5f7
        ) !important;

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


html[data-theme="light"]
.page-services .service-card p {
    color:
        #6e6e73 !important;
}


html[data-theme="light"]
.page-services .service-card:hover {
    border-color:
        rgba(0, 113, 227, .10) !important;

    box-shadow:
        0 28px 70px
        rgba(0, 0, 0, .09) !important;
}


/* Tablet */

@media (max-width: 950px) {

    .page-services .service-card {
        grid-column:
            span 6 !important;
    }

}


/* Handy */

@media (max-width: 650px) {

    .page-services .services-grid,
    .page-services .service-grid {
        grid-template-columns:
            1fr !important;
    }


    .page-services .service-card {
        grid-column:
            auto !important;

        min-height:
            260px !important;

        padding:
            26px 24px !important;

        border-radius:
            25px !important;
    }


    .page-services .service-card:nth-child(1),
    .page-services .service-card:nth-child(4) {
        min-height:
            290px !important;
    }

}


/* =========================================================
   PROJEKTE – PREMIUM
========================================================= */

.projects-premium-hero,
.about-premium-hero {
    width:
        min(
            calc(100% - 48px),
            1180px
        );

    margin:
        10px auto 80px;

    padding:
        64px;

    box-sizing:
        border-box;

    display:
        grid;

    grid-template-columns:
        1.25fr .75fr;

    align-items:
        center;

    gap:
        70px;

    border:
        1px solid
        rgba(0,0,0,.06);

    border-radius:
        38px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.94),
            rgba(244,248,255,.78)
        );

    box-shadow:
        0 25px 75px
        rgba(0,0,0,.06);

    overflow:
        hidden;
}


.projects-hero-copy h1,
.about-hero-copy h1 {
    margin:
        12px 0 22px;

    max-width:
        760px;

    font-size:
        clamp(
            3.7rem,
            6.5vw,
            6.5rem
        );

    line-height:
        .94;

    letter-spacing:
        -.065em;
}


.projects-hero-copy > p:last-of-type,
.about-hero-copy > p {
    max-width:
        650px;

    color:
        #6e6e73;

    font-size:
        1.05rem;

    line-height:
        1.65;
}


.projects-hero-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        30px;
}


/* Orbit */

.project-orbit {
    width:
        300px;

    height:
        300px;

    margin:
        auto;

    position:
        relative;

    border:
        1px solid
        rgba(0,113,227,.15);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0,113,227,.13),
            transparent 63%
        );

    animation:
        orbitFloat
        6s
        ease-in-out
        infinite;
}


.project-orbit::before {
    content: "";

    position:
        absolute;

    inset:
        35px;

    border:
        1px dashed
        rgba(0,113,227,.18);

    border-radius:
        50%;
}


.project-orbit-center {
    position:
        absolute;

    inset:
        50% auto auto 50%;

    transform:
        translate(-50%, -50%);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        105px;

    height:
        105px;

    border-radius:
        26px;

    background:
        #0071e3;

    color:
        white;

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


.project-orbit-center span {
    font-size:
        2rem;

    font-weight:
        750;
}


.project-orbit-center strong {
    font-size:
        .62rem;

    letter-spacing:
        .15em;
}


.orbit-item {
    position:
        absolute;

    padding:
        8px 11px;

    border:
        1px solid
        rgba(0,0,0,.06);

    border-radius:
        999px;

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

    color:
        #6e6e73;

    font-size:
        .68rem;

    font-weight:
        700;

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.07);
}


.orbit-a {
    top: 25px;
    left: 58px;
}

.orbit-b {
    right: 12px;
    top: 110px;
}

.orbit-c {
    bottom: 25px;
    left: 80px;
}

.orbit-d {
    left: -8px;
    top: 145px;
}


@keyframes orbitFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-8px)
            rotate(2deg);
    }

}


/* Projektbereich */

.projects-showcase,
.project-process-section,
.about-values-section,
.about-principles {
    width:
        min(
            calc(100% - 48px),
            1180px
        );

    margin:
        0 auto 100px;
}


.projects-section-heading,
.about-section-heading {
    max-width:
        780px;

    margin-bottom:
        38px;
}


.projects-section-heading h2,
.about-section-heading h2 {
    margin:
        9px 0 14px;

    font-size:
        clamp(
            2.8rem,
            5vw,
            5rem
        );

    line-height:
        .98;

    letter-spacing:
        -.055em;
}


.projects-section-heading > p:last-child {
    max-width:
        650px;

    color:
        #6e6e73;

    line-height:
        1.6;
}


/* Bento */

.projects-bento {
    display:
        grid;

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

    gap:
        16px;
}


.project-bento-card {
    min-height:
        320px;

    padding:
        30px;

    box-sizing:
        border-box;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(0,0,0,.06);

    border-radius:
        30px;

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

    box-shadow:
        0 15px 50px
        rgba(0,0,0,.04);

    transition:
        transform .35s
        cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease;
}


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

    box-shadow:
        0 28px 75px
        rgba(0,0,0,.085);
}


.project-bento-large {
    grid-row:
        span 2;

    min-height:
        656px;
}


.project-bento-wide {
    grid-column:
        1 / -1;

    min-height:
        310px;
}


.project-card-top {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;
}


.project-index {
    color:
        #86868b;

    font-size:
        .68rem;

    font-weight:
        700;
}


.project-category {
    color:
        #0071e3;

    font-size:
        .62rem;

    font-weight:
        750;

    letter-spacing:
        .13em;
}


.project-card-content h3,
.project-series-content h3 {
    max-width:
        600px;

    margin:
        0 0 14px;

    font-size:
        clamp(
            1.6rem,
            3vw,
            2.8rem
        );

    line-height:
        1.04;

    letter-spacing:
        -.045em;
}


.project-card-content p,
.project-series-content p {
    max-width:
        570px;

    color:
        #6e6e73;

    line-height:
        1.58;
}


.project-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        18px;
}


.project-tags span {
    padding:
        7px 10px;

    border-radius:
        999px;

    background:
        rgba(0,113,227,.065);

    color:
        #0071e3;

    font-size:
        .68rem;

    font-weight:
        600;
}


/* Ersatzteil Grafik */

.project-graphic {
    flex:
        1;

    min-height:
        240px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;
}


.replacement-graphic span {
    position:
        absolute;

    width:
        110px;

    height:
        110px;

    border:
        2px solid
        rgba(0,113,227,.26);

    border-radius:
        25px;

    background:
        rgba(0,113,227,.06);
}


.replacement-graphic span:nth-child(1) {
    transform:
        translate(-50px,-20px)
        rotate(-14deg);
}


.replacement-graphic span:nth-child(2) {
    transform:
        translate(0,10px)
        rotate(8deg);
}


.replacement-graphic span:nth-child(3) {
    transform:
        translate(50px,-10px)
        rotate(20deg);
}


/* Serie */

.project-series-content {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        60px;

    flex:
        1;
}


.series-stack {
    display:
        flex;

    justify-content:
        center;

    align-items:
        flex-end;

    gap:
        8px;
}


.series-stack span {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        55px;

    height:
        calc(60px + var(--i, 0px));

    border-radius:
        14px 14px 8px 8px;

    background:
        linear-gradient(
            180deg,
            #1684f8,
            #0066ce
        );

    color:
        white;

    font-size:
        .72rem;

    font-weight:
        700;
}


.series-stack span:nth-child(2) {
    transform:
        translateY(-10px);
}

.series-stack span:nth-child(3) {
    transform:
        translateY(-20px);
}

.series-stack span:nth-child(4) {
    transform:
        translateY(-10px);
}


/* Prozess */

.project-process {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;
}


.project-process-step {
    flex:
        1;
}


.project-process-step > span {
    color:
        #0071e3;

    font-size:
        .68rem;

    font-weight:
        750;
}


.project-process-step strong {
    display:
        block;

    margin:
        10px 0 8px;

    font-size:
        1.05rem;
}


.project-process-step p {
    margin:
        0;

    color:
        #86868b;

    font-size:
        .82rem;

    line-height:
        1.5;
}


.project-process-line {
    width:
        50px;

    height:
        1px;

    margin-top:
        15px;

    background:
        rgba(0,113,227,.20);
}


/* CTA */

.project-final-cta,
.about-final-cta {
    width:
        min(
            calc(100% - 48px),
            1180px
        );

    margin:
        0 auto 100px;

    padding:
        46px 50px;

    box-sizing:
        border-box;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    border-radius:
        32px;

    background:
        linear-gradient(
            135deg,
            #0071e3,
            #075ac0
        );

    color:
        white;

    overflow:
        hidden;

    position:
        relative;
}


.project-final-cta h2,
.about-final-cta h2 {
    margin:
        8px 0 12px;

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

    letter-spacing:
        -.045em;
}


.project-final-cta p,
.about-final-cta p {
    max-width:
        680px;

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

    line-height:
        1.55;
}


.project-final-cta .eyebrow,
.about-final-cta .eyebrow {
    color:
        rgba(255,255,255,.70);
}


.project-final-cta .button,
.about-final-cta .button {
    flex:
        0 0 auto;

    background:
        white;

    color:
        #0071e3;
}


/* =========================================================
   ÜBER UNS
========================================================= */

.about-signature-card {
    padding:
        32px;

    border:
        1px solid
        rgba(0,0,0,.06);

    border-radius:
        30px;

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

    text-align:
        center;

    box-shadow:
        0 18px 55px
        rgba(0,0,0,.055);
}


.about-signature-label {
    display:
        block;

    margin-bottom:
        26px;

    color:
        #86868b;

    font-size:
        .61rem;

    font-weight:
        700;

    letter-spacing:
        .14em;
}


.about-avatar {
    width:
        100px;

    height:
        100px;

    margin:
        0 auto 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            #1684f8,
            #005fc4
        );

    color:
        white;

    font-size:
        2rem;

    font-weight:
        750;

    box-shadow:
        0 18px 45px
        rgba(0,113,227,.25);
}


.about-signature-card h2 {
    margin:
        0 0 5px;

    font-size:
        1.4rem;

    letter-spacing:
        -.03em;
}


.about-signature-card p {
    margin:
        0;

    color:
        #86868b;
}


.about-location {
    margin-top:
        24px;

    padding-top:
        18px;

    border-top:
        1px solid
        rgba(0,0,0,.06);

    color:
        #6e6e73;

    font-size:
        .76rem;
}


/* Values */

.about-values-grid {
    display:
        grid;

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

    gap:
        16px;
}


.about-value-card {
    min-height:
        280px;

    padding:
        30px;

    box-sizing:
        border-box;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(0,0,0,.06);

    border-radius:
        30px;

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


.about-value-large {
    min-height:
        420px;
}


.about-value-wide {
    grid-column:
        1 / -1;

    min-height:
        260px;

    display:
        grid;

    grid-template-columns:
        1.2fr .8fr;

    align-items:
        center;

    gap:
        50px;
}


.about-value-number {
    position:
        absolute;

    top:
        28px;

    left:
        30px;

    color:
        #0071e3;

    font-size:
        .68rem;

    font-weight:
        750;
}


.about-value-card h3 {
    margin:
        0 0 12px;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.8rem
        );

    letter-spacing:
        -.045em;
}


.about-value-card p {
    max-width:
        600px;

    margin:
        0;

    color:
        #6e6e73;

    line-height:
        1.58;
}


.about-value-accent {
    position:
        absolute;

    right:
        -12px;

    top:
        40px;

    color:
        rgba(0,113,227,.06);

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

    font-weight:
        800;

    letter-spacing:
        -.07em;
}


.about-scale {
    display:
        flex;

    align-items:
        center;

    gap:
        15px;
}


.about-scale > div {
    flex:
        1;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            #0071e3,
            rgba(0,113,227,.12)
        );
}


.about-scale span {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    color:
        #0071e3;

    font-size:
        1.7rem;

    font-weight:
        750;
}


.about-scale small {
    color:
        #86868b;

    font-size:
        .65rem;

    font-weight:
        500;
}


/* Principles */

.about-principle-list {
    border-top:
        1px solid
        rgba(0,0,0,.07);
}


.about-principle-list > div {
    display:
        grid;

    grid-template-columns:
        60px 1fr 1.4fr;

    align-items:
        center;

    gap:
        30px;

    padding:
        24px 0;

    border-bottom:
        1px solid
        rgba(0,0,0,.07);
}


.about-principle-list span {
    color:
        #0071e3;

    font-size:
        .68rem;

    font-weight:
        750;
}


.about-principle-list strong {
    font-size:
        .95rem;
}


.about-principle-list p {
    margin:
        0;

    color:
        #86868b;

    font-size:
        .86rem;
}


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"]
.projects-premium-hero,
html[data-theme="dark"]
.about-premium-hero {
    border-color:
        rgba(255,255,255,.075);

    background:
        linear-gradient(
            135deg,
            #171719,
            #10161e
        );
}


html[data-theme="dark"]
.project-bento-card,
html[data-theme="dark"]
.about-value-card,
html[data-theme="dark"]
.about-signature-card {
    border-color:
        rgba(255,255,255,.07);

    background:
        rgba(27,27,30,.78);
}


html[data-theme="dark"]
.project-card-content p,
html[data-theme="dark"]
.project-series-content p,
html[data-theme="dark"]
.about-value-card p,
html[data-theme="dark"]
.about-location {
    color:
        #98989d;
}


html[data-theme="dark"]
.orbit-item {
    border-color:
        rgba(255,255,255,.08);

    background:
        rgba(35,35,38,.90);

    color:
        #aaaab0;
}


html[data-theme="dark"]
.about-location,
html[data-theme="dark"]
.about-principle-list,
html[data-theme="dark"]
.about-principle-list > div {
    border-color:
        rgba(255,255,255,.07);
}


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

@media (max-width: 900px) {

    .projects-premium-hero,
    .about-premium-hero {
        grid-template-columns:
            1fr;

        padding:
            46px;
    }


    .projects-hero-visual {
        order:
            -1;
    }


    .project-series-content,
    .about-value-wide {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 700px) {

    .projects-premium-hero,
    .about-premium-hero,
    .projects-showcase,
    .project-process-section,
    .about-values-section,
    .about-principles,
    .project-final-cta,
    .about-final-cta {
        width:
            calc(100% - 20px);
    }


    .projects-premium-hero,
    .about-premium-hero {
        padding:
            36px 28px;

        border-radius:
            28px;
    }


    .project-orbit {
        width:
            240px;

        height:
            240px;
    }


    .projects-bento,
    .about-values-grid {
        grid-template-columns:
            1fr;
    }


    .project-bento-large,
    .project-bento-wide,
    .about-value-wide {
        grid-column:
            auto;

        grid-row:
            auto;
    }


    .project-bento-large {
        min-height:
            500px;
    }


    .project-process {
        flex-direction:
            column;

        gap:
            25px;
    }


    .project-process-line {
        width:
            1px;

        height:
            28px;

        margin:
            0 0 0 8px;
    }


    .project-final-cta,
    .about-final-cta {
        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            36px 28px;

        border-radius:
            27px;
    }


    .about-value-wide {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .about-principle-list > div {
        grid-template-columns:
            42px 1fr;

        gap:
            10px 18px;
    }


    .about-principle-list p {
        grid-column:
            2;
    }

}


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

    .project-orbit {
        animation:
            none !important;
    }

}


/* =========================================================
   ÜBER UNS – BENTO FIX
========================================================= */

.about-values-grid {
    display:
        grid !important;

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

    gap:
        16px !important;
}


.about-value-card {
    min-height:
        300px !important;

    padding:
        30px !important;

    box-sizing:
        border-box;

    display:
        flex !important;

    flex-direction:
        column;

    justify-content:
        flex-end;

    position:
        relative;

    overflow:
        hidden !important;

    border-radius:
        30px !important;
}


/* Alle 4 Karten gleichmäßig */

.about-value-large,
.about-value-wide {
    grid-column:
        auto !important;

    min-height:
        300px !important;
}


/* Nummer oben */

.about-value-number {
    position:
        absolute;

    top:
        28px;

    left:
        30px;

    z-index:
        3;

    color:
        #2997ff;

    font-size:
        .68rem;

    font-weight:
        750;
}


/* großer Hintergrundtext sauber halten */

.about-value-accent {
    position:
        absolute;

    top:
        42px;

    left:
        28px;

    right:
        28px;

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

    overflow:
        hidden;

    white-space:
        nowrap;

    color:
        rgba(41,151,255,.055);

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

    font-weight:
        800;

    letter-spacing:
        -.06em;

    line-height:
        1;

    pointer-events:
        none;
}


/* Inhalt nach vorne */

.about-value-card h3,
.about-value-card p,
.about-value-card > div:not(.about-value-accent) {
    position:
        relative;

    z-index:
        2;
}


/* vierte Karte wieder normale Karte */

.about-value-wide {
    display:
        flex !important;

    flex-direction:
        column;

    justify-content:
        flex-end;

    gap:
        20px;
}


/* Skala unten in Karte */

.about-scale {
    width:
        100%;

    margin-top:
        24px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;
}


/* Mobile */

@media (max-width: 750px) {

    .about-values-grid {
        grid-template-columns:
            1fr !important;
    }


    .about-value-card,
    .about-value-large,
    .about-value-wide {
        min-height:
            270px !important;
    }

}


/* =========================================================
   ÜBER UNS – NUMMER 04 FIX
========================================================= */

.about-value-wide {
    padding-top:
        74px !important;
}


.about-value-wide
.about-value-number {
    top:
        28px !important;

    left:
        30px !important;

    z-index:
        5 !important;
}


.about-value-wide
h3 {
    margin-top:
        0 !important;
}


/* allgemein verhindern, dass Nummern mit Überschriften kollidieren */

.about-value-card {
    padding-top:
        74px !important;
}


.about-value-card
.about-value-number {
    top:
        28px !important;
}


/* Mobile */

@media (max-width: 700px) {

    .about-value-card,
    .about-value-wide {
        padding-top:
            66px !important;
    }

}


/* =========================================================
   ÜBER UNS – FINALER KARTENFIX
========================================================= */

.about-value-card {
    padding:
        30px !important;

    padding-top:
        78px !important;
}


/* Nummer immer oben links */

.about-value-card
.about-value-number {
    position:
        absolute !important;

    top:
        28px !important;

    left:
        30px !important;

    margin:
        0 !important;

    z-index:
        10 !important;

    line-height:
        1 !important;
}


/* Karte 04 */

.about-value-wide {
    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(260px, .8fr) !important;

    align-items:
        end !important;

    gap:
        50px !important;
}


.about-value-wide-content {
    position:
        relative;

    z-index:
        2;
}


.about-value-wide-content h3 {
    margin:
        0 0 12px !important;
}


.about-value-wide-content p {
    margin:
        0 !important;
}


/* Hintergrundwort nicht mehr abschneiden */

.about-value-accent {
    top:
        58px !important;

    left:
        30px !important;

    right:
        auto !important;

    max-width:
        none !important;

    font-size:
        clamp(
            3.5rem,
            6vw,
            5.6rem
        ) !important;

    opacity:
        .65;

    overflow:
        visible !important;
}


/* Mobile */

@media (max-width: 750px) {

    .about-value-wide {
        grid-template-columns:
            1fr !important;

        gap:
            28px !important;
    }


    .about-value-card {
        padding:
            70px 24px 26px !important;
    }


    .about-value-card
    .about-value-number {
        top:
            26px !important;

        left:
            24px !important;
    }

}



/* ADMIN BRAND LOGO UPLOAD START */

.admin-brand-icon {
    position: relative;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    padding: 0;
    border: 0;

    display: grid;
    place-items: center;

    border-radius: 12px;

    overflow: hidden;

    cursor: pointer;

    font: inherit;

    background:
        linear-gradient(
            145deg,
            #0071e3,
            #48a8ff
        );

    color: white;

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

.admin-brand-icon:hover {
    transform: scale(1.04);

    box-shadow:
        0 5px 16px rgba(0,113,227,.22);
}

.admin-brand-icon:active {
    transform: scale(.97);
}

.admin-brand-icon:focus-visible {
    outline:
        3px solid rgba(0,113,227,.24);

    outline-offset: 3px;
}

.admin-brand-logo-fallback {
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    font-weight: 700;
}

.admin-brand-logo-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    background: white;
}

.admin-brand-logo-image[hidden] {
    display: none;
}

.admin-brand-logo-edit {
    position: absolute;

    right: -1px;
    bottom: -1px;

    width: 16px;
    height: 16px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #ffffff;
    color: #0071e3;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    box-shadow:
        0 1px 5px rgba(0,0,0,.18);

    opacity: 0;

    transform:
        scale(.8);

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

.admin-brand-icon:hover
.admin-brand-logo-edit {
    opacity: 1;

    transform:
        scale(1);
}

/* ADMIN BRAND LOGO UPLOAD END */



/* ADMIN DARKMODE FINAL START */


/* ===============================
   DARKMODE SCHALTER
================================ */

.admin-theme-card {
    margin-top: 20px;

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


.admin-theme-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.admin-theme-info strong {
    font-size: 18px;
}


.admin-theme-info p {
    margin: 0;
}


.admin-theme-switch {
    cursor: pointer;
    flex: 0 0 auto;
}


.admin-theme-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.admin-theme-track {
    display: block;

    width: 50px;
    height: 30px;

    padding: 3px;

    box-sizing: border-box;

    border-radius: 999px;

    background: #d1d1d6;
}


.admin-theme-thumb {
    display: block;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 1px 5px rgba(0,0,0,.24);
}


.admin-theme-switch
input:checked
+
.admin-theme-track {
    background: #007aff;
}


.admin-theme-switch
input:checked
+
.admin-theme-track
.admin-theme-thumb {
    transform: translateX(20px);
}


/* ===============================
   DARK MODE
================================ */

html[data-admin-theme="dark"] {
    color-scheme: dark;

    --text:
        #f5f5f7;

    --text-secondary:
        #98989f;

    --border:
        rgba(255,255,255,.09);
}


html[data-admin-theme="dark"],
html[data-admin-theme="dark"] body {
    background: #101114 !important;
    color: #f5f5f7;
}


/* ausdrücklich KEINE Animationen */

html[data-admin-theme="dark"] *,
html[data-admin-theme="dark"] *::before,
html[data-admin-theme="dark"] *::after {
    transition: none !important;
}


html[data-admin-theme="dark"] .admin-page {
    background: #101114;
}


html[data-admin-theme="dark"] .admin-sidebar {
    background: #18191d;

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


html[data-admin-theme="dark"] .admin-content {
    background: #111216;
}


html[data-admin-theme="dark"] .admin-brand strong,
html[data-admin-theme="dark"] h1,
html[data-admin-theme="dark"] h2,
html[data-admin-theme="dark"] h3,
html[data-admin-theme="dark"] strong {
    color: #f5f5f7;
}


html[data-admin-theme="dark"] .admin-brand div span,
html[data-admin-theme="dark"] p {
    color: #98989f;
}


html[data-admin-theme="dark"] .admin-nav-item {
    color: #d2d2d7;
}


html[data-admin-theme="dark"] .admin-nav-item:hover {
    background: #25262b;
}


html[data-admin-theme="dark"] .admin-nav-item.active {
    background: #173c68;
    color: #6bb2ff;
}


html[data-admin-theme="dark"] .admin-settings-card,
html[data-admin-theme="dark"] .admin-stat-card,
html[data-admin-theme="dark"] .admin-content-section,
html[data-admin-theme="dark"] .admin-material-card,
html[data-admin-theme="dark"] .admin-order-card {
    background: #1c1d21;

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

    box-shadow:
        0 14px 40px rgba(0,0,0,.22);
}


html[data-admin-theme="dark"] input,
html[data-admin-theme="dark"] textarea,
html[data-admin-theme="dark"] select {
    background: #27282d;

    color: #f5f5f7;

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

    box-shadow: none;
}


html[data-admin-theme="dark"] input::placeholder,
html[data-admin-theme="dark"] textarea::placeholder {
    color: #76767d;
}


html[data-admin-theme="dark"] .admin-cloud-status {
    background: #232429;

    color: #b5b5bb;

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


html[data-admin-theme="dark"] .admin-theme-track {
    background: #484950;
}


html[data-admin-theme="dark"]
.admin-theme-switch
input:checked
+
.admin-theme-track {
    background: #0a84ff;
}


/* ADMIN DARKMODE FINAL END */



/* ADMIN DARKMODE CARD FIX START */


/* ========================================================
   ÜBERSICHT
======================================================== */

html[data-admin-theme="dark"] .admin-stat-card,
html[data-admin-theme="dark"] .admin-info-card {
    background:
        #1c1d21 !important;

    border-color:
        rgba(255,255,255,.09) !important;

    color:
        #f5f5f7 !important;
}


html[data-admin-theme="dark"] .admin-info-card h2,
html[data-admin-theme="dark"] .admin-stat-card strong {
    color:
        #f5f5f7 !important;
}


html[data-admin-theme="dark"] .admin-info-card p,
html[data-admin-theme="dark"] .admin-stat-card p,
html[data-admin-theme="dark"] .admin-stat-card span {
    color:
        #98989f !important;
}


/* ========================================================
   MATERIALIEN
======================================================== */

html[data-admin-theme="dark"] .admin-material-card,
html[data-admin-theme="dark"] .material-group-card,
html[data-admin-theme="dark"] .material-group {
    background:
        #1c1d21 !important;

    border-color:
        rgba(255,255,255,.09) !important;

    color:
        #f5f5f7 !important;
}


html[data-admin-theme="dark"] .material-group-header,
html[data-admin-theme="dark"] .material-group-panel,
html[data-admin-theme="dark"] .material-group-content {
    background:
        transparent !important;
}


html[data-admin-theme="dark"] .material-color-row {
    background:
        #202126 !important;

    border-color:
        rgba(255,255,255,.07) !important;

    color:
        #f5f5f7 !important;
}


html[data-admin-theme="dark"] .material-color-row:hover {
    background:
        #27282d !important;
}


html[data-admin-theme="dark"] .material-group h3,
html[data-admin-theme="dark"] .material-group-card h3,
html[data-admin-theme="dark"] .material-color-row strong {
    color:
        #f5f5f7 !important;
}


html[data-admin-theme="dark"] .material-group p,
html[data-admin-theme="dark"] .material-group-meta,
html[data-admin-theme="dark"] .material-color-row p {
    color:
        #98989f !important;
}


/* ========================================================
   ANFRAGEN / AUFTRÄGE
======================================================== */

html[data-admin-theme="dark"] .admin-order-list {
    background:
        #1c1d21 !important;

    border-color:
        rgba(255,255,255,.09) !important;
}


html[data-admin-theme="dark"] .admin-order-row {
    background:
        #1c1d21 !important;

    border-color:
        rgba(255,255,255,.07) !important;

    color:
        #f5f5f7 !important;
}


html[data-admin-theme="dark"] .admin-order-row:hover {
    background:
        #25262b !important;
}


html[data-admin-theme="dark"] .admin-order-row strong {
    color:
        #f5f5f7 !important;
}


html[data-admin-theme="dark"] .admin-order-row span,
html[data-admin-theme="dark"] .admin-order-row p,
html[data-admin-theme="dark"] .admin-order-row small {
    color:
        #98989f !important;
}


/* ========================================================
   GENERELLE ADMIN-KARTEN
======================================================== */

html[data-admin-theme="dark"] .admin-settings-card,
html[data-admin-theme="dark"] .admin-content-section {
    background:
        #1c1d21 !important;

    border-color:
        rgba(255,255,255,.09) !important;
}


/* ========================================================
   EINGABEFELDER
======================================================== */

html[data-admin-theme="dark"] input,
html[data-admin-theme="dark"] textarea,
html[data-admin-theme="dark"] select {
    background:
        #26272c !important;

    color:
        #f5f5f7 !important;

    border-color:
        rgba(255,255,255,.12) !important;
}


/* ========================================================
   SEKUNDÄRE BUTTONS
======================================================== */

html[data-admin-theme="dark"] button:not(.button):not(.admin-nav-item),
html[data-admin-theme="dark"] .admin-secondary-button {
    border-color:
        rgba(255,255,255,.10);
}


/* ADMIN DARKMODE CARD FIX END */



/* ADMIN LOGO EDITOR START */


.admin-logo-editor[hidden] {
    display: none !important;
}


.admin-logo-editor {
    position: fixed;

    inset: 0;

    z-index: 200000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        rgba(0,0,0,.58);

    backdrop-filter:
        blur(18px);
}


.admin-logo-editor-window {
    width:
        min(680px, 94vw);

    max-height:
        92vh;

    overflow:
        auto;

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

    border-radius:
        24px;

    background:
        #ffffff;

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.30);
}


.admin-logo-editor-header {
    padding:
        22px 24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid rgba(0,0,0,.08);
}


.admin-logo-editor-header > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.admin-logo-editor-header strong {
    font-size:
        20px;
}


.admin-logo-editor-eyebrow {
    color:
        #0071e3;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .13em;
}


.admin-logo-editor-close {
    width:
        34px;

    height:
        34px;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        #eeeeF0;

    color:
        #1d1d1f;

    font-size:
        23px;

    line-height:
        1;

    cursor:
        pointer;
}


.admin-logo-editor-body {
    padding:
        28px;
}


.admin-logo-crop-area {
    position:
        relative;

    width:
        min(460px, 75vw);

    aspect-ratio:
        1 / 1;

    margin:
        0 auto;

    overflow:
        hidden;

    border-radius:
        22px;

    /*
       Nur Editor-Hintergrund.
       Dieser wird NICHT ins PNG gerendert.
    */

    background-image:
        linear-gradient(
            45deg,
            #e9e9ec 25%,
            transparent 25%
        ),
        linear-gradient(
            -45deg,
            #e9e9ec 25%,
            transparent 25%
        ),
        linear-gradient(
            45deg,
            transparent 75%,
            #e9e9ec 75%
        ),
        linear-gradient(
            -45deg,
            transparent 75%,
            #e9e9ec 75%
        );

    background-size:
        28px 28px;

    background-position:
        0 0,
        0 14px,
        14px -14px,
        -14px 0;

    background-color:
        #ffffff;
}


#adminLogoCropCanvas {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    display:
        block;

    cursor:
        grab;

    touch-action:
        none;
}


#adminLogoCropCanvas:active {
    cursor:
        grabbing;
}


.admin-logo-crop-frame {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    border:
        2px solid rgba(255,255,255,.92);

    border-radius:
        22px;

    box-shadow:
        inset 0 0 0 1px
        rgba(0,0,0,.18);
}


.admin-logo-editor-controls {
    margin-top:
        24px;

    display:
        grid;

    gap:
        12px;
}


.admin-logo-editor-controls label {
    display:
        grid;

    gap:
        10px;

    font-size:
        13px;

    font-weight:
        600;
}


.admin-logo-editor-controls input[type="range"] {
    width:
        100%;
}


.admin-logo-editor-controls p {
    margin:
        0;

    color:
        #6e6e73;

    font-size:
        12px;

    line-height:
        1.5;
}


.admin-logo-editor-footer {
    padding:
        18px 24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

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


.admin-logo-editor-footer-right {
    display:
        flex;

    gap:
        10px;
}


.admin-logo-editor-secondary {
    padding:
        10px 15px;

    border:
        0;

    border-radius:
        11px;

    background:
        #eeeeF0;

    color:
        #1d1d1f;

    font:
        inherit;

    font-weight:
        600;

    cursor:
        pointer;
}


/* ADMIN LOGO EDITOR END */



/* ADMIN DARKMODE POLISH START */


/* Logo Editor */

html[data-admin-theme="dark"]
.admin-logo-editor-window {
    background:
        #1c1d21;

    color:
        #f5f5f7;

    border-color:
        rgba(255,255,255,.10);
}


html[data-admin-theme="dark"]
.admin-logo-editor-header,
html[data-admin-theme="dark"]
.admin-logo-editor-footer {
    border-color:
        rgba(255,255,255,.09);
}


html[data-admin-theme="dark"]
.admin-logo-editor-close,
html[data-admin-theme="dark"]
.admin-logo-editor-secondary {
    background:
        #2a2b30;

    color:
        #f5f5f7;
}


html[data-admin-theme="dark"]
.admin-logo-editor-controls p {
    color:
        #98989f;
}


/*
    Checkerboard bleibt bewusst hell/dunkel gemischt,
    weil dadurch Transparenz sichtbar ist.
*/

html[data-admin-theme="dark"]
.admin-logo-crop-area {
    background-image:
        linear-gradient(
            45deg,
            #35363b 25%,
            transparent 25%
        ),
        linear-gradient(
            -45deg,
            #35363b 25%,
            transparent 25%
        ),
        linear-gradient(
            45deg,
            transparent 75%,
            #35363b 75%
        ),
        linear-gradient(
            -45deg,
            transparent 75%,
            #35363b 75%
        );

    background-color:
        #25262a;
}


/* Kundendatei / Vorschau */

html[data-admin-theme="dark"]
#adminCustomerFileInspector > div {
    background:
        #1c1d21 !important;

    color:
        #f5f5f7 !important;
}


html[data-admin-theme="dark"]
#adminCustomerFileInspector
iframe {
    background:
        #25262a !important;
}


html[data-admin-theme="dark"]
#adminCustomerFileInspector
button,
html[data-admin-theme="dark"]
#adminCustomerFileInspector
a {
    background:
        #2a2b30 !important;

    color:
        #f5f5f7 !important;
}


/* allgemeine Dialoge / Detailkarten */

html[data-admin-theme="dark"]
.admin-modal,
html[data-admin-theme="dark"]
.admin-dialog,
html[data-admin-theme="dark"]
.admin-detail-card,
html[data-admin-theme="dark"]
.admin-order-detail,
html[data-admin-theme="dark"]
.admin-order-details,
html[data-admin-theme="dark"]
.admin-material-detail,
html[data-admin-theme="dark"]
.admin-material-details {
    background:
        #1c1d21 !important;

    color:
        #f5f5f7 !important;

    border-color:
        rgba(255,255,255,.09) !important;
}


/* Website-Inhalte */

html[data-admin-theme="dark"]
.admin-content-fields {
    background:
        #18191d !important;
}


html[data-admin-theme="dark"]
.admin-content-section-head {
    background:
        #1c1d21 !important;
}


html[data-admin-theme="dark"]
.admin-content-head-chevron {
    background:
        #2b2c31 !important;

    color:
        #f5f5f7 !important;
}


/* Settings */

html[data-admin-theme="dark"]
.admin-theme-card {
    background:
        #1c1d21 !important;
}


/* Labels */

html[data-admin-theme="dark"]
label {
    color:
        #d7d7dc;
}


/* horizontale Linien */

html[data-admin-theme="dark"]
hr {
    border-color:
        rgba(255,255,255,.09);
}


/* ADMIN DARKMODE POLISH END */



/* WEBSITE CLOUD LOGO START */

.website-brand-logo-box,
.website-footer-logo-box {
    position: relative;
    overflow: hidden;
}

.website-brand-logo,
.website-footer-logo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    /*
        Kein Hintergrund:
        transparente PNGs bleiben transparent.
    */
    background: transparent;
}

.website-brand-logo[hidden],
.website-footer-logo[hidden] {
    display: none !important;
}

.website-brand-logo-fallback[hidden] {
    display: none !important;
}

/* WEBSITE CLOUD LOGO END */

/* WEBSITE MOBILE FINAL START */

/* ---------------------------------------------------------
   Allgemeine mobile Stabilität
--------------------------------------------------------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

input,
textarea,
select,
button {
    max-width: 100%;
}

p,
h1,
h2,
h3,
h4,
a,
span {
    overflow-wrap: break-word;
}


/* ---------------------------------------------------------
   Tablet / kleine Notebooks
--------------------------------------------------------- */

@media (max-width: 900px) {

    .nav-container {
        width: calc(100% - 32px);
        max-width: none;
        gap: 14px;
    }

    .hero-content,
    .section-container,
    .footer-container,
    .premium-footer-container {
        width: calc(100% - 32px);
        max-width: none;
    }

}


/* ---------------------------------------------------------
   Smartphone
--------------------------------------------------------- */

@media (max-width: 700px) {

    body {
        min-width: 0;
    }


    /* ---------------- Navigation ---------------- */

    .navbar {
        padding:
            env(safe-area-inset-top, 0)
            0
            0;
    }

    .nav-container {
        width: 100%;
        padding:
            12px
            16px
            10px;

        display: flex;
        flex-wrap: wrap;
        align-items: center;

        gap:
            10px
            12px;
    }

    .brand {
        min-width: 0;
        flex: 1 1 auto;

        gap: 9px;
    }

    .brand > span {
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .brand-icon,
    .website-brand-logo-box {
        width: 36px;
        height: 36px;
        min-width: 36px;
        flex-basis: 36px;
    }

    .nav-actions {
        margin-left: auto;
        gap: 8px;
        flex: 0 0 auto;
    }

    .nav-actions .button-small {
        display: none;
    }

    .theme-button {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
    }

    .nav-links {
        order: 10;

        width: calc(100% + 32px);

        margin:
            2px
            -16px
            -10px;

        padding:
            2px
            16px
            10px;

        display: flex;
        flex-wrap: nowrap;

        gap: 8px;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        scroll-snap-type: x proximity;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-links a {
        flex: 0 0 auto;

        min-height: 40px;

        display: inline-flex;
        align-items: center;

        padding:
            9px
            13px;

        border-radius: 999px;

        font-size: 0.9rem;
        line-height: 1.1;

        white-space: nowrap;

        scroll-snap-align: start;
    }


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

    .hero {
        min-height: auto;
    }

    .hero-content {
        width: calc(100% - 32px);

        padding-top: 44px;
        padding-bottom: 44px;

        grid-template-columns: 1fr !important;

        gap: 32px;
    }

    .hero-text {
        width: 100%;
        min-width: 0;
    }

    .hero h1,
    .hero-text h1 {
        font-size:
            clamp(
                2.25rem,
                11vw,
                3.6rem
            );

        line-height: 0.98;

        letter-spacing: -0.04em;
    }

    .hero-description {
        font-size: 1rem;
        line-height: 1.55;

        max-width: 100%;
    }

    .eyebrow {
        font-size: 0.72rem;
        line-height: 1.4;

        letter-spacing: 0.08em;
    }

    .hero-buttons {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .hero-buttons .button {
        width: 100%;
        min-height: 48px;

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

        text-align: center;
    }


    /* ---------------- Allgemeine Abschnitte ---------------- */

    section {
        max-width: 100%;
    }

    .section-container,
    .footer-container,
    .premium-footer-container {
        width: calc(100% - 32px);
    }

    .section-heading h2,
    .admin-section-heading h2 {
        font-size:
            clamp(
                1.8rem,
                8vw,
                2.6rem
            );
    }


    /* ---------------- Karten / Grids ---------------- */

    .services-grid,
    .service-grid,
    .home-material-grid,
    .projects-bento,
    .about-values-grid,
    .contact-grid,
    .contact-layout {
        grid-template-columns:
            minmax(0, 1fr)
            !important;
    }

    .service-card,
    .home-material-card,
    .project-card,
    .about-value-card,
    .contact-card {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }


    /* ---------------- Materialien ---------------- */

    .material-group,
    .material-group-card {
        width: 100%;
        max-width: 100%;
    }

    .material-group-header {
        min-width: 0;

        gap: 12px;
    }

    .material-group-main {
        min-width: 0;
    }

    .material-group-main h3 {
        font-size: 1.1rem;
    }

    .material-group-meta {
        gap: 8px;
    }

    .material-color-row {
        min-width: 0;

        gap: 10px;

        padding:
            14px
            12px;
    }


    /* ---------------- Formulare ---------------- */

    form {
        width: 100%;
        max-width: 100%;
    }

    input,
    textarea,
    select {
        width: 100%;

        font-size: 16px !important;
    }

    textarea {
        min-height: 140px;
    }

    form .button,
    form button[type="submit"] {
        min-height: 48px;
    }


    /* ---------------- Projekte / Über uns ---------------- */

    .projects-premium-hero,
    .about-premium-hero,
    .projects-showcase,
    .project-process-section,
    .about-values-section,
    .about-principles,
    .project-final-cta,
    .about-final-cta {
        width: calc(100% - 24px);
    }

    .projects-premium-hero,
    .about-premium-hero {
        padding:
            30px
            22px;

        border-radius: 24px;
    }

    .project-orbit {
        max-width: 220px;
        max-height: 220px;
    }


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

    .premium-footer-container,
    .footer-container {
        display: grid;

        grid-template-columns:
            1fr
            !important;

        gap: 34px;
    }

    .footer-navigation {
        display: grid;

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

        gap:
            28px
            18px;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-brand-link {
        max-width: 100%;
    }


    /* ---------------- Touch Bedienung ---------------- */

    a,
    button,
    input,
    select {
        touch-action: manipulation;
    }

}


/* ---------------------------------------------------------
   Kleine Smartphones
--------------------------------------------------------- */

@media (max-width: 430px) {

    .nav-container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .nav-links {
        width: calc(100% + 28px);

        margin-left: -14px;
        margin-right: -14px;

        padding-left: 14px;
        padding-right: 14px;
    }

    .brand > span {
        font-size: 0.9rem;
    }

    .hero-content {
        width: calc(100% - 28px);

        padding-top: 34px;
        padding-bottom: 38px;
    }

    .hero h1,
    .hero-text h1 {
        font-size:
            clamp(
                2rem,
                10.5vw,
                3rem
            );
    }

    .home-material-card,
    .service-card,
    .about-value-card {
        border-radius:
            22px
            !important;
    }

    .footer-navigation {
        grid-template-columns: 1fr;
    }

}


/* ---------------------------------------------------------
   Sehr kleine Geräte
--------------------------------------------------------- */

@media (max-width: 360px) {

    .brand > span {
        font-size: 0.82rem;
    }

    .brand-icon,
    .website-brand-logo-box {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .theme-button {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .nav-links a {
        font-size: 0.84rem;

        padding:
            8px
            11px;
    }

}

/* WEBSITE MOBILE FINAL END */



/* =========================================================
   MOBILE SIZE + GRID FIX
========================================================= */

@media screen and (max-width: 700px) {

    /* Kopfzeile deutlich größer */

    .navbar {
        padding-top: 10px !important;
    }

    .nav-container {
        width: calc(100% - 20px) !important;

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

        padding: 10px 12px !important;

        border-radius: 18px !important;
    }

    .brand {
        gap: 10px !important;
    }

    .brand > span {
        font-size: 16px !important;
        font-weight: 650 !important;

        white-space: nowrap !important;
    }

    .brand-icon,
    .website-brand-logo-box {
        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;

        flex: 0 0 44px !important;

        border-radius: 12px !important;
    }

    .website-brand-logo {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
    }

    .theme-button {
        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
        min-height: 44px !important;

        font-size: 18px !important;
    }

    .nav-actions {
        gap: 8px !important;
    }

    .nav-actions .button-small {
        display: inline-flex !important;

        min-height: 44px !important;

        padding: 11px 16px !important;

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


    /* Hero */

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

        padding-top: 55px !important;
        padding-bottom: 65px !important;

        gap: 40px !important;
    }

    .hero .eyebrow {
        font-size: 13px !important;
    }

    .hero h1,
    .hero-text h1 {
        font-size: clamp(44px, 12vw, 58px) !important;
        line-height: .97 !important;
    }

    .hero-description {
        font-size: 17px !important;
        line-height: 1.55 !important;
    }

    .hero-buttons .button {
        min-height: 48px !important;

        padding: 13px 20px !important;

        font-size: 15px !important;
    }


    /* Überschriften */

    .section-heading h2,
    .home-materials-heading-row h2,
    .services-heading h2 {
        font-size: clamp(34px, 9vw, 46px) !important;
        line-height: 1.04 !important;
    }

    .section-heading p,
    .home-materials-heading-row p {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }


    /* ALLE relevanten Karten wirklich einspaltig */

    .services-grid,
    .service-grid,
    .home-material-grid,
    .materials-grid,
    .projects-bento,
    .about-values-grid {
        display: grid !important;

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

        gap: 16px !important;
    }

    .services-grid > *,
    .service-grid > *,
    .home-material-grid > *,
    .materials-grid > *,
    .projects-bento > *,
    .about-values-grid > * {
        grid-column: 1 / -1 !important;

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

        min-width: 0 !important;
    }


    /* Leistungskarten */

    .service-card,
    .page-services .service-card {
        min-height: 250px !important;

        padding: 28px !important;
    }

    .service-card h3 {
        font-size: 22px !important;
    }

    .service-card p {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }


    /* Materialkarten */

    .home-material-card {
        min-height: 340px !important;

        padding: 28px !important;
    }

    .home-material-symbol {
        font-size: clamp(64px, 18vw, 82px) !important;
    }

    .home-material-card h3 {
        font-size: 23px !important;
    }

    .home-material-card p {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }


    /* CTA */

    .project-final-cta,
    .about-final-cta,
    .final-cta,
    .home-final-cta {
        width: calc(100% - 28px) !important;

        padding: 32px 24px !important;
    }

    .project-final-cta h2,
    .about-final-cta h2,
    .final-cta h2,
    .home-final-cta h2 {
        font-size: 30px !important;
        line-height: 1.08 !important;
    }


    /* Footer */

    .footer,
    .premium-footer {
        padding:
            0
            14px
            20px !important;
    }

    .footer-container,
    .premium-footer-container {
        padding: 28px 22px !important;
    }

    .footer-brand-link strong {
        font-size: 17px !important;
    }

    .footer-brand p,
    .footer-column a,
    .footer-column span {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .footer-column strong {
        font-size: 15px !important;
    }

}


/* iPhone */

@media screen and (max-width: 430px) {

    .brand > span {
        font-size: 15px !important;
    }

    .nav-actions .button-small {
        font-size: 13px !important;

        padding:
            10px
            13px !important;
    }

}


/* Sehr kleine Handys */

@media screen and (max-width: 360px) {

    .nav-actions .button-small {
        display: none !important;
    }

}

/* MOBILE SIZE + GRID FIX END */


/* =========================================================
   MOBILE CLEAN FINAL
   ========================================================= */

@media screen and (max-width: 700px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        margin: 0;
    }


    /* -------------------------
       NAVIGATION
       ------------------------- */

    .navbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 9999 !important;

        width: 100% !important;

        padding:
            max(8px, env(safe-area-inset-top))
            10px
            0 !important;
    }

    .nav-container {
        width: 100% !important;
        max-width: none !important;

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

        padding: 8px 10px !important;

        border-radius: 18px !important;

        gap: 8px !important;

        display: flex !important;
        flex-wrap: wrap !important;
    }

    .brand {
        min-width: 0 !important;
        flex: 1 1 auto !important;

        gap: 8px !important;

        font-size: 14px !important;
    }

    .brand-icon,
    .website-brand-logo-box {
        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        flex: 0 0 34px !important;

        border-radius: 10px !important;
    }

    .website-brand-logo {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
    }

    .nav-actions {
        display: flex !important;
        align-items: center !important;

        gap: 6px !important;

        flex: 0 0 auto !important;
    }

    .theme-button {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
    }

    .nav-actions .button-small {
        min-height: 38px !important;

        padding: 9px 12px !important;

        font-size: 12px !important;

        white-space: nowrap !important;
    }


    /* Navigation bleibt sichtbar */

    .nav-links {
        order: 3 !important;

        display: flex !important;

        width: 100% !important;

        gap: 8px !important;

        padding: 3px 0 1px !important;
        margin: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;

        scrollbar-width: none !important;

        -webkit-overflow-scrolling: touch;
    }

    .nav-links::-webkit-scrollbar {
        display: none !important;
    }

    .nav-links a {
        display: inline-flex !important;
        align-items: center !important;

        flex: 0 0 auto !important;

        padding: 8px 11px !important;

        border-radius: 10px !important;

        font-size: 12px !important;
        line-height: 1 !important;
    }


    /* -------------------------
       GENERELLE BREITEN
       ------------------------- */

    main,
    main > section {
        max-width: 100% !important;
    }

    section {
        box-sizing: border-box !important;
    }

    .hero,
    .section,
    .services-section,
    .home-materials-section,
    .projects-showcase,
    .project-process-section,
    .about-values-section,
    .about-principles,
    .project-final-cta,
    .about-final-cta {
        width: calc(100% - 20px) !important;
        max-width: none !important;

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


    /* -------------------------
       HERO
       ------------------------- */

    .hero {
        min-height: auto !important;

        padding:
            50px
            20px
            46px !important;

        margin-top: 10px !important;

        border-radius: 28px !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: none !important;

        gap: 30px !important;
    }

    .hero h1 {
        font-size: clamp(42px, 13vw, 60px) !important;
        line-height: .96 !important;

        letter-spacing: -0.045em !important;
    }

    .hero-description {
        font-size: 17px !important;
        line-height: 1.55 !important;
    }

    .hero-buttons {
        gap: 10px !important;

        flex-wrap: wrap !important;
    }


    /* -------------------------
       SECTION ABSTÄNDE
       ------------------------- */

    .services-section,
    .home-materials-section,
    .projects-showcase,
    .project-process-section,
    .about-values-section,
    .about-principles {
        padding-top: 65px !important;
        padding-bottom: 65px !important;
    }

    .section-heading,
    .home-materials-heading-row {
        margin-bottom: 30px !important;
    }

    .section-heading h2,
    .home-materials-heading-row h2 {
        font-size: clamp(36px, 10vw, 48px) !important;

        line-height: 1.02 !important;

        letter-spacing: -0.04em !important;
    }


    /* -------------------------
       LEISTUNGEN
       ------------------------- */

    .services-grid,
    .service-grid {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 14px !important;
    }

    .service-card,
    .page-services .service-card {
        grid-column: auto !important;

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

        padding: 28px !important;

        border-radius: 25px !important;
    }

    .service-card h3 {
        font-size: 25px !important;
    }

    .service-card p {
        font-size: 16px !important;

        line-height: 1.5 !important;
    }


    /* -------------------------
       MATERIALIEN STARTSEITE
       ------------------------- */

    .home-material-grid {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 14px !important;
    }

    .home-material-card {
        grid-column: auto !important;

        width: 100% !important;

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

        padding: 28px !important;

        border-radius: 26px !important;
    }

    .home-material-symbol {
        font-size: clamp(64px, 22vw, 100px) !important;

        line-height: .9 !important;

        margin:
            15px
            0
            30px !important;
    }

    .home-material-card h3 {
        font-size: 25px !important;
    }

    .home-material-card p {
        font-size: 16px !important;

        line-height: 1.5 !important;
    }


    /* -------------------------
       MATERIALSEITE
       ------------------------- */

    .materials-grid {
        grid-template-columns: 1fr !important;

        gap: 14px !important;
    }

    .material-detail-card,
    .material-detail-large {
        grid-column: auto !important;

        min-height: 0 !important;

        padding: 28px !important;

        border-radius: 26px !important;
    }


    /* Vergleichstabelle darf scrollen */

    .comparison-table {
        width: 100% !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch;
    }


    /* -------------------------
       PROJEKTE / ÜBER UNS
       ------------------------- */

    .projects-bento,
    .about-values-grid,
    .project-series-content,
    .about-value-wide {
        grid-template-columns: 1fr !important;

        gap: 14px !important;
    }

    .about-value-card,
    .about-value-large,
    .about-value-wide {
        min-height: 0 !important;

        padding:
            66px
            24px
            26px !important;
    }


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

    .project-final-cta,
    .about-final-cta,
    .final-cta,
    .home-final-cta {
        min-height: 0 !important;

        padding:
            44px
            24px !important;

        border-radius: 28px !important;
    }


    /* -------------------------
       FOOTER
       ------------------------- */

    .footer,
    .premium-footer {
        width: calc(100% - 20px) !important;

        margin:
            50px
            auto
            15px !important;

        border-radius: 28px !important;
    }

    .footer-container,
    .premium-footer-container {
        width: 100% !important;
        max-width: none !important;

        padding:
            34px
            24px
            24px !important;

        gap: 34px !important;
    }

    .footer-brand {
        width: 100% !important;
    }

    .footer-brand p {
        max-width: 100% !important;

        margin-top: 18px !important;

        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .footer-navigation {
        display: grid !important;

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

        gap:
            30px
            24px !important;
    }

    .footer-column {
        min-width: 0 !important;
    }

    .footer-column a {
        font-size: 15px !important;
    }

    .footer-bottom {
        margin-top: 10px !important;
        padding-top: 20px !important;

        gap: 6px !important;

        font-size: 13px !important;
    }
}


/* Noch kleinere iPhones */

@media screen and (max-width: 390px) {

    .brand > span {
        font-size: 13px !important;
    }

    .nav-actions .button-small {
        padding-left: 9px !important;
        padding-right: 9px !important;

        font-size: 11px !important;
    }

    .footer-navigation {
        gap:
            26px
            16px !important;
    }

}


/* MOBILE CLEAN FINAL END */


/* MOBILE DARKMODE BUTTON ROUND FIX */
@media screen and (max-width: 700px) {

    .theme-button {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;

        padding: 0 !important;

        border-radius: 50% !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 38px !important;

        aspect-ratio: 1 / 1 !important;
    }
}

/* MOBILE DARKMODE BUTTON ROUND FIX END */

/* MATERIALAUSWAHL PAGE START */

.material-selection-intro {
    width: min(1180px, calc(100% - 40px));
    margin: 40px auto 24px;
}

.material-selection-intro-inner {
    padding: clamp(26px, 4vw, 44px);
    border: 1px solid rgba(127, 127, 127, 0.18);
    border-radius: 28px;
    background: rgba(127, 127, 127, 0.06);
}

.material-selection-intro h2 {
    margin: 8px 0 12px;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
}

.material-selection-intro p {
    max-width: 760px;
}

.material-selection-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    font-size: 14px;
    opacity: 0.8;
}

.material-selection-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #30d158;
    box-shadow: 0 0 0 4px rgba(48, 209, 88, 0.12);
}

.material-selection-cta {
    width: min(1180px, calc(100% - 40px));
    margin: 60px auto;
}

.material-selection-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: clamp(26px, 4vw, 44px);
    border-radius: 28px;
    border: 1px solid rgba(127, 127, 127, 0.18);
    background: rgba(127, 127, 127, 0.06);
}

.material-selection-cta h2 {
    margin: 8px 0 10px;
}

.material-selection-cta p {
    max-width: 660px;
}

.material-selection-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 650;
    color: #ffffff;
    background: #0a84ff;
    transition:
        transform 0.18s ease,
        opacity 0.18s ease;
}

.material-selection-button:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

@media screen and (max-width: 700px) {

    .material-selection-intro,
    .material-selection-cta {
        width: min(100% - 28px, 1180px);
    }

    .material-selection-cta-inner {
        align-items: stretch;
        flex-direction: column;
    }

    .material-selection-button {
        width: 100%;
    }

}

/* MATERIALAUSWAHL PAGE END */





/* MATERIALAUSWAHL START */

.material-selection-page {
    padding-top: clamp(110px, 13vw, 170px);
}

.material-selection-hero {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
    padding-bottom: clamp(50px, 7vw, 90px);
}

.material-selection-hero h1 {
    margin: 10px 0 20px;
    font-size: clamp(2.8rem, 7vw, 5.7rem);
    line-height: .95;
    letter-spacing: -.055em;
}

.material-selection-lead {
    max-width: 760px;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.7;
    opacity: .78;
}

.material-selection-notice {
    max-width: 760px;
    margin-top: 30px;
    padding: 20px 22px;
    border: 1px solid rgba(127,127,127,.22);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(127,127,127,.06);
}

.material-selection-notice span {
    opacity: .72;
    line-height: 1.55;
}

.material-selection-back {
    display: inline-flex;
    margin-top: 24px;
    text-decoration: none;
    font-weight: 650;
}

.materials-live-standalone {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
    padding-bottom: 110px;
}

.material-selection-cta {
    width: min(1100px, calc(100% - 40px));
    margin: 70px auto 110px;
}

.material-selection-cta-inner {
    padding: clamp(28px, 5vw, 52px);
    border: 1px solid rgba(127,127,127,.22);
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background: rgba(127,127,127,.055);
}

.material-selection-cta-inner h2 {
    margin: 8px 0 12px;
    max-width: 680px;
}

.material-selection-cta-inner p {
    max-width: 680px;
    line-height: 1.6;
}

.material-selection-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    font-weight: 700;
    border: 1px solid currentColor;
}

@media screen and (max-width: 700px) {

    .material-selection-page {
        padding-top: 105px;
    }

    .material-selection-hero,
    .materials-live-standalone,
    .material-selection-cta {
        width: min(100% - 28px, 1100px);
    }

    .material-selection-hero {
        padding-bottom: 48px;
    }

    .material-selection-hero h1 {
        font-size: clamp(2.7rem, 14vw, 4.2rem);
    }

    .material-selection-notice {
        padding: 18px;
        border-radius: 16px;
    }

    .materials-live-standalone {
        padding-bottom: 75px;
    }

    .material-selection-cta {
        margin-top: 45px;
        margin-bottom: 75px;
    }

    .material-selection-cta-inner {
        padding: 25px 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .material-selection-cta-button {
        width: 100%;
        white-space: normal;
        text-align: center;
    }
}

/* MATERIALAUSWAHL END */

/* MATERIALAUSWAHL GROUPING START */

#materialSelectionGroups {
    display: grid;
    gap: 42px;
    width: 100%;
}

.ms-family {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.035);
    overflow: hidden;
}

.ms-family-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 32px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ms-family-header h2 {
    margin: 6px 0 0;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1;
    letter-spacing: -0.04em;
}

.ms-eyebrow,
.ms-subtype-label {
    display: block;
    color: #2997ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.ms-family-count {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}

.ms-subtype-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(300px, 1fr)
        );
    gap: 18px;
    padding: 22px;
}

.ms-subtype-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
}

.ms-subtype-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 22px 18px;
}

.ms-subtype-header h3 {
    margin: 5px 0 0;
    font-size: 21px;
    letter-spacing: -0.025em;
}

.ms-subtype-count {
    flex-shrink: 0;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.065);
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
}

.ms-color-list {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.ms-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 72px;
    padding: 15px 20px;
}

.ms-color-row + .ms-color-row {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-color-main {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.ms-color-swatch {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background:
        linear-gradient(
            135deg,
            #777,
            #333
        );
    box-shadow:
        inset 0 0 0 1px
        rgba(0, 0, 0, 0.18);
}

.ms-color-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.ms-color-info strong {
    font-size: 15px;
}

.ms-color-description {
    display: block;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-color-stock {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    flex-shrink: 0;
    gap: 5px;
}

.ms-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.58);
    font-size: 10px;
}

.ms-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #777;
}

.ms-status.is-available
.ms-status-dot {
    background: #30d158;
    box-shadow:
        0 0 10px
        rgba(48, 209, 88, 0.4);
}

.ms-status.is-unavailable
.ms-status-dot {
    background: #ff453a;
}

.ms-stock-value {
    color: rgba(255, 255, 255, 0.42);
    font-size: 11px;
}

.ms-loading,
.ms-empty,
.ms-error {
    padding: 42px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

@media (max-width: 720px) {

    #materialSelectionGroups {
        gap: 24px;
    }

    .ms-family {
        border-radius: 22px;
    }

    .ms-family-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px 22px 20px;
    }

    .ms-subtype-grid {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .ms-color-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .ms-color-stock {
        align-items: center;
        flex-direction: row;
        padding-left: 41px;
    }
}

/* MATERIALAUSWAHL GROUPING END */

/* MATERIALAUSWAHL ACCORDION START */

.ms-subtype-card {
    overflow: hidden;
}


/* Kopfzeile wird zum Button */
.ms-subtype-header {
    position: relative;
    cursor: pointer;
    user-select: none;

    padding-right: 62px;

    transition:
        background-color .18s ease;
}


.ms-subtype-header:hover {
    background:
        rgba(255,255,255,.025);
}


/* Pfeil rechts */
.ms-subtype-header::after {
    content: "›";

    position: absolute;
    right: 22px;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(0deg);

    font-size: 30px;
    line-height: 1;

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

    transition:
        transform .22s ease,
        color .18s ease;
}


.ms-subtype-header:hover::after {
    color:
        rgba(255,255,255,.85);
}


/* ========================================================
   STANDARD: FARBEN ZUGEKLAPPT
======================================================== */

.ms-subtype-card .ms-color-list {
    display: none;
}


/* ========================================================
   GEÖFFNET
======================================================== */

.ms-subtype-card.is-open .ms-color-list {
    display: block;
}


.ms-subtype-card.is-open
.ms-subtype-header::after {
    transform:
        translateY(-50%)
        rotate(90deg);

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


/* kleine Hervorhebung beim Öffnen */
.ms-subtype-card.is-open
.ms-subtype-header {
    background:
        rgba(255,255,255,.018);
}


/* Tastatur */
.ms-subtype-header:focus-visible {
    outline:
        2px solid #0a84ff;

    outline-offset:
        -2px;
}


/* Mobile */
@media (max-width: 700px) {

    .ms-subtype-header {
        padding-right:
            52px;
    }

    .ms-subtype-header::after {
        right:
            18px;
    }

}

/* MATERIALAUSWAHL ACCORDION END */

/* MATERIALAUSWAHL SKU + ACCORDION ANIMATION START */

.ms-subtype-header {
    position: relative;
    cursor: pointer;
    padding-right: 56px;
    user-select: none;
}

.ms-subtype-header::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid rgba(255,255,255,.55);
    border-bottom: 2px solid rgba(255,255,255,.55);
    transform:
        translateY(-65%)
        rotate(45deg);
    transition:
        transform .32s cubic-bezier(.4,0,.2,1),
        border-color .2s ease;
}

.ms-subtype-header:hover::after {
    border-color: rgba(255,255,255,.9);
}

.ms-subtype-card.is-open .ms-subtype-header::after {
    transform:
        translateY(-20%)
        rotate(225deg);
}

.ms-subtype-card .ms-color-list {
    display: block !important;
    max-height: 0 !important;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-8px);
    border-top-color: transparent !important;

    transition:
        max-height .45s cubic-bezier(.4,0,.2,1),
        opacity .24s ease,
        transform .35s cubic-bezier(.4,0,.2,1),
        border-color .2s ease;
}

.ms-subtype-card.is-open .ms-color-list {
    max-height: 8000px !important;
    opacity: 1;
    transform: translateY(0);
    border-top-color: rgba(255,255,255,.07) !important;
}

.ms-color-sku {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .ms-subtype-card .ms-color-list,
    .ms-subtype-header::after {
        transition: none !important;
    }
}

/* MATERIALAUSWAHL SKU + ACCORDION ANIMATION END */

/* MATERIALAUSWAHL REDESIGN START */


/* ========================================================
   HAUPTGRUPPE – PLA / PETG / ABS ...
======================================================== */

.ms-family {
    position: relative;
    overflow: hidden;

    margin-bottom: 22px;

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

    border-radius:
        26px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.032),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0 10px 32px rgba(0,0,0,.14);

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


.ms-family::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #0a84ff,
            rgba(10,132,255,.16),
            transparent 65%
        );

    opacity:
        .75;
}


/* ========================================================
   GRUPPENKOPF
======================================================== */

.ms-family-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    padding:
        24px 28px 20px;

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

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            transparent
        );
}


.ms-family-header > div:first-child {
    min-width: 0;
}


.ms-eyebrow {
    display: block;

    margin-bottom: 6px;

    color:
        #2997ff;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .18em;
}


.ms-family-header h2 {
    margin: 0;

    color:
        #f5f5f7;

    font-size:
        clamp(28px, 3vw, 38px);

    font-weight:
        720;

    line-height:
        1;

    letter-spacing:
        -.035em;
}


.ms-family-count {
    flex-shrink: 0;

    padding:
        7px 11px;

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

    border-radius:
        999px;

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

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

    font-size:
        11px;

    white-space:
        nowrap;
}


/* ========================================================
   VARIANTENBEREICH
======================================================== */

.ms-subtype-grid {
    display: grid !important;

    grid-template-columns:
        1fr !important;

    gap:
        10px !important;

    padding:
        16px 18px 18px !important;
}


/* ========================================================
   MATERIALVARIANTE
======================================================== */

.ms-subtype-card {
    overflow: hidden;

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

    border-radius:
        17px;

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

    box-shadow:
        none;

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


.ms-subtype-card:hover {
    border-color:
        rgba(255,255,255,.13);

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


.ms-subtype-card.is-open {
    border-color:
        rgba(41,151,255,.30);

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

    box-shadow:
        0 8px 26px rgba(0,0,0,.12),
        0 0 0 1px rgba(41,151,255,.025);
}


/* ========================================================
   VARIANTEN-KOPF
======================================================== */

.ms-subtype-header {
    min-height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        16px 58px 16px 20px !important;

    background:
        transparent !important;

    transition:
        background-color .2s ease;
}


.ms-subtype-header:hover {
    background:
        rgba(255,255,255,.022) !important;
}


.ms-subtype-card.is-open
.ms-subtype-header {
    background:
        rgba(41,151,255,.025) !important;
}


.ms-subtype-label {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #2997ff;

    font-size:
        9px;

    font-weight:
        750;

    letter-spacing:
        .16em;
}


.ms-subtype-header h3 {
    margin:
        0;

    color:
        #f5f5f7;

    font-size:
        18px;

    font-weight:
        650;

    letter-spacing:
        -.018em;
}


.ms-subtype-count {
    flex-shrink:
        0;

    padding:
        6px 10px;

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

    border-radius:
        999px;

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

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

    font-size:
        10px;

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


.ms-subtype-card.is-open
.ms-subtype-count {
    background:
        rgba(41,151,255,.10);

    color:
        rgba(117,190,255,.9);

    border-color:
        rgba(41,151,255,.14);
}


/* ========================================================
   PFEIL
======================================================== */

.ms-subtype-header::after {
    right:
        22px !important;

    width:
        8px !important;

    height:
        8px !important;

    border-width:
        0 2px 2px 0 !important;

    border-style:
        solid !important;

    border-color:
        rgba(255,255,255,.55) !important;

    background:
        transparent !important;
}


.ms-subtype-card.is-open
.ms-subtype-header::after {
    border-color:
        #2997ff !important;
}


/* ========================================================
   FARBEN
======================================================== */

.ms-color-list {
    background:
        rgba(0,0,0,.10);
}


.ms-color-row {
    min-height:
        64px;

    padding:
        13px 20px;

    transition:
        background-color .16s ease;
}


.ms-color-row:hover {
    background:
        rgba(255,255,255,.025);
}


.ms-color-row + .ms-color-row {
    border-top:
        1px solid rgba(255,255,255,.045);
}


.ms-color-main {
    gap:
        13px;
}


.ms-color-swatch {
    width:
        27px;

    height:
        27px;

    flex:
        0 0 27px;

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

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.10),
        0 2px 7px rgba(0,0,0,.22);
}


.ms-color-info strong {
    color:
        #f5f5f7;

    font-size:
        13px;

    font-weight:
        600;
}


.ms-color-sku {
    margin-top:
        3px;

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

    font-size:
        10px;

    letter-spacing:
        .015em;
}


/* ========================================================
   BESTAND / STATUS
======================================================== */

.ms-color-stock {
    gap:
        5px;
}


.ms-status {
    padding:
        5px 8px;

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

    border-radius:
        999px;

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

    font-size:
        9px;
}


.ms-stock-value {
    padding-right:
        2px;

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

    font-size:
        10px;
}


/* ========================================================
   DESKTOP – LEICHTER HOVER
======================================================== */

@media (hover: hover) {

    .ms-family:hover {
        border-color:
            rgba(255,255,255,.105);

        box-shadow:
            0 14px 38px rgba(0,0,0,.18);
    }

}


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

@media (max-width: 700px) {

    .ms-family {
        border-radius:
            20px;
    }


    .ms-family-header {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;

        padding:
            20px;
    }


    .ms-family-header h2 {
        font-size:
            30px;
    }


    .ms-family-count {
        padding:
            6px 9px;
    }


    .ms-subtype-grid {
        padding:
            12px !important;
    }


    .ms-subtype-header {
        min-height:
            70px;

        padding:
            14px 52px 14px 16px !important;
    }


    .ms-subtype-header::after {
        right:
            18px !important;
    }


    .ms-color-row {
        padding:
            13px 16px;
    }

}


/* MATERIALAUSWAHL REDESIGN END */

/* MATERIALAUSWAHL SIDEBAR START */

.ms-picker-layout {
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}


/* ========================================================
   LINKE NAVIGATION
======================================================== */

.ms-picker-sidebar {
    position: sticky;
    top: 92px;

    overflow: hidden;

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

    border-radius:
        22px;

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

    box-shadow:
        0 12px 32px rgba(0,0,0,.14);
}


.ms-picker-sidebar-head {
    padding:
        20px 18px 16px;

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


.ms-picker-sidebar-head span {
    display: block;

    margin-bottom:
        5px;

    color:
        #2997ff;

    font-size:
        9px;

    font-weight:
        750;

    letter-spacing:
        .17em;
}


.ms-picker-sidebar-head strong {
    color:
        #f5f5f7;

    font-size:
        15px;

    font-weight:
        650;
}


.ms-picker-nav {
    max-height:
        calc(100vh - 190px);

    overflow-y:
        auto;

    padding:
        10px;
}


.ms-picker-family + .ms-picker-family {
    margin-top:
        15px;
}


.ms-picker-family-title {
    padding:
        0 9px 6px;

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

    font-size:
        9px;

    font-weight:
        750;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.ms-picker-family-items {
    display: grid;
    gap: 3px;
}


.ms-picker-item {
    appearance: none;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    min-height: 42px;

    padding:
        9px 10px 9px 12px;

    border:
        1px solid transparent;

    border-radius:
        11px;

    background:
        transparent;

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

    text-align:
        left;

    cursor: pointer;

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


.ms-picker-item:hover {
    background:
        rgba(255,255,255,.045);

    color:
        #fff;
}


.ms-picker-item.is-active {
    border-color:
        rgba(41,151,255,.18);

    background:
        rgba(41,151,255,.12);

    color:
        #fff;
}


.ms-picker-item.is-active::before {
    content: "";

    width:
        3px;

    height:
        18px;

    flex:
        0 0 3px;

    margin-right:
        3px;

    border-radius:
        999px;

    background:
        #2997ff;
}


.ms-picker-item-main {
    flex:
        1;

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        12px;

    font-weight:
        580;
}


.ms-picker-item-count {
    min-width:
        25px;

    padding:
        4px 7px;

    border-radius:
        999px;

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

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

    font-size:
        9px;

    text-align:
        center;
}


.ms-picker-item.is-active
.ms-picker-item-count {
    background:
        rgba(41,151,255,.14);

    color:
        rgba(160,211,255,.95);
}


/* ========================================================
   RECHTE SEITE
======================================================== */

.ms-picker-content {
    min-width: 0;

    overflow: hidden;

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

    border-radius:
        24px;

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

    box-shadow:
        0 14px 36px rgba(0,0,0,.15);
}


.ms-picker-detail {
    opacity: 1;
    transform: translateX(0);

    transition:
        opacity .24s ease,
        transform .32s cubic-bezier(.4,0,.2,1);
}


.ms-picker-detail.is-entering {
    opacity: 0;
    transform:
        translateX(10px);
}


.ms-picker-detail-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 24px;

    padding:
        26px 26px 22px;

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

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.028),
            transparent
        );
}


.ms-picker-detail-eyebrow {
    display: block;

    margin-bottom:
        7px;

    color:
        #2997ff;

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        .17em;
}


.ms-picker-detail-header h2 {
    margin:
        0;

    color:
        #f5f5f7;

    font-size:
        30px;

    font-weight:
        720;

    letter-spacing:
        -.03em;
}


.ms-picker-detail-header p {
    margin:
        8px 0 0;

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

    font-size:
        12px;
}


.ms-picker-detail-count {
    flex-shrink:
        0;

    padding:
        7px 11px;

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

    border-radius:
        999px;

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

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

    font-size:
        10px;
}


/* vorhandene Farbreihen weiterverwenden */

.ms-picker-color-list
.ms-color-row {
    padding-left:
        24px;

    padding-right:
        24px;
}


.ms-picker-color-list
.ms-color-row:hover {
    background:
        rgba(255,255,255,.026);
}


/* ========================================================
   SCROLLBAR SIDEBAR
======================================================== */

.ms-picker-nav::-webkit-scrollbar {
    width:
        5px;
}


.ms-picker-nav::-webkit-scrollbar-track {
    background:
        transparent;
}


.ms-picker-nav::-webkit-scrollbar-thumb {
    border-radius:
        999px;

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


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

@media (max-width: 900px) {

    .ms-picker-layout {
        grid-template-columns:
            205px minmax(0,1fr);
    }

}


@media (max-width: 760px) {

    .ms-picker-layout {
        display:
            block;
    }


    .ms-picker-sidebar {
        position:
            relative;

        top:
            auto;

        margin-bottom:
            14px;
    }


    .ms-picker-sidebar-head {
        padding:
            16px;
    }


    .ms-picker-nav {
        display:
            flex;

        gap:
            10px;

        max-height:
            none;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        padding:
            10px 12px 13px;
    }


    .ms-picker-family {
        display:
            flex;

        align-items:
            center;

        flex-shrink:
            0;
    }


    .ms-picker-family + .ms-picker-family {
        margin-top:
            0;
    }


    .ms-picker-family-title {
        display:
            none;
    }


    .ms-picker-family-items {
        display:
            flex;

        gap:
            6px;
    }


    .ms-picker-item {
        width:
            auto;

        min-width:
            max-content;

        min-height:
            38px;

        padding:
            8px 10px;
    }


    .ms-picker-item.is-active::before {
        display:
            none;
    }


    .ms-picker-detail-header {
        padding:
            20px;

        flex-direction:
            column;

        gap:
            12px;
    }


    .ms-picker-detail-header h2 {
        font-size:
            26px;
    }


    .ms-picker-color-list
    .ms-color-row {
        padding-left:
            18px;

        padding-right:
            18px;
    }

}

/* MATERIALAUSWAHL SIDEBAR END */

/* MATERIALAUSWAHL LIGHT MODE START */

@media (prefers-color-scheme: light) {

    /* =====================================================
       SEITENBEREICH
    ===================================================== */

    .material-selection-page,
    .materials-live-standalone {
        color: #1d1d1f;
    }


    /* =====================================================
       SIDEBAR-LAYOUT
    ===================================================== */

    .ms-picker-sidebar,
    .ms-picker-content {
        background: rgba(255,255,255,.88) !important;

        border-color: rgba(0,0,0,.08) !important;

        box-shadow:
            0 12px 34px rgba(0,0,0,.07) !important;
    }


    .ms-picker-sidebar-head {
        border-bottom-color:
            rgba(0,0,0,.065) !important;
    }


    .ms-picker-sidebar-head strong {
        color:
            #1d1d1f !important;
    }


    .ms-picker-sidebar-head span,
    .ms-picker-detail-eyebrow,
    .ms-eyebrow,
    .ms-subtype-label {
        color:
            #0071e3 !important;
    }


    .ms-picker-family-title {
        color:
            #86868b !important;
    }


    /* =====================================================
       LINKE MATERIALAUSWAHL
    ===================================================== */

    .ms-picker-item {
        color:
            #515154 !important;
    }


    .ms-picker-item:hover {
        background:
            #f5f5f7 !important;

        color:
            #1d1d1f !important;
    }


    .ms-picker-item.is-active {
        background:
            #e8f2ff !important;

        border-color:
            rgba(0,113,227,.16) !important;

        color:
            #1d1d1f !important;
    }


    .ms-picker-item.is-active::before {
        background:
            #0071e3 !important;
    }


    .ms-picker-item-count {
        background:
            #f2f2f4 !important;

        color:
            #86868b !important;
    }


    .ms-picker-item.is-active
    .ms-picker-item-count {
        background:
            rgba(0,113,227,.10) !important;

        color:
            #0071e3 !important;
    }


    /* =====================================================
       RECHTE MATERIALANSICHT
    ===================================================== */

    .ms-picker-detail-header {
        background:
            linear-gradient(
                180deg,
                #ffffff,
                #fafafa
            ) !important;

        border-bottom-color:
            rgba(0,0,0,.065) !important;
    }


    .ms-picker-detail-header h2 {
        color:
            #1d1d1f !important;
    }


    .ms-picker-detail-header p {
        color:
            #6e6e73 !important;
    }


    .ms-picker-detail-count {
        background:
            #f2f2f4 !important;

        border-color:
            rgba(0,0,0,.055) !important;

        color:
            #6e6e73 !important;
    }


    /* =====================================================
       ALTE / ALTERNATIVE GRUPPENDARSTELLUNG
    ===================================================== */

    .ms-family {
        background:
            linear-gradient(
                180deg,
                #ffffff,
                #fbfbfc
            ) !important;

        border-color:
            rgba(0,0,0,.08) !important;

        box-shadow:
            0 12px 34px rgba(0,0,0,.07) !important;
    }


    .ms-family::before {
        background:
            linear-gradient(
                90deg,
                #0071e3,
                rgba(0,113,227,.18),
                transparent 70%
            ) !important;
    }


    .ms-family-header {
        background:
            transparent !important;

        border-bottom-color:
            rgba(0,0,0,.06) !important;
    }


    .ms-family-header h2 {
        color:
            #1d1d1f !important;
    }


    .ms-family-count {
        background:
            #f2f2f4 !important;

        border-color:
            rgba(0,0,0,.05) !important;

        color:
            #6e6e73 !important;
    }


    /* =====================================================
       MATERIALVARIANTEN
    ===================================================== */

    .ms-subtype-card {
        background:
            #ffffff !important;

        border-color:
            rgba(0,0,0,.075) !important;

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


    .ms-subtype-card:hover {
        background:
            #fbfbfc !important;

        border-color:
            rgba(0,0,0,.12) !important;
    }


    .ms-subtype-card.is-open {
        background:
            #ffffff !important;

        border-color:
            rgba(0,113,227,.28) !important;

        box-shadow:
            0 8px 25px rgba(0,0,0,.055) !important;
    }


    .ms-subtype-header,
    .ms-subtype-header:hover,
    .ms-subtype-card.is-open
    .ms-subtype-header {
        background:
            transparent !important;
    }


    .ms-subtype-header h3 {
        color:
            #1d1d1f !important;
    }


    .ms-subtype-count {
        background:
            #f2f2f4 !important;

        border-color:
            rgba(0,0,0,.05) !important;

        color:
            #6e6e73 !important;
    }


    .ms-subtype-card.is-open
    .ms-subtype-count {
        background:
            #e8f2ff !important;

        border-color:
            rgba(0,113,227,.10) !important;

        color:
            #0071e3 !important;
    }


    /* Pfeil */

    .ms-subtype-header::after {
        border-color:
            #86868b !important;
    }


    .ms-subtype-card.is-open
    .ms-subtype-header::after {
        border-color:
            #0071e3 !important;
    }


    /* =====================================================
       FARBEN
    ===================================================== */

    .ms-color-list,
    .ms-picker-color-list {
        background:
            #ffffff !important;
    }


    .ms-color-row {
        background:
            #ffffff !important;

        border-color:
            rgba(0,0,0,.055) !important;
    }


    .ms-color-row:hover {
        background:
            #f8f8fa !important;
    }


    .ms-color-row + .ms-color-row {
        border-top-color:
            rgba(0,0,0,.055) !important;
    }


    .ms-color-info strong {
        color:
            #1d1d1f !important;
    }


    .ms-color-description {
        color:
            #6e6e73 !important;
    }


    .ms-color-sku {
        color:
            #8e8e93 !important;
    }


    .ms-color-swatch {
        border-color:
            rgba(0,0,0,.15) !important;

        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.15),
            0 2px 6px rgba(0,0,0,.10) !important;
    }


    /* =====================================================
       VERFÜGBARKEIT
    ===================================================== */

    .ms-status {
        background:
            #f4f4f6 !important;

        border-color:
            rgba(0,0,0,.05) !important;

        color:
            #6e6e73 !important;
    }


    .ms-status.is-available {
        background:
            #edf9f1 !important;

        color:
            #248a3d !important;
    }


    .ms-status.is-unavailable {
        background:
            #fff0f0 !important;

        color:
            #d70015 !important;
    }


    .ms-stock-value {
        color:
            #86868b !important;
    }


    /* =====================================================
       SCROLLBAR
    ===================================================== */

    .ms-picker-nav::-webkit-scrollbar-thumb {
        background:
            rgba(0,0,0,.13) !important;
    }

}


/* Manuell erzwungener Light Mode */
html[data-theme="light"] .ms-picker-sidebar,
html[data-theme="light"] .ms-picker-content,
html[data-theme="light"] .ms-family,
html[data-theme="light"] .ms-subtype-card,
html[data-theme="light"] .ms-color-row {
    color: #1d1d1f;
}

/* MATERIALAUSWAHL LIGHT MODE END */

/* MATERIALAUSWAHL LIGHT FINAL START */

@media (prefers-color-scheme: light) {

    /* Gesamte Auswahl */
    .ms-picker-sidebar,
    .ms-picker-content {
        background: #ffffff !important;
        border-color: rgba(0,0,0,.08) !important;
        color: #1d1d1f !important;

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


    /* Linker Kopf */
    .ms-picker-sidebar-head {
        background: #ffffff !important;
        border-bottom-color: rgba(0,0,0,.06) !important;
    }

    .ms-picker-sidebar-head span {
        color: #0071e3 !important;
    }

    .ms-picker-sidebar-head strong {
        color: #1d1d1f !important;
    }


    /* PLA / PETG / ABS Überschriften links */
    .ms-picker-family-title {
        color: #86868b !important;
    }


    /* Auswahlzeilen links */
    .ms-picker-item,
    .ms-picker-item-main {
        color: #3a3a3c !important;
    }

    .ms-picker-item:hover {
        background: #f5f5f7 !important;
        color: #1d1d1f !important;
    }

    .ms-picker-item:hover .ms-picker-item-main {
        color: #1d1d1f !important;
    }

    .ms-picker-item.is-active {
        background: #e8f2ff !important;
        border-color: rgba(0,113,227,.18) !important;
        color: #1d1d1f !important;
    }

    .ms-picker-item.is-active .ms-picker-item-main {
        color: #1d1d1f !important;
        font-weight: 650 !important;
    }

    .ms-picker-item.is-active::before {
        background: #0071e3 !important;
    }


    /* Anzahl links */
    .ms-picker-item-count {
        background: #eeeeF0 !important;
        color: #6e6e73 !important;
    }

    .ms-picker-item.is-active .ms-picker-item-count {
        background: rgba(0,113,227,.11) !important;
        color: #0071e3 !important;
    }


    /* Rechte Kopfzeile */
    .ms-picker-detail-header {
        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                #fafafa 100%
            ) !important;

        border-bottom-color:
            rgba(0,0,0,.065) !important;
    }

    .ms-picker-detail-eyebrow {
        color: #0071e3 !important;
    }

    .ms-picker-detail-header h2 {
        color: #1d1d1f !important;
    }

    .ms-picker-detail-header p {
        color: #6e6e73 !important;
    }

    .ms-picker-detail-count {
        background: #f2f2f4 !important;
        border-color: rgba(0,0,0,.055) !important;
        color: #6e6e73 !important;
    }


    /* Farbliste rechts */
    .ms-picker-color-list {
        background: #ffffff !important;
    }

    .ms-picker-color-list .ms-color-row {
        background: #ffffff !important;
        border-color: rgba(0,0,0,.055) !important;
    }

    .ms-picker-color-list .ms-color-row:hover {
        background: #f7f7f9 !important;
    }


    /* Farbname */
    .ms-color-info,
    .ms-color-info strong {
        color: #1d1d1f !important;
    }


    /* Artikelnummer / Beschreibung */
    .ms-color-description {
        color: #6e6e73 !important;
    }

    .ms-color-sku {
        color: #86868b !important;
    }


    /* Bestand */
    .ms-stock-value {
        color: #6e6e73 !important;
    }


    /* Status */
    .ms-status {
        color: #6e6e73 !important;
        background: #f2f2f4 !important;
        border-color: rgba(0,0,0,.05) !important;
    }

    .ms-status.is-available {
        color: #248a3d !important;
        background: #edf8f0 !important;
    }

    .ms-status.is-unavailable {
        color: #d70015 !important;
        background: #fff0f0 !important;
    }


    /* Farbkreise */
    .ms-color-swatch {
        border-color: rgba(0,0,0,.16) !important;

        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.20),
            0 2px 6px rgba(0,0,0,.12) !important;
    }

}

/* MATERIALAUSWAHL LIGHT FINAL END */

/* MATERIALAUSWAHL DATA-THEME LIGHT START */


/* ========================================================
   GRUNDLAYOUT
======================================================== */

html[data-theme="light"] .ms-picker-layout {
    color: #1d1d1f !important;
}


html[data-theme="light"] .ms-picker-sidebar,
html[data-theme="light"] .ms-picker-content {
    background: #ffffff !important;

    border-color:
        rgba(0,0,0,.08) !important;

    color:
        #1d1d1f !important;

    box-shadow:
        0 12px 32px rgba(0,0,0,.075) !important;
}


/* ========================================================
   SIDEBAR KOPF
======================================================== */

html[data-theme="light"] .ms-picker-sidebar-head {
    background:
        #ffffff !important;

    border-bottom-color:
        rgba(0,0,0,.065) !important;
}


html[data-theme="light"] .ms-picker-sidebar-head span {
    color:
        #0071e3 !important;
}


html[data-theme="light"] .ms-picker-sidebar-head strong {
    color:
        #1d1d1f !important;
}


/* ========================================================
   MATERIALGRUPPEN LINKS
======================================================== */

html[data-theme="light"] .ms-picker-family-title {
    color:
        #86868b !important;
}


/* ========================================================
   FILAMENTAUSWAHL LINKS
======================================================== */

html[data-theme="light"] .ms-picker-item {
    background:
        transparent !important;

    border-color:
        transparent !important;

    color:
        #515154 !important;
}


html[data-theme="light"] .ms-picker-item-main {
    color:
        #515154 !important;
}


html[data-theme="light"] .ms-picker-item:hover {
    background:
        #f5f5f7 !important;

    color:
        #1d1d1f !important;
}


html[data-theme="light"] .ms-picker-item:hover
.ms-picker-item-main {
    color:
        #1d1d1f !important;
}


html[data-theme="light"] .ms-picker-item.is-active {
    background:
        #e8f2ff !important;

    border-color:
        rgba(0,113,227,.18) !important;

    color:
        #1d1d1f !important;
}


html[data-theme="light"] .ms-picker-item.is-active
.ms-picker-item-main {
    color:
        #1d1d1f !important;

    font-weight:
        650 !important;
}


html[data-theme="light"] .ms-picker-item.is-active::before {
    background:
        #0071e3 !important;
}


html[data-theme="light"] .ms-picker-item-count {
    background:
        #f0f0f2 !important;

    color:
        #6e6e73 !important;
}


html[data-theme="light"] .ms-picker-item.is-active
.ms-picker-item-count {
    background:
        rgba(0,113,227,.11) !important;

    color:
        #0071e3 !important;
}


/* ========================================================
   RECHTE KARTE
======================================================== */

html[data-theme="light"] .ms-picker-detail {
    color:
        #1d1d1f !important;
}


html[data-theme="light"] .ms-picker-detail-header {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfbfc 100%
        ) !important;

    border-bottom-color:
        rgba(0,0,0,.065) !important;
}


html[data-theme="light"] .ms-picker-detail-eyebrow {
    color:
        #0071e3 !important;
}


html[data-theme="light"] .ms-picker-detail-header h2 {
    color:
        #1d1d1f !important;
}


html[data-theme="light"] .ms-picker-detail-header p {
    color:
        #6e6e73 !important;
}


html[data-theme="light"] .ms-picker-detail-count {
    background:
        #f1f1f3 !important;

    border-color:
        rgba(0,0,0,.055) !important;

    color:
        #6e6e73 !important;
}


/* ========================================================
   FARBEN
======================================================== */

html[data-theme="light"] .ms-picker-color-list,
html[data-theme="light"] .ms-color-list {
    background:
        #ffffff !important;
}


html[data-theme="light"] .ms-color-row {
    background:
        #ffffff !important;

    color:
        #1d1d1f !important;

    border-color:
        rgba(0,0,0,.055) !important;
}


html[data-theme="light"] .ms-color-row + .ms-color-row {
    border-top-color:
        rgba(0,0,0,.055) !important;
}


html[data-theme="light"] .ms-color-row:hover {
    background:
        #f7f7f9 !important;
}


/* Farbname */

html[data-theme="light"] .ms-color-info,
html[data-theme="light"] .ms-color-info strong {
    color:
        #1d1d1f !important;
}


/* Beschreibung */

html[data-theme="light"] .ms-color-description {
    color:
        #6e6e73 !important;
}


/* Artikelnummer */

html[data-theme="light"] .ms-color-sku {
    color:
        #86868b !important;
}


/* ========================================================
   BESTAND
======================================================== */

html[data-theme="light"] .ms-color-stock {
    color:
        #6e6e73 !important;
}


html[data-theme="light"] .ms-stock-value {
    color:
        #6e6e73 !important;
}


/* ========================================================
   STATUS
======================================================== */

html[data-theme="light"] .ms-status {
    background:
        #f2f2f4 !important;

    border-color:
        rgba(0,0,0,.05) !important;

    color:
        #6e6e73 !important;
}


html[data-theme="light"] .ms-status.is-available {
    background:
        #edf8f0 !important;

    color:
        #248a3d !important;
}


html[data-theme="light"] .ms-status.is-unavailable {
    background:
        #fff0f0 !important;

    color:
        #d70015 !important;
}


html[data-theme="light"] .ms-status.is-available
.ms-status-dot {
    background:
        #30d158 !important;
}


html[data-theme="light"] .ms-status.is-unavailable
.ms-status-dot {
    background:
        #ff3b30 !important;
}


/* ========================================================
   FARBPUNKTE
======================================================== */

html[data-theme="light"] .ms-color-swatch {
    border-color:
        rgba(0,0,0,.18) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.18),
        0 2px 6px rgba(0,0,0,.12) !important;
}


/* ========================================================
   SCROLLBAR
======================================================== */

html[data-theme="light"] .ms-picker-nav::-webkit-scrollbar-thumb {
    background:
        rgba(0,0,0,.14) !important;
}


/* MATERIALAUSWAHL DATA-THEME LIGHT END */

/* MATERIALAUSWAHL MOBILE FINAL START */

@media (max-width: 760px) {

    /* =====================================================
       GESAMTBREITE
    ===================================================== */

    #materialSelectionGroups {
        width: 100%;
        margin-top: 28px;
    }


    .ms-picker-layout {
        display: block !important;
        width: 100%;
    }


    /* =====================================================
       FILAMENTAUSWAHL OBEN
    ===================================================== */

    .ms-picker-sidebar {
        position: relative !important;
        top: auto !important;

        width: 100%;

        margin: 0 0 18px !important;

        border-radius: 20px !important;

        overflow: hidden;

        box-shadow:
            0 8px 24px rgba(0,0,0,.12) !important;
    }


    .ms-picker-sidebar-head {
        padding: 17px 18px 14px !important;
    }


    .ms-picker-sidebar-head span {
        margin-bottom: 6px !important;

        font-size: 9px !important;
        letter-spacing: .16em !important;
    }


    .ms-picker-sidebar-head strong {
        font-size: 17px !important;
        line-height: 1.2 !important;
    }


    /* Horizontale Tabs */

    .ms-picker-nav {
        display: flex !important;

        width: 100%;

        max-height: none !important;

        gap: 8px !important;

        padding: 10px 12px 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x proximity;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }


    .ms-picker-nav::-webkit-scrollbar {
        display: none;
    }


    .ms-picker-family {
        display: contents !important;
    }


    .ms-picker-family-title {
        display: none !important;
    }


    .ms-picker-family-items {
        display: contents !important;
    }


    .ms-picker-item {
        flex: 0 0 auto !important;

        width: auto !important;
        min-width: max-content !important;

        min-height: 44px !important;

        padding: 10px 13px !important;

        border-radius: 14px !important;

        scroll-snap-align: start;

        font-size: 13px !important;
    }


    .ms-picker-item.is-active::before {
        display: none !important;
    }


    .ms-picker-item-main {
        font-size: 13px !important;
        font-weight: 600 !important;
    }


    .ms-picker-item-count {
        min-width: 27px !important;

        padding: 4px 7px !important;

        font-size: 10px !important;
    }


    /* =====================================================
       RECHTE MATERIALKARTE
    ===================================================== */

    .ms-picker-content {
        width: 100%;

        border-radius: 22px !important;

        overflow: hidden;
    }


    .ms-picker-detail-header {
        display: block !important;

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


    .ms-picker-detail-eyebrow {
        margin-bottom: 8px !important;

        font-size: 10px !important;

        letter-spacing: .16em !important;
    }


    .ms-picker-detail-header h2 {
        margin: 0 !important;

        font-size: 28px !important;

        line-height: 1.05 !important;

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


    .ms-picker-detail-header p {
        margin: 9px 0 0 !important;

        font-size: 13px !important;

        line-height: 1.45 !important;
    }


    .ms-picker-detail-count {
        display: inline-flex !important;

        margin-top: 14px !important;

        padding: 6px 10px !important;

        font-size: 10px !important;
    }


    /* =====================================================
       FARBZEILEN
    ===================================================== */

    .ms-picker-color-list .ms-color-row,
    .ms-color-row {
        min-height: 68px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 12px !important;

        padding: 12px 16px !important;
    }


    .ms-color-main {
        min-width: 0;

        display: flex !important;

        align-items: center !important;

        gap: 12px !important;
    }


    .ms-color-swatch {
        width: 31px !important;
        height: 31px !important;

        flex: 0 0 31px !important;

        border-radius: 50% !important;
    }


    .ms-color-info {
        min-width: 0;
    }


    .ms-color-info strong {
        display: block;

        font-size: 14px !important;

        line-height: 1.2 !important;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .ms-color-description {
        margin-top: 3px !important;

        font-size: 10px !important;

        line-height: 1.25 !important;
    }


    .ms-color-sku {
        display: block !important;

        margin-top: 3px !important;

        font-size: 10px !important;
    }


    /* =====================================================
       STATUS RECHTS
    ===================================================== */

    .ms-color-stock {
        flex: 0 0 auto;

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-end !important;

        gap: 5px !important;
    }


    .ms-status {
        padding: 5px 7px !important;

        font-size: 9px !important;

        white-space: nowrap;
    }


    .ms-stock-value {
        font-size: 10px !important;

        white-space: nowrap;
    }


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

    .page-materials h1 {
        font-size: clamp(38px, 11vw, 52px) !important;

        line-height: .98 !important;

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


    /* =====================================================
       SEHR KLEINE IPHONES
    ===================================================== */

    @media (max-width: 390px) {

        .ms-picker-detail-header {
            padding: 18px 16px !important;
        }


        .ms-picker-color-list .ms-color-row,
        .ms-color-row {
            padding: 11px 14px !important;
        }


        .ms-color-swatch {
            width: 28px !important;
            height: 28px !important;

            flex-basis: 28px !important;
        }


        .ms-status {
            font-size: 8px !important;
        }

    }

}

/* MATERIALAUSWAHL MOBILE FINAL END */

/* MATERIALAUSWAHL MOBILE REDESIGN V2 START */

@media (max-width: 760px) {

    /* ==============================================
       SEITENABSTÄNDE
    ============================================== */

    body.page-materials main,
    body.page-materials .page-main,
    body.page-materials .subpage-main {
        padding-top: 0 !important;
    }

    body.page-materials section {
        min-height: 0 !important;
    }

    body.page-materials .materials-live-section,
    body.page-materials .material-selection-section,
    body.page-materials .materials-section {
        padding-top: 34px !important;
        padding-bottom: 42px !important;
        min-height: 0 !important;
    }


    /* ==============================================
       HAUPTTITEL KOMPAKTER
    ============================================== */

    body.page-materials h1 {
        font-size: 44px !important;
        line-height: .98 !important;
        letter-spacing: -.045em !important;
    }

    body.page-materials h2 {
        line-height: 1.05;
    }


    #materialSelectionGroups {
        margin-top: 26px !important;
    }


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

    .ms-picker-layout {
        display: block !important;
    }


    /* ==============================================
       FILAMENTAUSWAHL
    ============================================== */

    .ms-picker-sidebar {
        position: static !important;

        width: 100% !important;

        margin: 0 0 16px !important;

        border-radius: 20px !important;

        overflow: hidden !important;
    }


    .ms-picker-sidebar-head {
        padding: 17px 18px 14px !important;
    }


    .ms-picker-sidebar-head span {
        font-size: 9px !important;
    }


    .ms-picker-sidebar-head strong {
        font-size: 18px !important;
    }


    /* Kein horizontales Scrollen mehr */

    .ms-picker-nav {
        display: grid !important;

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

        gap: 8px !important;

        width: 100% !important;

        max-height: none !important;

        padding: 12px !important;

        overflow: visible !important;
    }


    .ms-picker-family,
    .ms-picker-family-items {
        display: contents !important;
    }


    .ms-picker-family-title {
        display: none !important;
    }


    .ms-picker-item {
        width: 100% !important;

        min-width: 0 !important;
        min-height: 48px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        padding: 10px 11px !important;

        border-radius: 13px !important;
    }


    .ms-picker-item.is-active::before {
        display: none !important;
    }


    .ms-picker-item-main {
        min-width: 0 !important;

        font-size: 13px !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        white-space: nowrap !important;
    }


    .ms-picker-item-count {
        flex-shrink: 0 !important;

        margin-left: 7px !important;
    }


    /* ==============================================
       MATERIALDETAIL
    ============================================== */

    .ms-picker-content {
        width: 100% !important;

        border-radius: 20px !important;
    }


    .ms-picker-detail-header {
        padding: 20px 18px !important;
    }


    .ms-picker-detail-header h2 {
        font-size: 29px !important;
        line-height: 1 !important;
    }


    .ms-picker-detail-header p {
        margin-top: 9px !important;

        font-size: 13px !important;
        line-height: 1.4 !important;
    }


    .ms-picker-detail-count {
        margin-top: 13px !important;
    }


    /* ==============================================
       FARBEN
    ============================================== */

    .ms-picker-color-list {
        padding: 8px !important;
    }


    .ms-color-row,
    .ms-picker-color-list .ms-color-row {
        min-height: 76px !important;

        margin: 0 0 7px !important;

        padding: 12px 13px !important;

        border: 1px solid rgba(255,255,255,.07) !important;

        border-radius: 15px !important;
    }


    .ms-color-row:last-child {
        margin-bottom: 0 !important;
    }


    .ms-color-main {
        gap: 11px !important;
    }


    .ms-color-swatch {
        width: 34px !important;
        height: 34px !important;

        flex: 0 0 34px !important;
    }


    .ms-color-info strong {
        font-size: 14px !important;
    }


    .ms-color-sku {
        font-size: 9px !important;
    }


    .ms-color-stock {
        max-width: 105px !important;

        align-items: flex-end !important;

        text-align: right !important;
    }


    .ms-status {
        font-size: 8px !important;

        padding: 5px 7px !important;
    }


    .ms-stock-value {
        font-size: 9px !important;
    }


    /* ==============================================
       DARK MODE
    ============================================== */

    html[data-theme="dark"]
    .ms-color-row {
        background:
            rgba(255,255,255,.025) !important;
    }


    html[data-theme="dark"]
    .ms-color-row:hover {
        background:
            rgba(255,255,255,.045) !important;
    }


    /* ==============================================
       LIGHT MODE
    ============================================== */

    html[data-theme="light"]
    .ms-color-row {
        background:
            #ffffff !important;

        border-color:
            rgba(0,0,0,.07) !important;
    }


    html[data-theme="light"]
    .ms-picker-color-list {
        background:
            #f5f5f7 !important;
    }

}


/* Sehr kleine iPhones */

@media (max-width: 390px) {

    .ms-picker-nav {
        grid-template-columns:
            1fr 1fr !important;
    }


    body.page-materials h1 {
        font-size:
            39px !important;
    }

}

/* MATERIALAUSWAHL MOBILE REDESIGN V2 END */

/* MATERIALAUSWAHL HERO MOBILE START */

@media (max-width: 760px) {

    body.page-materials .materials-hero h1,
    body.page-materials .page-hero h1,
    body.page-materials .hero h1 {
        font-size: clamp(40px, 11vw, 54px) !important;
        line-height: .98 !important;
        letter-spacing: -.045em !important;

        max-width: 100% !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

}

@media (max-width: 390px) {

    body.page-materials .materials-hero h1,
    body.page-materials .page-hero h1,
    body.page-materials .hero h1 {
        font-size: 39px !important;
    }

}

/* MATERIALAUSWAHL HERO MOBILE END */

/* MATERIALAUSWAHL MOBILE POLISH V3 START */

@media (max-width: 760px) {

    /* -----------------------------------------------------
       NAVIGATION
    ----------------------------------------------------- */

    body.page-materials .nav-container {
        border-radius: 22px !important;
    }


    /* -----------------------------------------------------
       OBERER HERO-BEREICH
    ----------------------------------------------------- */

    body.page-materials .page-hero,
    body.page-materials .materials-hero,
    body.page-materials .hero-content {
        min-height: 0 !important;

        padding:
            38px 26px 34px !important;

        border-radius:
            28px !important;
    }


    body.page-materials .page-hero .eyebrow,
    body.page-materials .materials-hero .eyebrow,
    body.page-materials .hero-eyebrow {
        margin-bottom:
            20px !important;

        font-size:
            11px !important;

        letter-spacing:
            .22em !important;
    }


    body.page-materials .page-hero h1,
    body.page-materials .materials-hero h1,
    body.page-materials .hero-content h1 {
        max-width:
            100% !important;

        margin:
            0 !important;

        font-size:
            clamp(42px, 12vw, 56px) !important;

        line-height:
            .94 !important;

        letter-spacing:
            -.055em !important;

        word-break:
            normal !important;

        overflow-wrap:
            normal !important;

        hyphens:
            none !important;
    }


    body.page-materials .page-hero p,
    body.page-materials .materials-hero p,
    body.page-materials .hero-content > p {
        max-width:
            620px !important;

        margin:
            26px 0 0 !important;

        font-size:
            17px !important;

        line-height:
            1.5 !important;
    }


    /* -----------------------------------------------------
       LAGERBESTAND INFO
    ----------------------------------------------------- */

    body.page-materials .hero-info,
    body.page-materials .stock-info,
    body.page-materials .availability-info {
        margin-top:
            28px !important;

        padding:
            18px !important;

        border-radius:
            18px !important;
    }


    body.page-materials .hero-info strong,
    body.page-materials .stock-info strong,
    body.page-materials .availability-info strong {
        font-size:
            15px !important;
    }


    body.page-materials .hero-info p,
    body.page-materials .stock-info p,
    body.page-materials .availability-info p {
        margin-top:
            5px !important;

        font-size:
            13px !important;

        line-height:
            1.45 !important;
    }


    /* -----------------------------------------------------
       MATERIALAUSWAHL
    ----------------------------------------------------- */

    #materialSelectionGroups {
        margin-top:
            30px !important;
    }


    .ms-picker-sidebar {
        margin-bottom:
            14px !important;

        border-radius:
            20px !important;
    }


    .ms-picker-sidebar-head {
        padding:
            16px 16px 13px !important;
    }


    .ms-picker-sidebar-head strong {
        font-size:
            16px !important;
    }


    .ms-picker-nav {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            7px !important;

        padding:
            10px !important;
    }


    .ms-picker-item {
        min-height:
            54px !important;

        padding:
            10px 12px !important;

        border-radius:
            14px !important;
    }


    .ms-picker-item-main {
        font-size:
            13px !important;
    }


    /* -----------------------------------------------------
       MATERIALDETAIL
    ----------------------------------------------------- */

    .ms-picker-content {
        border-radius:
            20px !important;
    }


    .ms-picker-detail-header {
        padding:
            21px 18px 18px !important;
    }


    .ms-picker-detail-eyebrow {
        margin-bottom:
            8px !important;

        font-size:
            10px !important;
    }


    .ms-picker-detail-header h2 {
        font-size:
            30px !important;

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


    .ms-picker-detail-header p {
        margin-top:
            8px !important;

        font-size:
            13px !important;
    }


    .ms-picker-detail-count {
        margin-top:
            12px !important;
    }


    /* -----------------------------------------------------
       FARBEN – KOMPAKTE ZEILEN
    ----------------------------------------------------- */

    .ms-picker-color-list {
        padding:
            8px !important;
    }


    .ms-picker-color-list .ms-color-row,
    .ms-color-row {
        min-height:
            74px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            space-between !important;

        gap:
            12px !important;

        margin-bottom:
            7px !important;

        padding:
            12px 14px !important;

        border-radius:
            16px !important;
    }


    .ms-color-main {
        flex:
            1 1 auto !important;

        min-width:
            0 !important;

        display:
            flex !important;

        align-items:
            center !important;

        gap:
            12px !important;
    }


    .ms-color-swatch {
        width:
            38px !important;

        height:
            38px !important;

        flex:
            0 0 38px !important;

        border-radius:
            50% !important;
    }


    .ms-color-info {
        min-width:
            0 !important;
    }


    .ms-color-info strong {
        display:
            block !important;

        font-size:
            15px !important;

        line-height:
            1.15 !important;
    }


    .ms-color-description {
        margin-top:
            3px !important;

        font-size:
            10px !important;
    }


    .ms-color-sku {
        margin-top:
            3px !important;

        font-size:
            9px !important;
    }


    /* -----------------------------------------------------
       STATUS RECHTS
    ----------------------------------------------------- */

    .ms-color-stock {
        flex:
            0 0 auto !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            flex-end !important;

        justify-content:
            center !important;

        gap:
            5px !important;

        text-align:
            right !important;
    }


    .ms-status {
        padding:
            5px 8px !important;

        font-size:
            9px !important;

        white-space:
            nowrap !important;
    }


    .ms-stock-value {
        padding-right:
            2px !important;

        font-size:
            10px !important;
    }


    /* -----------------------------------------------------
       DARK MODE
    ----------------------------------------------------- */

    html[data-theme="dark"] .ms-color-row {
        background:
            rgba(255,255,255,.025) !important;

        border:
            1px solid rgba(255,255,255,.075) !important;
    }


    html[data-theme="dark"] .ms-color-row:active {
        background:
            rgba(255,255,255,.055) !important;
    }


    /* -----------------------------------------------------
       LIGHT MODE
    ----------------------------------------------------- */

    html[data-theme="light"] .ms-picker-color-list {
        background:
            #f5f5f7 !important;
    }


    html[data-theme="light"] .ms-color-row {
        background:
            #ffffff !important;

        border:
            1px solid rgba(0,0,0,.065) !important;

        box-shadow:
            0 2px 8px rgba(0,0,0,.035) !important;
    }

}


/* Kleine iPhones */

@media (max-width: 390px) {

    body.page-materials .page-hero h1,
    body.page-materials .materials-hero h1,
    body.page-materials .hero-content h1 {
        font-size:
            40px !important;
    }


    body.page-materials .page-hero,
    body.page-materials .materials-hero,
    body.page-materials .hero-content {
        padding:
            32px 22px 30px !important;
    }


    .ms-color-swatch {
        width:
            34px !important;

        height:
            34px !important;

        flex-basis:
            34px !important;
    }

}

/* MATERIALAUSWAHL MOBILE POLISH V3 END */