:root {
            --bg: #0b0b0e;
            --panel: #12121a;
            --panel-2: #151520;
            --text: #ececf4;
            --muted: #bcbcd0;
            --border: rgba(255,255,255,.12);
            --shadow: rgba(0,0,0,.42);
            --accent: #ff2aa6;
            --accent-2: #ff69c6;
            --radius: 20px;
            --maxw: 1200px;
            --gap: 22px;
            --header-h: 82px;
            --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        html, body {
            min-height: 100%;
        }

        body {
            margin: 0;
            font-family: var(--font);
            color: var(--text);
            background: radial-gradient(1200px 900px at 10% 0%, rgba(255,42,166,.14), transparent 55%), radial-gradient(900px 700px at 100% 8%, rgba(255,42,166,.08), transparent 60%), linear-gradient(180deg, #09090c 0%, #0b0b0e 100%);
        }

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

        a {
            color: var(--accent);
            text-decoration: none;
        }

            a:hover {
                text-decoration: underline;
            }

        .container {
            width: min(var(--maxw), calc(100% - 28px));
            margin: 0 auto;
        }

        /* Header */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            height: var(--header-h);
            background: rgba(9,9,13,.82);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--border);
        }

        .topbar {
            min-height: var(--header-h);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 18px;
            min-width: 0;
        }

        .logo {
            font-family: "Pacifico", system-ui, sans-serif;
            font-size: 38px;
            line-height: 1;
            color: var(--accent);
            white-space: nowrap;
            text-shadow: 0 0 14px rgba(255,42,166,.28), 0 0 28px rgba(255,42,166,.15);
            user-select: none;
        }

        .meta {
            display: grid;
            gap: 4px;
            min-width: 0;
        }

        .meta-title {
            font-weight: 750;
            letter-spacing: .01em;
        }

        .meta-sub {
            color: var(--muted);
            font-size: 14px;
            font-weight: 600;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }

        .pill,
        .icon-btn,
        .drawer a,
        .lang-item {
            border: 1px solid rgba(255,255,255,.14);
            background: rgba(255,255,255,.06);
            color: var(--text);
            border-radius: 999px;
            font: inherit;
        }

        .pill {
            padding: 10px 14px;
            font-weight: 800;
            color: var(--muted);
        }

            .pill b {
                color: var(--text);
            }

        .icon-btn {
            width: 46px;
            height: 46px;
            display: grid;
            place-items: center;
            cursor: pointer;
        }

            .icon-btn:hover,
            .drawer a:hover,
            .lang-item:hover {
                background: rgba(255,255,255,.10);
                text-decoration: none;
            }

            .icon-btn:focus-visible,
            .lang-btn:focus-visible,
            .drawer a:focus-visible,
            .lang-item:focus-visible {
                outline: 2px solid rgba(255,42,166,.62);
                outline-offset: 3px;
            }

        .hamburger {
            width: 18px;
            height: 12px;
            position: relative;
        }

            .hamburger span {
                position: absolute;
                left: 0;
                width: 100%;
                height: 2px;
                border-radius: 2px;
                background: var(--text);
                transition: transform .22s ease, opacity .22s ease, top .22s ease;
            }

                .hamburger span:nth-child(1) {
                    top: 0;
                }

                .hamburger span:nth-child(2) {
                    top: 5px;
                }

                .hamburger span:nth-child(3) {
                    top: 10px;
                }

        .menu-open .hamburger span:nth-child(1) {
            top: 5px;
            transform: rotate(45deg);
        }

        .menu-open .hamburger span:nth-child(2) {
            opacity: 0;
        }

        .menu-open .hamburger span:nth-child(3) {
            top: 5px;
            transform: rotate(-45deg);
        }

        .lang-wrap,
        .menu-wrap {
            position: relative;
        }

        .lang-btn {
            width: 46px;
            height: 46px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.14);
            background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent));
            color: #170212;
            font-weight: 900;
            cursor: pointer;
            box-shadow: 0 10px 24px rgba(255,42,166,.22);
        }

        .dropdown {
            position: absolute;
            right: 0;
            top: calc(100% + 10px);
            min-width: 220px;
            background: rgba(18,18,26,.97);
            border: 1px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 18px 42px var(--shadow);
            padding: 8px;
            display: none;
        }

            .dropdown.open {
                display: block;
            }

        .dropdown-hint {
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: 8px 10px 10px;
        }

        .lang-item {
            width: 100%;
            padding: 11px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            margin-top: 6px;
            font-weight: 700;
        }

            .lang-item:first-of-type {
                margin-top: 0;
            }

        .lang-code {
            color: var(--muted);
            font-size: 13px;
            font-weight: 900;
        }

        .drawer {
            position: fixed;
            top: var(--header-h);
            right: 16px;
            width: min(340px, calc(100vw - 32px));
            max-height: calc(100vh - var(--header-h) - 18px);
            overflow: auto;
            border: 1px solid var(--border);
            border-radius: 20px;
            background: rgba(17,17,24,.98);
            box-shadow: 0 24px 48px rgba(0,0,0,.45);
            padding: 14px;
            display: none;
            z-index: 999;
        }

            .drawer.open {
                display: block;
            }

        .drawer-title {
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase;
            margin: 0 0 12px;
            padding: 4px 6px;
        }

        .drawer-nav {
            display: grid;
            gap: 8px;
        }

        .drawer a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            font-weight: 750;
            border-radius: 16px;
        }

            .drawer a.active {
                border-color: rgba(255,42,166,.45);
                background: rgba(255,42,166,.12);
                color: #fff;
            }

            .drawer a span:last-child {
                color: var(--muted);
                font-size: 13px;
            }

        /* Main */
        main {
            padding: 22px 0 56px;
        }

        .section {
            scroll-margin-top: calc(var(--header-h) + 18px);
            margin-top: 22px;
            background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: 0 20px 42px rgba(0,0,0,.30);
            overflow: hidden;
        }

        .section-grid {
            display: grid;
            grid-template-columns: .96fr 1.04fr;
            gap: var(--gap);
            align-items: start;
            padding: 18px;
        }

            .section-grid > .slideshow {
                order: -1;
            }

        .kicker {
            color: var(--muted);
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            font-size: 12px;
            margin-bottom: 8px;
        }

        h1, h2, h3, p {
            margin: 0;
        }

        h2 {
            font-size: 28px;
            line-height: 1.2;
            margin-bottom: 14px;
        }

        p {
            line-height: 1.62;
            color: rgba(236,236,244,.94);
            font-weight: 560;
            margin-top: 12px;
        }

        .text-stack > * + * {
            margin-top: 14px;
        }

        .offer-block {
            margin-top: 18px;
        }

            .offer-block strong {
                display: inline-block;
                margin-bottom: 6px;
            }

        .small-note {
            display: inline-block;
            color: var(--muted);
            font-size: 14px;
            font-weight: 700;
            margin-top: 4px;
        }

        .badge-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 18px;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: rgba(255,255,255,.05);
            color: var(--muted);
            font-size: 14px;
            font-weight: 800;
        }

            .badge b {
                color: var(--text);
            }

        .slideshow {
            position: relative;
            min-height: 310px;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
            overflow: hidden;
            box-shadow: 0 14px 30px rgba(0,0,0,.30);
        }

        .slide {
            width: 100%;
            flex: 1;
            min-height: 260px;
            object-fit: cover;
            background: #090910;
        }

        .slidebar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 12px;
            border-top: 1px solid var(--border);
            background: rgba(255,255,255,.03);
        }

        .navbtn {
            min-width: 44px;
            height: 42px;
            padding: 0 12px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.18);
            background: rgba(255,255,255,.07);
            color: var(--text);
            font-size: 18px;
            font-weight: 800;
            cursor: pointer;
        }

            .navbtn:hover {
                background: rgba(255,255,255,.11);
            }

        .dots {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: center;
            flex: 1;
        }

        .dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.22);
            background: transparent;
            cursor: pointer;
        }

            .dot.active {
                background: var(--accent);
                border-color: rgba(255,42,166,.9);
                box-shadow: 0 0 0 3px rgba(255,42,166,.18);
            }

        .contact-list {
            margin-top: 14px;
        }

            .contact-list strong {
                display: inline-block;
                min-width: 96px;
            }

        .footer-note {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.5;
            margin-top: 18px;
        }

        .backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.36);
            display: none;
            z-index: 998;
        }

            .backdrop.open {
                display: block;
            }

        @media (max-width: 920px) {
            :root {
                --header-h: 76px;
            }

            .topbar {
                gap: 10px;
            }

            .logo {
                font-size: 31px;
            }

            .meta-sub {
                font-size: 12px;
            }

            .pill {
                display: none;
            }

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

                .section-grid > .slideshow {
                    order: 0;
                }

            h2 {
                font-size: 24px;
            }

            .slide {
                min-height: 220px;
            }
        }

        @media (max-width: 640px) {
            .container {
                width: min(var(--maxw), calc(100% - 18px));
            }

            .brand {
                gap: 12px;
            }

            .meta-title {
                font-size: 14px;
            }

            .logo {
                font-size: 28px;
            }

            .section-grid {
                padding: 14px;
                gap: 16px;
            }

            .drawer {
                right: 9px;
                width: calc(100vw - 18px);
            }
        }

