:root{
    --bg-left: #f4e5f5;
    --bg-center: #f7f7fb;
    --bg-right: #f7f2e5;
    --bg-mint: #e9f7f5;
    --ink: #101531;
    --muted: #5f6985;
    --line: rgba(16, 21, 49, 0.08);
    --white: #ffffff;
    --pink: #ff4d8d;
    --orange: #ffb020;
    --blue: #4f8dff;
    --violet: #7d4dff;
    --grad-main: linear-gradient(90deg, #ff4d8d 0%, #ff8c3a 25%, #ffcc3a 45%, #5d7cff 72%, #8b4dff 100%);
    --grad-soft: linear-gradient(135deg, rgba(255,77,141,.14), rgba(93,124,255,.10), rgba(255,176,32,.10));
    --shadow-soft: 0 30px 80px rgba(55, 45, 95, 0.14);
    --radius-xl: 34px;
    --radius-lg: 24px;
    --container: 1380px;
}

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

html{
    scroll-behavior: smooth;
}

body{
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        linear-gradient(90deg, var(--bg-left) 0%, var(--bg-center) 55%, var(--bg-right) 82%, var(--bg-mint) 100%);
}

img{
    max-width: 100%;
    height: auto;
    display: block;
}

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

.site-main{
    overflow: hidden;
}

/* HEADER */
.integrated-header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    padding: 28px 28px 0;
}

.header-shell{
    max-width: var(--container);
    margin: 0 auto;
    padding: 22px 36px 18px;
    border-radius: 30px;
    background: rgba(255,255,255,.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.42);
    box-shadow: 0 12px 50px rgba(80, 70, 120, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.header-brand{
    display: flex;
    justify-content: center;
    width: 100%;
}

.brand-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.brand-logo{
    width: clamp(230px, 24vw, 360px);
    filter: drop-shadow(0 12px 24px rgba(90, 70, 180, 0.10));
}

.header-nav{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
}

.header-nav a{
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--ink);
    position: relative;
    transition: transform .18s ease, color .18s ease;
}

.header-nav a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 3px;
    border-radius: 99px;
    background: var(--grad-main);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
}

.header-nav a:hover{
    transform: translateY(-1px);
}

.header-nav a:hover::after{
    transform: scaleX(1);
}

/* HERO */
.hero-webdev{
    position: relative;
    padding: 220px 28px 110px;
    min-height: 100vh;
}

.hero-container{
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 3;
}

.hero-copy{
    max-width: 640px;
}

