{"id":6365,"date":"2025-09-21T14:31:22","date_gmt":"2025-09-21T14:31:22","guid":{"rendered":"https:\/\/sharkxs.com\/music\/"},"modified":"2025-09-26T18:01:15","modified_gmt":"2025-09-26T18:01:15","slug":"music","status":"publish","type":"page","link":"https:\/\/sharkxs.com\/en\/music\/","title":{"rendered":"music"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6365\" class=\"elementor elementor-6365 elementor-6360\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fa06349 e-flex e-con-boxed e-con e-parent\" data-id=\"fa06349\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4dc2321 elementor-widget elementor-widget-html\" data-id=\"4dc2321\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- wpml-no-translate -->\n<div class=\"wpml-no-translate\">\n\n    <div class=\"sharkxs-studio-login-container\" id=\"music-studio-login-overlay\">\r\n        <style>\r\n            .sharkxs-studio-login-container {\r\n                background: linear-gradient(135deg, #1a1d20 0%, #2c3540 100%);\r\n                border-radius: 14px;\r\n                padding: 60px 40px;\r\n                text-align: center;\r\n                color: #fff;\r\n                max-width: 650px;\r\n                margin: 40px auto;\r\n                box-shadow: 0 10px 40px rgba(0,0,0,0.4);\r\n                border: 2px solid #9b59b6;\r\n                animation: fadeInUp 0.5s ease-out;\r\n                position: relative;\r\n                overflow: hidden;\r\n            }\r\n            \r\n            .sharkxs-studio-login-container::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: -50%;\r\n                right: -50%;\r\n                width: 200%;\r\n                height: 200%;\r\n                background: radial-gradient(circle, rgba(155,89,182,0.1) 0%, transparent 70%);\r\n                animation: rotate 20s linear infinite;\r\n            }\r\n            \r\n            @keyframes rotate {\r\n                100% { transform: rotate(360deg); }\r\n            }\r\n            \r\n            @keyframes fadeInUp {\r\n                from {\r\n                    opacity: 0;\r\n                    transform: translateY(20px);\r\n                }\r\n                to {\r\n                    opacity: 1;\r\n                    transform: translateY(0);\r\n                }\r\n            }\r\n            \r\n            .studio-icon-wrapper {\r\n                margin-bottom: 30px;\r\n                position: relative;\r\n                z-index: 1;\r\n            }\r\n            \r\n            .studio-icon {\r\n                font-size: 4rem;\r\n                display: inline-block;\r\n                animation: pulse 2s ease-in-out infinite;\r\n            }\r\n            \r\n            @keyframes pulse {\r\n                0%, 100% { transform: scale(1); }\r\n                50% { transform: scale(1.1); }\r\n            }\r\n            \r\n            .studio-title {\r\n                font-size: 2.3rem;\r\n                font-weight: 700;\r\n                margin: 0 0 10px 0;\r\n                background: linear-gradient(135deg, #9b59b6 0%, #e74c3c 100%);\r\n                -webkit-background-clip: text;\r\n                -webkit-text-fill-color: transparent;\r\n                background-clip: text;\r\n                position: relative;\r\n                z-index: 1;\r\n            }\r\n            \r\n            .studio-subtitle {\r\n                font-size: 1.2rem;\r\n                color: #e74c3c;\r\n                margin: 0 0 25px 0;\r\n                font-weight: 500;\r\n                position: relative;\r\n                z-index: 1;\r\n            }\r\n            \r\n            .studio-description {\r\n                font-size: 1.1rem;\r\n                color: #b3bbca;\r\n                line-height: 1.6;\r\n                margin: 0 0 35px 0;\r\n                max-width: 450px;\r\n                margin-left: auto;\r\n                margin-right: auto;\r\n                position: relative;\r\n                z-index: 1;\r\n            }\r\n            \r\n            .studio-features {\r\n                background: rgba(0,0,0,0.4);\r\n                border-radius: 10px;\r\n                padding: 25px;\r\n                margin: 30px auto;\r\n                text-align: left;\r\n                max-width: 450px;\r\n                backdrop-filter: blur(10px);\r\n                position: relative;\r\n                z-index: 1;\r\n            }\r\n            \r\n            .studio-features h4 {\r\n                color: #fff;\r\n                font-size: 1rem;\r\n                margin: 0 0 15px 0;\r\n                text-align: center;\r\n                text-transform: uppercase;\r\n                letter-spacing: 1px;\r\n                font-weight: 600;\r\n            }\r\n            \r\n            .studio-features ul {\r\n                list-style: none;\r\n                margin: 0;\r\n                padding: 0;\r\n            }\r\n            \r\n            .studio-features li {\r\n                padding: 10px 0;\r\n                color: #b3bbca;\r\n                display: flex;\r\n                align-items: center;\r\n                font-size: 0.95rem;\r\n            }\r\n            \r\n            .studio-features .check {\r\n                color: #e74c3c;\r\n                margin-right: 12px;\r\n                font-size: 1.2rem;\r\n            }\r\n            \r\n            .studio-buttons {\r\n                display: flex;\r\n                gap: 15px;\r\n                justify-content: center;\r\n                flex-wrap: wrap;\r\n                margin-top: 35px;\r\n                position: relative;\r\n                z-index: 1;\r\n            }\r\n            \r\n            .studio-login-btn, .studio-register-btn {\r\n                padding: 14px 35px;\r\n                text-decoration: none;\r\n                border-radius: 8px;\r\n                display: inline-block;\r\n                font-weight: 600;\r\n                font-size: 1.1rem;\r\n                transition: all 0.3s ease;\r\n                position: relative;\r\n                overflow: hidden;\r\n            }\r\n            \r\n            .studio-login-btn {\r\n                background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);\r\n                color: white;\r\n                box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);\r\n            }\r\n            \r\n            .studio-login-btn:hover {\r\n                transform: translateY(-2px);\r\n                box-shadow: 0 6px 25px rgba(155, 89, 182, 0.4);\r\n            }\r\n            \r\n            .studio-register-btn {\r\n                background: transparent;\r\n                color: #e74c3c;\r\n                border: 2px solid #e74c3c;\r\n            }\r\n            \r\n            .studio-register-btn:hover {\r\n                background: #e74c3c;\r\n                color: #fff;\r\n                transform: translateY(-2px);\r\n            }\r\n            \r\n            .studio-info-text {\r\n                margin-top: 25px;\r\n                font-size: 0.9rem;\r\n                color: #666;\r\n                font-style: italic;\r\n                position: relative;\r\n                z-index: 1;\r\n            }\r\n            \r\n            @media (max-width: 600px) {\r\n                .sharkxs-studio-login-container {\r\n                    padding: 40px 20px;\r\n                    margin: 20px 10px;\r\n                }\r\n                \r\n                .studio-title {\r\n                    font-size: 1.8rem;\r\n                }\r\n                \r\n                .studio-buttons {\r\n                    flex-direction: column;\r\n                }\r\n                \r\n                .studio-login-btn, .studio-register-btn {\r\n                    width: 100%;\r\n                }\r\n            }\r\n        <\/style>\r\n        \r\n        <div class=\"studio-icon-wrapper\">\r\n            <span class=\"studio-icon\">\ud83c\udfb5<\/span>\r\n        <\/div>\r\n\r\n        <h2 class=\"studio-title\">\r\n            AI Music Studio        <\/h2>\r\n\r\n        <p class=\"studio-subtitle\">\r\n            Registration &amp; credit required        <\/p>\r\n\r\n        <p class=\"studio-description\">\r\n            Create professional AI-generated music with state-of-the-art AI models. Sign up and top up your credit.         <\/p>\r\n\r\n        <div class=\"studio-features\">\r\n            <h4>What you can expect<\/h4>\r\n            <ul>\r\n                <li>\r\n                    <span class=\"check\">\u2713<\/span>\r\n                    Pay-per-use: only pay for what you use                <\/li>\r\n                <li>\r\n                    <span class=\"check\">\u2713<\/span>\r\n                    Songs from 0,10\u20ac per generation                <\/li>\r\n                <li>\r\n    <span class=\"check\">\u2713<\/span>\r\n    Professional pieces of music<\/li>\r\n                <li>\r\n                    <span class=\"check\">\u2713<\/span>\r\n                    Commercial use possible                <\/li>\r\n            <\/ul>\r\n        <\/div>\r\n\r\n        <div class=\"studio-buttons\">\r\n                        \r\n            <a href=\"https:\/\/sharkxs.com\/en\/login\/\" \r\n               class=\"studio-login-btn\">\r\n               \ud83d\udd13 Login & top up credit            <\/a>\r\n            \r\n            <a href=\"https:\/\/sharkxs.com\/en\/register\/\" \r\n               class=\"studio-register-btn\">\r\n               \ud83d\udcb3 Create account            <\/a>\r\n        <\/div>\r\n\r\n        <p class=\"studio-info-text\">\r\n            Flexible credit system - No subscriptions - Transparent prices        <\/p>\r\n    <\/div>\r\n    \r\n    <script>\r\n        \/\/ Verstecke das normale Music-Studio-Interface\r\n        jQuery(document).ready(function($) {\r\n            $('#aimusic-custom-form').hide();\r\n            $('.music-studio-container').hide();\r\n            $('.music-tool-container').hide();\r\n            \r\n            \/\/ Analytics Tracking (optional)\r\n            if (typeof gtag !== 'undefined') {\r\n                gtag('event', 'view_music_studio_login', {\r\n                    'event_category': 'AI_Studio',\r\n                    'event_label': 'music_studio',\r\n                    'value': 0\r\n                });\r\n            }\r\n        });\r\n    <\/script>\r\n    \n<style>\n  :root {\n    --color-bg: #181a1b;\n    --color-surface: #222427;\n    --color-primary: #2c7be5;\n    --color-primary-dark: #1b4a91;\n    --color-success: #37d67a;\n    --color-error: #e74c3c;\n    --font-sans: 'Inter', Arial, sans-serif;\n    --space-xs: 0.3rem;\n    --space-sm: 0.5rem;\n    --space-md: 1rem;\n    --space-lg: 1.5rem;\n    --color-text: #f4f6fa;\n    --color-muted: #8e99a7;\n  }\n  \n  .music-tool-container {\n    background: var(--color-surface);\n    border-radius: 14px;\n    box-shadow: 0 6px 24px rgba(0,0,0,0.26);\n    padding: var(--space-lg);\n    font-family: var(--font-sans);\n    max-width: 880px;\n    margin: 2rem auto;\n    color: var(--color-text);\n  }\n  \n  .music-header {\n    text-align: center;\n    margin-bottom: var(--space-lg);\n  }\n  \n  .music-header h3 {\n    margin: 0;\n    font-size: 2.15rem;\n    color: var(--color-primary);\n    letter-spacing: 1px;\n    font-weight: 800;\n  }\n  \n  .form-group {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: var(--space-md);\n    gap: var(--space-sm);\n  }\n  \n  .form-group label {\n    font-weight: 600;\n    color: #c6d0dc;\n    letter-spacing: 0.02em;\n    margin-bottom: 0.5rem;\n  }\n  \n  .input-wrapper {\n    position: relative;\n  }\n  \n  .form-group textarea,\n  .form-group input {\n    width: 100%;\n    padding: 0.73rem;\n    border: 1.3px solid #2c7be5;\n    border-radius: 8px;\n    font-size: 1rem;\n    color: var(--color-text);\n    background: #141516;\n    transition: border-color 0.2s, background 0.2s;\n    font-family: inherit;\n    resize: vertical;\n  }\n  \n  .form-group textarea {\n    min-height: 150px;\n    line-height: 1.5;\n  }\n  \n  .form-group textarea:focus,\n  .form-group input:focus {\n    outline: none;\n    border-color: var(--color-primary-dark);\n    background: #1a1b1f;\n  }\n  \n  .char-counter {\n    position: absolute;\n    bottom: 10px;\n    right: 15px;\n    font-size: 0.85em;\n    color: var(--color-muted);\n    background: rgba(20, 21, 22, 0.9);\n    padding: 2px 6px;\n    border-radius: 4px;\n  }\n  \n  .input-hint {\n    font-size: 0.9em;\n    color: var(--color-muted);\n    margin-top: 5px;\n    font-style: italic;\n  }\n  \n  .example-box {\n    background: #23272b;\n    border: 1px solid #2c7be5;\n    border-radius: 8px;\n    padding: var(--space-md);\n    margin-bottom: var(--space-lg);\n  }\n  \n  .example-title {\n    font-weight: 600;\n    color: #2c7be5;\n    margin-bottom: 0.5rem;\n    font-size: 1.1rem;\n  }\n  \n  .example-content {\n    color: var(--color-text);\n    font-family: 'Courier New', monospace;\n    font-size: 0.95em;\n    white-space: pre-wrap;\n    margin: 0;\n    background: #1a1b1f;\n    padding: 0.75rem;\n    border-radius: 6px;\n    border: 1px solid #313a46;\n  }\n  \n  .style-suggestions {\n    margin-bottom: var(--space-lg);\n    padding: var(--space-md);\n    background: #1a1d20;\n    border-radius: 8px;\n    border: 1.5px solid #263148;\n  }\n  \n  .suggestions-title {\n    font-weight: 600;\n    color: var(--color-text);\n    margin-bottom: 0.75rem;\n    font-size: 1.05rem;\n  }\n  \n  .style-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n  }\n  \n  .style-tag {\n    padding: 0.4rem 0.8rem;\n    background: #23272b;\n    border: 1px solid #313a46;\n    border-radius: 20px;\n    color: #b3bbca;\n    cursor: pointer;\n    transition: all 0.2s;\n    font-size: 0.9em;\n    outline: none;\n  }\n  \n  .style-tag:hover,\n  .style-tag:focus {\n    background: var(--color-primary);\n    border-color: var(--color-primary);\n    color: #fff;\n    transform: translateY(-1px);\n  }\n  \n  .public-sharing-section {\n    margin-bottom: var(--space-md);\n    padding: var(--space-md);\n    background: #1a1d20;\n    border-radius: 8px;\n    border: 1.5px solid #263148;\n  }\n  \n  .public-sharing-section h4 {\n    color: var(--color-text);\n    margin: 0 0 var(--space-sm) 0;\n    font-size: 1.1rem;\n    font-weight: 600;\n  }\n  \n  .public-sharing-checkbox {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--space-sm);\n  }\n  \n  .public-sharing-checkbox input[type=\"checkbox\"] {\n    margin-top: 2px;\n    accent-color: var(--color-primary);\n  }\n  \n  .public-sharing-text {\n    flex: 1;\n  }\n  \n  .public-sharing-text .main-text {\n    color: var(--color-text);\n    font-weight: 500;\n    margin-bottom: 0.3rem;\n  }\n  \n  .public-sharing-text .description {\n    color: var(--color-muted);\n    font-size: 0.9rem;\n    line-height: 1.4;\n  }\n  \n  #aimusic-submit-button {\n    width: 100%;\n    padding: var(--space-md);\n    font-size: 1.16rem;\n    background: var(--color-primary);\n    color: #fff;\n    border: none;\n    border-radius: 9px;\n    cursor: pointer;\n    transition: background 0.2s, transform 0.1s;\n    margin-top: var(--space-lg);\n    font-weight: 600;\n  }\n  \n  #aimusic-submit-button:disabled {\n    background: #444851;\n    color: #888;\n    cursor: not-allowed;\n    transform: none;\n  }\n  \n  #aimusic-submit-button:not(:disabled):hover {\n    background: var(--color-primary-dark);\n    transform: translateY(-2px);\n  }\n  \n  .status-message {\n    margin-top: var(--space-md);\n    text-align: center;\n    font-weight: 500;\n    color: var(--color-primary-dark);\n    font-size: 1.05em;\n  }\n  \n  .status-message.error {\n    color: var(--color-error);\n  }\n  \n  .status-message.success {\n    color: var(--color-success);\n  }\n  \n  .music-result {\n    text-align: center;\n    padding: 2rem;\n    background: #23272b;\n    border-radius: 12px;\n    margin-top: var(--space-md);\n    border: 1px solid #313a46;\n  }\n  \n  .audio-player-wrapper {\n    margin-bottom: 1.5rem;\n  }\n  \n  .audio-player {\n    width: 100%;\n    max-width: 500px;\n  }\n  \n  .download-btn {\n    display: inline-block;\n    padding: 0.75rem 1.5rem;\n    background: var(--color-success);\n    color: #fff;\n    text-decoration: none;\n    border-radius: 8px;\n    font-weight: 600;\n    transition: background 0.2s;\n    font-size: 1.05rem;\n  }\n  \n  .download-btn:hover {\n    background: #2cb865;\n    transform: translateY(-1px);\n  }\n  \n  .spinner {\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    border: 2.5px solid #fff;\n    border-top: 2.5px solid transparent;\n    border-radius: 50%;\n    animation: spin 0.9s linear infinite;\n    vertical-align: middle;\n    margin-right: 8px;\n  }\n  \n  \/* Sprach-spezifischer Fix *\/\nbody:not(.lang-en) .music-tool-container {\n    \/* Deutsch und andere *\/\n    margin-top: 2rem !important;\n}\n\nbody.lang-en .music-tool-container {\n    \/* Englisch - 52px mehr Abstand *\/\n    margin-top: calc(2rem + 52px) !important;\n}\n\n\/* Falls WPML andere Klassen verwendet: *\/\nhtml[lang=\"en-US\"] .music-tool-container,\nhtml[lang=\"en-GB\"] .music-tool-container {\n    margin-top: calc(2rem + 52px) !important;\n}\n.model-dropdown-container {\n    position: relative;\n    margin-bottom: 1.5rem;\n    background: #1a1d20;\n    border-radius: 12px;\n    border: 1.5px solid #263148;\n}\n\n.model-selected {\n    display: flex;\n    align-items: center;\n    padding: 1rem;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.model-selected:hover {\n    background: rgba(44, 123, 229, 0.1);\n}\n\n.model-selected.open .dropdown-arrow {\n    transform: rotate(180deg);\n}\n\n.model-selected img {\n    width: 48px;\n    height: 48px;\n    border-radius: 8px;\n    margin-right: 1rem;\n    object-fit: cover;\n}\n\n.model-selected-text {\n    flex: 1;\n}\n\n.model-title {\n    font-size: 1.1rem;\n    font-weight: 600;\n    color: #f4f6fa;\n    margin-bottom: 0.25rem;\n}\n\n.model-desc {\n    font-size: 0.9rem;\n    color: #8e99a7;\n    line-height: 1.4;\n}\n\n.dropdown-arrow {\n    color: #8e99a7;\n    font-size: 1.2rem;\n    transition: transform 0.2s;\n}\n\n.model-dropdown-list {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    background: #1a1d20;\n    border: 1.5px solid #263148;\n    border-radius: 12px;\n    margin-top: 0.5rem;\n    z-index: 100;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n    max-height: 400px;\n    overflow-y: auto;\n}\n\n.model-option {\n    display: flex;\n    align-items: center;\n    padding: 1rem;\n    cursor: pointer;\n    transition: background 0.2s;\n    border-bottom: 1px solid #263148;\n}\n\n.model-option:last-child {\n    border-bottom: none;\n}\n\n.model-option:hover,\n.model-option.active {\n    background: rgba(44, 123, 229, 0.15);\n}\n\n.model-option img {\n    width: 40px;\n    height: 40px;\n    border-radius: 6px;\n    margin-right: 1rem;\n    object-fit: cover;\n}\n\n.model-option-txt {\n    flex: 1;\n}\n\n.model-option .model-title {\n    font-size: 1rem;\n    margin-bottom: 0.2rem;\n}\n\n.model-option .model-desc {\n    font-size: 0.85rem;\n}\n\n\/* Slider Styles f\u00fcr Sonauto *\/\n.input-slider-row {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n}\n\n.input-slider-row input[type=\"number\"] {\n    width: 80px;\n    padding: 0.5rem;\n    border: 1px solid #313a46;\n    border-radius: 6px;\n    background: #1a1d20;\n    color: #f4f6fa;\n}\n\n.input-slider-row input[type=\"range\"] {\n    flex: 1;\n    height: 6px;\n    background: #313a46;\n    border-radius: 3px;\n    outline: none;\n    -webkit-appearance: none;\n}\n\n.input-slider-row input[type=\"range\"]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 18px;\n    height: 18px;\n    background: #2c7be5;\n    border-radius: 50%;\n    cursor: pointer;\n}\n\n.input-slider-row input[type=\"range\"]::-moz-range-thumb {\n    width: 18px;\n    height: 18px;\n    background: #2c7be5;\n    border-radius: 50%;\n    cursor: pointer;\n    border: none;\n}\n\n\/* Tags Input Style *\/\n.tags-input {\n    padding: 0.73rem;\n    border: 1.3px solid #2c7be5;\n    border-radius: 8px;\n    background: #141516;\n    color: #f4f6fa;\n    font-size: 1rem;\n    width: 100%;\n}\n\n\/* Dropdown\/Select Styles *\/\nselect {\n    width: 100%;\n    padding: 0.73rem;\n    border: 1.3px solid #2c7be5;\n    border-radius: 8px;\n    background: #141516;\n    color: #f4f6fa;\n    font-size: 1rem;\n    cursor: pointer;\n}\n\nselect option {\n    background: #141516;\n    color: #f4f6fa;\n}\n\/* Einheitliches Design f\u00fcr ALLE Form-Elemente *\/\n#dynamic-form-controls input[type=\"text\"],\n#dynamic-form-controls input[type=\"number\"],\n#dynamic-form-controls textarea,\n#dynamic-form-controls select {\n    width: 100%;\n    padding: 0.73rem;\n    border: 1.3px solid #2c7be5;\n    border-radius: 8px;\n    font-size: 1rem;\n    color: #f4f6fa !important;\n    background: #141516 !important;\n    transition: border-color 0.2s, background 0.2s;\n    font-family: inherit;\n}\n\n#dynamic-form-controls input[type=\"text\"]:focus,\n#dynamic-form-controls input[type=\"number\"]:focus,\n#dynamic-form-controls textarea:focus,\n#dynamic-form-controls select:focus {\n    outline: none;\n    border-color: #2c7be5 !important;\n    background: #1a1b1f !important;\n}\n\n\/* Spezifisch f\u00fcr Select\/Dropdown *\/\n#dynamic-form-controls select {\n    cursor: pointer;\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    background-image: url(\"data:image\/svg+xml;charset=UTF-8,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%238e99a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c\/polyline%3e%3c\/svg%3e\");\n    background-repeat: no-repeat;\n    background-position: right 0.7rem center;\n    background-size: 1.2em;\n    padding-right: 2.5rem;\n}\n\n#dynamic-form-controls select option {\n    background: #141516;\n    color: #f4f6fa;\n    padding: 0.5rem;\n}\n\n\/* Spezifisch f\u00fcr Number-Inputs *\/\n#dynamic-form-controls input[type=\"number\"] {\n    -moz-appearance: textfield;\n}\n\n#dynamic-form-controls input[type=\"number\"]::-webkit-outer-spin-button,\n#dynamic-form-controls input[type=\"number\"]::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n}\n\n\/* Slider-Row Anpassungen (f\u00fcr konsistentes Design) *\/\n.input-slider-row input[type=\"number\"] {\n    width: 80px !important;\n    padding: 0.5rem !important;\n    border: 1px solid #313a46 !important;\n    border-radius: 6px !important;\n    background: #1a1d20 !important;\n    color: #f4f6fa !important;\n}\n\n.input-slider-row input[type=\"number\"]:focus {\n    border-color: #2c7be5 !important;\n    background: #23272b !important;\n}\n\n\/* Tags-Input speziell *\/\n.tags-input {\n    background: #141516 !important;\n    color: #f4f6fa !important;\n}\n\n.tags-input:focus {\n    background: #1a1b1f !important;\n    border-color: #2c7be5 !important;\n}\n\n\/* Placeholder-Farbe f\u00fcr alle Inputs *\/\n#dynamic-form-controls input::placeholder,\n#dynamic-form-controls textarea::placeholder {\n    color: #6c7583;\n    opacity: 1;\n}\n\n\/* Hover-Effekt f\u00fcr bessere UX *\/\n#dynamic-form-controls input:hover:not(:focus),\n#dynamic-form-controls textarea:hover:not(:focus),\n#dynamic-form-controls select:hover:not(:focus) {\n    border-color: #3a8df0;\n}\n  \n  @keyframes spin {\n    100% { transform: rotate(360deg); }\n  }\n  \n  @media (max-width: 700px) {\n    .music-tool-container {\n      padding: var(--space-sm);\n      margin: 1rem 0;\n      border-radius: 0;\n      max-width: 100vw;\n    }\n    \n    .style-tags {\n      gap: 0.4rem;\n    }\n    \n    .style-tag {\n      padding: 0.35rem 0.7rem;\n      font-size: 0.85em;\n    }\n    \n    .public-sharing-checkbox {\n      flex-direction: column;\n      gap: 0.5rem;\n    }\n    \n    .public-sharing-checkbox input[type=\"checkbox\"] {\n      margin-top: 0;\n    }\n  }\n<\/style>\n<style>\n\/* Music Studio Spezifische Styles *\/\n.music-tool-container {\n    margin-top: 2rem !important;\n}\n\n.form-group {\n    margin-bottom: 1.5rem;\n}\n\n.input-wrapper {\n    position: relative;\n}\n\n.char-counter {\n    position: absolute;\n    bottom: 5px;\n    right: 10px;\n    font-size: 0.85em;\n    color: #8e99a7;\n}\n\n.input-hint {\n    font-size: 0.9em;\n    color: #8e99a7;\n    margin-top: 5px;\n    font-style: italic;\n}\n\n.example-box {\n    background: #23272b;\n    border: 1px solid #2c7be5;\n    border-radius: 8px;\n    padding: 1rem;\n    margin-bottom: 1.5rem;\n}\n\n.example-title {\n    font-weight: 600;\n    color: #2c7be5;\n    margin-bottom: 0.5rem;\n}\n\n.example-content {\n    color: #f4f6fa;\n    font-family: monospace;\n    font-size: 0.95em;\n    white-space: pre-wrap;\n    margin: 0;\n}\n\n.style-suggestions {\n    margin-bottom: 1.5rem;\n    padding: 1rem;\n    background: #1a1d20;\n    border-radius: 8px;\n}\n\n.suggestions-title {\n    font-weight: 600;\n    color: #f4f6fa;\n    margin-bottom: 0.75rem;\n}\n\n.style-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n}\n\n.style-tag {\n    padding: 0.4rem 0.8rem;\n    background: #23272b;\n    border: 1px solid #313a46;\n    border-radius: 20px;\n    color: #b3bbca;\n    cursor: pointer;\n    transition: all 0.2s;\n    font-size: 0.9em;\n}\n\n.style-tag:hover {\n    background: #2c7be5;\n    border-color: #2c7be5;\n    color: #fff;\n}\n\n.music-result {\n    text-align: center;\n    padding: 2rem;\n    background: #23272b;\n    border-radius: 12px;\n    margin-top: 1rem;\n}\n\n.audio-player-wrapper {\n    margin-bottom: 1.5rem;\n}\n\n.audio-player {\n    width: 100%;\n    max-width: 500px;\n}\n\n.download-btn {\n    display: inline-block;\n    padding: 0.75rem 1.5rem;\n    background: #37d67a;\n    color: #fff;\n    text-decoration: none;\n    border-radius: 8px;\n    font-weight: 600;\n    transition: background 0.2s;\n}\n\n.download-btn:hover {\n    background: #2cb865;\n}\n\n.spinner {\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    border: 2.5px solid #fff;\n    border-top: 2.5px solid #2c7be5;\n    border-radius: 50%;\n    animation: spin 0.9s linear infinite;\n    vertical-align: middle;\n    margin-right: 8px;\n}\n\n@keyframes spin {\n    100% { transform: rotate(360deg); }\n}\n\ntextarea#param-prompt {\n    min-height: 150px;\n    font-family: inherit;\n    line-height: 1.5;\n}\n\n#param-prompt,\n#param-lyrics-prompt {\n    background-color: #1a1d20 !important;\n    color: #f4f6fa !important;\n    border: 1px solid #313a46 !important;\n}\n\n#param-prompt:focus,\n#param-lyrics-prompt:focus {\n    background-color: #23272b !important;\n    border-color: #2c7be5 !important;\n    outline: none;\n}\n\ninput[type=\"text\"],\ntextarea {\n    background-color: #1a1d20 !important;\n    color: #f4f6fa !important;\n}\n<\/style>\n<div class=\"music-tool-container\">\n  <div class=\"music-header\">\n    <h3 id=\"studio-title\">AI Music Studio<\/h3>\n  <\/div>\n  \n  <div id=\"balance-info\" style=\"text-align:right;color:#b3bbca;margin-bottom:10px;\">\n    Credit balance: <span id=\"balance-value\">--<\/span> \u20ac\n  <\/div>\n<div id=\"model-dropdown-container\" class=\"model-dropdown-container\"><\/div>\n  <form id=\"aimusic-custom-form\" autocomplete=\"off\">\n    <div id=\"dynamic-form-controls\">\n      <p>Load parameters...<\/p>\n    <\/div>\n    <!-- NEU: Model Dropdown Container (WICHTIG!) -->\n\n    \n    <button type=\"submit\" id=\"aimusic-submit-button\" disabled>Create music<\/button>\n  <\/form>\n  \n  <div id=\"status-message-container\" class=\"status-message\"><\/div>\n  <div id=\"music-result-container\"><\/div>\n<\/div>\n\n\n<\/div>\n<!-- \/wpml-no-translate -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AI Music Studio Credit balance: &#8212; \u20ac Load parameters&#8230; Create music<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-6365","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/pages\/6365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/comments?post=6365"}],"version-history":[{"count":10,"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/pages\/6365\/revisions"}],"predecessor-version":[{"id":6476,"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/pages\/6365\/revisions\/6476"}],"wp:attachment":[{"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/media?parent=6365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}