/* WordPress-hosted compatibility */
.wp-block-html {
    max-width: none !important;
}

/* WordPress-hosted compatibility */
.wp-block-html {
    max-width: none !important;
}

/* ===== WORDPRESS FULL WIDTH FIX ===== */

body .wp-site-blocks,
body .wp-block-post-content,
body .entry-content,
body article {
    max-width: none !important;
    width: 100% !important;
}

body .wp-block-post-content > .wp-block-html,
body .entry-content > .wp-block-html {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#artyoufree-app {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

#artyoufree-app .container {
    width: min(1200px, calc(100% - 28px)) !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================================================
   ARTYOUFREE NAVIGATION FIX
   ========================================================= */

/* Backdrop must cover the page behind the menu */
#artyoufree-app .backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    background: rgba(0, 0, 0, .58) !important;
}

/* Navigation drawer always sits above header and backdrop */
#artyoufree-app .drawer {
    position: fixed !important;
    z-index: 5001 !important;

    top: 92px !important;
    right: 24px !important;

    width: min(360px, calc(100vw - 48px)) !important;
    max-height: calc(100vh - 116px) !important;

    overflow-y: auto !important;
}

/* Header stays below an OPEN navigation drawer */
#artyoufree-app .site-header {
    z-index: 1000 !important;
}