.hero-eyebrow{
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(93, 124, 255, 0.10);
    color: var(--blue);
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.hero-title{
    margin: 0 0 24px;
    font-size: clamp(4.2rem, 9vw, 7.2rem);
    line-height: .9;
    font-weight: 900;
    letter-spacing: -0.055em;
    color: var(--ink);
}

.gradient-word{
    background: var(--grad-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-text{
    margin: 0 0 34px;
    max-width: 600px;
    font-size: 1.45rem;
    line-height: 1.6;
    color: var(--muted);
}

.hero-actions{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 26px;
    border-radius: 18px;
    font-size: 1.05rem;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

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

.btn-primary{
    background: linear-gradient(90deg, #d936a7 0%, #6a7dff 100%);
    color: #fff;
    box-shadow: 0 16px 34px rgba(115, 102, 255, .22);
}

.btn-secondary{
    background: rgba(255,255,255,.54);
    color: var(--ink);
    border: 1px solid rgba(16,21,49,.08);
    box-shadow: 0 8px 24px rgba(16,21,49,.06);
}

.hero-points{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 700;
}

.hero-points li{
    position: relative;
    padding-left: 16px;
}

.hero-points li::before{
    content: "";
    position: absolute;
    left: 0;
    top: .58em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--grad-main);
}

/* HERO VISUAL */
.hero-visual{
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.code-stage{
    position: relative;
    width: min(100%, 620px);
    height: 620px;
    border-radius: 40px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.14)),
        radial-gradient(circle at 15% 15%, rgba(255,77,141,.18), transparent 34%),
        radial-gradient(circle at 78% 18%, rgba(255,176,32,.16), transparent 28%),
        radial-gradient(circle at 85% 75%, rgba(93,124,255,.18), transparent 32%),
        rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.44);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.code-window{
    position: absolute;
    inset: 34px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(13,18,38,.96), rgba(18,23,48,.93));
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    overflow: hidden;
}

.code-window-top{
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.code-window-top span{
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.code-window-top span:nth-child(1){ background: #ff5a7d; }
.code-window-top span:nth-child(2){ background: #ffbe3d; }
.code-window-top span:nth-child(3){ background: #49d17d; }

.code-rain{
    position: absolute;
    inset: 58px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    overflow: hidden;
}

.code-column{
    padding: 24px 22px;
    color: rgba(218, 230, 255, .82);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .95rem;
    line-height: 1.9;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    min-height: 200%;
}

.code-column span{
    opacity: .9;
}

.code-column-one{
    animation: codeScrollDown 16s linear infinite;
}

.code-column-two{
    animation: codeScrollUp 18s linear infinite;
    color: rgba(206, 214, 255, .72);
}

.code-column-three{
    animation: codeScrollDown 20s linear infinite;
    color: rgba(196, 240, 255, .68);
}

@keyframes codeScrollDown{
    0%{ transform: translateY(-35%); }
    100%{ transform: translateY(0%); }
}

@keyframes codeScrollUp{
    0%{ transform: translateY(0%); }
    100%{ transform: translateY(-35%); }
}

.floating-badge{
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    height: 74px;
    padding: 0 18px;
    border-radius: 999px;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .08em;
    box-shadow: 0 18px 35px rgba(0,0,0,.10);
}

.badge-one{
    top: 40px;
    right: 42px;
    background: linear-gradient(135deg, #ffb020, #ff4d8d);
    animation: floatOne 6s ease-in-out infinite;
}

.badge-two{
    left: -18px;
    bottom: 88px;
    background: linear-gradient(135deg, #43c6ff, #6c57ff);
    animation: floatTwo 7s ease-in-out infinite;
}

.badge-three{
    right: 76px;
    bottom: 30px;
    background: linear-gradient(135deg, #8f4dff, #ff4d8d);
    animation: floatThree 8s ease-in-out infinite;
}

@keyframes floatOne{
    0%,100%{ transform: translateY(0px) rotate(0deg); }
    50%{ transform: translateY(-12px) rotate(3deg); }
}
@keyframes floatTwo{
    0%,100%{ transform: translateY(0px) rotate(0deg); }
    50%{ transform: translateY(14px) rotate(-4deg); }
}
@keyframes floatThree{
    0%,100%{ transform: translateY(0px) rotate(0deg); }
    50%{ transform: translateY(-10px) rotate(5deg); }
}

.code-glow{
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    opacity: .65;
}

.glow-one{
    width: 180px;
    height: 180px;
    top: 58px;
    left: 50px;
    background: rgba(255, 91, 156, .32);
}

.glow-two{
    width: 190px;
    height: 190px;
    right: 36px;
    top: 120px;
    background: rgba(81, 134, 255, .24);
}

.glow-three{
    width: 220px;
    height: 220px;
    left: 160px;
    bottom: 40px;
    background: rgba(255, 182, 59, .18);
}

/* SHAPES */
.hero-bg-shape{
    position: absolute;
    border-radius: 42% 58% 54% 46% / 52% 43% 57% 48%;
    z-index: 1;
    opacity: .9;
    pointer-events: none;
}

.hero-shape-left{
    width: 260px;
    height: 230px;
    top: 210px;
    left: -70px;
    background: rgba(214, 179, 242, .58);
}

.hero-shape-right{
    width: 280px;
    height: 260px;
    top: 210px;
    right: -70px;
    background: rgba(205, 241, 240, .78);
}

.hero-shape-bottom{
    width: 240px;
    height: 210px;
    right: 24px;
    bottom: -40px;
    background: rgba(255, 223, 170, .40);
}

/* BELOW HERO */
.teaser-strip{
    padding: 0 28px 80px;
}

.teaser-grid{
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.teaser-card{
    padding: 30px;
    border-radius: 26px;
    background: rgba(255,255,255,.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 18px 40px rgba(40, 34, 77, .06);
}

.teaser-card h3{
    margin: 0 0 12px;
    font-size: 1.35rem;
}

.teaser-card p{
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.content-anchor{
    padding: 0 28px 60px;
}

.anchor-box{
    max-width: var(--container);
    margin: 0 auto;
    padding: 32px;
    border-radius: 26px;
    background: rgba(255,255,255,.32);
    border: 1px solid rgba(255,255,255,.48);
}

.anchor-box h2{
    margin: 0 0 10px;
    font-size: 2rem;
}

.anchor-box p{
    margin: 0;
    color: var(--muted);
}

/* FOOTER */
.webdev-footer{
    padding: 24px 28px 38px;
}

.footer-inner{
    max-width: var(--container);
    margin: 0 auto;
    text-align: center;
    color: var(--muted);
    font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 1180px){
    .hero-container{
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .hero-copy{
        max-width: 100%;
    }

    .hero-visual{
        min-height: 540px;
    }

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

@media (max-width: 820px){
    .integrated-header{
        padding: 18px 16px 0;
    }

    .header-shell{
        padding: 18px 18px 16px;
        border-radius: 24px;
        gap: 16px;
    }

    .brand-logo{
        width: clamp(220px, 48vw, 300px);
    }

    .header-nav{
        gap: 18px;
    }

    .header-nav a{
        font-size: 1rem;
    }

    .hero-webdev{
        padding: 210px 16px 70px;
    }

    .hero-title{
        font-size: clamp(3.2rem, 13vw, 5rem);
    }

    .hero-text{
        font-size: 1.14rem;
    }

    .hero-visual{
        min-height: 460px;
    }

    .code-stage{
        height: 460px;
    }

    .code-window{
        inset: 18px;
    }

    .hero-points{
        gap: 14px;
        flex-direction: column;
    }
}

@media (max-width: 540px){
    .header-nav{
        gap: 14px;
    }

    .header-nav a{
        font-size: .95rem;
    }

    .hero-title{
        letter-spacing: -0.045em;
    }

    .btn{
        width: 100%;
    }

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

/* =========================================================
   STICKY / FLOATING HEADER FIX
   ========================================================= */

.integrated-header {
    position: fixed !important;
    top: 18px;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0 22px;
    pointer-events: none;
}

.header-shell {
    pointer-events: auto;

    max-width: 1240px;

    padding:
        16px
        28px
        14px;

    border-radius:
        28px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.54),
            rgba(255,255,255,.34)
        );

    backdrop-filter:
        blur(18px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(130%);

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

    box-shadow:
        0 12px 40px
        rgba(54,46,90,.08);

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


/* Scroll state */

body.has-scrolled .header-shell {

    padding:
        10px
        24px
        10px;

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

    box-shadow:
        0 16px 45px
        rgba(54,46,90,.13);
}


/* Logo */

.brand-logo {

    width:
        clamp(220px, 20vw, 300px);

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


body.has-scrolled .brand-logo {

    width:
        clamp(190px, 17vw, 240px);
}


/* Navigation */

.header-nav {

    gap:
        30px;

    margin-top:
        2px;
}


.header-nav a {

    font-size:
        1rem;
}


/* =========================================================
   HERO SPACING FIX
   ========================================================= */

.hero-webdev {

    padding-top:
        270px !important;

    min-height:
        100vh;
}


.hero-container {

    align-items:
        center;
}


/* Prevent title from visually colliding with header */

.hero-copy {

    padding-top:
        20px;
}


/* Slightly reduce title size so layout breathes */

.hero-title {

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

    line-height:
        .91;
}


/* More separation between copy and visual */

.hero-container {

    gap:
        90px;
}


/* Code visual slightly lower and cleaner */

.hero-visual {

    min-height:
        600px;

    padding-top:
        12px;
}


.code-stage {

    margin-top:
        18px;
}


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

@media (max-width: 1180px) {

    .hero-webdev {

        padding-top:
            250px !important;
    }

    .hero-container {

        gap:
            55px;
    }
}


@media (max-width: 820px) {

    .integrated-header {

        top:
            10px;

        padding:
            0 12px;
    }

    .header-shell {

        padding:
            14px
            16px
            12px;
    }

    .brand-logo {

        width:
            min(250px, 70vw);
    }

    body.has-scrolled .brand-logo {

        width:
            min(220px, 62vw);
    }

    .header-nav {

        gap:
            16px;
    }

    .header-nav a {

        font-size:
            .95rem;
    }

    .hero-webdev {

        padding-top:
            230px !important;
    }
}


/* =========================================================
   HEADER TUNING
   - schmalerer Header-Kasten
   - verspieltere Menüschrift
   ========================================================= */

/* Google Font für Menü */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap');

/* äußerer Header-Bereich */
.integrated-header {
    top: 18px;
    padding: 0 20px;
}

/* der eigentliche weiße/transparente Kasten */
.header-shell {
    max-width: 980px !important;   /* vorher breiter -> jetzt schmaler */
    margin: 0 auto;
    padding: 18px 26px 14px;
    border-radius: 28px;
}

/* Logo etwas präsenter halten */
.brand-logo {
    width: clamp(220px, 18vw, 290px);
}

/* Navigation etwas luftiger */
.header-nav {
    gap: 34px;
    margin-top: 6px;
}

/* Menüpunkte */
.header-nav a {
    font-family: 'Fredoka', sans-serif !important;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #15162c;
    text-decoration: none;
    transition: transform .18s ease, color .18s ease, opacity .18s ease;
}

/* Hover */
.header-nav a:hover {
    color: #5d7cff;
    transform: translateY(-1px);
}

/* Aktiver Zustand, falls genutzt */
.header-nav a.is-active,
.header-nav a.current-menu-item,
.header-nav .current-menu-item > a {
    color: #5d7cff;
}

/* Sticky-Status etwas kompakter */
body.has-scrolled .header-shell {
    max-width: 940px !important;
    padding: 12px 22px 10px;
}

/* Mobile */
@media (max-width: 980px) {
    .header-shell {
        max-width: 92%;
        padding: 16px 18px 12px;
    }

    .header-nav {
        gap: 18px;
    }

    .header-nav a {
        font-size: .96rem;
    }
}


/* =========================================================
   HEADER LOGO GRÖSSER
   ========================================================= */

.brand-logo {
    width: clamp(300px, 24vw, 430px) !important;
    max-width: none !important;
    height: auto !important;
    display: block;
}

.brand-logo img,
.site-logo img,
.custom-logo {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* etwas kompakter im Sticky-Zustand, aber immer noch groß */
body.has-scrolled .brand-logo {
    width: clamp(260px, 20vw, 360px) !important;
}

/* Mobile */
@media (max-width: 980px) {
    .brand-logo {
        width: clamp(220px, 42vw, 300px) !important;
    }

    body.has-scrolled .brand-logo {
        width: clamp(190px, 36vw, 260px) !important;
    }
}


/* =========================================================
   HEADER: BREIT, ABER FLACHER
   ========================================================= */

.integrated-header {
    top: 14px !important;
    padding: 0 24px !important;
}

/* Breite wieder groß */
.header-shell {
    max-width: 1500px !important;
    width: calc(100% - 48px) !important;

    /* deutlich weniger Höhe */
    padding: 10px 28px 8px !important;

    border-radius: 24px !important;

    gap: 8px !important;

    margin: 0 auto !important;
}

/* Logo groß, aber Header nicht unnötig hoch */
.brand-logo {
    width: clamp(280px, 22vw, 390px) !important;
    max-height: 86px !important;
    object-fit: contain !important;
}

/* Navigation näher ans Logo */
.header-nav {
    margin-top: 0 !important;
    gap: 34px !important;
}

.header-nav a {
    font-size: 1rem !important;
}

/* Sticky-Zustand noch etwas kompakter */
body.has-scrolled .header-shell {
    max-width: 1500px !important;
    width: calc(100% - 48px) !important;

    padding: 7px 26px 6px !important;
}

body.has-scrolled .brand-logo {
    width: clamp(250px, 19vw, 340px) !important;
    max-height: 74px !important;
}

/* Hero entsprechend etwas höher starten lassen */
.hero-webdev {
    padding-top: 210px !important;
}

@media (max-width: 900px) {
    .header-shell {
        width: calc(100% - 24px) !important;
        padding: 10px 16px 8px !important;
    }

    .brand-logo {
        width: min(280px, 68vw) !important;
        max-height: 102px !important;
    }

    .header-nav {
        gap: 18px !important;
    }

    .hero-webdev {
        padding-top: 205px !important;
    }
}


/* =========================================================
   HEADER: MENÜ ZENTRIERT, LOGO RECHTS
   ========================================================= */

.header-shell {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 20px !important;

    max-width: 1500px !important;
    width: calc(100% - 48px) !important;

    padding: 10px 28px !important;
}

/* Menü exakt mittig */
.header-nav {
    grid-column: 2 !important;

    justify-self: center !important;

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

    gap: 34px !important;

    margin: 0 !important;
}

/* Logo nach rechts */
.header-brand {
    grid-column: 3 !important;

    justify-self: end !important;

    width: auto !important;

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

/* Logo etwas kleiner als vorher, damit es sauber in eine Zeile passt */
.brand-logo {
    width: clamp(210px, 15vw, 280px) !important;
    max-height: 72px !important;
    object-fit: contain !important;
}

/* Sticky Zustand */
body.has-scrolled .header-shell {
    padding: 7px 24px !important;
}

body.has-scrolled .brand-logo {
    width: clamp(190px, 13vw, 245px) !important;
    max-height: 62px !important;
}

/* Mobile wieder untereinander */
@media (max-width: 900px) {

    .header-shell {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

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

        gap: 10px !important;

        padding: 10px 16px !important;
    }

    .header-brand {
        order: 1;
        justify-self: auto !important;
    }

    .header-nav {
        order: 2;
        justify-self: auto !important;
        gap: 18px !important;
    }

    .brand-logo {
        width: min(250px, 65vw) !important;
    }
}


/* =========================================================
   HEADER FINAL: LOGO LINKS / MENÜ EXAKT ZENTRIERT
   ========================================================= */

.header-shell {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;

    width: calc(100% - 48px) !important;
    max-width: 1500px !important;

    /* Header bleibt flach */
    min-height: 94px !important;
    height: 94px !important;

    padding: 8px 28px !important;
    gap: 20px !important;
}

/* Logo links */
.header-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;

    justify-self: start !important;
    align-self: center !important;

    width: auto !important;
    height: 102px !important;

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

/*
 * Logo darf groß wirken, ohne den Header höher zu machen.
 * Die Höhe der Brand-Fläche bleibt fest.
 */
.brand-link {
    height: 100% !important;

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

.brand-logo {
    width: 520px !important;
    max-width: 520px !important;

    height: 118px !important;
    max-height: 118px !important;

    object-fit: contain !important;
    object-position: left center !important;

    display: block !important;
}

/* Menü wirklich in der geometrischen Mitte */
.header-nav {
    grid-column: 2 !important;
    grid-row: 1 !important;

    justify-self: center !important;
    align-self: center !important;

    margin: 0 !important;

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

    gap: 34px !important;
}

/* Rechte Spalte bleibt bewusst leer.
   Dadurch bleibt das Menü unabhängig vom Logo exakt mittig. */


/* Sticky weiterhin flach */
body.has-scrolled .header-shell {
    min-height: 102px !important;
    height: 102px !important;

    padding: 6px 26px !important;
}

body.has-scrolled .header-brand {
    height: 66px !important;
}

body.has-scrolled .brand-logo {
    width: 430px !important;
    max-width: 430px !important;

    height: 102px !important;
    max-height: 102px !important;
}


/* MOBILE */
@media (max-width: 900px) {

    .header-shell {
        height: auto !important;
        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        padding: 10px 16px !important;
        gap: 8px !important;
    }

    .header-brand {
        height: 70px !important;

        justify-content: center !important;
    }

    .brand-logo {
        width: min(290px, 70vw) !important;
        max-width: min(290px, 70vw) !important;

        height: 72px !important;
        max-height: 72px !important;

        object-position: center !important;
    }

    .header-nav {
        gap: 18px !important;
    }
}


/* =========================================================
   LOGO VERTIKAL NACH OBEN AUSRICHTEN
   ========================================================= */

.header-brand {
    height: 94px !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    overflow: visible !important;
}

.brand-link {
    height: 94px !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    overflow: visible !important;
}

.brand-logo {
    width: 520px !important;
    max-width: 520px !important;

    height: 118px !important;
    max-height: 118px !important;

    object-fit: contain !important;
    object-position: left top !important;

    /*
     * Logo nutzt jetzt stärker den Raum oberhalb,
     * statt optisch nach unten zu wachsen.
     */
    transform: translateY(-13px) !important;

    margin: 0 !important;
}

/* Sticky-Zustand */
body.has-scrolled .header-brand,
body.has-scrolled .brand-link {
    height: 78px !important;
}

body.has-scrolled .brand-logo {
    width: 430px !important;
    max-width: 430px !important;

    height: 102px !important;
    max-height: 102px !important;

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

/* Mobile */
@media (max-width: 900px) {

    .header-brand,
    .brand-link {
        height: 74px !important;
    }

    .brand-logo {
        width: min(340px, 74vw) !important;
        max-width: min(340px, 74vw) !important;

        height: 88px !important;
        max-height: 88px !important;

        transform: translateY(-8px) !important;

        object-position: center top !important;
    }
}






/* === WEBDEV HEADER OVERRIDE START === */

/* Header */
.site-header{
    position: relative !important;
    top: 0;
    z-index: 9999;
    padding: 30px 24px 0;
}

.header-shell{
    width: min(1720px, calc(100% - 36px));
    margin: 0 auto;
    border-radius: 34px;
    background: linear-gradient(90deg, rgba(255,255,255,.74), rgba(255,252,248,.72));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 38px rgba(36, 22, 71, 0.08);
    border: 1px solid rgba(255,255,255,.58);
    overflow: hidden;
}

.site-header.is-scrolled .header-shell{
    box-shadow: 0 12px 28px rgba(36, 22, 71, 0.10);
}

.header-inner{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 116px;
    padding: 0 40px;
    gap: 18px;
}

/* Logo links */
.header-brand{
    align-self: center;
    justify-self: start;
    display: flex;
    align-items: center;
    min-height: 116px;
}

.brand-link{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    height: 100%;
}

.brand-crop{
    width: clamp(320px, 25vw, 410px);
    height: 92px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.brand-logo{
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: contain;
    transform-origin: left center;
    transform: translate(-8px, 0) scale(1.28);
    filter: drop-shadow(0 10px 20px rgba(116, 74, 255, .08));
}

/* Desktop menu */
.desktop-nav{
    align-self: center;
    justify-self: center;
    width: 100%;
}

.desktop-menu{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin: 0;
    padding: 0;
    min-height: 116px;
}

.desktop-menu li{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.desktop-menu a{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #20223a;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1;
    transition: color .2s ease, transform .2s ease;
}

.desktop-menu a:hover{
    color: #6a5cff;
    transform: translateY(-1px);
}

.desktop-menu a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff6db0, #ffb020, #5d7cff, #8e4dff);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.desktop-menu a:hover::after{
    transform: scaleX(1);
}

/* Burger */
.menu-toggle{
    justify-self: end;
    align-self: center;
    display: none;
    position: relative;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.58));
    box-shadow: 0 14px 28px rgba(81, 56, 178, .12);
    cursor: pointer;
    padding: 0;
}

.menu-toggle span{
    position: absolute;
    left: 15px;
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff6db0, #ffb020, #5d7cff, #8e4dff);
    transition: transform .28s ease, opacity .2s ease, top .28s ease;
}

.menu-toggle span:nth-child(1){ top: 19px; }
.menu-toggle span:nth-child(2){ top: 27px; }
.menu-toggle span:nth-child(3){ top: 35px; }

.menu-toggle.is-active span:nth-child(1){
    top: 27px;
    transform: rotate(45deg);
}
.menu-toggle.is-active span:nth-child(2){
    opacity: 0;
}
.menu-toggle.is-active span:nth-child(3){
    top: 27px;
    transform: rotate(-45deg);
}

/* Mobile menu */
.mobile-nav{
    padding: 0 18px 18px;
}

.mobile-menu{
    list-style: none;
    margin: 0;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 18px 34px rgba(61, 44, 110, .10);
    border: 1px solid rgba(255,255,255,.7);
}

.mobile-menu li + li{
    margin-top: 10px;
}

.mobile-menu a{
    display: block;
    text-decoration: none;
    color: #20223a;
    font-size: 1.02rem;
    font-weight: 700;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(248,248,255,.72);
    transition: background .2s ease, transform .2s ease, color .2s ease;
}

.mobile-menu a:hover{
    background: linear-gradient(90deg, rgba(255,109,176,.12), rgba(93,124,255,.12));
    color: #5d59ff;
    transform: translateX(2px);
}

/* Responsive */
@media (max-width: 1080px){
    .site-header{
        padding: 24px 18px 0;
    }

    .header-inner{
        min-height: 102px;
        padding: 0 28px;
    }

    .header-brand{
        min-height: 102px;
    }

    .brand-crop{
        width: clamp(280px, 28vw, 350px);
        height: 82px;
    }

    .brand-logo{
        transform: translate(-8px, 0) scale(1.22);
    }

    .desktop-menu{
        min-height: 102px;
        gap: 30px;
    }

    .desktop-menu a{
        font-size: 1.08rem;
    }
}

@media (max-width: 900px){
    .header-shell{
        border-radius: 24px;
    }

    .header-inner{
        grid-template-columns: 1fr auto;
        min-height: 90px;
        padding: 0 18px;
    }

    .desktop-nav{
        display: none;
    }

    .menu-toggle{
        display: inline-block;
    }

    .header-brand{
        min-height: 90px;
    }

    .brand-crop{
        width: min(66vw, 300px);
        height: 68px;
    }

    .brand-logo{
        transform: translate(-6px, 0) scale(1.14);
    }
}

@media (max-width: 640px){
    .site-header{
        padding: 16px 12px 0;
    }

    .header-inner{
        min-height: 80px;
        padding: 0 14px;
    }

    .header-brand{
        min-height: 80px;
    }

    .brand-crop{
        width: min(68vw, 250px);
        height: 60px;
    }

    .brand-logo{
        transform: translate(-5px, 0) scale(1.06);
    }

    .menu-toggle{
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .menu-toggle span{
        left: 14px;
        width: 24px;
    }
}

/* === WEBDEV HEADER OVERRIDE END === */



/* =========================================================
   MENU VERTICAL ALIGNMENT
   Logo bleibt unverändert
   ========================================================= */

@media (min-width: 901px) {

    .desktop-nav {
        transform: translateY(-28px) !important;
    }

}

/* Sticky-Header: gleiche optische Achse */
@media (min-width: 901px) {

    .site-header.is-scrolled .desktop-nav {
        transform: translateY(-28px) !important;
    }

}


/* =========================================================
   MENU VERTICAL ALIGNMENT
   Logo bleibt unverändert
   ========================================================= */

@media (min-width: 901px) {

    .desktop-nav {
        transform: translateY(-28px) !important;
    }

}

/* Sticky-Header: gleiche optische Achse */
@media (min-width: 901px) {

    .site-header.is-scrolled .desktop-nav {
        transform: translateY(-28px) !important;
    }

}




/* WEBDEV_SHOWCASE_START */

.fusion-showcase {
    position: relative;
    padding: 90px 0 110px;
}

.fusion-showcase__inner {
    width: min(1320px, calc(100% - 80px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 64px;
    align-items: center;
}

.fusion-showcase__media {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.fusion-code-shadow {
    position: absolute;
    left: 30px;
    top: 80px;
    width: 74%;
    height: 420px;
    border-radius: 34px;
    overflow: hidden;
    transform: rotate(-8deg);
    background:
        linear-gradient(145deg, rgba(24, 28, 58, 0.94), rgba(18, 20, 46, 0.88));
    box-shadow:
        0 28px 60px rgba(20, 18, 50, 0.28),
        0 0 0 1px rgba(255,255,255,0.06) inset;
    z-index: 1;
    opacity: .92;
}

.fusion-code-shadow::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.07), transparent 18%),
        radial-gradient(circle at 15% 18%, rgba(255,120,180,.18), transparent 18%),
        radial-gradient(circle at 85% 80%, rgba(90,125,255,.15), transparent 20%);
    pointer-events: none;
}

.fusion-code-shadow__inner {
    position: absolute;
    inset: -30% 0 auto 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px 38px 70px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(212, 219, 255, 0.76);
    animation: fusionCodeFloat 18s linear infinite;
    white-space: nowrap;
}

.fusion-code-shadow__inner span {
    opacity: .88;
}

@keyframes fusionCodeFloat {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-180px); }
}

.fusion-preview-card {
    position: relative;
    z-index: 2;
    margin-left: 120px;
    width: min(520px, 100%);
    min-height: 420px;
    border-radius: 32px;
    padding: 22px 22px 28px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.52), rgba(255,255,255,0.36));
    border: 1px solid rgba(255,255,255,0.42);
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    box-shadow:
        0 24px 60px rgba(32, 24, 74, 0.16),
        0 0 0 1px rgba(255,255,255,0.16) inset;
}

.fusion-preview-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 32px;
    background:
        linear-gradient(130deg, rgba(255,255,255,0.12), transparent 45%);
    pointer-events: none;
}

.fusion-preview-card__topbar {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}

.fusion-preview-card__topbar span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
}

.fusion-preview-card__topbar span:nth-child(1) {
    background: linear-gradient(135deg, #ff4d8d, #ff7b65);
}
.fusion-preview-card__topbar span:nth-child(2) {
    background: linear-gradient(135deg, #ffb020, #ffd45f);
}
.fusion-preview-card__topbar span:nth-child(3) {
    background: linear-gradient(135deg, #46c4ff, #7b5cff);
}

.fusion-preview-card__content {
    position: relative;
    border-radius: 24px;
    min-height: 320px;
    padding: 34px 30px;
    background: linear-gradient(160deg, rgba(255,255,255,0.24), rgba(255,255,255,0.12));
    border: 1px solid rgba(255,255,255,0.22);
}

.fusion-preview-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    color: #5c79ff;
    background: rgba(255,255,255,0.48);
    margin-bottom: 18px;
}

.fusion-preview-card__content h3 {
    margin: 0 0 16px;
    font-size: clamp(2rem, 3vw, 2.9rem);
    line-height: 1.02;
    color: #121633;
}

.fusion-preview-card__content p {
    margin: 0;
    max-width: 420px;
    font-size: 1.02rem;
    line-height: 1.75;
    color: rgba(18, 22, 51, 0.72);
}

.fusion-preview-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.fusion-preview-card__chips span {
    padding: 10px 16px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    color: #161b3a;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.36);
}

.fusion-showcase__copy .section-kicker {
    display: inline-flex;
    margin-bottom: 18px;
}

.fusion-showcase__copy h2 {
    margin: 0 0 22px;
    font-size: clamp(2.6rem, 4vw, 4.4rem);
    line-height: .98;
    color: #131735;
}

.fusion-showcase__copy h2 span {
    background: linear-gradient(90deg, #ff4d8d, #ffb020, #5d7cff, #8e4dff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fusion-showcase__copy p {
    font-size: 1.05rem;
    line-height: 1.82;
    color: rgba(24, 29, 61, 0.72);
    max-width: 620px;
    margin: 0 0 18px;
}

.fusion-showcase__list {
    list-style: none;
    padding: 0;
    margin: 24px 0 32px;
    display: grid;
    gap: 12px;
}

.fusion-showcase__list li {
    position: relative;
    padding-left: 26px;
    font-size: 1rem;
    font-weight: 600;
    color: #20264a;
}

.fusion-showcase__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .56em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff4d8d, #5d7cff);
}

.fusion-showcase__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 1180px) {
    .fusion-showcase__inner {
        gap: 42px;
        grid-template-columns: 1fr;
    }

    .fusion-showcase__media {
        min-height: 560px;
        justify-content: center;
    }

    .fusion-code-shadow {
        left: 50%;
        top: 70px;
        width: min(620px, 88%);
        transform: translateX(-50%) rotate(-7deg);
    }

    .fusion-preview-card {
        margin-left: 0;
        width: min(640px, 92%);
    }
}

@media (max-width: 820px) {
    .fusion-showcase {
        padding: 68px 0 86px;
    }

    .fusion-showcase__inner {
        width: min(100% - 36px, 1320px);
    }

    .fusion-showcase__media {
        min-height: 500px;
    }

    .fusion-code-shadow {
        width: 92%;
        height: 340px;
        top: 62px;
    }

    .fusion-code-shadow__inner {
        font-size: 12px;
        padding: 36px 24px 46px;
        gap: 12px;
    }

    .fusion-preview-card {
        min-height: auto;
        border-radius: 26px;
        padding: 18px;
    }

    .fusion-preview-card__content {
        min-height: auto;
        padding: 28px 20px;
    }

    .fusion-showcase__copy h2 {
        font-size: clamp(2.2rem, 8vw, 3.2rem);
    }
}

/* WEBDEV_SHOWCASE_END */


/* =========================================================
   HERO / HEADER SPACING FINAL
   ========================================================= */

/*
 * Header ist sticky und nimmt selbst Platz ein.
 * Deshalb braucht der Hero keine riesige obere Padding-Zone.
 */
.hero-webdev {
    padding-top: 58px !important;
    padding-bottom: 100px !important;
    min-height: auto !important;
}

/* Inhalt etwas kompakter unter Header */
.hero-container {
    align-items: center !important;
}

/* Showcase direkt anschließen */
.fusion-showcase {
    padding-top: 45px !important;
}

/*
 * Der Code-Schatten soll deutlicher sichtbar hinter
 * dem transparenten Vordergrund liegen.
 */
.fusion-code-shadow {
    left: 10px !important;
    top: 65px !important;

    width: 78% !important;
    height: 430px !important;

    transform:
        rotate(-9deg)
        translateX(-10px) !important;

    opacity: .96 !important;
}

.fusion-preview-card {
    margin-left: 105px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.46),
            rgba(255,255,255,.28)
        ) !important;

    backdrop-filter:
        blur(13px)
        saturate(120%) !important;

    -webkit-backdrop-filter:
        blur(13px)
        saturate(120%) !important;

    border:
        1px solid
        rgba(255,255,255,.46) !important;

    box-shadow:
        0 28px 65px rgba(32,24,74,.15) !important;
}

/* etwas mehr Durchsicht im inneren Panel */
.fusion-preview-card__content {
    background:
        linear-gradient(
            155deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.10)
        ) !important;
}


/* TABLET */
@media (max-width: 1180px) {

    .hero-webdev {
        padding-top: 48px !important;
    }

}


/* MOBILE */
@media (max-width: 820px) {

    .hero-webdev {
        padding-top: 38px !important;
    }

    .fusion-showcase {
        padding-top: 30px !important;
    }

}


/* =========================================================
   HERO FUSION VISUAL
   glass foreground + diagonal animated code shadow
   ========================================================= */

.hero-fusion-visual {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}


/* ---------------------------------------------------------
   CODE SHADOW
   --------------------------------------------------------- */

.hero-fusion-code {
    position: absolute;

    width: 76%;
    height: 445px;

    left: 5%;
    top: 84px;

    z-index: 1;

    overflow: hidden;

    border-radius: 36px;

    transform:
        rotate(-8deg)
        translate(-12px, 8px);

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(255, 75, 145, .14),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(78, 125, 255, .16),
            transparent 30%
        ),
        linear-gradient(
            150deg,
            #20243e,
            #12162e
        );

    box-shadow:
        0 32px 70px rgba(27, 23, 61, .24);

    opacity: .94;
}


.hero-fusion-code::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            130deg,
            rgba(255,255,255,.06),
            transparent 42%
        );

    pointer-events: none;
}


.hero-fusion-code__lines {
    position: absolute;

    left: 0;
    right: 0;
    top: -120px;

    padding: 42px;

    display: flex;
    flex-direction: column;

    gap: 14px;

    white-space: nowrap;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 14px;
    line-height: 1.45;

    color:
        rgba(218, 225, 255, .68);

    animation:
        heroFusionCode 19s linear infinite;
}


@keyframes heroFusionCode {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-220px);
    }

}


/* ---------------------------------------------------------
   FOREGROUND GLASS
   --------------------------------------------------------- */

.hero-fusion-glass {
    position: relative;

    z-index: 3;

    width: 82%;
    min-height: 440px;

    margin-left: 12%;

    padding: 22px;

    border-radius: 36px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.48),
            rgba(255,255,255,.27)
        );

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

    backdrop-filter:
        blur(17px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(17px)
        saturate(120%);

    box-shadow:
        0 30px 70px rgba(45, 34, 85, .14),
        inset 0 1px 0 rgba(255,255,255,.28);
}


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

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,.16),
            transparent 50%
        );

    pointer-events: none;
}


/* browser dots */

.hero-fusion-topbar {
    position: relative;

    z-index: 2;

    display: flex;

    gap: 9px;

    margin:
        4px
        0
        22px
        4px;
}


.hero-fusion-topbar span {
    display: block;

    width: 12px;
    height: 12px;

    border-radius: 50%;
}


.hero-fusion-topbar span:nth-child(1) {
    background: #ff5a7e;
}


.hero-fusion-topbar span:nth-child(2) {
    background: #ffc14b;
}


.hero-fusion-topbar span:nth-child(3) {
    background: #55cc82;
}


/* inner glass */

.hero-fusion-content {
    position: relative;

    z-index: 2;

    min-height: 330px;

    padding:
        32px
        30px;

    border-radius: 26px;

    background:
        linear-gradient(
            150deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.09)
        );

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


.hero-fusion-label {
    display: inline-flex;

    padding:
        9px
        14px;

    margin-bottom:
        21px;

    border-radius:
        999px;

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

    color:
        #5d72f4;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .12em;
}


.hero-fusion-content h3 {
    margin:
        0
        0
        18px;

    max-width:
        420px;

    color:
        #121630;

    font-size:
        clamp(2.35rem, 3.5vw, 3.35rem);

    line-height:
        .97;

    letter-spacing:
        -.045em;
}


.hero-fusion-content h3 span {
    background:
        linear-gradient(
            90deg,
            #ff4d8d,
            #ffb020,
            #5d7cff,
            #8e4dff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.hero-fusion-content p {
    max-width:
        430px;

    margin:
        0;

    color:
        rgba(23,28,59,.72);

    font-size:
        1rem;

    line-height:
        1.7;
}


.hero-fusion-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        28px;
}


.hero-fusion-tags span {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        38px;

    padding:
        0
        15px;

    border-radius:
        999px;

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

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

    color:
        #1c2141;

    font-size:
        .82rem;

    font-weight:
        800;
}


/* ---------------------------------------------------------
   FLOATING ORBS
   --------------------------------------------------------- */

.hero-fusion-orb {
    position:
        absolute;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        white;

    font-size:
        .8rem;

    font-weight:
        900;

    letter-spacing:
        .06em;

    box-shadow:
        0 14px 32px rgba(50,35,110,.14);
}


.hero-fusion-orb--one {
    width:
        72px;

    height:
        72px;

    right:
        0;

    top:
        62px;

    background:
        linear-gradient(
            135deg,
            #ffb020,
            #ff4d8d
        );

    animation:
        orbOne 6s ease-in-out infinite;
}


.hero-fusion-orb--two {
    width:
        64px;

    height:
        64px;

    left:
        0;

    bottom:
        84px;

    background:
        linear-gradient(
            135deg,
            #45c5ff,
            #6757ff
        );

    animation:
        orbTwo 7s ease-in-out infinite;
}


.hero-fusion-orb--three {
    width:
        66px;

    height:
        66px;

    right:
        74px;

    bottom:
        38px;

    background:
        linear-gradient(
            135deg,
            #8b4dff,
            #dc42ad
        );

    animation:
        orbThree 8s ease-in-out infinite;
}


@keyframes orbOne {

    50% {
        transform:
            translateY(-12px)
            rotate(5deg);
    }

}


@keyframes orbTwo {

    50% {
        transform:
            translateY(12px)
            rotate(-5deg);
    }

}


@keyframes orbThree {

    50% {
        transform:
            translateY(-10px)
            rotate(4deg);
    }

}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1180px) {

    .hero-fusion-visual {
        min-height:
            540px;
    }

    .hero-fusion-glass {
        width:
            min(620px, 82%);
    }

}


@media (max-width: 820px) {

    .hero-fusion-visual {
        min-height:
            480px;

        margin-top:
            20px;
    }


    .hero-fusion-code {
        width:
            82%;

        height:
            350px;

        left:
            6%;

        top:
            70px;
    }


    .hero-fusion-glass {
        width:
            82%;

        min-height:
            360px;

        margin-left:
            10%;
    }


    .hero-fusion-content {
        min-height:
            270px;

        padding:
            25px
            20px;
    }


    .hero-fusion-code__lines {
        font-size:
            11px;
    }

}


/* =========================================================
   EXAMPLES PAGE
   ========================================================= */

.examples-page {
    min-height: 100vh;
}

.examples-container {
    width: min(1480px, calc(100% - 64px));
    margin: 0 auto;
}


/* HERO */

.examples-hero {
    position: relative;
    overflow: hidden;

    padding:
        95px
        0
        80px;
}

.examples-hero__blob {
    position: absolute;
    pointer-events: none;
    opacity: .28;
}

.examples-hero__blob--one {
    width: 380px;
    height: 300px;

    left: -180px;
    top: 20px;

    border-radius:
        63% 37% 58% 42% /
        44% 57% 43% 56%;

    background:
        linear-gradient(
            135deg,
            #ff62aa,
            #8357ff
        );
}

.examples-hero__blob--two {
    width: 420px;
    height: 340px;

    right: -190px;
    top: 60px;

    border-radius:
        44% 56% 36% 64% /
        59% 38% 62% 41%;

    background:
        linear-gradient(
            135deg,
            #45d6e8,
            #6e82ff
        );
}


.examples-eyebrow {

    display: inline-flex;

    padding:
        9px
        15px;

    margin-bottom:
        22px;

    border-radius:
        999px;

    background:
        rgba(93,124,255,.10);

    color:
        #5878ff;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        .16em;
}


.examples-hero h1 {

    max-width:
        900px;

    margin:
        0
        0
        28px;

    color:
        #111630;

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

    line-height:
        .91;

    letter-spacing:
        -.06em;
}


.examples-hero h1 span {

    display:
        block;

    background:
        linear-gradient(
            90deg,
            #ff4d8d,
            #ffb020,
            #5d7cff,
            #8e4dff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.examples-hero p {

    max-width:
        780px;

    margin:
        0;

    color:
        #626b85;

    font-size:
        1.17rem;

    line-height:
        1.75;
}


/* FILTER */

.examples-gallery-section {

    padding:
        30px
        0
        120px;
}


.examples-filter {

    position:
        sticky;

    top:
        150px;

    z-index:
        50;

    width:
        fit-content;

    max-width:
        100%;

    margin:
        0 auto
        58px;

    padding:
        8px;

    display:
        flex;

    gap:
        6px;

    flex-wrap:
        wrap;

    border-radius:
        999px;

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

    backdrop-filter:
        blur(16px);

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

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

    box-shadow:
        0 15px 34px
        rgba(45,35,88,.08);
}


.example-filter {

    min-height:
        44px;

    padding:
        0
        19px;

    border:
        0;

    border-radius:
        999px;

    background:
        transparent;

    color:
        #363c55;

    font-size:
        .9rem;

    font-weight:
        800;

    cursor:
        pointer;

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


.example-filter:hover {

    transform:
        translateY(-1px);
}


.example-filter.is-active {

    color:
        #fff;

    background:
        linear-gradient(
            105deg,
            #dc3caa,
            #6e77ff
        );

    box-shadow:
        0 9px 23px
        rgba(104,76,222,.20);
}


/* GRID */

.examples-grid {

    display:
        grid;

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

    gap:
        34px;
}


.example-card {

    overflow:
        hidden;

    border-radius:
        30px;

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

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

    backdrop-filter:
        blur(12px);

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

    box-shadow:
        0 26px 60px
        rgba(40,32,78,.08);

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


.example-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 34px 70px
        rgba(40,32,78,.13);
}


.example-card.is-hidden {

    display:
        none;
}


.example-preview {

    min-height:
        430px;

    padding:
        28px;
}


.example-card__content {

    min-height:
        190px;

    padding:
        28px
        30px
        32px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    border-top:
        1px solid
        rgba(26,32,65,.06);
}


.example-category {

    display:
        block;

    margin-bottom:
        10px;

    color:
        #747c97;

    font-size:
        .75rem;

    font-weight:
        900;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.example-card h2 {

    margin:
        0
        0
        9px;

    color:
        #141831;

    font-size:
        1.7rem;
}


.example-card p {

    max-width:
        560px;

    margin:
        0;

    color:
        #687087;

    line-height:
        1.7;
}


.example-arrow {

    flex:
        0 0
        46px;

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            rgba(255,77,141,.14),
            rgba(93,124,255,.14)
        );

    color:
        #5f61e7;

    font-size:
        1.3rem;

    font-weight:
        900;
}


/* MINI SITE GENERAL */

.mini-site {

    position:
        relative;

    overflow:
        hidden;

    width:
        100%;

    height:
        375px;

    padding:
        27px;

    border-radius:
        24px;

    box-shadow:
        0 26px 60px
        rgba(25,25,55,.14);
}


.mini-nav {

    position:
        relative;

    z-index:
        4;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    font-size:
        .69rem;

    letter-spacing:
        .07em;
}


.mini-hero {

    position:
        absolute;

    left:
        30px;

    bottom:
        36px;

    z-index:
        4;

    max-width:
        70%;
}


.mini-hero small,
.mini-auto-copy small,
.industry-copy small,
.medical-copy small,
.mini-site--auto-two small,
.mini-site--factory small,
.mini-site--clinic small {

    display:
        block;

    margin-bottom:
        11px;

    font-size:
        .61rem;

    font-weight:
        900;

    letter-spacing:
        .16em;
}


.mini-hero strong,
.mini-auto-copy strong,
.industry-copy strong,
.medical-copy strong,
.mini-site--auto-two strong,
.mini-site--factory strong,
.mini-site--clinic strong {

    display:
        block;

    font-size:
        2.7rem;

    line-height:
        .91;

    letter-spacing:
        -.04em;
}


/* CONSTRUCTION */

.example-preview--construction-one {

    background:
        linear-gradient(
            135deg,
            #eadfce,
            #c9b9a1
        );
}


.mini-site--construction {

    color:
        #f4efe7;

    background:
        linear-gradient(
            135deg,
            #313432,
            #151817
        );
}


.mini-site--construction::after {

    content:
        "";

    position:
        absolute;

    right:
        -40px;

    top:
        85px;

    width:
        280px;

    height:
        210px;

    transform:
        skewX(-17deg);

    background:
        linear-gradient(
            145deg,
            rgba(210,181,144,.52),
            rgba(84,75,61,.10)
        );
}


.mini-blocks {

    position:
        absolute;

    right:
        30px;

    bottom:
        30px;

    display:
        flex;

    gap:
        8px;
}


.mini-blocks i {

    width:
        34px;

    height:
        34px;

    display:
        block;

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


/* construction two */

.example-preview--construction-two {

    background:
        linear-gradient(
            135deg,
            #ece8df,
            #d9d0bf
        );
}


.mini-site--construction-two {

    color:
        #1f201e;

    background:
        #e9e4da;
}


.mini-center-title {

    position:
        absolute;

    left:
        38px;

    top:
        110px;

    font-size:
        3.3rem;

    font-weight:
        800;

    line-height:
        .9;
}


.mini-number {

    position:
        absolute;

    right:
        25px;

    bottom:
        15px;

    color:
        rgba(30,31,29,.10);

    font-size:
        8rem;

    font-weight:
        900;
}


/* AUTOMOTIVE */

.example-preview--auto-one {

    background:
        linear-gradient(
            135deg,
            #251c3e,
            #0b0d15
        );
}


.mini-site--auto {

    color:
        white;

    background:
        linear-gradient(
            150deg,
            #111527,
            #080912
        );
}


.auto-lines {

    position:
        absolute;

    inset:
        0;

    background:
        repeating-linear-gradient(
            150deg,
            transparent 0 30px,
            rgba(104,87,255,.09) 31px 32px
        );
}


.mini-auto-copy {

    position:
        absolute;

    left:
        32px;

    bottom:
        36px;

    max-width:
        66%;

    z-index:
        4;
}


.mini-auto-copy strong {

    background:
        linear-gradient(
            90deg,
            white,
            #9e91ff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


/* automotive 2 */

.example-preview--auto-two {

    background:
        linear-gradient(
            135deg,
            #e6e8ef,
            #cbd7e5
        );
}


.mini-site--auto-two {

    color:
        #10121c;

    background:
        linear-gradient(
            135deg,
            #f8f8fb,
            #e9eef6
        );
}


.auto-two-mark {

    width:
        60px;

    height:
        60px;

    margin-bottom:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        white;

    font-weight:
        900;

    background:
        linear-gradient(
            135deg,
            #31a7ff,
            #5a5bff
        );
}


.auto-dashboard {

    position:
        absolute;

    right:
        25px;

    bottom:
        24px;

    display:
        flex;

    gap:
        8px;
}


.auto-dashboard i {

    display:
        block;

    width:
        55px;

    height:
        28px;

    border-radius:
        8px;

    background:
        rgba(25,38,73,.12);
}


/* INDUSTRY */

.example-preview--industry-one {

    background:
        linear-gradient(
            135deg,
            #d8dadc,
            #bfc3c7
        );
}


.mini-site--industry {

    color:
        #f2f4f5;

    background:
        #202428;
}


.industry-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .18;

    background:
        linear-gradient(
            rgba(255,255,255,.22) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.22) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;
}


.industry-copy {

    position:
        absolute;

    left:
        32px;

    bottom:
        36px;

    z-index:
        3;
}


/* industry two */

.example-preview--industry-two {

    background:
        linear-gradient(
            135deg,
            #d8e4e4,
            #aababa
        );
}


.mini-site--factory {

    color:
        #e8f1ef;

    background:
        linear-gradient(
            145deg,
            #253634,
            #101817
        );
}


.factory-number {

    position:
        absolute;

    right:
        18px;

    top:
        6px;

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

    font-size:
        8rem;

    font-weight:
        900;
}


.factory-data {

    position:
        absolute;

    left:
        28px;

    bottom:
        28px;

    display:
        flex;

    gap:
        10px;
}


.factory-data span {

    padding:
        8px
        12px;

    border-radius:
        8px;

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


/* MEDICAL */

.example-preview--medical-one {

    background:
        linear-gradient(
            135deg,
            #dceff0,
            #dbe0f3
        );
}


.mini-site--medical {

    color:
        #21313a;

    background:
        linear-gradient(
            145deg,
            #f4fbfb,
            #e4eeee
        );
}


.medical-orb {

    position:
        absolute;

    right:
        -45px;

    bottom:
        -60px;

    width:
        280px;

    height:
        280px;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #61d0d0,
            #7377ea
        );

    opacity:
        .42;
}


.medical-copy {

    position:
        absolute;

    left:
        32px;

    bottom:
        36px;

    z-index:
        3;

    max-width:
        70%;
}


/* medical 2 */

.example-preview--medical-two {

    background:
        linear-gradient(
            135deg,
            #ebefef,
            #d6dfdf
        );
}


.mini-site--clinic {

    color:
        #192725;

    background:
        #f6faf9;
}


.clinic-symbol {

    width:
        54px;

    height:
        54px;

    margin-bottom:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        17px;

    color:
        white;

    font-size:
        2rem;

    font-weight:
        400;

    background:
        linear-gradient(
            135deg,
            #42c8b7,
            #687bea
        );
}


.clinic-stats {

    position:
        absolute;

    right:
        28px;

    bottom:
        28px;

    display:
        flex;

    gap:
        9px;
}


.clinic-stats span {

    min-width:
        58px;

    padding:
        10px;

    border-radius:
        12px;

    background:
        rgba(34,74,68,.08);

    font-weight:
        800;
}


.clinic-stats small {

    display:
        block;

    margin-top:
        2px;

    font-size:
        .55rem;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .examples-grid {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 720px) {

    .examples-container {

        width:
            calc(100% - 32px);
    }


    .examples-hero {

        padding:
            65px
            0
            55px;
    }


    .examples-hero h1 {

        font-size:
            clamp(
                3.2rem,
                15vw,
                5rem
            );
    }


    .examples-filter {

        top:
            115px;

        border-radius:
            22px;

        justify-content:
            center;
    }


    .example-filter {

        min-height:
            40px;

        padding:
            0
            13px;
    }


    .example-preview {

        min-height:
            auto;

        padding:
            15px;
    }


    .mini-site {

        height:
            330px;
    }


    .example-card__content {

        padding:
            23px;
    }

}



/* =========================================================
   CLICKABLE EXAMPLE ARROW
   ========================================================= */

a.example-arrow {
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

a.example-arrow:hover {
    transform:
        translateY(-3px)
        rotate(6deg);

    box-shadow:
        0 12px 25px
        rgba(94,70,220,.16);
}



/* =========================================================
   GASTRO EXAMPLES
   ========================================================= */

.example-preview--gastro-one {

    background:
        linear-gradient(
            135deg,
            #443934,
            #191716
        );
}


.mini-site--gastro {

    color:
        #eee4d9;

    background:
        linear-gradient(
            145deg,
            #201c1a,
            #0e0d0c
        );
}


.mini-site--gastro::before {

    content: "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    right:
        -80px;

    bottom:
        -110px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 35% 35%,
            #9c6540,
            #46291f 55%,
            #1b1512 75%
        );
}


.gastro-copy {

    position:
        absolute;

    left:
        34px;

    bottom:
        38px;

    z-index:
        3;

    max-width:
        65%;
}


.gastro-copy small {

    display:
        block;

    margin-bottom:
        12px;

    color:
        #c59f7a;

    font-size:
        .61rem;

    font-weight:
        900;

    letter-spacing:
        .16em;
}


.gastro-copy strong {

    display:
        block;

    margin-bottom:
        13px;

    font-family:
        Georgia,
        serif;

    font-size:
        3.1rem;

    font-weight:
        400;

    line-height:
        .9;
}


.gastro-circle {

    position:
        absolute;

    right:
        28px;

    top:
        85px;

    z-index:
        4;

    width:
        68px;

    height:
        68px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #1a1512;

    background:
        #dcb786;

    font-size:
        .72rem;

    font-weight:
        900;
}



/* cafe */

.example-preview--gastro-two {

    background:
        linear-gradient(
            135deg,
            #eadabc,
            #c5a979
        );
}


.mini-site--cafe {

    color:
        #3d3025;

    background:
        #f3e9d4;
}


.cafe-brand {

    font-size:
        1rem;

    font-weight:
        900;

    letter-spacing:
        .14em;
}


.cafe-copy {

    position:
        absolute;

    left:
        30px;

    bottom:
        38px;

    z-index:
        4;

    max-width:
        65%;
}


.cafe-copy small {

    display:
        block;

    margin-bottom:
        13px;

    font-size:
        .58rem;

    font-weight:
        900;

    letter-spacing:
        .13em;
}


.cafe-copy strong {

    display:
        block;

    margin-bottom:
        12px;

    font-size:
        2.9rem;

    line-height:
        .92;
}


.cafe-shape {

    position:
        absolute;

    width:
        240px;

    height:
        300px;

    right:
        -65px;

    bottom:
        -90px;

    border-radius:
        60% 40% 58% 42% /
        42% 60% 40% 58%;

    background:
        linear-gradient(
            145deg,
            #df8e59,
            #9e5940
        );

    transform:
        rotate(18deg);
}



/* =========================================================
   BAUWERK CUSTOM DEMO
   ========================================================= */

body.bauwerk-demo-page {

    margin: 0;

    background:
        #e7e2d8;

    color:
        #222421;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


.bauwerk-preview-bar {

    position:
        fixed;

    top:
        14px;

    left:
        50%;

    transform:
        translateX(-50%);

    z-index:
        9999;

    width:
        min(900px, calc(100% - 32px));

    padding:
        10px
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-radius:
        999px;

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

    backdrop-filter:
        blur(16px);

    box-shadow:
        0 12px 32px
        rgba(25,25,25,.09);

    color:
        #333;

    font-size:
        .68rem;

    font-weight:
        800;

    letter-spacing:
        .1em;
}


.bauwerk-preview-bar a {

    text-decoration:
        none;

    color:
        #222;

    letter-spacing:
        0;
}



.bauwerk-site {

    width:
        min(1660px, calc(100% - 44px));

    margin:
        78px auto 22px;

    overflow:
        hidden;

    background:
        #e8e2d7;

    border-radius:
        8px;
}



/* CLIENT HEADER */

.bauwerk-header {

    height:
        96px;

    padding:
        0 46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    background:
        #232522;

    color:
        #f4efe7;
}


.bauwerk-brand {

    color:
        inherit;

    text-decoration:
        none;

    font-size:
        1.05rem;

    font-weight:
        900;

    letter-spacing:
        .12em;
}


.bauwerk-brand small {

    display:
        block;

    margin-top:
        4px;

    color:
        #999d96;

    font-size:
        .48rem;

    letter-spacing:
        .08em;
}


.bauwerk-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        34px;
}


.bauwerk-nav a {

    color:
        #e8e5dd;

    text-decoration:
        none;

    font-size:
        .83rem;
}


.bauwerk-nav-cta {

    padding:
        12px
        17px;

    border:
        1px solid
        #8c8d87;
}



/* HERO */

.bauwerk-hero {

    position:
        relative;

    min-height:
        760px;

    padding:
        90px
        60px
        50px;

    overflow:
        hidden;

    background:
        #20221f;

    color:
        #eeeae1;
}


.bauwerk-grid-lines {

    position:
        absolute;

    inset:
        0;

    opacity:
        .09;

    background:

        linear-gradient(
            rgba(255,255,255,.35) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.35) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;
}


.bauwerk-hero-copy {

    position:
        relative;

    z-index:
        4;

    max-width:
        800px;

    padding-top:
        90px;
}


.bauwerk-kicker {

    display:
        block;

    margin-bottom:
        24px;

    color:
        #c7ad8a;

    font-size:
        .7rem;

    font-weight:
        900;

    letter-spacing:
        .2em;
}


.bauwerk-hero h1 {

    margin:
        0;

    font-size:
        clamp(5rem, 9vw, 9rem);

    line-height:
        .82;

    letter-spacing:
        -.065em;

    font-weight:
        700;
}


.bauwerk-hero h1 span {

    display:
        block;

    color:
        #c9aa7c;
}


.bauwerk-hero-copy p {

    max-width:
        620px;

    margin:
        35px
        0;

    color:
        #bfc0b9;

    font-size:
        1.16rem;

    line-height:
        1.7;
}


.bauwerk-actions {

    display:
        flex;

    gap:
        12px;

    flex-wrap:
        wrap;
}


.bauwerk-btn {

    min-height:
        52px;

    padding:
        0
        22px;

    display:
        inline-flex;

    align-items:
        center;

    text-decoration:
        none;

    font-size:
        .8rem;

    font-weight:
        800;
}


.bauwerk-btn-primary {

    color:
        #21221f;

    background:
        #cfb28c;
}


.bauwerk-btn-ghost {

    color:
        white;

    border:
        1px solid
        #60615d;
}


.bauwerk-hero-architecture {

    position:
        absolute;

    width:
        650px;

    height:
        650px;

    right:
        -90px;

    top:
        65px;
}


.architecture-plane {

    position:
        absolute;

    display:
        block;

    background:
        #756a58;
}


.plane-one {

    width:
        380px;

    height:
        500px;

    right:
        180px;

    top:
        50px;

    transform:
        skewX(-17deg);

    background:
        linear-gradient(
            160deg,
            #81735f,
            #4d473d
        );
}


.plane-two {

    width:
        320px;

    height:
        440px;

    right:
        0;

    top:
        130px;

    transform:
        skewX(13deg);

    background:
        #343631;
}


.plane-three {

    width:
        240px;

    height:
        300px;

    right:
        80px;

    top:
        220px;

    background:
        #a78b68;
}


.architecture-number {

    position:
        absolute;

    right:
        70px;

    bottom:
        15px;

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

    font-size:
        10rem;

    font-weight:
        900;
}


.bauwerk-hero-meta {

    position:
        absolute;

    z-index:
        5;

    left:
        60px;

    right:
        60px;

    bottom:
        35px;

    display:
        flex;

    gap:
        60px;

    border-top:
        1px solid
        #494b47;

    padding-top:
        22px;
}


.bauwerk-hero-meta div {

    min-width:
        130px;
}


.bauwerk-hero-meta strong {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #d4b78e;

    font-size:
        1.7rem;
}


.bauwerk-hero-meta span {

    color:
        #999c95;

    font-size:
        .7rem;
}



/* PROJECTS */

.bauwerk-projects {

    padding:
        110px
        60px;

    background:
        #e8e2d7;
}


.bauwerk-section-head {

    margin-bottom:
        55px;
}


.bauwerk-section-head span,
.bauwerk-services-intro span,
.bauwerk-about-copy > span,
.bauwerk-contact > span {

    display:
        block;

    margin-bottom:
        16px;

    color:
        #766c5c;

    font-size:
        .67rem;

    font-weight:
        900;

    letter-spacing:
        .18em;
}


.bauwerk-section-head h2,
.bauwerk-services-intro h2,
.bauwerk-about-copy h2,
.bauwerk-contact h2 {

    max-width:
        850px;

    margin:
        0;

    font-size:
        clamp(3rem, 5vw, 5.5rem);

    line-height:
        .93;

    letter-spacing:
        -.05em;
}


.bauwerk-project-grid {

    display:
        grid;

    grid-template-columns:
        1.25fr .75fr;

    gap:
        22px;
}


.bauwerk-project {

    background:
        #d6cec0;
}


.bauwerk-project-large {

    grid-row:
        span 2;
}


.project-image {

    position:
        relative;

    min-height:
        310px;

    overflow:
        hidden;
}


.bauwerk-project-large .project-image {

    min-height:
        650px;
}


.project-image span {

    position:
        absolute;

    right:
        25px;

    bottom:
        10px;

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

    font-size:
        6rem;

    font-weight:
        900;
}


.project-image-one {

    background:
        linear-gradient(
            135deg,
            #777165,
            #32342f
        );
}


.project-image-two {

    background:
        linear-gradient(
            145deg,
            #b9aa92,
            #6d675c
        );
}


.project-image-three {

    background:
        linear-gradient(
            145deg,
            #59605b,
            #282e2a
        );
}


.project-image::before,
.project-image::after {

    content:
        "";

    position:
        absolute;

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


.project-image::before {

    width:
        58%;

    height:
        130%;

    left:
        30%;

    top:
        -15%;

    transform:
        skewX(-18deg);
}


.project-image::after {

    width:
        30%;

    height:
        75%;

    right:
        10%;

    bottom:
        0;

    background:
        rgba(0,0,0,.15);
}


.project-info {

    padding:
        25px;

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;
}


.project-info small {

    color:
        #766e62;

    font-size:
        .58rem;

    font-weight:
        900;

    letter-spacing:
        .14em;
}


.project-info h3 {

    margin:
        7px
        0
        0;

    font-size:
        1.35rem;
}


.project-info > strong {

    color:
        #756c5f;

    font-size:
        .8rem;
}



/* SERVICES */

.bauwerk-services {

    padding:
        120px
        60px;

    display:
        grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:
        100px;

    background:
        #262825;

    color:
        #eeeae2;
}


.bauwerk-services-intro span {

    color:
        #bba17f;
}


.bauwerk-service-list article {

    display:
        grid;

    grid-template-columns:
        60px 220px 1fr;

    gap:
        24px;

    align-items:
        start;

    padding:
        27px
        0;

    border-top:
        1px solid
        #4b4d49;
}


.bauwerk-service-list article > span {

    color:
        #9e876a;

    font-size:
        .7rem;
}


.bauwerk-service-list h3 {

    margin:
        0;

    font-size:
        1.1rem;
}


.bauwerk-service-list p {

    margin:
        0;

    color:
        #a7aaa3;

    line-height:
        1.6;
}



/* ABOUT */

.bauwerk-about {

    position:
        relative;

    min-height:
        650px;

    padding:
        120px
        60px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        100px;

    align-items:
        center;

    background:
        #d2c4ae;
}


.bauwerk-about-number {

    color:
        rgba(50,46,40,.16);

    font-size:
        clamp(11rem, 20vw, 20rem);

    font-weight:
        900;

    line-height:
        .7;
}


.bauwerk-about-copy p {

    max-width:
        600px;

    color:
        #5e584d;

    font-size:
        1rem;

    line-height:
        1.8;
}



/* CONTACT */

.bauwerk-contact {

    padding:
        130px
        60px;

    background:
        #c9aa7c;

    color:
        #20211e;

    text-align:
        center;
}


.bauwerk-contact > span {

    color:
        #66543d;
}


.bauwerk-contact h2 {

    margin:
        0 auto
        45px;
}


.bauwerk-contact a {

    display:
        inline-block;

    padding:
        16px
        24px;

    color:
        white;

    background:
        #232421;

    text-decoration:
        none;

    font-size:
        .8rem;

    font-weight:
        800;
}



/* FOOTER */

.bauwerk-footer {

    padding:
        35px
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    background:
        #181a18;

    color:
        #9d9f99;
}


.bauwerk-footer strong {

    color:
        #eeeae2;

    letter-spacing:
        .12em;
}



/* RESPONSIVE */

@media (max-width: 900px) {

    .bauwerk-site {

        width:
            calc(100% - 16px);
    }


    .bauwerk-header {

        padding:
            0 22px;
    }


    .bauwerk-nav a:not(.bauwerk-nav-cta) {

        display:
            none;
    }


    .bauwerk-hero {

        min-height:
            760px;

        padding:
            60px 28px;
    }


    .bauwerk-hero-architecture {

        opacity:
            .35;

        right:
            -300px;
    }


    .bauwerk-hero-copy {

        padding-top:
            70px;
    }


    .bauwerk-hero h1 {

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


    .bauwerk-hero-meta {

        left:
            28px;

        right:
            28px;

        gap:
            20px;
    }


    .bauwerk-projects,
    .bauwerk-services,
    .bauwerk-about,
    .bauwerk-contact {

        padding:
            80px
            28px;
    }


    .bauwerk-project-grid {

        grid-template-columns:
            1fr;
    }


    .bauwerk-project-large {

        grid-row:
            auto;
    }


    .bauwerk-project-large .project-image {

        min-height:
            380px;
    }


    .bauwerk-services {

        grid-template-columns:
            1fr;

        gap:
            55px;
    }


    .bauwerk-service-list article {

        grid-template-columns:
            45px 1fr;
    }


    .bauwerk-service-list p {

        grid-column:
            2;
    }


    .bauwerk-about {

        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .bauwerk-about-number {

        font-size:
            10rem;
    }


    .bauwerk-footer {

        gap:
            15px;

        flex-direction:
            column;

        text-align:
            center;
    }

}


/* =========================================================
   MOKKA GALLERY PREVIEW — VELVET GREEN
   ========================================================= */

.example-preview--gastro-two {
    background:
        linear-gradient(
            135deg,
            #10271d,
            #081610
        ) !important;
}

.mini-site--cafe {
    color:
        #e8d6ad !important;

    background:
        linear-gradient(
            145deg,
            #17372a,
            #0a1e16
        ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(210,174,107,.14);
}

.mini-site--cafe::before {
    content: "";

    position:
        absolute;

    inset:
        18px;

    border:
        1px solid rgba(210,174,107,.17);

    pointer-events:
        none;
}

.cafe-brand {
    color:
        #d2ae6b !important;

    letter-spacing:
        .18em !important;
}

.cafe-copy {
    color:
        #efe5d0 !important;
}

.cafe-copy small {
    color:
        #c5a66b !important;
}

.cafe-copy strong {
    color:
        #f0e7d5 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-weight:
        400 !important;

    font-size:
        3.2rem !important;
}

.cafe-copy span {
    color:
        rgba(239,229,208,.72) !important;
}

.cafe-shape {
    width:
        270px !important;

    height:
        330px !important;

    right:
        -90px !important;

    bottom:
        -105px !important;

    background:
        linear-gradient(
            145deg,
            #b89153,
            #6d512a
        ) !important;

    opacity:
        .88;
}
















/* === VT RESERVE BUTTON WEIGHT === */

html body .mk-header .mk-reserve-top {
    font-weight: 600 !important;
}

html body .mk-header .mk-reserve-top span,
html body .mk-header .mk-reserve-top strong {
    font-weight: 600 !important;
}


/* === VT RESERVE BUTTON DESKTOP FONT FIX === */

@media (min-width: 769px) {

    html body .mk-header .mk-reserve-top,
    html body .mk-header .mk-reserve-top *,
    html body .mk-header a.mk-reserve-top,
    html body .mk-header a.mk-reserve-top * {
        font-weight: 400 !important;
    }

}


/* === VT RESERVE BUTTON DESKTOP FONT FIX === */

@media (min-width: 769px) {

    html body .mk-header .mk-reserve-top,
    html body .mk-header .mk-reserve-top *,
    html body .mk-header a.mk-reserve-top,
    html body .mk-header a.mk-reserve-top * {
        font-weight: 400 !important;
    }

}





/* WEBDEV_BUSINESS_CSS_START */

/* ============================================================
   WEB.DEV BUSINESS SECTIONS
   ============================================================ */

.wd-business {
    position: relative;
    overflow: hidden;
}

.wd-business-shell {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
}


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

.wd-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 22px;

    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;

    color: #735cff;
}

.wd-kicker::before {
    content: "";

    width: 26px;
    height: 2px;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            #725cff,
            #ff54bc,
            #ffb52e
        );
}


.wd-section-intro {
    max-width: 760px;
    margin-bottom: 64px;
}

.wd-section-intro--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.wd-section-intro--center .wd-kicker {
    justify-content: center;
}

.wd-section-intro h2,
.wd-infra-copy h2 {
    margin: 0 0 24px;

    font-size: clamp(48px, 6vw, 82px);
    line-height: .98;
    letter-spacing: -.055em;
}

.wd-section-intro h2 span,
.wd-infra-copy h2 span {
    background:
        linear-gradient(
            90deg,
            #765bff,
            #e34ee1,
            #ff824f,
            #ffb729
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.wd-section-intro p,
.wd-infra-lead {
    max-width: 670px;

    margin: 0;

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

    color: rgba(25, 25, 35, .68);
}


/* ============================================================
   WHAT WE BUILD
   ============================================================ */

.wd-build {
    position: relative;

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

    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #faf9ff 100%
        );
}

.wd-build-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 22px;
}

.wd-build-card {
    position: relative;

    min-height: 350px;

    padding: 42px;

    overflow: hidden;

    border:
        1px solid rgba(80, 65, 160, .10);

    border-radius: 34px;

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

    box-shadow:
        0 28px 80px rgba(73, 54, 147, .07);

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

.wd-build-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(119, 89, 255, .23);

    box-shadow:
        0 36px 90px rgba(73, 54, 147, .13);
}

.wd-build-card::before {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -110px;
    top: -110px;

    border-radius: 50%;

    filter: blur(1px);

    opacity: .7;
}

.wd-build-card--design::before {
    background:
        radial-gradient(
            circle,
            rgba(115, 87, 255, .24),
            transparent 68%
        );
}

.wd-build-card--develop::before {
    background:
        radial-gradient(
            circle,
            rgba(244, 73, 192, .22),
            transparent 68%
        );
}

.wd-build-card--apps::before {
    background:
        radial-gradient(
            circle,
            rgba(255, 134, 77, .22),
            transparent 68%
        );
}

.wd-build-card--connect::before {
    background:
        radial-gradient(
            circle,
            rgba(44, 208, 209, .20),
            transparent 68%
        );
}

.wd-build-number {
    position: absolute;

    right: 30px;
    top: 26px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;

    color: rgba(45, 35, 70, .32);
}

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

    width: 54px;
    height: 54px;

    margin-bottom: 70px;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(118, 91, 255, .13),
            rgba(255, 88, 180, .10)
        );

    color: #725cff;

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

.wd-build-card h3 {
    margin:
        0
        0
        15px;

    font-size: 31px;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.wd-build-card p {
    max-width: 500px;

    margin:
        0
        0
        27px;

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

    color: rgba(20, 20, 35, .62);
}

.wd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

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

    border:
        1px solid rgba(97, 74, 188, .11);

    border-radius: 999px;

    background:
        rgba(116, 90, 255, .045);

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

    color: #66529e;
}


/* ============================================================
   INFRASTRUCTURE SECTION
   ============================================================ */

.wd-infra {
    position: relative;

    padding:
        clamp(110px, 13vw, 190px)
        0;

    overflow: hidden;

    background:
        #0e0d14;

    color: white;
}

.wd-infra::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 18% 15%,
            rgba(113, 85, 255, .19),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(242, 69, 190, .13),
            transparent 30%
        );
}

.wd-infra-orb {
    position: absolute;

    border-radius:
        47%
        53%
        59%
        41% /
        58%
        37%
        63%
        42%;

    filter: blur(3px);

    opacity: .52;
}

.wd-infra-orb--one {
    width: 420px;
    height: 420px;

    left: -280px;
    bottom: -80px;

    background:
        linear-gradient(
            145deg,
            #684dff,
            #d94bd2
        );
}

.wd-infra-orb--two {
    width: 340px;
    height: 340px;

    right: -210px;
    top: 40px;

    background:
        linear-gradient(
            145deg,
            #ff8350,
            #e948c5
        );
}

.wd-infra-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap:
        clamp(60px, 8vw, 120px);

    align-items: center;
}

.wd-infra .wd-kicker {
    color: #b1a5ff;
}

.wd-infra-copy h2 {
    color: white;
}

.wd-infra-lead {
    color: rgba(255,255,255,.62);
}

.wd-infra-features {
    display: grid;
    gap: 28px;

    margin-top: 48px;
}

.wd-infra-feature {
    display: grid;

    grid-template-columns:
        24px
        1fr;

    gap: 18px;
}

.wd-feature-dot {
    width: 10px;
    height: 10px;

    margin-top: 7px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #806cff,
            #ff56c4,
            #ffad34
        );

    box-shadow:
        0 0 20px rgba(146, 101, 255, .7);
}

.wd-infra-feature h3 {
    margin:
        0
        0
        5px;

    font-size: 18px;
}

.wd-infra-feature p {
    margin: 0;

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

    line-height: 1.55;
}


/* architecture window */

.wd-architecture {
    position: relative;

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

    border-radius: 32px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 55px 120px rgba(0,0,0,.36);

    backdrop-filter:
        blur(22px);

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

.wd-architecture-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        20px
        24px;

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

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;

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

.wd-arch-status {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wd-arch-status i {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #65ebae;

    box-shadow:
        0 0 15px rgba(101,235,174,.9);
}

.wd-architecture-canvas {
    padding:
        54px
        clamp(24px, 5vw, 60px)
        60px;
}

.wd-arch-node {
    position: relative;

    max-width: 320px;

    margin:
        0
        auto;

    padding:
        22px;

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

    border-radius: 19px;

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

    text-align: center;

    box-shadow:
        0 16px 40px rgba(0,0,0,.2);
}

.wd-arch-node small,
.wd-arch-mini small {
    display: block;

    margin-bottom: 5px;

    font-size: 9px;
    letter-spacing: .14em;

    color: #aa9cff;
}

.wd-arch-node strong {
    display: block;

    font-size: 21px;
}

.wd-arch-node span {
    display: block;

    margin-top: 5px;

    font-size: 12px;

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

.wd-arch-node--api {
    border-color:
        rgba(238, 82, 199, .25);

    background:
        linear-gradient(
            135deg,
            rgba(116, 85, 255, .11),
            rgba(238, 82, 199, .08)
        );
}

.wd-arch-line {
    position: relative;

    width: 1px;
    height: 54px;

    margin:
        0
        auto;

    background:
        linear-gradient(
            180deg,
            rgba(130,107,255,.2),
            rgba(236,78,201,.7)
        );
}

.wd-arch-line i,
.wd-arch-connector i {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #df5ee5;

    box-shadow:
        0 0 13px #df5ee5;

    animation:
        wdDataFlow 2.2s
        infinite
        ease-in-out;
}

.wd-arch-line i {
    left: -2.5px;
    top: 0;
}

@keyframes wdDataFlow {

    0% {
        transform: translateY(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(49px);
        opacity: 0;
    }

}

.wd-arch-split {
    position: relative;

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

    max-width: 520px;

    height: 62px;

    margin:
        0
        auto;
}

.wd-arch-split::before {
    content: "";

    position: absolute;

    left: 16.5%;
    right: 16.5%;
    top: 26px;

    height: 1px;

    background:
        rgba(139, 113, 255, .38);
}

.wd-arch-connector {
    position: relative;

    width: 1px;
    height: 62px;

    margin:
        0
        auto;

    background:
        linear-gradient(
            rgba(226,82,219,.55),
            rgba(120,94,255,.25)
        );
}

.wd-arch-connector i {
    left: -2.5px;
    top: 7px;

    animation-delay:
        .4s;
}

.wd-arch-bottom {
    display: grid;

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

    gap: 12px;
}

.wd-arch-mini {
    padding:
        17px
        12px;

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

    border-radius: 15px;

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

    text-align: center;
}

.wd-arch-mini strong {
    font-size: 12px;
}


/* ============================================================
   APPLICATION DEMOS
   ============================================================ */

.wd-app-demo {
    padding:
        clamp(100px, 12vw, 170px)
        0;

    background:
        linear-gradient(
            180deg,
            #f9f8ff,
            #ffffff
        );
}

.wd-demo-grid {
    display: grid;

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

    gap: 28px;
}

.wd-demo-card {
    overflow: hidden;

    border:
        1px solid rgba(79,62,157,.11);

    border-radius: 32px;

    background: white;

    box-shadow:
        0 32px 90px rgba(64,48,135,.08);
}

.wd-demo-window {
    margin:
        16px
        16px
        0;

    overflow: hidden;

    border-radius: 22px;

    background: #111019;

    color: white;
}

.wd-demo-window-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        13px
        16px;

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

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

    font-size: 9px;
    letter-spacing: .06em;
}

.wd-window-dots {
    display: flex;
    gap: 5px;
}

.wd-window-dots i {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

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

.wd-demo-dashboard {
    padding: 24px;
}

.wd-demo-title-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 24px;
}

.wd-demo-title-row small {
    display: block;

    margin-bottom: 4px;

    font-size: 8px;
    letter-spacing: .16em;

    color: #9281ff;
}

.wd-demo-title-row strong {
    font-size: 16px;
}

.wd-demo-online {
    font-size: 9px;

    color: #71e7ac;
}

.wd-server-row {
    display: grid;

    grid-template-columns:
        1fr
        auto
        60px;

    gap: 15px;

    align-items: center;

    padding:
        12px
        0;

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

    font-size: 11px;
}

.wd-server-row b {
    color: #71e7ac;
}

.wd-server-row small {
    text-align: right;

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

.wd-server-row--warning b {
    color: #ffbc61;
}

.wd-job-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        13px
        0;

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

.wd-job-row strong,
.wd-job-row small {
    display: block;
}

.wd-job-row strong {
    margin-bottom: 3px;

    font-size: 11px;
}

.wd-job-row small {
    font-size: 9px;

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

.wd-job-row button {
    padding:
        8px
        13px;

    border: 0;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #745cff,
            #df55db
        );

    color: white;

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

.wd-demo-copy {
    padding:
        35px
        35px
        40px;
}

.wd-demo-label {
    display: block;

    margin-bottom: 12px;

    color: #765cff;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.wd-demo-copy h3 {
    margin:
        0
        0
        14px;

    font-size: 28px;
    letter-spacing: -.035em;
}

.wd-demo-copy p {
    margin:
        0
        0
        24px;

    line-height: 1.65;

    color: rgba(25,25,35,.59);
}


/* ============================================================
   PRICING
   ============================================================ */

.wd-pricing {
    position: relative;

    padding:
        clamp(110px, 13vw, 190px)
        0;

    overflow: hidden;

    background: #f6f4ff;
}

.wd-pricing::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 12% 28%,
            rgba(117,87,255,.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 65%,
            rgba(250,83,189,.09),
            transparent 31%
        );
}

.wd-pricing > .wd-business-shell {
    position: relative;
    z-index: 2;
}

.wd-pricing-blob {
    position: absolute;

    filter: blur(2px);

    opacity: .27;
}

.wd-pricing-blob--one {
    width: 260px;
    height: 260px;

    left: -150px;
    top: 180px;

    border-radius:
        63% 37% 44% 56% /
        36% 54% 46% 64%;

    background:
        linear-gradient(
            135deg,
            #6f57ff,
            #e855d8
        );
}

.wd-pricing-blob--two {
    width: 360px;
    height: 360px;

    right: -220px;
    bottom: -50px;

    border-radius:
        42% 58% 64% 36% /
        53% 37% 63% 47%;

    background:
        linear-gradient(
            135deg,
            #ff5cbf,
            #ffad39
        );
}

.wd-price-grid {
    display: grid;

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

    gap: 20px;
}

.wd-price-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 590px;

    padding: 36px;

    border:
        1px solid rgba(93,72,174,.11);

    border-radius: 31px;

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

    box-shadow:
        0 30px 80px rgba(72,54,145,.07);

    backdrop-filter:
        blur(18px);

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

.wd-price-card--featured {
    transform: translateY(-15px);

    border-color:
        rgba(119,86,255,.25);

    background:
        linear-gradient(
            160deg,
            rgba(255,255,255,.91),
            rgba(243,239,255,.88)
        );

    box-shadow:
        0 35px 100px rgba(100,71,210,.15);
}

.wd-price-card--custom {
    background:
        linear-gradient(
            155deg,
            #16141f,
            #211b31
        );

    color: white;
}

.wd-price-badge {
    position: absolute;

    right: 22px;
    top: -12px;

    padding:
        8px
        13px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #755cff,
            #e650d5
        );

    color: white;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.wd-price-top {
    display: flex;
    justify-content: space-between;

    margin-bottom: 45px;
}

.wd-price-type,
.wd-price-number {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;

    color: #745cff;
}

.wd-price-number {
    color: rgba(40,30,70,.28);
}

.wd-price-card--custom .wd-price-type {
    color: #b7aaff;
}

.wd-price-card--custom .wd-price-number {
    color: rgba(255,255,255,.25);
}

.wd-price-card h3 {
    margin:
        0
        0
        25px;

    font-size: 29px;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.wd-price-card h3 small {
    display: block;

    margin-top: 5px;

    font-size: .58em;
    font-weight: 550;

    opacity: .55;
}

.wd-price {
    display: flex;
    align-items: baseline;
    gap: 9px;

    margin-bottom: 34px;
}

.wd-price small {
    font-size: 13px;

    color: rgba(30,25,45,.50);
}

.wd-price strong {
    font-size:
        clamp(41px,4vw,56px);

    letter-spacing: -.055em;
}

.wd-price--request strong {
    font-size:
        clamp(34px,3vw,46px);

    line-height: .95;

    background:
        linear-gradient(
            90deg,
            #9d8cff,
            #f267dd,
            #ff9f56
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.wd-price-card ul {
    display: grid;
    gap: 13px;

    padding: 0;
    margin:
        0
        0
        38px;

    list-style: none;
}

.wd-price-card li {
    position: relative;

    padding-left: 20px;

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

    color: rgba(25,25,40,.63);
}

.wd-price-card li::before {
    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

    left: 0;
    top: 7px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #765cff,
            #ec55cf
        );
}

.wd-price-card--custom li {
    color:
        rgba(255,255,255,.55);
}

.wd-price-button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: auto;

    padding:
        16px
        18px;

    border:
        1px solid rgba(102,77,202,.12);

    border-radius: 15px;

    color: #191621;

    text-decoration: none;

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

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

.wd-price-button::after {
    content: "↗";

    font-size: 15px;
}

.wd-price-button:hover {
    transform: translateY(-2px);

    border-color:
        rgba(112,83,228,.30);

    background:
        rgba(111,85,255,.055);
}

.wd-price-card--custom .wd-price-button {
    border-color:
        rgba(255,255,255,.13);

    color: white;
}

.wd-price-card--custom .wd-price-button:hover {
    background:
        rgba(255,255,255,.06);
}

.wd-pricing-note {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    gap: 18px;

    align-items: center;

    margin-top: 35px;

    padding:
        24px
        28px;

    border:
        1px solid rgba(102,78,195,.10);

    border-radius: 20px;

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

.wd-pricing-note span {
    font-size: 13px;

    color: rgba(30,25,45,.48);
}

.wd-pricing-note strong {
    font-size: 14px;
}

.wd-pricing-note a {
    color: #6f56e9;

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

    text-decoration: none;
}


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

@media (max-width: 1000px) {

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

    .wd-architecture {
        max-width: 760px;
    }

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

    .wd-price-card--custom {
        grid-column: 1 / -1;

        min-height: 520px;
    }

}


@media (max-width: 760px) {

    .wd-business-shell {
        width:
            min(100% - 28px, 1240px);
    }

    .wd-section-intro {
        margin-bottom: 45px;
    }

    .wd-section-intro h2,
    .wd-infra-copy h2 {
        font-size:
            clamp(43px,13vw,64px);
    }

    .wd-build-grid,
    .wd-demo-grid,
    .wd-price-grid {
        grid-template-columns: 1fr;
    }

    .wd-build-card {
        min-height: 320px;

        padding: 30px;
    }

    .wd-build-icon {
        margin-bottom: 55px;
    }

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

    .wd-price-card--custom {
        grid-column: auto;
    }

    .wd-pricing-note {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 520px) {

    .wd-architecture-canvas {
        padding:
            38px
            16px
            42px;
    }

    .wd-arch-bottom {
        gap: 6px;
    }

    .wd-arch-mini {
        padding:
            14px
            5px;
    }

    .wd-arch-mini strong {
        font-size: 10px;
    }

    .wd-price-card {
        min-height: auto;

        padding: 29px;
    }

    .wd-price-card ul {
        margin-bottom: 35px;
    }

    .wd-price-button {
        margin-top: 15px;
    }

}

/* WEBDEV_BUSINESS_CSS_END */



/* ===== WD TOOLS DARK SECTION ===== */
.wd-tools-dark-section{
    position: relative !important;
    background:
        radial-gradient(circle at 15% 20%, rgba(102,76,255,.14), transparent 28%),
        radial-gradient(circle at 85% 15%, rgba(255,122,89,.10), transparent 24%),
        linear-gradient(135deg, #090816 0%, #0b0a18 35%, #090713 100%) !important;
    color: #f4f2ff !important;
    padding-top: 110px !important;
    padding-bottom: 110px !important;
    overflow: hidden !important;
}

.wd-tools-dark-section::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,.025), transparent 20%, transparent 80%, rgba(255,255,255,.02)),
        linear-gradient(180deg, rgba(255,255,255,.015), transparent 30%, transparent 70%, rgba(255,255,255,.015)) !important;
}

.wd-tools-dark-section > *{
    position: relative !important;
    z-index: 1 !important;
}

.wd-tools-dark-section h1,
.wd-tools-dark-section h2,
.wd-tools-dark-section h3,
.wd-tools-dark-section h4{
    color: #ffffff !important;
}

.wd-tools-dark-section p,
.wd-tools-dark-section li{
    color: rgba(238,236,255,.78) !important;
}

.wd-tools-dark-section .section-kicker,
.wd-tools-dark-section .eyebrow,
.wd-tools-dark-section .overline,
.wd-tools-dark-section .label{
    color: #9b88ff !important;
}

.wd-tools-dark-section .gradient-word,
.wd-tools-dark-section .has-gradient,
.wd-tools-dark-section .text-gradient{
    background: linear-gradient(90deg, #7a5cff 0%, #d65ad8 45%, #ffad33 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.wd-tools-dark-section .card,
.wd-tools-dark-section .tool-card,
.wd-tools-dark-section .service-card,
.wd-tools-dark-section .demo-card{
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow:
        0 18px 50px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
    color: #ffffff !important;
}

.wd-tools-dark-section .card h3,
.wd-tools-dark-section .tool-card h3,
.wd-tools-dark-section .service-card h3,
.wd-tools-dark-section .demo-card h3{
    color: #ffffff !important;
}

.wd-tools-dark-section .card p,
.wd-tools-dark-section .tool-card p,
.wd-tools-dark-section .service-card p,
.wd-tools-dark-section .demo-card p{
    color: rgba(232,230,248,.76) !important;
}

.wd-tools-dark-section .tag,
.wd-tools-dark-section .chip,
.wd-tools-dark-section .pill{
    background: rgba(255,255,255,.05) !important;
    color: #b6a6ff !important;
    border: 1px solid rgba(255,255,255,.09) !important;
}

.wd-tools-dark-section .tool-preview,
.wd-tools-dark-section .demo-preview,
.wd-tools-dark-section .mockup,
.wd-tools-dark-section .browser-frame{
    background: linear-gradient(180deg, #121120, #0b0a17) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.35) !important;
}

.wd-tools-dark-section a{
    color: #ffffff !important;
}

@media (max-width: 980px){
    .wd-tools-dark-section{
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
}
/* ===== END WD TOOLS DARK SECTION ===== */

/* ===== WD SMALL TOOLS BUMPER BACKGROUND ===== */
.wd-tools-dark-section.wd-bumper-bg{
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background:
        radial-gradient(circle at 18% 18%, rgba(120, 87, 255, 0.14) 0%, rgba(120, 87, 255, 0.06) 20%, transparent 42%),
        radial-gradient(circle at 86% 20%, rgba(255, 126, 95, 0.12) 0%, rgba(255, 126, 95, 0.05) 18%, transparent 40%),
        linear-gradient(135deg, #0a0918 0%, #090714 40%, #080610 100%) !important;
}

.wd-tools-dark-section.wd-bumper-bg::before{
    content: "" !important;
    position: absolute !important;
    left: -180px !important;
    bottom: -180px !important;
    width: 420px !important;
    height: 420px !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at center,
            rgba(130, 82, 255, 0.38) 0%,
            rgba(130, 82, 255, 0.24) 24%,
            rgba(130, 82, 255, 0.10) 44%,
            rgba(130, 82, 255, 0.00) 72%
        ) !important;
    filter: blur(18px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.wd-tools-dark-section.wd-bumper-bg::after{
    content: "" !important;
    position: absolute !important;
    right: -170px !important;
    top: -150px !important;
    width: 380px !important;
    height: 380px !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at center,
            rgba(255, 126, 95, 0.34) 0%,
            rgba(255, 126, 95, 0.20) 26%,
            rgba(255, 126, 95, 0.08) 46%,
            rgba(255, 126, 95, 0.00) 72%
        ) !important;
    filter: blur(18px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.wd-tools-dark-section.wd-bumper-bg > *{
    position: relative !important;
    z-index: 1 !important;
}

.wd-tools-dark-section.wd-bumper-bg h1,
.wd-tools-dark-section.wd-bumper-bg h2,
.wd-tools-dark-section.wd-bumper-bg h3,
.wd-tools-dark-section.wd-bumper-bg h4{
    color: #ffffff !important;
}

.wd-tools-dark-section.wd-bumper-bg p,
.wd-tools-dark-section.wd-bumper-bg li{
    color: rgba(235, 232, 248, 0.80) !important;
}

.wd-tools-dark-section.wd-bumper-bg .eyebrow,
.wd-tools-dark-section.wd-bumper-bg .section-kicker,
.wd-tools-dark-section.wd-bumper-bg .overline,
.wd-tools-dark-section.wd-bumper-bg .label{
    color: #9f8cff !important;
}

.wd-tools-dark-section.wd-bumper-bg .gradient-word,
.wd-tools-dark-section.wd-bumper-bg .text-gradient,
.wd-tools-dark-section.wd-bumper-bg .has-gradient{
    background: linear-gradient(90deg, #7c5cff 0%, #d85ad5 45%, #f5a623 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.wd-tools-dark-section.wd-bumper-bg .card,
.wd-tools-dark-section.wd-bumper-bg .tool-card,
.wd-tools-dark-section.wd-bumper-bg .service-card,
.wd-tools-dark-section.wd-bumper-bg .demo-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.020)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow:
        0 18px 50px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
    color: #ffffff !important;
}

.wd-tools-dark-section.wd-bumper-bg .tool-preview,
.wd-tools-dark-section.wd-bumper-bg .demo-preview,
.wd-tools-dark-section.wd-bumper-bg .mockup,
.wd-tools-dark-section.wd-bumper-bg .browser-frame{
    background: linear-gradient(180deg, #11101d, #0b0a16) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.36) !important;
}

@media (max-width: 980px){
    .wd-tools-dark-section.wd-bumper-bg::before{
        width: 260px !important;
        height: 260px !important;
        left: -120px !important;
        bottom: -120px !important;
        filter: blur(14px) !important;
    }

    .wd-tools-dark-section.wd-bumper-bg::after{
        width: 240px !important;
        height: 240px !important;
        right: -110px !important;
        top: -100px !important;
        filter: blur(14px) !important;
    }
}
/* ===== END WD SMALL TOOLS BUMPER BACKGROUND ===== */



/* WEBDEV_BG_HEADER_FORCE_START */


/* ============================================================
   1. INFRASTRUCTURE:
   GLEICHER BACKGROUND WIE SMALL TOOLS
   ============================================================ */

html body .wd-infra {
    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(120, 87, 255, .14) 0%,
            rgba(120, 87, 255, .06) 20%,
            transparent 42%
        ),
        radial-gradient(
            circle at 86% 20%,
            rgba(255, 126, 95, .12) 0%,
            rgba(255, 126, 95, .05) 18%,
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #0a0918 0%,
            #090714 40%,
            #080610 100%
        ) !important;

    color: #fff !important;
}


/*
 * Der bisherige Background-Layer der Infra-Section
 * wird neutralisiert, damit wirklich der neue Hintergrund
 * sichtbar ist.
 */
html body .wd-infra::before {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.018),
            transparent 22%,
            transparent 78%,
            rgba(255,255,255,.014)
        ) !important;

    opacity: 1 !important;
}


/* vorhandene Bumper / Orbs behalten */

html body .wd-infra .wd-infra-orb--one {
    background:
        radial-gradient(
            circle at center,
            rgba(130,82,255,.42) 0%,
            rgba(130,82,255,.28) 35%,
            rgba(130,82,255,.10) 62%,
            transparent 76%
        ) !important;

    opacity: .80 !important;
    filter: blur(12px) !important;
}


html body .wd-infra .wd-infra-orb--two {
    background:
        radial-gradient(
            circle at center,
            rgba(255,126,95,.38) 0%,
            rgba(255,126,95,.23) 35%,
            rgba(255,126,95,.08) 62%,
            transparent 76%
        ) !important;

    opacity: .80 !important;
    filter: blur(12px) !important;
}



/* ============================================================
   2. HEADER:
   NICHT MEHR STICKY / FIXED
   ============================================================ */

html body .wd-static-header {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    inset: auto !important;

    transform: none !important;

    z-index: 20 !important;
}


/*
 * Falls Sticky auf einem Header-Wrapper liegt,
 * fangen wir die üblichen Varianten ebenfalls ab.
 */

html body header.wd-static-header,
html body .site-header.wd-static-header,
html body .main-header.wd-static-header,
html body .header-shell.wd-static-header {
    position: relative !important;
    top: auto !important;
    inset-block-start: auto !important;
}


/*
 * Sticky-Verhalten von inneren Containern verhindern.
 */

html body .wd-static-header .header-inner,
html body .wd-static-header .header-container,
html body .wd-static-header .nav-container,
html body .wd-static-header .header-shell {
    position: relative !important;
    top: auto !important;
}


/*
 * Falls ein alter Scroll-State per JS eine Klasse setzt.
 */

html body .wd-static-header.is-sticky,
html body .wd-static-header.sticky,
html body .wd-static-header.scrolled,
html body .wd-static-header.is-scrolled {
    position: relative !important;
    top: auto !important;
    transform: none !important;
}


/* Mobile ebenfalls normales Verhalten */

@media (max-width: 768px) {

    html body .wd-static-header,
    html body header.wd-static-header {
        position: relative !important;
        top: auto !important;
        transform: none !important;
    }

}


/* WEBDEV_BG_HEADER_FORCE_END */



/* ============================================================
   WEB.DEV FINAL HEADER + DEMO TEXT FIX
   ============================================================ */


/* ------------------------------------------------------------
   HEADER DEFINITIV NICHT STICKY / FIXED
   ------------------------------------------------------------ */

html body header,
html body .site-header,
html body .main-header,
html body .header,
html body .header-wrap,
html body .header-wrapper,
html body .header-shell,
html body .header-container,
html body .nav-wrap,
html body .nav-wrapper,
html body .navigation-wrap,
html body .navigation-wrapper,
html body .sticky-header,
html body .is-sticky,
html body .sticky,
html body .scrolled,
html body .is-scrolled,
html body .wd-static-header {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    inset: auto !important;
    inset-block-start: auto !important;

    transform: none !important;

    margin-top: 0 !important;

    z-index: auto !important;
}


/* Falls das eigentliche Menü selbst sticky/fixed ist */
html body nav,
html body .main-nav,
html body .desktop-menu,
html body .header-nav,
html body .site-nav,
html body .primary-nav {
    position: static !important;
    top: auto !important;
    inset: auto !important;
    transform: none !important;
}


/* Falls ein innerer Wrapper sticky ist */
html body header *,
html body .wd-static-header * {
    scroll-margin-top: 0 !important;
}


/* ------------------------------------------------------------
   SMALL TOOLS:
   WEISSE CARDS = DUNKLE SCHRIFT
   ------------------------------------------------------------ */

html body .wd-tools-dark-section .wd-demo-card {
    background: #ffffff !important;
    color: #11111a !important;
}


/* Titel */
html body .wd-tools-dark-section .wd-demo-card h1,
html body .wd-tools-dark-section .wd-demo-card h2,
html body .wd-tools-dark-section .wd-demo-card h3,
html body .wd-tools-dark-section .wd-demo-card h4,
html body .wd-tools-dark-section .wd-demo-card strong {
    color: #11111a !important;
}


/* Fließtext */
html body .wd-tools-dark-section .wd-demo-card p,
html body .wd-tools-dark-section .wd-demo-card li {
    color: rgba(17, 17, 26, .62) !important;
}


/* Demo Label */
html body .wd-tools-dark-section .wd-demo-label {
    color: #745cff !important;
}


/* Tags */
html body .wd-tools-dark-section .wd-demo-card .wd-tags span {
    color: #5f4a98 !important;

    background:
        rgba(116, 92, 255, .045) !important;

    border-color:
        rgba(97, 74, 188, .12) !important;
}


/* Wichtig:
   Nur das schwarze Browser-/Dashboard-Fenster bleibt hell beschriftet
*/
html body .wd-tools-dark-section .wd-demo-window,
html body .wd-tools-dark-section .wd-demo-window *,
html body .wd-tools-dark-section .wd-demo-dashboard,
html body .wd-tools-dark-section .wd-demo-dashboard * {
    color: inherit;
}


/* Dashboard spezifische Farben wiederherstellen */
html body .wd-tools-dark-section .wd-demo-window {
    color: #ffffff !important;
}

html body .wd-tools-dark-section .wd-demo-title-row strong,
html body .wd-tools-dark-section .wd-server-row span,
html body .wd-tools-dark-section .wd-job-row strong {
    color: #ffffff !important;
}

html body .wd-tools-dark-section .wd-demo-title-row small,
html body .wd-tools-dark-section .wd-server-row small,
html body .wd-tools-dark-section .wd-job-row small,
html body .wd-tools-dark-section .wd-demo-window-top {
    color: rgba(255,255,255,.38) !important;
}

html body .wd-tools-dark-section .wd-demo-online,
html body .wd-tools-dark-section .wd-server-row b {
    color: #71e7ac !important;
}

html body .wd-tools-dark-section .wd-server-row--warning b {
    color: #ffbc61 !important;
}


/* Mobile ebenfalls sicher nicht sticky */
@media (max-width: 900px) {

    html body header,
    html body nav,
    html body .site-header,
    html body .main-header,
    html body .header-shell,
    html body .header-container,
    html body .wd-static-header {
        position: static !important;
        top: auto !important;
        inset: auto !important;
        transform: none !important;
    }

}



/* ============================================================
   WEB.DEV FINAL HEADER + DEMO TEXT FIX
   ============================================================ */


/* ------------------------------------------------------------
   HEADER DEFINITIV NICHT STICKY / FIXED
   ------------------------------------------------------------ */

html body header,
html body .site-header,
html body .main-header,
html body .header,
html body .header-wrap,
html body .header-wrapper,
html body .header-shell,
html body .header-container,
html body .nav-wrap,
html body .nav-wrapper,
html body .navigation-wrap,
html body .navigation-wrapper,
html body .sticky-header,
html body .is-sticky,
html body .sticky,
html body .scrolled,
html body .is-scrolled,
html body .wd-static-header {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    inset: auto !important;
    inset-block-start: auto !important;

    transform: none !important;

    margin-top: 0 !important;

    z-index: auto !important;
}


/* Falls das eigentliche Menü selbst sticky/fixed ist */
html body nav,
html body .main-nav,
html body .desktop-menu,
html body .header-nav,
html body .site-nav,
html body .primary-nav {
    position: static !important;
    top: auto !important;
    inset: auto !important;
    transform: none !important;
}


/* Falls ein innerer Wrapper sticky ist */
html body header *,
html body .wd-static-header * {
    scroll-margin-top: 0 !important;
}


/* ------------------------------------------------------------
   SMALL TOOLS:
   WEISSE CARDS = DUNKLE SCHRIFT
   ------------------------------------------------------------ */

html body .wd-tools-dark-section .wd-demo-card {
    background: #ffffff !important;
    color: #11111a !important;
}


/* Titel */
html body .wd-tools-dark-section .wd-demo-card h1,
html body .wd-tools-dark-section .wd-demo-card h2,
html body .wd-tools-dark-section .wd-demo-card h3,
html body .wd-tools-dark-section .wd-demo-card h4,
html body .wd-tools-dark-section .wd-demo-card strong {
    color: #11111a !important;
}


/* Fließtext */
html body .wd-tools-dark-section .wd-demo-card p,
html body .wd-tools-dark-section .wd-demo-card li {
    color: rgba(17, 17, 26, .62) !important;
}


/* Demo Label */
html body .wd-tools-dark-section .wd-demo-label {
    color: #745cff !important;
}


/* Tags */
html body .wd-tools-dark-section .wd-demo-card .wd-tags span {
    color: #5f4a98 !important;

    background:
        rgba(116, 92, 255, .045) !important;

    border-color:
        rgba(97, 74, 188, .12) !important;
}


/* Wichtig:
   Nur das schwarze Browser-/Dashboard-Fenster bleibt hell beschriftet
*/
html body .wd-tools-dark-section .wd-demo-window,
html body .wd-tools-dark-section .wd-demo-window *,
html body .wd-tools-dark-section .wd-demo-dashboard,
html body .wd-tools-dark-section .wd-demo-dashboard * {
    color: inherit;
}


/* Dashboard spezifische Farben wiederherstellen */
html body .wd-tools-dark-section .wd-demo-window {
    color: #ffffff !important;
}

html body .wd-tools-dark-section .wd-demo-title-row strong,
html body .wd-tools-dark-section .wd-server-row span,
html body .wd-tools-dark-section .wd-job-row strong {
    color: #ffffff !important;
}

html body .wd-tools-dark-section .wd-demo-title-row small,
html body .wd-tools-dark-section .wd-server-row small,
html body .wd-tools-dark-section .wd-job-row small,
html body .wd-tools-dark-section .wd-demo-window-top {
    color: rgba(255,255,255,.38) !important;
}

html body .wd-tools-dark-section .wd-demo-online,
html body .wd-tools-dark-section .wd-server-row b {
    color: #71e7ac !important;
}

html body .wd-tools-dark-section .wd-server-row--warning b {
    color: #ffbc61 !important;
}


/* Mobile ebenfalls sicher nicht sticky */
@media (max-width: 900px) {

    html body header,
    html body nav,
    html body .site-header,
    html body .main-header,
    html body .header-shell,
    html body .header-container,
    html body .wd-static-header {
        position: static !important;
        top: auto !important;
        inset: auto !important;
        transform: none !important;
    }

}




/* WD_FINAL_REAL_HEADER_FIX_START */


/* ============================================================
   REAL HEADER
   NICHT STICKY
   NICHT FIXED
   ============================================================ */

html body #site-header.wd-header-static,
html body #site-header.site-header {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    inset: auto !important;

    transform: none !important;

    width: 100% !important;

    z-index: 50 !important;
}


/* Der Glass-Container bleibt optisch unverändert,
   darf aber NICHT sticky/fixed sein */

html body #site-header .header-shell {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    inset: auto !important;

    transform: none !important;
}


/* innerer Header ebenfalls absichern */

html body #site-header .header-inner {
    position: relative !important;

    top: auto !important;
    inset: auto !important;

    transform: none !important;
}


/* Desktop Navigation */

html body #site-header .desktop-nav,
html body #site-header .desktop-menu {
    position: static !important;

    top: auto !important;
    inset: auto !important;

    transform: none !important;
}


/* sämtliche möglichen JS Sticky-Zustände neutralisieren */

html body #site-header.sticky,
html body #site-header.is-sticky,
html body #site-header.fixed,
html body #site-header.is-fixed,
html body #site-header.scrolled,
html body #site-header.is-scrolled {
    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;

    inset: auto !important;

    transform: none !important;
}


/* ============================================================
   SMALL TOOLS
   WHITE CARDS -> DARK TEXT
   ============================================================ */

html body .wd-tools-dark-section .wd-demo-card {
    background: #ffffff !important;
    color: #111426 !important;
}


/* kompletter Copy-Bereich */

html body .wd-tools-dark-section .wd-demo-copy {
    color: #111426 !important;
}


/* Überschrift */

html body .wd-tools-dark-section .wd-demo-copy h3 {
    color: #111426 !important;

    opacity: 1 !important;
}


/* Beschreibung */

html body .wd-tools-dark-section .wd-demo-copy p {
    color: #5c6072 !important;

    opacity: 1 !important;
}


/* Python Demo 01 / 02 */

html body .wd-tools-dark-section .wd-demo-label {
    color: #765cff !important;

    opacity: 1 !important;
}


/* Tags */

html body .wd-tools-dark-section .wd-demo-copy .wd-tags span {
    color: #59458f !important;

    background:
        rgba(117, 91, 255, .055) !important;

    border:
        1px solid rgba(117, 91, 255, .15) !important;

    opacity: 1 !important;
}


/* ============================================================
   DASHBOARD-FENSTER BLEIBT DUNKEL
   ============================================================ */

html body .wd-tools-dark-section .wd-demo-window {
    color: #ffffff !important;
}


html body .wd-tools-dark-section .wd-demo-window .wd-demo-title-row strong,
html body .wd-tools-dark-section .wd-demo-window .wd-server-row > span,
html body .wd-tools-dark-section .wd-demo-window .wd-job-row strong {
    color: #ffffff !important;
}


html body .wd-tools-dark-section .wd-demo-window .wd-demo-title-row small,
html body .wd-tools-dark-section .wd-demo-window .wd-job-row small,
html body .wd-tools-dark-section .wd-demo-window .wd-server-row small {
    color: rgba(255,255,255,.38) !important;
}


html body .wd-tools-dark-section .wd-demo-window .wd-demo-online,
html body .wd-tools-dark-section .wd-demo-window .wd-server-row b {
    color: #71e7ac !important;
}


html body .wd-tools-dark-section .wd-demo-window .wd-server-row--warning b {
    color: #ffbc61 !important;
}


/* Mobile */

@media (max-width: 820px) {

    html body #site-header,
    html body #site-header .header-shell,
    html body #site-header .header-inner {
        position: relative !important;

        top: auto !important;
        inset: auto !important;

        transform: none !important;
    }

}


/* WD_FINAL_REAL_HEADER_FIX_END */




/* WEBDEV_FOOTER_V2_START */


/* ============================================================
   WEB.DEV FOOTER
   ============================================================ */

.wd-footer {
    position: relative;

    overflow: hidden;

    padding:
        clamp(90px, 10vw, 150px)
        28px
        36px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(115, 82, 255, .19),
            transparent 30%
        ),
        radial-gradient(
            circle at 87% 15%,
            rgba(255, 104, 138, .14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #0b0918 0%,
            #0b0913 48%,
            #09070f 100%
        );

    color: #ffffff;
}


.wd-footer-shell {
    position: relative;
    z-index: 2;

    width: min(1240px, 100%);
    margin: 0 auto;
}


/* decorative blobs */

.wd-footer-blob {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(5px);
}

.wd-footer-blob--left {
    width: 390px;
    height: 390px;

    left: -230px;
    bottom: -170px;

    background:
        radial-gradient(
            circle,
            rgba(121, 78, 255, .48),
            rgba(121, 78, 255, .13) 55%,
            transparent 72%
        );
}

.wd-footer-blob--right {
    width: 350px;
    height: 350px;

    right: -190px;
    top: -130px;

    background:
        radial-gradient(
            circle,
            rgba(255, 114, 91, .38),
            rgba(231, 72, 184, .12) 55%,
            transparent 73%
        );
}


/* CTA */

.wd-footer-cta {
    max-width: 880px;
}

.wd-footer-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 25px;

    color: #a795ff;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .18em;
}

.wd-footer-kicker::before {
    content: "";

    width: 28px;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #795cff,
            #e653d0,
            #ffa427
        );
}


.wd-footer-cta h2 {
    margin:
        0
        0
        28px;

    max-width: 900px;

    font-size:
        clamp(54px, 7.5vw, 102px);

    line-height: .92;
    letter-spacing: -.065em;

    color: #ffffff;
}

.wd-footer-cta h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #755cff 0%,
            #ca56df 38%,
            #ff665f 68%,
            #ffad2f 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.wd-footer-cta p {
    max-width: 690px;

    margin:
        0
        0
        36px;

    color:
        rgba(240, 237, 249, .62);

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


.wd-footer-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}


.wd-footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    min-width: 180px;

    padding:
        15px
        18px;

    border-radius: 15px;

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

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


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


.wd-footer-btn--primary {
    color: white;

    background:
        linear-gradient(
            100deg,
            #754fff,
            #cb4fd4,
            #ff745b
        );

    box-shadow:
        0 13px 36px rgba(117, 79, 255, .23);
}


.wd-footer-btn--ghost {
    color: white;

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

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


.wd-footer-btn--ghost:hover {
    background:
        rgba(255,255,255,.08);
}


/* divider */

.wd-footer-line {
    height: 1px;

    margin:
        clamp(70px, 8vw, 110px)
        0
        55px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.05),
            transparent
        );
}


/* footer columns */

.wd-footer-grid {
    display: grid;

    grid-template-columns:
        1.8fr
        1fr
        1.3fr
        1fr;

    gap:
        clamp(35px, 6vw, 85px);
}


.wd-footer-brand img {
    display: block;

    width:
        clamp(155px, 16vw, 220px);

    height: auto;

    margin-bottom: 20px;

    filter:
        drop-shadow(
            0 15px 32px
            rgba(100, 70, 255, .15)
        );
}


.wd-footer-brand p {
    max-width: 280px;

    margin: 0;

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

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


.wd-footer-column {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}


.wd-footer-column-title {
    margin-bottom: 8px;

    color: #9d89ff;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}


.wd-footer-column a,
.wd-footer-column > span:not(.wd-footer-column-title) {
    color:
        rgba(255,255,255,.57);

    font-size: 13px;

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


.wd-footer-column a:hover {
    color: #ffffff;

    transform:
        translateX(3px);
}


/* very bottom */

.wd-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 65px;

    padding-top: 25px;

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

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

    font-size: 11px;
}


.wd-footer-bottom-tag {
    letter-spacing: .08em;
}


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

@media (max-width: 900px) {

    .wd-footer-grid {
        grid-template-columns:
            1.4fr
            1fr
            1fr;
    }

    .wd-footer-column:last-child {
        grid-column: 2 / 4;
    }

}


@media (max-width: 650px) {

    .wd-footer {
        padding:
            85px
            18px
            28px;
    }

    .wd-footer-cta h2 {
        font-size:
            clamp(48px, 14vw, 70px);
    }

    .wd-footer-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap:
            42px
            25px;
    }

    .wd-footer-brand {
        grid-column:
            1 / -1;
    }

    .wd-footer-column:last-child {
        grid-column: auto;
    }

    .wd-footer-bottom {
        align-items: flex-start;
        flex-direction: column;

        margin-top: 45px;
    }

}


@media (max-width: 430px) {

    .wd-footer-grid {
        grid-template-columns: 1fr;
    }

    .wd-footer-actions {
        flex-direction: column;
    }

    .wd-footer-btn {
        width: 100%;
    }

}


/* WEBDEV_FOOTER_V2_END */




/* WD_HEADER_CLEAN_CENTER_START */


/* ============================================================
   CLEAN STATIC HEADER
   ============================================================ */

html body #site-header {
    position: relative !important;
    width: 100% !important;
    z-index: 20 !important;
}


/* weißen / glassigen Kasten entfernen */

html body #site-header .header-shell {
    max-width: var(--container) !important;
    width: calc(100% - 56px) !important;

    margin: 0 auto !important;

    padding:
        26px
        0
        18px !important;

    background: transparent !important;

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

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* echtes geometrisches Zentrieren */

html body #site-header .header-inner {
    display: grid !important;

    grid-template-columns:
        minmax(220px, 1fr)
        auto
        minmax(220px, 1fr)
        !important;

    align-items: center !important;

    width: 100% !important;

    gap: 24px !important;
}


/* Logo links */

html body #site-header .header-brand {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;

    width: auto !important;

    justify-self: start !important;
}


/* Logo etwas kompakter */

html body #site-header .brand-logo {
    width:
        clamp(180px, 15vw, 245px)
        !important;

    height: auto !important;
}


/* Navigation exakt Mitte */

html body #site-header .desktop-nav {
    display: flex !important;

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

    justify-self: center !important;

    position: static !important;

    width: auto !important;
}


/* Menü selbst mittig */

html body #site-header .desktop-menu {
    display: flex !important;

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

    gap:
        clamp(30px, 3.4vw, 58px)
        !important;

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

    list-style: none !important;
}


/* Menütypografie */

html body #site-header .desktop-menu a {
    white-space: nowrap !important;

    color: #111426 !important;

    font-weight: 800 !important;

    text-decoration: none !important;
}


