You as a Fairy<\/title>\n\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel+Decorative:wght@700&family=Sacramento&family=Roboto:wght@400&display=swap\" rel=\"stylesheet\">\n\n <style>\n \/* Allgemeines Styling *\/\n body {\n font-family: 'Sacramento', cursive, Arial, sans-serif;\n background-color: #919C75;\n color: #333;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n margin: 0;\n \n }\n\n\n header {\n text-align: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-content: center;\n margin-bottom: 40px;\n }\n\n h1 {\n font-family: 'Cinzel Decorative', cursive;\n font-size: 50px;\n color: #333;\n text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);\n margin-top: 100px;\n\n margin-bottom: 20px;\n }\n\n h3 {\n font-family: 'Cinzel Decorative', cursive;\n font-size: 20px;\n color: #333;\n text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);\n margin-bottom: 10px;\n }\n \n \/*FIlzfee erstellen*\/\n h2 {\n font-family: 'Sacramento', cursive;\n font-size: 35px;\n color: #333;\n padding-left: 30px;\n padding-top: 0px;\n margin-bottom: 5px;\n }\n\n p {\n font-size: 20px;\n color: #666;\n margin-bottom: 5px;\n }\n\n\n\n .beige{\n\n }\n \n .holzbraun{\n\n\n }\n\n .gr\u00fcn{\n\n \n }\n\n\n\n .dynamicSection{\n \n background-image: url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzermit-rand_klein.jpg');\n background-size: 100% 100%;\n background-repeat: no-repeat;\n background-position: top center;\n padding: 20px; \/* Abstand zum Rand des Containers *\/\n padding-bottom: 0px;\n margin: 0 auto; \/* Zentriert den Abschnitt horizontal *\/\n margin-top: 20px;\n margin-bottom: 30px;\n width: 80%; \/* Stellt sicher, dass der Abschnitt nicht die volle Bildschirmbreite einnimmt*\/\n max-width: 1000px; \/*Optional: Setzt eine maximale Breite f\u00fcr den Abschnitt *\/\n height: auto;\n border-radius: 20px;\n transition: background-image 0.2s ease;\n\n }\n\n .dynamicSection.active {\n background-image: \n url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzer_Ubergang_klein-1.jpg'), \n url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzerRand.jpg');\n background-repeat: no-repeat, repeat; \/* Zweites Bild wird wiederholt *\/\n background-size: 100%; \/* Erstes Bild deckt den Bereich ab *\/\n background-position: top center, top center;\n padding: 20px; \/* Abstand zum Rand des Containers *\/\n padding-bottom: 0px;\n margin: 0 auto; \/* Zentriert den Abschnitt horizontal *\/\n width: 80%; \/* Stellt sicher, dass der Abschnitt nicht die volle Bildschirmbreite einnimmt*\/\n max-width: 1000px; \/*Optional: Setzt eine maximale Breite f\u00fcr den Abschnitt *\/\n max-height: auto;\n border-radius: 20px;\n transition: background-image 0.3s ease;\n }\n \n \n \/*Filfee und Gemalte Fee ausw\u00e4hlen-Button*\/\n .Bilder {\n background-color: #e8ddc5;\n height: 100px;\n width: 80px;\n border-radius: 20px;\n border: solid #dac5a6;\n cursor: pointer;\n }\n \n\n \/* Optionen Styling *\/\n .options {\n display: flex;\n justify-content: center;\n gap: 40px;\n margin-bottom: 66px;\n margin-left: 100px;\n margin-right: 100px;\n align-items: center;\n \n }\n\n .option {\n box-sizing: border-box;\n padding: 15px;\n padding-top: 30px;\n background-color: #a5ae8d;\n border-radius: 30px;\n text-align: center;\n cursor: pointer;\n box-shadow: 6px 8px 25px rgba(0, 0, 0, 0.9);\n position: relative;\n transition: transform 0.3s ease;\n display: flex;\n flex-direction: column; \/* Vertikale Anordnung der Kinder *\/\n justify-content: space-between; \/* Button nach unten schieben *\/\n align-items: center; \/* Zentrierung in der Mitte *\/\n width: 340px;\n flex-shrink: 0;\n outline: 2px dashed #4c3018;\n outline-offset: -10px;\n overflow: hidden;\n }\n \n \n .option:hover {\n transform: scale(1.05);\n }\n\n .Aquarell{\n \n max-width: 500px;\n max-height: 250px; \n }\n\n\n .option2 {\n box-sizing: border-box;\n padding: 15px;\n padding-top: 30px;\n background-color: #F9F1DC;\n border-radius: 30px;\n text-align: center;\n cursor: pointer;\n box-shadow: 6px 8px 25px rgba(0, 0, 0, 0.9);\n position: relative;\n transition: transform 0.3s ease;\n display: flex;\n flex-direction: column; \/* Vertikale Anordnung der Kinder *\/\n justify-content: space-between; \/* Button nach unten schieben *\/\n align-items: center; \/* Zentrierung in der Mitte *\/\n width: 340px;\n flex-shrink: 0;\n outline: 2px dashed #5e3b1d;\n outline-offset: -10px;\n overflow: hidden;\n }\n\n .option2:hover {\n transform: scale(1.05);\n }\n \n .Filz{\n max-width: 500px;\n max-height: 250px; \n }\n\n .hidden {\n display: none;\n }\n\n .option.active {\n background-color: #9fa592;\n }\n\n .option2.active {\n background-color: #dbd2c3;\n }\n\n \n\n .pFilz {\n color: #5D3A1A;\n \n }\n \n .pMalen{\n color: #F9F1DC;\n }\n \n .Gemalt{\n color: white;\n font-size: 24px; \n margin-top:1px;\n \/*text-shadow: 1px 1px 0 red, -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red;*\/\n \n }\n \n .Gefilzt{\n color:black;\n font-size: 24px; \n margin-top: 1px;\n \/*text-shadow: 1px 1px 0 red, -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red;*\/\n \n }\n\n \/* Button Styling *\/\n .buttonfilz {\n padding: 10px 20px;\n background-color: #a5ae8d;\n color: #4d3015;\n border: 2px solid rgb(164, 173, 141);\n border-radius: 30px;\n cursor: pointer;\n box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.6);\n align-self: end;\n display: block;\n margin: 10px auto;\n font-family: 'Roboto', sans-serif;\n font-weight: 500;\n }\n\n .buttonfilz:hover {\n background-color: #BCC6A4;\n border: 2px solid #b6bfa0;\n }\n \n \n \/*Styling der Gesamt-Palletten*\/\n \n .Farben1, .Farben2 {\n display: flex;\n width: fit-content;\n height: fit-content;\n flex-wrap: wrap;\n gap: 5px;\n outline-offset: -3px;\n border-radius:20px;\n \/* Flexbox wird verwendet, um die Punkte zu verteilen *\/\n justify-content: space-evenly; \/* Verteil die Farbpunkte gleichm\u00e4\u00dfig *\/\n align-items: center; \/* Zentriert die Punkte vertikal *\/\n padding: 10px; \n margin-left: 15px;\n box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.4);\n }\n \n .Farben1 {\n outline: 1px solid #ccd4b8;\n background-color: #f9f6dc;\n\n }\n \n .Farben2 {\n outline: 1px solid #e8d7c0;\n background-color: #F9F1DC;\n }\n \n .buttonmalen {\n padding: 10px 20px;\n background-color: #F9F1DC;\n color: #5D3A1A;\n border: 2px solid #f5ecd6;\n border-radius: 30px;\n cursor: pointer;\n box-shadow: 1px 2px 9px rgba(0, 0, 0, 0.5);\n align-self: center;\n display: block;\n margin: 10px auto;\n font-family: 'Roboto', sans-serif;\n font-weight: 500;\n }\n\n .buttonmalen:hover {\n background-color: #EADFBF;\n border: 2px solid #e5dab9;\n }\n \n\n \/* Hinweis Styling *\/\n .hint {\n font-size: 16px;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n gap: 20px;\n padding-top: 0px;\n }\n\n .hint p {\n margin-top: 10px;\n margin-bottom: -10px;\n }\n\n \/*ganzes Formular*\/\n \n .section1, .section2 {\n margin: 20px;\n margin-right: 80px;\n margin-left: 80px;\n margin-bottom: 60px;\n padding: 5px;\n padding-bottom: 15px;\n border-radius: 20px;\n box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.7);\n outline-offset: -10px;\n }\n\n .section1 {\n\n background-color: #c2d0b6;\n outline: 2px dashed #344f30;\n }\n \n .section2 {\n background-color: #dbcdb3;\n outline: 2px dashed #5e3b1d;\n }\n\n \/* Formulare *\/\n form {\n margin: 20px;\n padding: 0px;\n }\n\n form label {\n display: block;\n margin-bottom: 5px;\n font-size: 14px;\n font-family: 'Roboto', sans-serif;\n }\n\n form input, form select, form textarea {\n width: 95%;\n padding: 8px;\n margin-bottom: 15px;\n border: 1px solid #b9a48b;\n border-radius: 15px;\n margin-left: 15px;\n }\n\n form textarea {\n margin-bottom: 5px;\n background-color: rgb(255, 254, 247);\n }\n\n form input:focus, form select:focus, form textarea:focus {\n outline: none; \/* Entfernt den Fokusrahmen *\/\n border: 2px solid #a8852c; \/* goldener Rahmen beim Fokussieren *\/\n }\n\n\n .AuswahlMal form input, .AuswahlMal form select, .AuswahlMal form textarea {\n border: 1px solid #9eb99c;\n }\n\n .AuswahlMal form textarea {\n background-color: #fdfffb;\n }\n\n .AuswahlMal form input:focus, .AuswahlMal form select:focus, .AuswahlMal form textarea:focus {\n border: 2px solid #a8852c; \/* goldener Rahmen beim Fokussieren *\/\n }\n \n .Hinweis2{\n background-color:#cfc7b6;\n padding: 5px;\n padding-top: 0px;\n margin-left: 5px;\n margin-right: 5px;\n }\n\n .Hinweis1{\n background-color:#bac2b3;\n padding: 5px;\n padding-top: 0px;\n margin-left: 5px;\n margin-right: 5px;\n }\n \n .ueberschriften {\n margin-top: 20px;\n font-family: 'Cinzel Decorative', cursive;\n font-weight:200;\n padding-left: 15px;\n }\n \n .Details{\n font-family: 'Sacramento', cursive, Arial, sans-serif;\n font-size: 18px;\n margin-top: 30px;\n margin-left: 20px;\n background-color: transparent;\n border-radius: 12px;\n cursor: pointer;\n padding-top: 5px;\n box-shadow: 1px 2px 9px rgba(0, 0, 0, 0.5);\n border: 1px solid #a5ae8d;\n }\n\n\n .Details:hover {\n background-color: #9fa592;\n transform: scale(1.05);\n }\n\n\n .Kleidungswahl {\n\n width: 200px;\n background-color: #fdfffb;\n margin-bottom: 0px;\n }\n\n\n \/* Formular f\u00fcr die Bilder *\/\n .image-form {\n text-align: center; \/* Damit die Buttons horizontal zentriert werden *\/\n }\n\n \/* Container f\u00fcr die Bild-Buttons *\/\n .image-buttons {\n display: inline-block; \/* Setzt den Container als Inline-Block, sodass er zentriert wird *\/\n margin: 0 auto; \/* Automatischer Abstand links und rechts f\u00fcr Zentrierung *\/\n }\n\n \/* Button-Stile f\u00fcr jedes Bild *\/\n .image-btn {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n outline: none;\n display: inline-block; \/* Damit die Buttons nebeneinander angezeigt werden *\/\n margin: 0 10px; \/* Abstand zwischen den Buttons *\/\n }\n\n \/* Bild-Stile *\/\n .image-btn img {\n width: 100px; \/* Standardgr\u00f6\u00dfe der Bilder *\/\n height: auto;\n border-radius: 8px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n transition: transform 0.3s ease;\n }\n\n \/* Hover-Effekt f\u00fcr die Bilder *\/\n .image-btn:hover img {\n transform: scale(1.05);\n } \n\n\n\n \/* Anmerkung oder Kommentar*\/\n .ueberschriften2 {\n margin-top: 40px;\n font-family: 'Cinzel Decorative', cursive;\n font-size: 10px;\n margin-left: 15px;\n \n }\n\n #paintedComment::placeholder {\n color: #bababa; \/* Helle graue Farbe *\/\n }\n\n\n .optional {\n margin-top: 10px;\n padding: 15px;\n background-color: #f0f4e2;\n border: 1px solid #a8c3a4;\n border-radius: 10px;\n }\n\n .skin-circle {\n width: 35px;\n height: 35px;\n border-radius: 50%;\n margin: 2px;\n display: inline-block;\n cursor: pointer;\n border: 2px solid transparent;\n transition: border 0.3s ease;\n }\n\n .skin-circle:hover, .skin-circle.selected {\n border: 2px solid #a8852c ; \/*gold*\/\n transform: scale(1.05);\n }\n \n .hair-circle {\n width: 35px;\n height: 35px;\n border-radius: 50%;\n margin: 2px;\n display: inline-block;\n cursor: pointer;\n border: 2px solid transparent;\n }\n\n .hair-circle:hover, .hair-circle.selected {\n border: 2px solid #a8852c;\n transform: scale(1.05);\n }\n \n \n \/* } ?*\/\n \n .hair-style-buttons {\n margin-top: 0px;\n }\n .hair-style-button {\n margin: 5px;\n margin-top: 10px;\n padding: 5px 20px;\n cursor: pointer;\n border: 1px solid #e8d7c0;\n border: 2px solid transparent;\n border-radius: 10px;\n background-color: #F9F1DC;\n box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);\n margin-left: 20px;\n display: inline-block;\n }\n \n .hair-style-button:hover, .hair-style-button.selected {\n border: 2px solid #a8852c;\n transform: scale(1.05); \/* Skalierung des Buttons *\/\n transform-origin: center;\n }\n \n \n \/*Farbpalleten*\/\n \/* Container f\u00fcr die Farbpaletten *\/\n #feltColorPalette {\n display: flex;\n flex-wrap: wrap;\n gap: 20px; \/* Abstand zwischen den Paletten *\/\n padding: 15px;\n }\n \n \/* Jede Farbpalette (2x3 Felder) *\/\n .color-palette {\n display: grid;\n grid-template-columns: repeat(2, 30px); \/* 3 Spalten *\/\n grid-template-rows: repeat(3, 30px); \/* 2 Reihen *\/\n gap: 0; \/* Kein Abstand zwischen den Feldern *\/\n cursor: pointer; \/* Paletten anklickbar machen *\/\n border-radius: 10px; \/* Gesamtpalette mit abgerundeten Ecken *\/\n border: 2px solid transparent;\n overflow: hidden; \/* Ecken innerhalb der Palette abschneiden *\/\n }\n \n \/* Farbquadrate innerhalb der Paletten *\/\n .color-square {\n width: 30px; \/* Breite eines einzelnen Feldes *\/\n height: 30px; \/* H\u00f6he eines einzelnen Feldes *\/\n margin: 0; \/* Kein Abstand zwischen den Feldern *\/\n }\n\n \/* Abgerundete Ecken nur an den \u00e4u\u00dferen Feldern *\/\n .color-square:first-child { \/* Oberes linkes Feld *\/\n border-top-left-radius: 10px;\n }\n .color-square:nth-child(2) { \/* Oberes rechtes Feld *\/\n border-top-right-radius: 10px;\n }\n .color-square:nth-last-child(2) { \/* Unteres linkes Feld *\/\n border-bottom-left-radius: 10px;\n }\n .color-square:last-child { \/* Unteres rechtes Feld *\/\n border-bottom-right-radius: 10px;\n }\n \n \/* Hover-Effekt f\u00fcr die Farbpaletten *\/\n .color-palette:hover, .color-palette.selected {\n border: 2px solid #a8852c;\n transform: scale(1.02);\n \n }\n\n .Feen{\n width: 300px;\n height: 300px;\n margin: 0px;\n background-size: 100%;\n background-position: center center;\n background-image: url('https:\/\/static.vecteezy.com\/system\/resources\/previews\/029\/991\/984\/non_2x\/cute-fairy-watercolor-clipart-on-white-background-ai-generated-photo.jpeg'); \/* Urspr\u00fcngliches Bild *\/\n transition: background-image 1s ease; \/* \u00dcbergang f\u00fcr das Hintergrundbild *\/\n display: flex;\n align-self: center;\n box-shadow: 6px 8px 15px rgba(0, 0, 0, 0.5);\n \n }\n \n .Feen:hover{\n background-image: url('https:\/\/i.etsystatic.com\/12809426\/r\/il\/40034e\/1332265602\/il_fullxfull.1332265602_62pz.jpg');\n }\n\n #feltForm{\n position: relative;\n }\n \n .Gras {\n position: absolute; \/* Positioniere das Randbild absolut *\/\n bottom: 0; \/* Setze es an den unteren Rand des Containers *\/\n left: 0; \/* Setze es an den linken Rand des Containers *\/\n right: 0; \/* Setze es an den rechten Rand des Containers *\/\n height: auto; \/* H\u00f6he automatisch anpassen *\/\n z-index: -1; \/* Stelle sicher, dass es hinter dem Formular liegt *\/\n background-image: url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_nur-Rand.png');\n background-size: cover; \/* Bildgr\u00f6\u00dfe anpassen *\/\n background-repeat: no-repeat; \/* Bild nicht wiederholen *\/\n }\n\n\n \/* Medienabfragen *\/\n \n\n @media (max-width: 1055px) {\n \n h1 {\n font-size: 43px;\n margin-top: 80px;\n \n }\n \n \n .section {\n margin-right: 40px;\n margin-left: 40px;\n }\n\n .options {\n flex-wrap: wrap;\n align-items: center;\n margin-left: 20px;\n margin-right: 20px;\n }\n\n .option {\n max-width: 70%;\n }\n \n .option2 {\n max-width: 70%;\n }\n\n\n .dynamicSection {\n background-image: url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzer_Ubergang_klein-1.jpg'),\n url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzerRand.jpg');\n background-size: 100%, contain;\n background-repeat: no-repeat, repeat;\n background-position: top center, top center;\n padding: 20px;\n margin-top: 25px;\n margin-bottom: 10px;\n width: 90%; \/* Stellt sicher, dass der Abschnitt nicht die volle Bildschirmbreite einnimmt*\/\n max-width: 1000px; \/*Optional: Setzt eine maximale Breite f\u00fcr den Abschnitt *\/\n max-height: auto;\n border-radius: 20px;\n transition: background-image 0.2s ease;\n pointer-events: auto;\n overflow: hidden;\n\n }\n\n .Gras {\n background-image: url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_nur-Rand.png');\n background-size: 100%;\n background-repeat: no-repeat;\n background-position: bottom center;\n }\n\n\n .Feen{\n width: 200px;\n height: 200px;\n margin: 0px;\n \n }\n \n .Aquarell{\n \n max-width: 500px;\n max-height: 250px; \n } \n \n \n .Filz{\n \n max-width: 500px;\n max-height: 250px; \n } \n \n }\n \n\n @media (max-width: 768px) {\n h1 {\n font-size: 36px;\n margin-top: 50px;\n \n }\n \n\n .options {\n flex-wrap: wrap;\n align-items: center;\n margin-left: 20px;\n margin-right: 20px;\n }\n\n .option {\n max-width: 80%;\n }\n \n .option2 {\n max-width: 80%;\n }\n \n .hint {\n flex-direction: column; \/* Wechselt von horizontaler Anordnung zu vertikal *\/\n gap: 5px; \/* Reduziert den Abstand zwischen Text und Button auf kleinen Bildschirmen *\/\n justify-content: center; \/* Zentriert den Inhalt vertikal *\/\n }\n \n \n\n .image-buttons {\n width: 100%;\n }\n\n .image-btn {\n display: block; \/* Buttons untereinander anordnen *\/\n width: 100%; \/* Volle Breite der Buttons *\/\n margin: 10px 0; \/* Vertikaler Abstand zwischen den Buttons *\/\n }\n\n \/* Gr\u00f6\u00dferes Button-Bild auf kleineren Bildschirmen *\/\n .image-btn img {\n width: 80%; \/* Bild wird gr\u00f6\u00dfer *\/\n max-width: 200px; \/* Maximale Breite des Bildes *\/\n }\n\n\n}\n \n \n <\/style>\n<\/head>\n<body>\n \n<section class=\"dynamicSection\">\n <header>\n <h1>You as a Fairy<\/h1>\n <div class=\"Feen\"><\/div>\n <\/header>\n\n <main>\n <section class=\"options\">\n <div class=\"option\" id=\"painted\" onclick=\"selectOption('painted')\">\n <h3 class=\"Gemalt\">Gemalte Fee<\/h3>\n <img decoding=\"async\" class=\"Aquarell\" src=\"https:\/\/img.freepik.com\/vecteurs-premium\/illustration-fee-vectorielle-aquarelle-pour-enfants_873925-121062.jpg\" Alt=\"Aquarell Fee\">\n <p class=\"pMalen\">Werde als magische Fee illustriert!<\/p>\n <button class=\"buttonmalen\">Jetzt designen<\/button>\n <\/div>\n <div class=\"option2\" id=\"felt\" onclick=\"selectOption('felt')\">\n <h3 class=\"Gefilzt\">Filzfee<\/h3>\n <img decoding=\"async\" class=\"Filz\" src=\"https:\/\/i.pinimg.com\/originals\/2b\/e8\/13\/2be813bf82efb35d2f7ed565d5aba751.jpg\" alt=\"Eine gefilzte Fee mit spitz zulaufendem Rock\">\n <p class=\"pFilz\">Dein Ebenbild als handgemachte Filzfee!<\/p>\n <button class=\"buttonfilz\">Jetzt designen<\/button>\n <\/div>\n <\/section>\n\n <section id=\"paintedForm\" class=\"form hidden section1\">\n <h2>Gemalte Fee erstellen<\/h2>\n <section class=\"Hinweis1\">\n <div class=\"hint\">\n <p>Lieber eine fertige Fee ausw\u00e4hlen?<\/p>\n <\/div>\n <form class=\"image-form\">\n <div class=\"image-buttons\">\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee6';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-18-102222.jpeg\" alt=\"Image 1\">\n <\/button>\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee7';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-18-102222.jpeg\" alt=\"Image 2\">\n <\/button>\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee8';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-18-102222.jpeg\" alt=\"Image 3\">\n <\/button>\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee9';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-18-102222.jpeg\" alt=\"Image 4\">\n <\/button>\n <\/div>\n \n <\/form>\n <\/section>\n \n <section class=\"AuswahlMal\">\n <form>\n <label class=\"ueberschriften\" for=\"paintedSkin\">Hautfarbe:<\/label>\n <div id=\"paintedSkin\" class=\"Farben1\">\n <div class=\"skin-circle\" style=\"background-color: #f8e4d8;\" onclick=\"selectSkinColor('painted', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #f2d6c7;\" onclick=\"selectSkinColor('painted', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #e1b89f;\" onclick=\"selectSkinColor('painted', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #d2a074;\" onclick=\"selectSkinColor('painted', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #a8754a;\" onclick=\"selectSkinColor('painted', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #815539;\" onclick=\"selectSkinColor('painted', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #5a3520;\" onclick=\"selectSkinColor('painted', '#eac086')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #2e1b0f;\" onclick=\"selectSkinColor('painted', '#8d5524')\"><\/div>\n <\/div>\n <input type=\"hidden\" name=\"skinColor\" value=\"\">\n\n <label class=\"ueberschriften\" for=\"paintedHairstyle\">Haarfarbe:<\/label>\n <div id=\"paintedHair\" class=\"Farben1\">\n <div class=\"hair-circle\" style=\"background-color: #f1e0a6;\" onclick=\"selectHairColor('painted', '#f1e0a6')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #be9b4e;\" onclick=\"selectHairColor('painted', '#d4b36b')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #82603e;\" onclick=\"selectHairColor('painted', '#a67c52')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #332414;\" onclick=\"selectHairColor('painted', '#4b3621')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #1a1a1a;\" onclick=\"selectHairColor('painted', '#1a1a1a')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #ffffff;\" onclick=\"selectHairColor('painted', '#ffffff')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #b1b0b0;\" onclick=\"selectHairColor('painted', '#a9a9a9')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #ad502e;\" onclick=\"selectHairColor('painted', '#d96c4e')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #962a0c;\" onclick=\"selectHairColor('painted', '#d96c4e')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #225832;\" onclick=\"selectHairColor('painted', '#2c6b3f')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #1c3c88;\" onclick=\"selectHairColor('painted', '#2a3d66')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #b9419d;\" onclick=\"selectHairColor('painted', '#6a4c9c')\"><\/div> \n <\/div>\n \n\n <input type=\"hidden\" id=haircolor name=\"hairColor\" value=\"\">\n\n \n <div class=\"hair-style-buttons\" id=\"hairStylesContainer\" style=\"display: none;\">\n <button type=\"button\" class=\"hair-style-button\" id=\"smooth\" onclick=\"changeHairStructure('smooth', event)\">Glatt<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"wavy\" onclick=\"changeHairStructure('wavy', event)\">Wellig<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"curly\" onclick=\"changeHairStructure('curly', event)\">Lockig<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"frizzy\" onclick=\"changeHairStructure('frizzy', event)\">Kraus<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"egal\" onclick=\"changeHairStructure('egal', event)\">Egal<\/button>\n \n <\/div>\n\n <label class=ueberschriften for=\"paintedEyes\">Augenfarbe:<\/label>\n <div id=\"paintedEyes\" class=\"Farben1\">\n <div class=\"hair-circle\" style=\"background-color: #3e2a1a;\" onclick=\"selectEyeColor('painted', '#8a5e3b')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #725329;\" onclick=\"selectEyeColor('painted', '#b8860b')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #753d18;\" onclick=\"selectEyeColor('painted', '#d3d3d3')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #b7b7b7;\" onclick=\"selectEyeColor('painted', '#a9a9a9')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #73bfd8;\" onclick=\"selectEyeColor('painted', '#ff6347')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #376fa3;\" onclick=\"selectEyeColor('painted', '#2e8b57')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #0c5e2f;\" onclick=\"selectEyeColor('painted', '#1e90ff')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #77c96e;\" onclick=\"selectEyeColor('painted', '#7fff00')\"><\/div> \n \n <\/div>\n\n <label class=ueberschriften for=\"paintedColors\">Farbraum f\u00fcr Kleidung und Fl\u00fcgel:<\/label>\n \n <div id=\"ColorPalette\" class=\"Farben1\">\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('painted', 'red')\">\n <div class=\"color-square\" style=\"background-color: #660000;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #990000;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #cc0033;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #cc6666;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ff9999;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ffcccc;\"><\/div>\n \n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('painted', 'orange')\">\n <div class=\"color-square\" style=\"background-color: #e65c1b;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ff9900;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #f0b751;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #f29c11;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ffcc00;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ffff66;\"><\/div>\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('painted', 'green')\">\n <div class=\"color-square\" style=\"background-color: #4f9a7b;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #3b7e5e;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #5e8d75;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #7db59b;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #a1c7ad;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #d2e3d6;\"><\/div>\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('painted', 'blue')\">\n <div class=\"color-square\" style=\"background-color: #000099;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #003366;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #3366cc;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #66b2cc;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #0099cc;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #a1c4d5;\"><\/div>\n\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('painted', 'purple')\">\n <div class=\"color-square\" style=\"background-color: #47367a;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #695696;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #814883;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #66225c;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #c587cf;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #d5a9dc;\"><\/div>\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('painted', 'brown')\">\n <div class=\"color-square\" style=\"background-color: #3a1f13;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #4f2a18;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #7a3b2d;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #8b4f23;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #b38655;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #d2b58b;\"><\/div> \n <\/div>\n <\/div>\n\n <button class=\"Details\" type=\"Button\" onclick=\"weitereDetails1()\">Weitere Details?<\/button>\n\n <label class=\"ueberschriften hidden Oberteil\" for=\"Oberteil\">Oberteil:<\/label>\n <select id=\"Oberteil\" name=\"upperstyle\" class=\"Kleidungswahl hidden Oberteil\" onchange=\"selectStyle('felt', this.value, 'upperStyle')\">\n <option value=\"Hose\">egal<\/option>\n <option value=\"Hose\">tr\u00e4gerlos<\/option>\n <option value=\"Kleid\">Spaghetti-Tr\u00e4ger<\/option>\n <option value=\"Rock\">breite\/normale Tr\u00e4ger<\/option>\n <option value=\"Hose\">kurze \u00c4rmel<\/option>\n <option value=\"Hose\">lange \u00c4rmel<\/option>\n <\/select>\n\n <label class=\"ueberschriften hidden Unterteil\" for=\"Unterteil\">Unterteil:<\/label>\n <select id=\"Unterteil\" name=\"lowerstyle\" class=\"Kleidungswahl hidden Unterteil\" onchange=\"selectStyle('felt', this.value, 'lowerStyle')\">\n <option value=\"Hose\">egal<\/option>\n <option value=\"Kleid\">Kleid\/Rock<\/option>\n <option value=\"Hose\">Hose<\/option>\n <\/select>\n\n \n <input type=\"hidden\" name=\"upperStyle\" value=\"\">\n <input type=\"hidden\" name=\"lowerStyle\" value=\"\">\n\n <label class=ueberschriften2 for=\"paintedComment\">Anmerkung oder weitere W\u00fcnsche:<\/label>\n <textarea id=\"paintedComment\" name=\"comment\" rows=\"4\" placeholder=\"Gib hier bei Bedarf z.B. Haarl\u00e4nge, Frisur und\/oder Accessoires ein...\"><\/textarea>\n\n <button type=\"submit\" class=\"buttonmalen\">Fee in den Warenkorb<\/button>\n <\/form>\n <\/section>\n <\/section>\n\n <section id=\"feltForm\" class=\"form hidden section2\">\n <h2>Filzfee erstellen<\/h2>\n <section class=\"Hinweis2\">\n <div class=\"hint\">\n <p>Lieber eine fertige Fee ausw\u00e4hlen?<\/p>\n <\/div>\n <form class=\"image-form\">\n <div class=\"image-buttons\">\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee1';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-17-161615_002-scaled.jpeg\" alt=\"Image 1\">\n <\/button>\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee2';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-17-161615_002-scaled.jpeg\" alt=\"Image 2\">\n <\/button>\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee3';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-17-161615_002-scaled.jpeg\" alt=\"Image 3\">\n <\/button>\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee4';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-17-161615_002-scaled.jpeg\" alt=\"Image 4\">\n <\/button>\n <\/div>\n \n <\/form>\n <\/section>\n <form>\n <label class=\"ueberschriften\" for=\"feltSkin\">Hautfarbe:<\/label>\n <div id=\"feltSkin\" class=\"Farben2\">\n <div class=\"skin-circle\" style=\"background-color: #f8e4d8;\" onclick=\"selectSkinColor('felt', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #f2d6c7;\" onclick=\"selectSkinColor('felt', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #e1b89f;\" onclick=\"selectSkinColor('felt', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #d2a074;\" onclick=\"selectSkinColor('felt', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #a8754a;\" onclick=\"selectSkinColor('felt', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #815539;\" onclick=\"selectSkinColor('felt', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #5a3520;\" onclick=\"selectSkinColor('felt', '#eac086')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #2e1b0f;\" onclick=\"selectSkinColor('felt', '#8d5524')\"><\/div>\n <\/div>\n <input type=\"hidden\" name=\"skinColor\" value=\"\" required>\n\n <label class=ueberschriften for=\"feltHairstyle\">Haarfarbe:<\/label>\n <div id=\"feltHair\" class=\"Farben2\">\n <div class=\"hair-circle\" style=\"background-color: #f1e0a6;\" onclick=\"selectHairColor('felt', '#f1e0a6')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #be9b4e;\" onclick=\"selectHairColor('felt', '#d4b36b')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #82603e;\" onclick=\"selectHairColor('felt', '#a67c52')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #332414;\" onclick=\"selectHairColor('felt', '#4b3621')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #1a1a1a;\" onclick=\"selectHairColor('felt', '#1a1a1a')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #ffffff;\" onclick=\"selectHairColor('felt', '#ffffff')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #b1b0b0;\" onclick=\"selectHairColor('felt', '#a9a9a9')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #ad502e;\" onclick=\"selectHairColor('felt', '#d96c4e')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #962a0c;\" onclick=\"selectHairColor('felt', '#d96c4e')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #225832;\" onclick=\"selectHairColor('felt', '#2c6b3f')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #1c3c88;\" onclick=\"selectHairColor('felt', '#2a3d66')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #b9419d;\" onclick=\"selectHairColor('felt', '#6a4c9c')\"><\/div> \n <\/div>\n \n <input type=\"hidden\" id=haircolor name=\"hairColor\" value=\"\">\n\n \n <div class=\"hair-style-buttons\" id=\"hairStylesContainer\" style=\"display: none;\">\n <button type=\"button\" class=\"hair-style-button\" id=\"smooth\" onclick=\"changeHairStructure('smooth', event)\">Glatt<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"wavy\" onclick=\"changeHairStructure('wavy', event)\">Wellig<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"curly\" onclick=\"changeHairStructure('curly', event)\">Lockig<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"frizzy\" onclick=\"changeHairStructure('frizzy', event)\">Kraus<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"egal\" onclick=\"changeHairStructure('egal', event)\">Egal<\/button>\n \n <\/div>\n\n\n <label class=ueberschriften for=\"feltColors\">Farbraum f\u00fcr Kleidung und Fl\u00fcgel:<\/label>\n \n <div id=\"feltColorPalette\" class=\"Farben2\">\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('felt', 'red')\">\n <div class=\"color-square\" style=\"background-color: #660000;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #990000;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #cc0033;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #cc6666;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ff9999;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ffcccc;\"><\/div>\n \n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('felt', 'orange')\">\n <div class=\"color-square\" style=\"background-color: #e65c1b;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ff9900;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #f0b751;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #f29c11;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ffcc00;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ffff66;\"><\/div>\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('felt', 'green')\">\n <div class=\"color-square\" style=\"background-color: #4f9a7b;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #3b7e5e;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #5e8d75;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #7db59b;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #a1c7ad;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #d2e3d6;\"><\/div>\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('felt', 'blue')\">\n <div class=\"color-square\" style=\"background-color: #000099;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #003366;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #3366cc;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #66b2cc;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #0099cc;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #a1c4d5;\"><\/div>\n\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('felt', 'purple')\">\n <div class=\"color-square\" style=\"background-color: #47367a;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #695696;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #814883;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #66225c;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #c587cf;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #d5a9dc;\"><\/div>\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('felt', 'brown')\">\n <div class=\"color-square\" style=\"background-color: #3a1f13;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #4f2a18;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #7a3b2d;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #8b4f23;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #b38655;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #d2b58b;\"><\/div> \n <\/div>\n<\/div>\n\n\n <label class=ueberschriften2 for=\"feltComment\">Anmerkung oder weitere Details:<\/label>\n <textarea id=\"feltComment\" name=\"comment\" rows=\"4\" placeholder=\"Gib hier bei Bedarf z.B. Haarl\u00e4nge, Frisur und\/oder Accessoires ein...\"><\/textarea>\n <button type=\"submit\" class=\"buttonfilz\">Fee in den Warenkorb<\/button>\n <\/form>\n\n <div class=\"Gras\" ><\/div>\n <\/section>\n <\/main>\n<\/section>\n\n <script>\n function weitereDetails1()\n {\n const Kleidung = document.querySelectorAll('.Oberteil, .Unterteil');\n Kleidung.forEach(el => {\n if (el.classList.contains('hidden')) {\n el.classList.remove('hidden'); \/\/ Wenn das Element 'hidden' hat, wird es sichtbar\n } else {\n el.classList.add('hidden'); \/\/ Wenn das Element sichtbar ist, wird es versteckt\n }\n });\n\n }\n\n \/\/ Funktion zum Speichern des ausgew\u00e4hlten Oberteils\n function selectStyle(form, style, type) {\n \/\/ Speichere den Wert im Formular\n const styleInput = document.querySelector(`#${form}Form input[name=\"${type}\"]`);\n if (styleInput) {\n styleInput.value = style; \/\/ Setze den Wert des Formularfeldes auf den ausgew\u00e4hlten Style\n }\n }\n \n function selectOption(option) {\n \/\/ Alle Optionen zur\u00fccksetzen (alle Klassen 'active' entfernen und alle Formulare verstecken)\n document.querySelectorAll('.option, .option2').forEach(el => el.classList.remove('active'));\n document.querySelectorAll('.form').forEach(el => el.classList.add('hidden'));\n \n \/\/ Die gew\u00e4hlte Option aktiv setzen\n document.getElementById(option).classList.add('active');\n \n \/\/ Zeige das zugeh\u00f6rige Formular\n document.getElementById(option + 'Form').classList.remove('hidden');\n\n \/\/ \u00c4ndere den Hintergrund, wenn das Formular ge\u00f6ffnet wird\n const dynamicSection = document.querySelector('.dynamicSection');\n \/\/ F\u00fcge die Klasse \"active\" hinzu, wenn die Funktion ausgel\u00f6st wird\n dynamicSection.classList.add('active');\n\n \/\/ Wenn du die Klasse wieder entfernen m\u00f6chtest:\n \/\/ dynamicSection.classList.remove('active');\n \n \/\/ Alle Buttons zur\u00fccksetzen (visuelle Hervorhebung entfernen)\n document.querySelectorAll('.option button').forEach(button => button.classList.remove('selected'));\n \n \/\/ Den geklickten Button hervorheben\n const button = document.querySelector(`#${option} button`);\n if (button) {\n button.classList.add('selected');\n }\n }\n\n\n function choosePreMadeFairy() {\n alert('Fertige Fee ausw\u00e4hlen - Funktion noch nicht implementiert');\n }\n\n function selectSkinColor(form, color) {\n const skinColorInput = document.querySelector(`#${form}Form input[name=\"skinColor\"]`);\n if (skinColorInput) {\n skinColorInput.value = color;\n }\n \n \/\/ Visuelle Hervorhebung\n document.querySelectorAll(`#${form}Form .skin-circle`).forEach(circle => circle.classList.remove('selected'));\n event.target.classList.add('selected');\n }\n\n \n function selectHairColor(form, color) {\n const hairColorInput = document.querySelector(`#${form}Form input[name=\"hairColor\"]`);\n if (hairColorInput) {\n hairColorInput.value = color;\n }\n \n \/\/ Visuelle Hervorhebung der ausgew\u00e4hlten Haarfarbe\n document.querySelectorAll(`#${form}Form .hair-circle`).forEach(circle => circle.classList.remove('selected'));\n event.target.classList.add('selected');\n \n \/\/ Zeige die Haarstruktur-Buttons an\n document.getElementById('hairStylesContainer').style.display = 'block'; \/\/ Buttons anzeigen\n }\n \n \n \/\/ Funktion, um die Haarstruktur zu \u00e4ndern\n function changeHairStructure(structure, event) {\n \/\/ Verhindere das Standardverhalten (z.B. Seitenreload oder Formularabsendung)\n event.preventDefault();\n\n \/\/ Setze die Haarstruktur (dies k\u00f6nnte ein Formularfeld oder eine Variable sein)\n hairStructure = structure;\n\n \/\/ Visuelle Hervorhebung:\n \/\/ Entferne die 'selected' Klasse von allen Buttons\n document.querySelectorAll('.hair-style-button').forEach(button => {\n button.classList.remove('selected');\n });\n\n \/\/ F\u00fcge die 'selected' Klasse dem angeklickten Button hinzu\n event.target.classList.add('selected');\n\n \/\/ Optional: Hier k\u00f6nntest du die Darstellung der Fee oder der Haare aktualisieren\n drawFairy(); \/\/ Falls du eine Funktion hast, die die Fee anzeigt\/aktualisiert\n\n }\n\n\n function selectEyeColor(form, color) {\n \/\/ Setze den Wert der Augenfarbe im Formular\n const eyeColorInput = document.querySelector(`#${form}Form input[name=\"eyeColor\"]`);\n if (eyeColorInput) {\n eyeColorInput.value = color;\n }\n\n \/\/ Entferne die 'selected'-Klasse von allen Augenfarben\n document.querySelectorAll(`#${form}Form .hair-circle`).forEach(circle => circle.classList.remove('selected'));\n\n \/\/ F\u00fcge die 'selected'-Klasse dem angeklickten Kreis hinzu\n event.target.classList.add('selected');\n }\n \n \/\/ Funktion, um den Button f\u00fcr \u201eNoch mehr Details?\u201c ein- oder auszublenden\n function toggleMoreDetails() {\n const detailsContainer = document.getElementById('additionalDetailsContainer');\n if (detailsContainer.classList.contains('hidden')) {\n detailsContainer.classList.remove('hidden');\n } else {\n detailsContainer.classList.add('hidden');\n }\n }\n\n \n\n \n function selectColorPalette(form, palette) {\n document.querySelectorAll(`#${form}Form .color-palette`).forEach(el => el.classList.remove('selected'));\n event.target.closest('.color-palette').classList.add('selected');\n \/\/ Speichere die Auswahl im Formular\n const colorPaletteInput = document.querySelector(`#${form}Form input[name=\"colorPalette\"]`);\n if (colorPaletteInput) {\n colorPaletteInput.value = palette;\n }\n }\n \n \n \n\/* \n document.addEventListener(\"DOMContentLoaded\", function () {\n const section = document.querySelector(\".dynamicSection\");\n const overlay = document.createElement(\"div\");\n overlay.classList.add(\"extra-overlay\");\n section.appendChild(overlay); \/\/ PNG-Grafik unten hinzuf\u00fcgen\n\n function updateBackground() {\n const sectionHeight = section.offsetHeight; \/\/ Aktuelle H\u00f6he der Section\n const contentHeight = section.scrollHeight; \/\/ Gesamth\u00f6he der Inhalte\n\n \/\/ Debugging: Zeige die berechneten Werte an\n console.log(\"Section Height:\", sectionHeight);\n console.log(\"Content Height:\", contentHeight);\n\n if (contentHeight > sectionHeight - 50) { \/\/ Rand ber\u00fccksichtigen\n if (contentHeight > 1900) {\n \/\/ Fall 1: Inhalte passen nicht mehr in Bild 2\n console.log(\"Bild 3 wird unten angeh\u00e4ngt\");\n section.style.backgroundImage =\n \"url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzer_Ubergang_klein-1.jpg'), url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzerRand.jpg')\";\n section.style.backgroundRepeat = \"no-repeat, repeat\";\n section.style.backgroundSize = \"100% auto, auto\";\n section.style.backgroundPosition = \"top center, bottom center\";\n } else {\n \/\/ Fall 2: Inhalte passen in Bild 2\n console.log(\"Bild 2 wird angezeigt\");\n section.style.backgroundImage =\n \"url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzer_Ubergang_klein-1.jpg')\";\n section.style.backgroundRepeat = \"no-repeat\";\n section.style.backgroundSize = \"100% auto\";\n section.style.backgroundPosition = \"top center\";\n }\n overlay.style.display = \"block\"; \/\/ Optional: PNG anzeigen\n } else {\n \/\/ Fall 3: Inhalte passen in Bild 1\n console.log(\"Bild 1 wird angezeigt\");\n section.style.backgroundImage =\n \"url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzermit-rand_klein.jpg')\";\n section.style.backgroundRepeat = \"no-repeat\";\n section.style.backgroundSize = \"100% auto\";\n section.style.backgroundPosition = \"top center\";\n overlay.style.display = \"none\"; \/\/ PNG ausblenden\n }\n }\n\n \/\/ Initial pr\u00fcfen und bei Fenster\u00e4nderungen\n updateBackground();\n window.addEventListener(\"resize\", updateBackground);\n\n \/\/ Event f\u00fcr dynamische Inhalts\u00e4nderungen\n const observer = new MutationObserver(updateBackground);\n observer.observe(section, { childList: true, subtree: true, attributes: true });\n});\n\n*\/\n\n \n\n \n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>You as a Fairy You as a Fairy Gemalte Fee Werde als magische Fee illustriert! Jetzt designen Filzfee Dein Ebenbild als handgemachte Filzfee! Jetzt designen Gemalte Fee erstellen Lieber eine fertige Fee ausw\u00e4hlen? Hautfarbe: Haarfarbe: Glatt Wellig Lockig Kraus Egal Augenfarbe: Farbraum f\u00fcr Kleidung und Fl\u00fcgel: Weitere Details? Oberteil: egaltr\u00e4gerlosSpaghetti-Tr\u00e4gerbreite\/normale Tr\u00e4gerkurze \u00c4rmellange \u00c4rmel Unterteil: egalKleid\/RockHose […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-81","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/pages\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":32,"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/pages\/81\/revisions"}],"predecessor-version":[{"id":138,"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/pages\/81\/revisions\/138"}],"wp:attachment":[{"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/media?parent=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":81,"date":"2024-12-12T15:22:53","date_gmt":"2024-12-12T15:22:53","guid":{"rendered":"https:\/\/youasafairy.ua.ms\/?page_id=81"},"modified":"2024-12-21T18:59:31","modified_gmt":"2024-12-21T18:59:31","slug":"you-as-a-fairy","status":"publish","type":"page","link":"https:\/\/youasafairy.ua.ms\/","title":{"rendered":"You as a Fairy"},"content":{"rendered":"\n\n\n\n \n \n You as a Fairy<\/title>\n\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel+Decorative:wght@700&family=Sacramento&family=Roboto:wght@400&display=swap\" rel=\"stylesheet\">\n\n <style>\n \/* Allgemeines Styling *\/\n body {\n font-family: 'Sacramento', cursive, Arial, sans-serif;\n background-color: #919C75;\n color: #333;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n margin: 0;\n \n }\n\n\n header {\n text-align: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-content: center;\n margin-bottom: 40px;\n }\n\n h1 {\n font-family: 'Cinzel Decorative', cursive;\n font-size: 50px;\n color: #333;\n text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);\n margin-top: 100px;\n\n margin-bottom: 20px;\n }\n\n h3 {\n font-family: 'Cinzel Decorative', cursive;\n font-size: 20px;\n color: #333;\n text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);\n margin-bottom: 10px;\n }\n \n \/*FIlzfee erstellen*\/\n h2 {\n font-family: 'Sacramento', cursive;\n font-size: 35px;\n color: #333;\n padding-left: 30px;\n padding-top: 0px;\n margin-bottom: 5px;\n }\n\n p {\n font-size: 20px;\n color: #666;\n margin-bottom: 5px;\n }\n\n\n\n .beige{\n\n }\n \n .holzbraun{\n\n\n }\n\n .gr\u00fcn{\n\n \n }\n\n\n\n .dynamicSection{\n \n background-image: url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzermit-rand_klein.jpg');\n background-size: 100% 100%;\n background-repeat: no-repeat;\n background-position: top center;\n padding: 20px; \/* Abstand zum Rand des Containers *\/\n padding-bottom: 0px;\n margin: 0 auto; \/* Zentriert den Abschnitt horizontal *\/\n margin-top: 20px;\n margin-bottom: 30px;\n width: 80%; \/* Stellt sicher, dass der Abschnitt nicht die volle Bildschirmbreite einnimmt*\/\n max-width: 1000px; \/*Optional: Setzt eine maximale Breite f\u00fcr den Abschnitt *\/\n height: auto;\n border-radius: 20px;\n transition: background-image 0.2s ease;\n\n }\n\n .dynamicSection.active {\n background-image: \n url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzer_Ubergang_klein-1.jpg'), \n url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzerRand.jpg');\n background-repeat: no-repeat, repeat; \/* Zweites Bild wird wiederholt *\/\n background-size: 100%; \/* Erstes Bild deckt den Bereich ab *\/\n background-position: top center, top center;\n padding: 20px; \/* Abstand zum Rand des Containers *\/\n padding-bottom: 0px;\n margin: 0 auto; \/* Zentriert den Abschnitt horizontal *\/\n width: 80%; \/* Stellt sicher, dass der Abschnitt nicht die volle Bildschirmbreite einnimmt*\/\n max-width: 1000px; \/*Optional: Setzt eine maximale Breite f\u00fcr den Abschnitt *\/\n max-height: auto;\n border-radius: 20px;\n transition: background-image 0.3s ease;\n }\n \n \n \/*Filfee und Gemalte Fee ausw\u00e4hlen-Button*\/\n .Bilder {\n background-color: #e8ddc5;\n height: 100px;\n width: 80px;\n border-radius: 20px;\n border: solid #dac5a6;\n cursor: pointer;\n }\n \n\n \/* Optionen Styling *\/\n .options {\n display: flex;\n justify-content: center;\n gap: 40px;\n margin-bottom: 66px;\n margin-left: 100px;\n margin-right: 100px;\n align-items: center;\n \n }\n\n .option {\n box-sizing: border-box;\n padding: 15px;\n padding-top: 30px;\n background-color: #a5ae8d;\n border-radius: 30px;\n text-align: center;\n cursor: pointer;\n box-shadow: 6px 8px 25px rgba(0, 0, 0, 0.9);\n position: relative;\n transition: transform 0.3s ease;\n display: flex;\n flex-direction: column; \/* Vertikale Anordnung der Kinder *\/\n justify-content: space-between; \/* Button nach unten schieben *\/\n align-items: center; \/* Zentrierung in der Mitte *\/\n width: 340px;\n flex-shrink: 0;\n outline: 2px dashed #4c3018;\n outline-offset: -10px;\n overflow: hidden;\n }\n \n \n .option:hover {\n transform: scale(1.05);\n }\n\n .Aquarell{\n \n max-width: 500px;\n max-height: 250px; \n }\n\n\n .option2 {\n box-sizing: border-box;\n padding: 15px;\n padding-top: 30px;\n background-color: #F9F1DC;\n border-radius: 30px;\n text-align: center;\n cursor: pointer;\n box-shadow: 6px 8px 25px rgba(0, 0, 0, 0.9);\n position: relative;\n transition: transform 0.3s ease;\n display: flex;\n flex-direction: column; \/* Vertikale Anordnung der Kinder *\/\n justify-content: space-between; \/* Button nach unten schieben *\/\n align-items: center; \/* Zentrierung in der Mitte *\/\n width: 340px;\n flex-shrink: 0;\n outline: 2px dashed #5e3b1d;\n outline-offset: -10px;\n overflow: hidden;\n }\n\n .option2:hover {\n transform: scale(1.05);\n }\n \n .Filz{\n max-width: 500px;\n max-height: 250px; \n }\n\n .hidden {\n display: none;\n }\n\n .option.active {\n background-color: #9fa592;\n }\n\n .option2.active {\n background-color: #dbd2c3;\n }\n\n \n\n .pFilz {\n color: #5D3A1A;\n \n }\n \n .pMalen{\n color: #F9F1DC;\n }\n \n .Gemalt{\n color: white;\n font-size: 24px; \n margin-top:1px;\n \/*text-shadow: 1px 1px 0 red, -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red;*\/\n \n }\n \n .Gefilzt{\n color:black;\n font-size: 24px; \n margin-top: 1px;\n \/*text-shadow: 1px 1px 0 red, -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red;*\/\n \n }\n\n \/* Button Styling *\/\n .buttonfilz {\n padding: 10px 20px;\n background-color: #a5ae8d;\n color: #4d3015;\n border: 2px solid rgb(164, 173, 141);\n border-radius: 30px;\n cursor: pointer;\n box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.6);\n align-self: end;\n display: block;\n margin: 10px auto;\n font-family: 'Roboto', sans-serif;\n font-weight: 500;\n }\n\n .buttonfilz:hover {\n background-color: #BCC6A4;\n border: 2px solid #b6bfa0;\n }\n \n \n \/*Styling der Gesamt-Palletten*\/\n \n .Farben1, .Farben2 {\n display: flex;\n width: fit-content;\n height: fit-content;\n flex-wrap: wrap;\n gap: 5px;\n outline-offset: -3px;\n border-radius:20px;\n \/* Flexbox wird verwendet, um die Punkte zu verteilen *\/\n justify-content: space-evenly; \/* Verteil die Farbpunkte gleichm\u00e4\u00dfig *\/\n align-items: center; \/* Zentriert die Punkte vertikal *\/\n padding: 10px; \n margin-left: 15px;\n box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.4);\n }\n \n .Farben1 {\n outline: 1px solid #ccd4b8;\n background-color: #f9f6dc;\n\n }\n \n .Farben2 {\n outline: 1px solid #e8d7c0;\n background-color: #F9F1DC;\n }\n \n .buttonmalen {\n padding: 10px 20px;\n background-color: #F9F1DC;\n color: #5D3A1A;\n border: 2px solid #f5ecd6;\n border-radius: 30px;\n cursor: pointer;\n box-shadow: 1px 2px 9px rgba(0, 0, 0, 0.5);\n align-self: center;\n display: block;\n margin: 10px auto;\n font-family: 'Roboto', sans-serif;\n font-weight: 500;\n }\n\n .buttonmalen:hover {\n background-color: #EADFBF;\n border: 2px solid #e5dab9;\n }\n \n\n \/* Hinweis Styling *\/\n .hint {\n font-size: 16px;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n gap: 20px;\n padding-top: 0px;\n }\n\n .hint p {\n margin-top: 10px;\n margin-bottom: -10px;\n }\n\n \/*ganzes Formular*\/\n \n .section1, .section2 {\n margin: 20px;\n margin-right: 80px;\n margin-left: 80px;\n margin-bottom: 60px;\n padding: 5px;\n padding-bottom: 15px;\n border-radius: 20px;\n box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.7);\n outline-offset: -10px;\n }\n\n .section1 {\n\n background-color: #c2d0b6;\n outline: 2px dashed #344f30;\n }\n \n .section2 {\n background-color: #dbcdb3;\n outline: 2px dashed #5e3b1d;\n }\n\n \/* Formulare *\/\n form {\n margin: 20px;\n padding: 0px;\n }\n\n form label {\n display: block;\n margin-bottom: 5px;\n font-size: 14px;\n font-family: 'Roboto', sans-serif;\n }\n\n form input, form select, form textarea {\n width: 95%;\n padding: 8px;\n margin-bottom: 15px;\n border: 1px solid #b9a48b;\n border-radius: 15px;\n margin-left: 15px;\n }\n\n form textarea {\n margin-bottom: 5px;\n background-color: rgb(255, 254, 247);\n }\n\n form input:focus, form select:focus, form textarea:focus {\n outline: none; \/* Entfernt den Fokusrahmen *\/\n border: 2px solid #a8852c; \/* goldener Rahmen beim Fokussieren *\/\n }\n\n\n .AuswahlMal form input, .AuswahlMal form select, .AuswahlMal form textarea {\n border: 1px solid #9eb99c;\n }\n\n .AuswahlMal form textarea {\n background-color: #fdfffb;\n }\n\n .AuswahlMal form input:focus, .AuswahlMal form select:focus, .AuswahlMal form textarea:focus {\n border: 2px solid #a8852c; \/* goldener Rahmen beim Fokussieren *\/\n }\n \n .Hinweis2{\n background-color:#cfc7b6;\n padding: 5px;\n padding-top: 0px;\n margin-left: 5px;\n margin-right: 5px;\n }\n\n .Hinweis1{\n background-color:#bac2b3;\n padding: 5px;\n padding-top: 0px;\n margin-left: 5px;\n margin-right: 5px;\n }\n \n .ueberschriften {\n margin-top: 20px;\n font-family: 'Cinzel Decorative', cursive;\n font-weight:200;\n padding-left: 15px;\n }\n \n .Details{\n font-family: 'Sacramento', cursive, Arial, sans-serif;\n font-size: 18px;\n margin-top: 30px;\n margin-left: 20px;\n background-color: transparent;\n border-radius: 12px;\n cursor: pointer;\n padding-top: 5px;\n box-shadow: 1px 2px 9px rgba(0, 0, 0, 0.5);\n border: 1px solid #a5ae8d;\n }\n\n\n .Details:hover {\n background-color: #9fa592;\n transform: scale(1.05);\n }\n\n\n .Kleidungswahl {\n\n width: 200px;\n background-color: #fdfffb;\n margin-bottom: 0px;\n }\n\n\n \/* Formular f\u00fcr die Bilder *\/\n .image-form {\n text-align: center; \/* Damit die Buttons horizontal zentriert werden *\/\n }\n\n \/* Container f\u00fcr die Bild-Buttons *\/\n .image-buttons {\n display: inline-block; \/* Setzt den Container als Inline-Block, sodass er zentriert wird *\/\n margin: 0 auto; \/* Automatischer Abstand links und rechts f\u00fcr Zentrierung *\/\n }\n\n \/* Button-Stile f\u00fcr jedes Bild *\/\n .image-btn {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n outline: none;\n display: inline-block; \/* Damit die Buttons nebeneinander angezeigt werden *\/\n margin: 0 10px; \/* Abstand zwischen den Buttons *\/\n }\n\n \/* Bild-Stile *\/\n .image-btn img {\n width: 100px; \/* Standardgr\u00f6\u00dfe der Bilder *\/\n height: auto;\n border-radius: 8px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n transition: transform 0.3s ease;\n }\n\n \/* Hover-Effekt f\u00fcr die Bilder *\/\n .image-btn:hover img {\n transform: scale(1.05);\n } \n\n\n\n \/* Anmerkung oder Kommentar*\/\n .ueberschriften2 {\n margin-top: 40px;\n font-family: 'Cinzel Decorative', cursive;\n font-size: 10px;\n margin-left: 15px;\n \n }\n\n #paintedComment::placeholder {\n color: #bababa; \/* Helle graue Farbe *\/\n }\n\n\n .optional {\n margin-top: 10px;\n padding: 15px;\n background-color: #f0f4e2;\n border: 1px solid #a8c3a4;\n border-radius: 10px;\n }\n\n .skin-circle {\n width: 35px;\n height: 35px;\n border-radius: 50%;\n margin: 2px;\n display: inline-block;\n cursor: pointer;\n border: 2px solid transparent;\n transition: border 0.3s ease;\n }\n\n .skin-circle:hover, .skin-circle.selected {\n border: 2px solid #a8852c ; \/*gold*\/\n transform: scale(1.05);\n }\n \n .hair-circle {\n width: 35px;\n height: 35px;\n border-radius: 50%;\n margin: 2px;\n display: inline-block;\n cursor: pointer;\n border: 2px solid transparent;\n }\n\n .hair-circle:hover, .hair-circle.selected {\n border: 2px solid #a8852c;\n transform: scale(1.05);\n }\n \n \n \/* } ?*\/\n \n .hair-style-buttons {\n margin-top: 0px;\n }\n .hair-style-button {\n margin: 5px;\n margin-top: 10px;\n padding: 5px 20px;\n cursor: pointer;\n border: 1px solid #e8d7c0;\n border: 2px solid transparent;\n border-radius: 10px;\n background-color: #F9F1DC;\n box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);\n margin-left: 20px;\n display: inline-block;\n }\n \n .hair-style-button:hover, .hair-style-button.selected {\n border: 2px solid #a8852c;\n transform: scale(1.05); \/* Skalierung des Buttons *\/\n transform-origin: center;\n }\n \n \n \/*Farbpalleten*\/\n \/* Container f\u00fcr die Farbpaletten *\/\n #feltColorPalette {\n display: flex;\n flex-wrap: wrap;\n gap: 20px; \/* Abstand zwischen den Paletten *\/\n padding: 15px;\n }\n \n \/* Jede Farbpalette (2x3 Felder) *\/\n .color-palette {\n display: grid;\n grid-template-columns: repeat(2, 30px); \/* 3 Spalten *\/\n grid-template-rows: repeat(3, 30px); \/* 2 Reihen *\/\n gap: 0; \/* Kein Abstand zwischen den Feldern *\/\n cursor: pointer; \/* Paletten anklickbar machen *\/\n border-radius: 10px; \/* Gesamtpalette mit abgerundeten Ecken *\/\n border: 2px solid transparent;\n overflow: hidden; \/* Ecken innerhalb der Palette abschneiden *\/\n }\n \n \/* Farbquadrate innerhalb der Paletten *\/\n .color-square {\n width: 30px; \/* Breite eines einzelnen Feldes *\/\n height: 30px; \/* H\u00f6he eines einzelnen Feldes *\/\n margin: 0; \/* Kein Abstand zwischen den Feldern *\/\n }\n\n \/* Abgerundete Ecken nur an den \u00e4u\u00dferen Feldern *\/\n .color-square:first-child { \/* Oberes linkes Feld *\/\n border-top-left-radius: 10px;\n }\n .color-square:nth-child(2) { \/* Oberes rechtes Feld *\/\n border-top-right-radius: 10px;\n }\n .color-square:nth-last-child(2) { \/* Unteres linkes Feld *\/\n border-bottom-left-radius: 10px;\n }\n .color-square:last-child { \/* Unteres rechtes Feld *\/\n border-bottom-right-radius: 10px;\n }\n \n \/* Hover-Effekt f\u00fcr die Farbpaletten *\/\n .color-palette:hover, .color-palette.selected {\n border: 2px solid #a8852c;\n transform: scale(1.02);\n \n }\n\n .Feen{\n width: 300px;\n height: 300px;\n margin: 0px;\n background-size: 100%;\n background-position: center center;\n background-image: url('https:\/\/static.vecteezy.com\/system\/resources\/previews\/029\/991\/984\/non_2x\/cute-fairy-watercolor-clipart-on-white-background-ai-generated-photo.jpeg'); \/* Urspr\u00fcngliches Bild *\/\n transition: background-image 1s ease; \/* \u00dcbergang f\u00fcr das Hintergrundbild *\/\n display: flex;\n align-self: center;\n box-shadow: 6px 8px 15px rgba(0, 0, 0, 0.5);\n \n }\n \n .Feen:hover{\n background-image: url('https:\/\/i.etsystatic.com\/12809426\/r\/il\/40034e\/1332265602\/il_fullxfull.1332265602_62pz.jpg');\n }\n\n #feltForm{\n position: relative;\n }\n \n .Gras {\n position: absolute; \/* Positioniere das Randbild absolut *\/\n bottom: 0; \/* Setze es an den unteren Rand des Containers *\/\n left: 0; \/* Setze es an den linken Rand des Containers *\/\n right: 0; \/* Setze es an den rechten Rand des Containers *\/\n height: auto; \/* H\u00f6he automatisch anpassen *\/\n z-index: -1; \/* Stelle sicher, dass es hinter dem Formular liegt *\/\n background-image: url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_nur-Rand.png');\n background-size: cover; \/* Bildgr\u00f6\u00dfe anpassen *\/\n background-repeat: no-repeat; \/* Bild nicht wiederholen *\/\n }\n\n\n \/* Medienabfragen *\/\n \n\n @media (max-width: 1055px) {\n \n h1 {\n font-size: 43px;\n margin-top: 80px;\n \n }\n \n \n .section {\n margin-right: 40px;\n margin-left: 40px;\n }\n\n .options {\n flex-wrap: wrap;\n align-items: center;\n margin-left: 20px;\n margin-right: 20px;\n }\n\n .option {\n max-width: 70%;\n }\n \n .option2 {\n max-width: 70%;\n }\n\n\n .dynamicSection {\n background-image: url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzer_Ubergang_klein-1.jpg'),\n url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzerRand.jpg');\n background-size: 100%, contain;\n background-repeat: no-repeat, repeat;\n background-position: top center, top center;\n padding: 20px;\n margin-top: 25px;\n margin-bottom: 10px;\n width: 90%; \/* Stellt sicher, dass der Abschnitt nicht die volle Bildschirmbreite einnimmt*\/\n max-width: 1000px; \/*Optional: Setzt eine maximale Breite f\u00fcr den Abschnitt *\/\n max-height: auto;\n border-radius: 20px;\n transition: background-image 0.2s ease;\n pointer-events: auto;\n overflow: hidden;\n\n }\n\n .Gras {\n background-image: url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_nur-Rand.png');\n background-size: 100%;\n background-repeat: no-repeat;\n background-position: bottom center;\n }\n\n\n .Feen{\n width: 200px;\n height: 200px;\n margin: 0px;\n \n }\n \n .Aquarell{\n \n max-width: 500px;\n max-height: 250px; \n } \n \n \n .Filz{\n \n max-width: 500px;\n max-height: 250px; \n } \n \n }\n \n\n @media (max-width: 768px) {\n h1 {\n font-size: 36px;\n margin-top: 50px;\n \n }\n \n\n .options {\n flex-wrap: wrap;\n align-items: center;\n margin-left: 20px;\n margin-right: 20px;\n }\n\n .option {\n max-width: 80%;\n }\n \n .option2 {\n max-width: 80%;\n }\n \n .hint {\n flex-direction: column; \/* Wechselt von horizontaler Anordnung zu vertikal *\/\n gap: 5px; \/* Reduziert den Abstand zwischen Text und Button auf kleinen Bildschirmen *\/\n justify-content: center; \/* Zentriert den Inhalt vertikal *\/\n }\n \n \n\n .image-buttons {\n width: 100%;\n }\n\n .image-btn {\n display: block; \/* Buttons untereinander anordnen *\/\n width: 100%; \/* Volle Breite der Buttons *\/\n margin: 10px 0; \/* Vertikaler Abstand zwischen den Buttons *\/\n }\n\n \/* Gr\u00f6\u00dferes Button-Bild auf kleineren Bildschirmen *\/\n .image-btn img {\n width: 80%; \/* Bild wird gr\u00f6\u00dfer *\/\n max-width: 200px; \/* Maximale Breite des Bildes *\/\n }\n\n\n}\n \n \n <\/style>\n<\/head>\n<body>\n \n<section class=\"dynamicSection\">\n <header>\n <h1>You as a Fairy<\/h1>\n <div class=\"Feen\"><\/div>\n <\/header>\n\n <main>\n <section class=\"options\">\n <div class=\"option\" id=\"painted\" onclick=\"selectOption('painted')\">\n <h3 class=\"Gemalt\">Gemalte Fee<\/h3>\n <img decoding=\"async\" class=\"Aquarell\" src=\"https:\/\/img.freepik.com\/vecteurs-premium\/illustration-fee-vectorielle-aquarelle-pour-enfants_873925-121062.jpg\" Alt=\"Aquarell Fee\">\n <p class=\"pMalen\">Werde als magische Fee illustriert!<\/p>\n <button class=\"buttonmalen\">Jetzt designen<\/button>\n <\/div>\n <div class=\"option2\" id=\"felt\" onclick=\"selectOption('felt')\">\n <h3 class=\"Gefilzt\">Filzfee<\/h3>\n <img decoding=\"async\" class=\"Filz\" src=\"https:\/\/i.pinimg.com\/originals\/2b\/e8\/13\/2be813bf82efb35d2f7ed565d5aba751.jpg\" alt=\"Eine gefilzte Fee mit spitz zulaufendem Rock\">\n <p class=\"pFilz\">Dein Ebenbild als handgemachte Filzfee!<\/p>\n <button class=\"buttonfilz\">Jetzt designen<\/button>\n <\/div>\n <\/section>\n\n <section id=\"paintedForm\" class=\"form hidden section1\">\n <h2>Gemalte Fee erstellen<\/h2>\n <section class=\"Hinweis1\">\n <div class=\"hint\">\n <p>Lieber eine fertige Fee ausw\u00e4hlen?<\/p>\n <\/div>\n <form class=\"image-form\">\n <div class=\"image-buttons\">\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee6';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-18-102222.jpeg\" alt=\"Image 1\">\n <\/button>\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee7';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-18-102222.jpeg\" alt=\"Image 2\">\n <\/button>\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee8';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-18-102222.jpeg\" alt=\"Image 3\">\n <\/button>\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee9';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-18-102222.jpeg\" alt=\"Image 4\">\n <\/button>\n <\/div>\n \n <\/form>\n <\/section>\n \n <section class=\"AuswahlMal\">\n <form>\n <label class=\"ueberschriften\" for=\"paintedSkin\">Hautfarbe:<\/label>\n <div id=\"paintedSkin\" class=\"Farben1\">\n <div class=\"skin-circle\" style=\"background-color: #f8e4d8;\" onclick=\"selectSkinColor('painted', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #f2d6c7;\" onclick=\"selectSkinColor('painted', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #e1b89f;\" onclick=\"selectSkinColor('painted', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #d2a074;\" onclick=\"selectSkinColor('painted', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #a8754a;\" onclick=\"selectSkinColor('painted', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #815539;\" onclick=\"selectSkinColor('painted', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #5a3520;\" onclick=\"selectSkinColor('painted', '#eac086')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #2e1b0f;\" onclick=\"selectSkinColor('painted', '#8d5524')\"><\/div>\n <\/div>\n <input type=\"hidden\" name=\"skinColor\" value=\"\">\n\n <label class=\"ueberschriften\" for=\"paintedHairstyle\">Haarfarbe:<\/label>\n <div id=\"paintedHair\" class=\"Farben1\">\n <div class=\"hair-circle\" style=\"background-color: #f1e0a6;\" onclick=\"selectHairColor('painted', '#f1e0a6')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #be9b4e;\" onclick=\"selectHairColor('painted', '#d4b36b')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #82603e;\" onclick=\"selectHairColor('painted', '#a67c52')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #332414;\" onclick=\"selectHairColor('painted', '#4b3621')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #1a1a1a;\" onclick=\"selectHairColor('painted', '#1a1a1a')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #ffffff;\" onclick=\"selectHairColor('painted', '#ffffff')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #b1b0b0;\" onclick=\"selectHairColor('painted', '#a9a9a9')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #ad502e;\" onclick=\"selectHairColor('painted', '#d96c4e')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #962a0c;\" onclick=\"selectHairColor('painted', '#d96c4e')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #225832;\" onclick=\"selectHairColor('painted', '#2c6b3f')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #1c3c88;\" onclick=\"selectHairColor('painted', '#2a3d66')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #b9419d;\" onclick=\"selectHairColor('painted', '#6a4c9c')\"><\/div> \n <\/div>\n \n\n <input type=\"hidden\" id=haircolor name=\"hairColor\" value=\"\">\n\n \n <div class=\"hair-style-buttons\" id=\"hairStylesContainer\" style=\"display: none;\">\n <button type=\"button\" class=\"hair-style-button\" id=\"smooth\" onclick=\"changeHairStructure('smooth', event)\">Glatt<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"wavy\" onclick=\"changeHairStructure('wavy', event)\">Wellig<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"curly\" onclick=\"changeHairStructure('curly', event)\">Lockig<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"frizzy\" onclick=\"changeHairStructure('frizzy', event)\">Kraus<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"egal\" onclick=\"changeHairStructure('egal', event)\">Egal<\/button>\n \n <\/div>\n\n <label class=ueberschriften for=\"paintedEyes\">Augenfarbe:<\/label>\n <div id=\"paintedEyes\" class=\"Farben1\">\n <div class=\"hair-circle\" style=\"background-color: #3e2a1a;\" onclick=\"selectEyeColor('painted', '#8a5e3b')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #725329;\" onclick=\"selectEyeColor('painted', '#b8860b')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #753d18;\" onclick=\"selectEyeColor('painted', '#d3d3d3')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #b7b7b7;\" onclick=\"selectEyeColor('painted', '#a9a9a9')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #73bfd8;\" onclick=\"selectEyeColor('painted', '#ff6347')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #376fa3;\" onclick=\"selectEyeColor('painted', '#2e8b57')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #0c5e2f;\" onclick=\"selectEyeColor('painted', '#1e90ff')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #77c96e;\" onclick=\"selectEyeColor('painted', '#7fff00')\"><\/div> \n \n <\/div>\n\n <label class=ueberschriften for=\"paintedColors\">Farbraum f\u00fcr Kleidung und Fl\u00fcgel:<\/label>\n \n <div id=\"ColorPalette\" class=\"Farben1\">\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('painted', 'red')\">\n <div class=\"color-square\" style=\"background-color: #660000;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #990000;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #cc0033;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #cc6666;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ff9999;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ffcccc;\"><\/div>\n \n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('painted', 'orange')\">\n <div class=\"color-square\" style=\"background-color: #e65c1b;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ff9900;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #f0b751;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #f29c11;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ffcc00;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ffff66;\"><\/div>\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('painted', 'green')\">\n <div class=\"color-square\" style=\"background-color: #4f9a7b;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #3b7e5e;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #5e8d75;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #7db59b;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #a1c7ad;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #d2e3d6;\"><\/div>\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('painted', 'blue')\">\n <div class=\"color-square\" style=\"background-color: #000099;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #003366;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #3366cc;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #66b2cc;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #0099cc;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #a1c4d5;\"><\/div>\n\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('painted', 'purple')\">\n <div class=\"color-square\" style=\"background-color: #47367a;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #695696;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #814883;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #66225c;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #c587cf;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #d5a9dc;\"><\/div>\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('painted', 'brown')\">\n <div class=\"color-square\" style=\"background-color: #3a1f13;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #4f2a18;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #7a3b2d;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #8b4f23;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #b38655;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #d2b58b;\"><\/div> \n <\/div>\n <\/div>\n\n <button class=\"Details\" type=\"Button\" onclick=\"weitereDetails1()\">Weitere Details?<\/button>\n\n <label class=\"ueberschriften hidden Oberteil\" for=\"Oberteil\">Oberteil:<\/label>\n <select id=\"Oberteil\" name=\"upperstyle\" class=\"Kleidungswahl hidden Oberteil\" onchange=\"selectStyle('felt', this.value, 'upperStyle')\">\n <option value=\"Hose\">egal<\/option>\n <option value=\"Hose\">tr\u00e4gerlos<\/option>\n <option value=\"Kleid\">Spaghetti-Tr\u00e4ger<\/option>\n <option value=\"Rock\">breite\/normale Tr\u00e4ger<\/option>\n <option value=\"Hose\">kurze \u00c4rmel<\/option>\n <option value=\"Hose\">lange \u00c4rmel<\/option>\n <\/select>\n\n <label class=\"ueberschriften hidden Unterteil\" for=\"Unterteil\">Unterteil:<\/label>\n <select id=\"Unterteil\" name=\"lowerstyle\" class=\"Kleidungswahl hidden Unterteil\" onchange=\"selectStyle('felt', this.value, 'lowerStyle')\">\n <option value=\"Hose\">egal<\/option>\n <option value=\"Kleid\">Kleid\/Rock<\/option>\n <option value=\"Hose\">Hose<\/option>\n <\/select>\n\n \n <input type=\"hidden\" name=\"upperStyle\" value=\"\">\n <input type=\"hidden\" name=\"lowerStyle\" value=\"\">\n\n <label class=ueberschriften2 for=\"paintedComment\">Anmerkung oder weitere W\u00fcnsche:<\/label>\n <textarea id=\"paintedComment\" name=\"comment\" rows=\"4\" placeholder=\"Gib hier bei Bedarf z.B. Haarl\u00e4nge, Frisur und\/oder Accessoires ein...\"><\/textarea>\n\n <button type=\"submit\" class=\"buttonmalen\">Fee in den Warenkorb<\/button>\n <\/form>\n <\/section>\n <\/section>\n\n <section id=\"feltForm\" class=\"form hidden section2\">\n <h2>Filzfee erstellen<\/h2>\n <section class=\"Hinweis2\">\n <div class=\"hint\">\n <p>Lieber eine fertige Fee ausw\u00e4hlen?<\/p>\n <\/div>\n <form class=\"image-form\">\n <div class=\"image-buttons\">\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee1';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-17-161615_002-scaled.jpeg\" alt=\"Image 1\">\n <\/button>\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee2';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-17-161615_002-scaled.jpeg\" alt=\"Image 2\">\n <\/button>\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee3';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-17-161615_002-scaled.jpeg\" alt=\"Image 3\">\n <\/button>\n <button class=\"image-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/example.com\/fee4';\">\n <img decoding=\"async\" src=\"https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/signal-2024-12-17-161615_002-scaled.jpeg\" alt=\"Image 4\">\n <\/button>\n <\/div>\n \n <\/form>\n <\/section>\n <form>\n <label class=\"ueberschriften\" for=\"feltSkin\">Hautfarbe:<\/label>\n <div id=\"feltSkin\" class=\"Farben2\">\n <div class=\"skin-circle\" style=\"background-color: #f8e4d8;\" onclick=\"selectSkinColor('felt', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #f2d6c7;\" onclick=\"selectSkinColor('felt', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #e1b89f;\" onclick=\"selectSkinColor('felt', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #d2a074;\" onclick=\"selectSkinColor('felt', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #a8754a;\" onclick=\"selectSkinColor('felt', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #815539;\" onclick=\"selectSkinColor('felt', '#f4c2c2')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #5a3520;\" onclick=\"selectSkinColor('felt', '#eac086')\"><\/div>\n <div class=\"skin-circle\" style=\"background-color: #2e1b0f;\" onclick=\"selectSkinColor('felt', '#8d5524')\"><\/div>\n <\/div>\n <input type=\"hidden\" name=\"skinColor\" value=\"\" required>\n\n <label class=ueberschriften for=\"feltHairstyle\">Haarfarbe:<\/label>\n <div id=\"feltHair\" class=\"Farben2\">\n <div class=\"hair-circle\" style=\"background-color: #f1e0a6;\" onclick=\"selectHairColor('felt', '#f1e0a6')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #be9b4e;\" onclick=\"selectHairColor('felt', '#d4b36b')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #82603e;\" onclick=\"selectHairColor('felt', '#a67c52')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #332414;\" onclick=\"selectHairColor('felt', '#4b3621')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #1a1a1a;\" onclick=\"selectHairColor('felt', '#1a1a1a')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #ffffff;\" onclick=\"selectHairColor('felt', '#ffffff')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #b1b0b0;\" onclick=\"selectHairColor('felt', '#a9a9a9')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #ad502e;\" onclick=\"selectHairColor('felt', '#d96c4e')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #962a0c;\" onclick=\"selectHairColor('felt', '#d96c4e')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #225832;\" onclick=\"selectHairColor('felt', '#2c6b3f')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #1c3c88;\" onclick=\"selectHairColor('felt', '#2a3d66')\"><\/div> \n <div class=\"hair-circle\" style=\"background-color: #b9419d;\" onclick=\"selectHairColor('felt', '#6a4c9c')\"><\/div> \n <\/div>\n \n <input type=\"hidden\" id=haircolor name=\"hairColor\" value=\"\">\n\n \n <div class=\"hair-style-buttons\" id=\"hairStylesContainer\" style=\"display: none;\">\n <button type=\"button\" class=\"hair-style-button\" id=\"smooth\" onclick=\"changeHairStructure('smooth', event)\">Glatt<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"wavy\" onclick=\"changeHairStructure('wavy', event)\">Wellig<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"curly\" onclick=\"changeHairStructure('curly', event)\">Lockig<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"frizzy\" onclick=\"changeHairStructure('frizzy', event)\">Kraus<\/button>\n <button type=\"button\" class=\"hair-style-button\" id=\"egal\" onclick=\"changeHairStructure('egal', event)\">Egal<\/button>\n \n <\/div>\n\n\n <label class=ueberschriften for=\"feltColors\">Farbraum f\u00fcr Kleidung und Fl\u00fcgel:<\/label>\n \n <div id=\"feltColorPalette\" class=\"Farben2\">\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('felt', 'red')\">\n <div class=\"color-square\" style=\"background-color: #660000;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #990000;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #cc0033;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #cc6666;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ff9999;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ffcccc;\"><\/div>\n \n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('felt', 'orange')\">\n <div class=\"color-square\" style=\"background-color: #e65c1b;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ff9900;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #f0b751;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #f29c11;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ffcc00;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #ffff66;\"><\/div>\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('felt', 'green')\">\n <div class=\"color-square\" style=\"background-color: #4f9a7b;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #3b7e5e;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #5e8d75;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #7db59b;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #a1c7ad;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #d2e3d6;\"><\/div>\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('felt', 'blue')\">\n <div class=\"color-square\" style=\"background-color: #000099;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #003366;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #3366cc;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #66b2cc;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #0099cc;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #a1c4d5;\"><\/div>\n\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('felt', 'purple')\">\n <div class=\"color-square\" style=\"background-color: #47367a;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #695696;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #814883;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #66225c;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #c587cf;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #d5a9dc;\"><\/div>\n <\/div>\n\n \n <div class=\"color-palette\" onclick=\"selectColorPalette('felt', 'brown')\">\n <div class=\"color-square\" style=\"background-color: #3a1f13;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #4f2a18;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #7a3b2d;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #8b4f23;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #b38655;\"><\/div>\n <div class=\"color-square\" style=\"background-color: #d2b58b;\"><\/div> \n <\/div>\n<\/div>\n\n\n <label class=ueberschriften2 for=\"feltComment\">Anmerkung oder weitere Details:<\/label>\n <textarea id=\"feltComment\" name=\"comment\" rows=\"4\" placeholder=\"Gib hier bei Bedarf z.B. Haarl\u00e4nge, Frisur und\/oder Accessoires ein...\"><\/textarea>\n <button type=\"submit\" class=\"buttonfilz\">Fee in den Warenkorb<\/button>\n <\/form>\n\n <div class=\"Gras\" ><\/div>\n <\/section>\n <\/main>\n<\/section>\n\n <script>\n function weitereDetails1()\n {\n const Kleidung = document.querySelectorAll('.Oberteil, .Unterteil');\n Kleidung.forEach(el => {\n if (el.classList.contains('hidden')) {\n el.classList.remove('hidden'); \/\/ Wenn das Element 'hidden' hat, wird es sichtbar\n } else {\n el.classList.add('hidden'); \/\/ Wenn das Element sichtbar ist, wird es versteckt\n }\n });\n\n }\n\n \/\/ Funktion zum Speichern des ausgew\u00e4hlten Oberteils\n function selectStyle(form, style, type) {\n \/\/ Speichere den Wert im Formular\n const styleInput = document.querySelector(`#${form}Form input[name=\"${type}\"]`);\n if (styleInput) {\n styleInput.value = style; \/\/ Setze den Wert des Formularfeldes auf den ausgew\u00e4hlten Style\n }\n }\n \n function selectOption(option) {\n \/\/ Alle Optionen zur\u00fccksetzen (alle Klassen 'active' entfernen und alle Formulare verstecken)\n document.querySelectorAll('.option, .option2').forEach(el => el.classList.remove('active'));\n document.querySelectorAll('.form').forEach(el => el.classList.add('hidden'));\n \n \/\/ Die gew\u00e4hlte Option aktiv setzen\n document.getElementById(option).classList.add('active');\n \n \/\/ Zeige das zugeh\u00f6rige Formular\n document.getElementById(option + 'Form').classList.remove('hidden');\n\n \/\/ \u00c4ndere den Hintergrund, wenn das Formular ge\u00f6ffnet wird\n const dynamicSection = document.querySelector('.dynamicSection');\n \/\/ F\u00fcge die Klasse \"active\" hinzu, wenn die Funktion ausgel\u00f6st wird\n dynamicSection.classList.add('active');\n\n \/\/ Wenn du die Klasse wieder entfernen m\u00f6chtest:\n \/\/ dynamicSection.classList.remove('active');\n \n \/\/ Alle Buttons zur\u00fccksetzen (visuelle Hervorhebung entfernen)\n document.querySelectorAll('.option button').forEach(button => button.classList.remove('selected'));\n \n \/\/ Den geklickten Button hervorheben\n const button = document.querySelector(`#${option} button`);\n if (button) {\n button.classList.add('selected');\n }\n }\n\n\n function choosePreMadeFairy() {\n alert('Fertige Fee ausw\u00e4hlen - Funktion noch nicht implementiert');\n }\n\n function selectSkinColor(form, color) {\n const skinColorInput = document.querySelector(`#${form}Form input[name=\"skinColor\"]`);\n if (skinColorInput) {\n skinColorInput.value = color;\n }\n \n \/\/ Visuelle Hervorhebung\n document.querySelectorAll(`#${form}Form .skin-circle`).forEach(circle => circle.classList.remove('selected'));\n event.target.classList.add('selected');\n }\n\n \n function selectHairColor(form, color) {\n const hairColorInput = document.querySelector(`#${form}Form input[name=\"hairColor\"]`);\n if (hairColorInput) {\n hairColorInput.value = color;\n }\n \n \/\/ Visuelle Hervorhebung der ausgew\u00e4hlten Haarfarbe\n document.querySelectorAll(`#${form}Form .hair-circle`).forEach(circle => circle.classList.remove('selected'));\n event.target.classList.add('selected');\n \n \/\/ Zeige die Haarstruktur-Buttons an\n document.getElementById('hairStylesContainer').style.display = 'block'; \/\/ Buttons anzeigen\n }\n \n \n \/\/ Funktion, um die Haarstruktur zu \u00e4ndern\n function changeHairStructure(structure, event) {\n \/\/ Verhindere das Standardverhalten (z.B. Seitenreload oder Formularabsendung)\n event.preventDefault();\n\n \/\/ Setze die Haarstruktur (dies k\u00f6nnte ein Formularfeld oder eine Variable sein)\n hairStructure = structure;\n\n \/\/ Visuelle Hervorhebung:\n \/\/ Entferne die 'selected' Klasse von allen Buttons\n document.querySelectorAll('.hair-style-button').forEach(button => {\n button.classList.remove('selected');\n });\n\n \/\/ F\u00fcge die 'selected' Klasse dem angeklickten Button hinzu\n event.target.classList.add('selected');\n\n \/\/ Optional: Hier k\u00f6nntest du die Darstellung der Fee oder der Haare aktualisieren\n drawFairy(); \/\/ Falls du eine Funktion hast, die die Fee anzeigt\/aktualisiert\n\n }\n\n\n function selectEyeColor(form, color) {\n \/\/ Setze den Wert der Augenfarbe im Formular\n const eyeColorInput = document.querySelector(`#${form}Form input[name=\"eyeColor\"]`);\n if (eyeColorInput) {\n eyeColorInput.value = color;\n }\n\n \/\/ Entferne die 'selected'-Klasse von allen Augenfarben\n document.querySelectorAll(`#${form}Form .hair-circle`).forEach(circle => circle.classList.remove('selected'));\n\n \/\/ F\u00fcge die 'selected'-Klasse dem angeklickten Kreis hinzu\n event.target.classList.add('selected');\n }\n \n \/\/ Funktion, um den Button f\u00fcr \u201eNoch mehr Details?\u201c ein- oder auszublenden\n function toggleMoreDetails() {\n const detailsContainer = document.getElementById('additionalDetailsContainer');\n if (detailsContainer.classList.contains('hidden')) {\n detailsContainer.classList.remove('hidden');\n } else {\n detailsContainer.classList.add('hidden');\n }\n }\n\n \n\n \n function selectColorPalette(form, palette) {\n document.querySelectorAll(`#${form}Form .color-palette`).forEach(el => el.classList.remove('selected'));\n event.target.closest('.color-palette').classList.add('selected');\n \/\/ Speichere die Auswahl im Formular\n const colorPaletteInput = document.querySelector(`#${form}Form input[name=\"colorPalette\"]`);\n if (colorPaletteInput) {\n colorPaletteInput.value = palette;\n }\n }\n \n \n \n\/* \n document.addEventListener(\"DOMContentLoaded\", function () {\n const section = document.querySelector(\".dynamicSection\");\n const overlay = document.createElement(\"div\");\n overlay.classList.add(\"extra-overlay\");\n section.appendChild(overlay); \/\/ PNG-Grafik unten hinzuf\u00fcgen\n\n function updateBackground() {\n const sectionHeight = section.offsetHeight; \/\/ Aktuelle H\u00f6he der Section\n const contentHeight = section.scrollHeight; \/\/ Gesamth\u00f6he der Inhalte\n\n \/\/ Debugging: Zeige die berechneten Werte an\n console.log(\"Section Height:\", sectionHeight);\n console.log(\"Content Height:\", contentHeight);\n\n if (contentHeight > sectionHeight - 50) { \/\/ Rand ber\u00fccksichtigen\n if (contentHeight > 1900) {\n \/\/ Fall 1: Inhalte passen nicht mehr in Bild 2\n console.log(\"Bild 3 wird unten angeh\u00e4ngt\");\n section.style.backgroundImage =\n \"url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzer_Ubergang_klein-1.jpg'), url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzerRand.jpg')\";\n section.style.backgroundRepeat = \"no-repeat, repeat\";\n section.style.backgroundSize = \"100% auto, auto\";\n section.style.backgroundPosition = \"top center, bottom center\";\n } else {\n \/\/ Fall 2: Inhalte passen in Bild 2\n console.log(\"Bild 2 wird angezeigt\");\n section.style.backgroundImage =\n \"url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzer_Ubergang_klein-1.jpg')\";\n section.style.backgroundRepeat = \"no-repeat\";\n section.style.backgroundSize = \"100% auto\";\n section.style.backgroundPosition = \"top center\";\n }\n overlay.style.display = \"block\"; \/\/ Optional: PNG anzeigen\n } else {\n \/\/ Fall 3: Inhalte passen in Bild 1\n console.log(\"Bild 1 wird angezeigt\");\n section.style.backgroundImage =\n \"url('https:\/\/youasafairy.ua.ms\/wp-content\/uploads\/2024\/12\/Hintergrund_Website_bearbeitet_glitzermit-rand_klein.jpg')\";\n section.style.backgroundRepeat = \"no-repeat\";\n section.style.backgroundSize = \"100% auto\";\n section.style.backgroundPosition = \"top center\";\n overlay.style.display = \"none\"; \/\/ PNG ausblenden\n }\n }\n\n \/\/ Initial pr\u00fcfen und bei Fenster\u00e4nderungen\n updateBackground();\n window.addEventListener(\"resize\", updateBackground);\n\n \/\/ Event f\u00fcr dynamische Inhalts\u00e4nderungen\n const observer = new MutationObserver(updateBackground);\n observer.observe(section, { childList: true, subtree: true, attributes: true });\n});\n\n*\/\n\n \n\n \n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>You as a Fairy You as a Fairy Gemalte Fee Werde als magische Fee illustriert! Jetzt designen Filzfee Dein Ebenbild als handgemachte Filzfee! Jetzt designen Gemalte Fee erstellen Lieber eine fertige Fee ausw\u00e4hlen? Hautfarbe: Haarfarbe: Glatt Wellig Lockig Kraus Egal Augenfarbe: Farbraum f\u00fcr Kleidung und Fl\u00fcgel: Weitere Details? Oberteil: egaltr\u00e4gerlosSpaghetti-Tr\u00e4gerbreite\/normale Tr\u00e4gerkurze \u00c4rmellange \u00c4rmel Unterteil: egalKleid\/RockHose […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-81","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/pages\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":32,"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/pages\/81\/revisions"}],"predecessor-version":[{"id":138,"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/pages\/81\/revisions\/138"}],"wp:attachment":[{"href":"https:\/\/youasafairy.ua.ms\/index.php\/wp-json\/wp\/v2\/media?parent=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}