/* Keep the menu button itself tidy */
#artyoufree-app .menu-wrap {
    position: relative !important;
}

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

    #artyoufree-app .drawer {
        top: 18px !important;
        left: 16px !important;
        right: 16px !important;

        width: auto !important;
        max-height: calc(100vh - 36px) !important;

        padding: 18px !important;
    }

    #artyoufree-app .drawer-nav {
        gap: 12px !important;
    }

    #artyoufree-app .drawer a {
        min-height: 72px !important;
        padding: 16px 18px !important;
    }
}

/* =========================================================
   HEADER + HAMBURGER CLEANUP
   ========================================================= */

#artyoufree-app .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#artyoufree-app .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Completely neutralise WordPress button styling */
#artyoufree-app button.icon-btn {
    appearance: none !important;
    -webkit-appearance: none !important;

    position: relative !important;

    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;

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

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

    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 50% !important;

    background: rgba(255,255,255,.06) !important;
    box-shadow: none !important;

    line-height: 1 !important;
}

/* Hamburger's own 18 × 14 px drawing area */
#artyoufree-app .hamburger {
    position: relative !important;
    display: block !important;

    width: 20px !important;
    height: 14px !important;

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

/* Reset every individual hamburger stroke */
#artyoufree-app .hamburger > span {
    position: absolute !important;
    display: block !important;

    left: 0 !important;

    width: 20px !important;
    height: 2px !important;

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

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

    background: var(--text) !important;
    opacity: 1;

    transform-origin: center !important;
}