/* Rechte Ausgleichsseite:
   Menü bleibt dadurch wirklich geometrisch zentriert */

html body #site-header .menu-toggle {
    justify-self: end !important;
}


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

@media (max-width: 900px) {

    html body #site-header .header-shell {
        width: calc(100% - 32px) !important;

        padding:
            18px
            0
            12px !important;
    }

    html body #site-header .header-inner {
        grid-template-columns:
            1fr
            auto
            !important;

        gap: 18px !important;
    }

    html body #site-header .header-brand {
        grid-column: 1 !important;

        justify-self: start !important;
    }

    html body #site-header .desktop-nav {
        display: none !important;
    }

    html body #site-header .menu-toggle {
        grid-column: 2 !important;

        display: flex !important;

        justify-self: end !important;
    }

    html body #site-header .brand-logo {
        width:
            clamp(165px, 34vw, 220px)
            !important;
    }

}


/* WD_HEADER_CLEAN_CENTER_END */




/* WD_HEADER_REALIGN_START */

/* =========================================================
   HEADER: Logo weiter nach links / Menü screen-zentriert
   ========================================================= */

html body #site-header {
    position: relative !important;
    width: 100% !important;
    z-index: 100 !important;
}

html body #site-header .header-shell {
    width: min(1420px, calc(100% - 72px)) !important;
    margin: 0 auto !important;
    padding: 26px 0 18px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 3-Spalten-Grid:
   links Logo / mitte Menü / rechts Ausgleich
*/
html body #site-header .header-inner {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) auto minmax(280px, 1fr) !important;
    align-items: center !important;
    column-gap: 24px !important;
    width: 100% !important;
}

/* Logo links ausrichten und etwas weiter nach links ziehen */
html body #site-header .header-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: start !important;
    transform: translateX(-34px) !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body #site-header .brand-logo,
html body #site-header .custom-logo,
html body #site-header .header-brand img {
    width: clamp(185px, 15vw, 250px) !important;
    height: auto !important;
    display: block !important;
}

/* Menü exakt in die Mitte des Screens */
html body #site-header .desktop-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body #site-header .desktop-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(34px, 3vw, 64px) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body #site-header .desktop-menu > li,
html body #site-header .desktop-menu a {
    margin: 0 !important;
    padding: 0 !important;
}

html body #site-header .desktop-menu a {
    color: #111426 !important;
    font-weight: 800 !important;
    font-size: clamp(18px, 1.08vw, 22px) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* rechte Spalte als Ausgleich */
html body #site-header .menu-toggle,
html body #site-header .header-actions {
    justify-self: end !important;
}

/* falls Desktop keinen rechten Block hat,
   trotzdem Platzhalter für perfekte Mittelachse */
html body #site-header .header-inner::after {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    min-width: 280px !important;
    height: 1px !important;
    visibility: hidden !important;
    grid-column: 3 !important;
}