#artyoufree-app .hamburger > span:nth-child(1) {
    top: 0 !important;
}

#artyoufree-app .hamburger > span:nth-child(2) {
    top: 6px !important;
}

#artyoufree-app .hamburger > span:nth-child(3) {
    top: 12px !important;
}

/* X animation while navigation is open */
body.menu-open #artyoufree-app .hamburger > span:nth-child(1) {
    top: 6px !important;
    transform: rotate(45deg) !important;
}

body.menu-open #artyoufree-app .hamburger > span:nth-child(2) {
    opacity: 0 !important;
}

body.menu-open #artyoufree-app .hamburger > span:nth-child(3) {
    top: 6px !important;
    transform: rotate(-45deg) !important;
}

/* =========================================================
   MOBILE HEADER FIX
   ========================================================= */

@media (max-width: 640px) {

    /* Let the header determine its own height */
    #artyoufree-app .site-header {
        height: auto !important;
        min-height: 0 !important;
        position: sticky !important;
        top: 0 !important;
    }

    #artyoufree-app .topbar {
        min-height: 0 !important;
        height: auto !important;

        padding: 12px 0 !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;

        align-items: center !important;
    }

    /* Text gets its own column */
    #artyoufree-app .brand {
        min-width: 0 !important;
        width: auto !important;
    }

    #artyoufree-app .meta {
        min-width: 0 !important;
        width: 100% !important;
    }

    #artyoufree-app .meta-title {
        font-size: 17px !important;
        line-height: 1.25 !important;
        overflow-wrap: normal !important;
    }

    #artyoufree-app .meta-sub {
        margin-top: 6px !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    /* Controls stay together in their own column */
    #artyoufree-app .header-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* "Sprache: DE" is unnecessary on a phone;
       the DE/EN/ES button already tells us the language */
    #artyoufree-app .pill {
        display: none !important;
    }

    #artyoufree-app .lang-btn,
    #artyoufree-app button.icon-btn {
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
    }

    /* Content starts normally after the now-variable header */
    #artyoufree-app main {
        padding-top: 16px !important;
    }

    /* Sections need their own mobile scroll offset */
    #artyoufree-app .section {
        scroll-margin-top: 120px !important;
    }
}

/* =========================================================
   HEADER SCROLL BEHAVIOUR
   Header remains at the top of the page and scrolls away.
   ========================================================= */

#artyoufree-app .site-header {
    position: relative !important;
    top: auto !important;
    height: auto !important;
}

#artyoufree-app .topbar {
    height: auto !important;
    min-height: 82px !important;
}

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

    #artyoufree-app .site-header {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
    }

    #artyoufree-app .topbar {
        height: auto !important;
        min-height: 0 !important;
        padding: 12px 0 !important;
    }
}

/* =========================================================
   MOBILE CONTENT WIDTH
   ========================================================= */

@media (max-width: 640px) {

    #artyoufree-app .container {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    #artyoufree-app .section {
        width: 100% !important;
        max-width: none !important;
    }

    #artyoufree-app .section-grid {
        width: 100% !important;
        padding: 16px !important;
    }

    #artyoufree-app .text-stack {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   REMOVE WORDPRESS PAGE CONSTRAINTS
   Exact wrappers confirmed in DevTools
   ========================================================= */

main#wp--skip-link--target {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

main#wp--skip-link--target > .wp-block-group.alignfull {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

main#wp--skip-link--target .entry-content.wp-block-post-content {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

main#wp--skip-link--target .entry-content.wp-block-post-content > .wp-block-html {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Our site controls its own margins */
#artyoufree-app {
    width: 100% !important;
    max-width: none !important;
}

#artyoufree-app .container {
    width: min(1200px, calc(100% - 28px)) !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Phones: use nearly the entire viewport */
@media (max-width: 640px) {
    #artyoufree-app .container {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    #artyoufree-app .section-grid {
        padding: 14px !important;
    }
}
/* =========================================================
   HIDE WORDPRESS / TWENTY TWENTY-FIVE FOOTER
   ========================================================= */

footer.wp-block-template-part {
    display: none !important;
}