/* Mobile / Tablet */
@media (max-width: 980px) {
    html body #site-header .header-shell {
        width: calc(100% - 32px) !important;
        padding: 18px 0 12px !important;
    }

    html body #site-header .header-inner {
        grid-template-columns: 1fr auto !important;
        column-gap: 16px !important;
    }

    html body #site-header .header-brand {
        transform: translateX(0) !important;
    }

    html body #site-header .desktop-nav {
        display: none !important;
    }

    html body #site-header .header-inner::after {
        display: none !important;
        content: none !important;
    }

    html body #site-header .menu-toggle,
    html body #site-header .header-actions {
        display: flex !important;
        justify-self: end !important;
    }

    html body #site-header .brand-logo,
    html body #site-header .custom-logo,
    html body #site-header .header-brand img {
        width: clamp(160px, 34vw, 220px) !important;
    }
}

/* WD_HEADER_REALIGN_END */


/* ============================================================
   MOBILE / RESPONSIVE OVERFLOW FIX
   ============================================================ */

html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

@media (max-width: 980px) {

    html,
    body,
    .site-main,
    .hero-webdev,
    .wd-business,
    .wd-infra,
    .wd-app-demo,
    .wd-pricing,
    .wd-footer {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    img,
    svg,
    video,
    canvas {
        max-width: 100% !important;
        height: auto;
    }

    .hero-visual,
    .wd-architecture,
    .wd-demo-card,
    .wd-demo-window,
    .wd-build-card,
    .wd-price-card {
        max-width: 100% !important;
    }

    .hero-bg-shape,
    .wd-infra-orb,
    .wd-pricing-blob,
    .wd-footer-blob {
        pointer-events: none !important;
    }
}


/* WEBDEV_RECAPTCHA_SCROLL_FIX_START */

/* reCAPTCHA v3 badge */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/*
 * Prevent horizontal overflow from decorative elements.
 * Do NOT globally disable vertical scrolling.
 */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

/* WEBDEV_RECAPTCHA_SCROLL_FIX_END */

/* WEBDEV_GLOBAL_SCROLL_FIX_START */

/*
 * Vertical page scrolling must always remain available.
 * Individual sections may still use overflow:hidden
 * for decorative blobs and animations.
 */
html {
    overflow-x: clip !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
}

body {
    overflow-x: clip !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
}

/*
 * Google reCAPTCHA v3 badge.
 * Privacy/Terms disclosure must remain visible near the form.
 */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* WEBDEV_GLOBAL_SCROLL_FIX_END */


/* WEBDEV_SCROLL_HARDENING_START */

/*
 * Page itself must always be vertically scrollable.
 * Section-specific overflow:hidden remains untouched.
 */
html {
    overflow-x: clip !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
}

body {
    overflow-x: clip !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
}

/*
 * reCAPTCHA v3 badge hidden.
 * Google disclosure remains in/near the form.
 */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* WEBDEV_SCROLL_HARDENING_END */


/* WEBDEV_RECAPTCHA_HITBOX_FIX_START */

/*
 * reCAPTCHA v3 bleibt aktiv.
 * Der sichtbare Badge-/iframe-Hitbereich wird vollständig kollabiert,
 * damit er auf Touch-Geräten keine Scroll-Gesten abfangen kann.
 */
.grecaptcha-badge,
.grecaptcha-badge * {
    pointer-events: none !important;
}

.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;

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

    overflow: hidden !important;

    right: -9999px !important;
    left: auto !important;
    bottom: auto !important;
    top: -9999px !important;

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

    transform: none !important;
}

.grecaptcha-badge iframe {
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;

    pointer-events: none !important;

    visibility: hidden !important;
    opacity: 0 !important;
}

/*
 * Vorsichtshalber keine horizontale Scrollfläche durch
 * externe fixed Elemente zulassen.
 */
html,
body {
    overflow-x: clip !important;
}

/* WEBDEV_RECAPTCHA_HITBOX_FIX_END */


/* ============================================================
   WEBDEV HEADER FINAL STATIC OVERRIDE
   ============================================================ */

html body #site-header,
html body #site-header.site-header,
html body #site-header.is-scrolled,
html body.has-scrolled #site-header {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    transform: none !important;
}


html body #site-header .header-shell,
html body.has-scrolled #site-header .header-shell,
html body #site-header.is-scrolled .header-shell {
    position: relative !important;
    top: auto !important;
    inset: auto !important;
    transform: none !important;
}


/* has-scrolled darf Logo/Größe nicht mehr verändern */

html body.has-scrolled #site-header .brand-logo,
html body #site-header.is-scrolled .brand-logo {
    transform: none !important;
}


/* ============================================================
   END STATIC HEADER
   ============================================================ */




/* WD_NO_STICKY_FINAL_START */

html body #site-header,
html body header#site-header.site-header,
html body #site-header.wd-header-static {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    inset: auto !important;

    transform: none !important;
}


/* auch bei alten Scroll-Klassen niemals sticky */

html body.has-scrolled #site-header,
html body #site-header.is-scrolled,
html body #site-header.sticky,
html body #site-header.is-sticky,
html body #site-header.fixed,
html body #site-header.is-fixed {
    position: relative !important;

    top: auto !important;
    inset: auto !important;

    transform: none !important;
}


/* Wrapper ebenfalls normal */

html body #site-header .header-shell,
html body #site-header .header-inner {
    position: relative !important;

    top: auto !important;
    inset: auto !important;

    transform: none !important;
}


/* Desktop Navigation bleibt normale Flow-Struktur */

html body #site-header .desktop-nav,
html body #site-header .desktop-menu {
    position: static !important;
}


/* WD_NO_STICKY_FINAL_END */




/* ============================================================
   HERO MOBILE OVERFLOW FIX
   ============================================================ */

@media (max-width: 980px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip !important;
    }

    .hero-webdev {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .hero-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden !important;
    }

    .hero-copy,
    .hero-visual {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /*
     * Das eigentliche Visual darf nicht mehr
     * rechts aus dem Viewport herauslaufen.
     */
    .hero-visual {
        width: 100% !important;
        overflow: hidden !important;

        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;

        box-sizing: border-box !important;
    }

    /*
     * Direkte Visual-Elemente etwas innerhalb
     * des Viewports halten.
     */
    .hero-visual > * {
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box !important;
    }

}


/* kleine Displays */

@media (max-width: 650px) {

    .hero-visual {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .hero-visual > * {
        max-width: 100% !important;
    }

}