Merge pull request 'Anpassungen event erstellung Sprint 1' (#10 ) from event_create into main

Reviewed-on: #10
Anpassungen event erstellung Sprint 1
2026-04-09 17:24:38 +02:00 · 2026-04-09 17:01:37 +02:00 · 2026-04-09 12:14:35 +02:00 · 2026-04-09 12:07:55 +02:00 · 2026-03-30 22:25:59 +02:00 · 2026-03-30 22:12:06 +02:00
39 changed files with 1584 additions and 1147 deletions
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -1,15 +0,0 @@
 {
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
 }
--- a/assets/index_Burger
+++ b/assets/index_Burger
--- a/assets/index_Cake
+++ b/assets/index_Cake
--- a/assets/index_Cooking
+++ b/assets/index_Cooking
--- a/assets/index_Eating
+++ b/assets/index_Eating
--- a/assets/index_Pasta
+++ b/assets/index_Pasta
--- a/assets/index_Pasta
+++ b/assets/index_Pasta
--- a/assets/icon_Plate.png
+++ b/assets/icon_Plate.png
--- a/assets/index_Red
+++ b/assets/index_Red
--- a/assets/index_Salad
+++ b/assets/index_Salad
--- a/assets/index_Sharing
+++ b/assets/index_Sharing
--- a/assets/index_Spicy
+++ b/assets/index_Spicy
--- a/assets/index_ingredients.jpg
+++ b/assets/index_ingredients.jpg
--- a/assets/index_Zoomed
+++ b/assets/index_Zoomed
--- a/assets/icon_add-event.png
+++ b/assets/icon_add-event.png
--- a/assets/index_cooking.jpg
+++ b/assets/index_cooking.jpg
--- a/assets/eventcreate_foodtable.jpg
+++ b/assets/eventcreate_foodtable.jpg
--- a/assets/Icon_instagram.png
+++ b/assets/Icon_instagram.png
--- a/assets/icon_location-pin.svg
+++ b/assets/icon_location-pin.svg
--- a/assets/logo_invite.svg
+++ b/assets/logo_invite.svg
@ -1,13 +1,9 @@
-<svg preserveAspectRatio="xMidYMid meet" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 100 37.6495" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="104" height="50" viewBox="0 0 104 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group 2">
+<path d="M83.0693 30.3941C83.0693 28.5407 83.4727 26.9102 84.2794 25.5025C85.1121 24.0948 86.283 22.9922 87.7923 22.1945C89.3276 21.3968 91.1491 20.998 93.2569 20.998C94.8963 20.998 96.3665 21.2678 97.6676 21.8074C98.9947 22.347 100.036 23.0743 100.79 23.9893C101.545 24.8808 101.922 25.8661 101.922 26.9453C101.922 28.0715 101.558 28.8692 100.829 29.3384C100.101 29.8076 99.0207 30.0422 97.5895 30.0422H89.3926C89.3926 30.6522 89.6529 31.1566 90.1733 31.5554C90.7198 31.9543 91.6305 32.1537 92.9056 32.1537C93.5561 32.1537 94.1546 32.095 94.7011 31.9777C95.2736 31.8604 95.8461 31.7549 96.4185 31.661C97.017 31.5437 97.6806 31.4851 98.4092 31.4851C99.4501 31.4851 100.309 31.8252 100.985 32.5056C101.662 33.1625 102 34.0775 102 35.2506C102 36.6348 101.207 37.714 99.6192 38.4882C98.0579 39.2624 96.0022 39.6495 93.4521 39.6495C91.6565 39.6495 89.9651 39.3328 88.3778 38.6993C86.8165 38.0659 85.5414 37.0688 84.5526 35.7081C83.5637 34.3239 83.0693 32.5525 83.0693 30.3941ZM95.716 28.8809C96.1063 28.8809 96.2364 28.7167 96.1063 28.3882C96.0022 28.0597 95.6899 27.7196 95.1695 27.3676C94.6491 27.0157 93.8944 26.8398 92.9056 26.8398C91.7606 26.8398 90.9019 27.0627 90.3294 27.5084C89.783 27.9542 89.5097 28.4117 89.5097 28.8809H95.716ZM90.6027 15.7896C91.3313 15.3908 92.0599 15.0154 92.7885 14.6635C93.5171 14.2881 94.3628 13.8541 95.3256 13.3614C96.3145 12.8687 97.2643 12.7045 98.175 12.8687C99.0858 13.0095 99.7493 13.5139 100.166 14.382C100.608 15.25 100.673 16.036 100.361 16.7398C100.049 17.4202 99.359 17.9598 98.2921 18.3586C97.3553 18.7105 96.3014 19.039 95.1305 19.344C93.9855 19.649 93.0097 19.8601 92.203 19.9774C91.5785 20.0713 90.993 20.0243 90.4465 19.8366C89.9001 19.6255 89.4967 19.2149 89.2365 18.6049C89.0023 17.995 89.0153 17.4553 89.2755 16.9861C89.5358 16.5169 89.9781 16.1181 90.6027 15.7896Z" fill="#CD4918"/>
-<g id="Invit&#195;&#169;">
+<path d="M75.1806 39.6495C73.8014 39.6495 72.5524 39.368 71.4334 38.8049C70.3405 38.2418 69.4818 37.4442 68.8573 36.4119C68.2327 35.3561 67.9205 34.1244 67.9205 32.7168V26.5231L66.4763 26.699C65.6956 26.7929 65.006 26.5465 64.4075 25.96C63.809 25.3735 63.5098 24.6344 63.5098 23.7429C63.5098 22.8514 63.809 22.1241 64.4075 21.561C65.006 20.9745 65.6956 20.7282 66.4763 20.822L67.9205 20.998L67.8814 18.6049C67.8554 17.6665 68.1547 16.9275 68.7792 16.3879C69.4037 15.8248 70.3145 15.5433 71.5115 15.5433C72.7085 15.5433 73.6323 15.8248 74.2828 16.3879C74.9334 16.9275 75.2326 17.6665 75.1806 18.6049L75.1025 20.998L77.1712 20.7516C78.5764 20.5639 79.6433 20.7986 80.3719 21.4555C81.1005 22.0889 81.4648 22.8514 81.4648 23.7429C81.4648 24.6344 81.1005 25.4086 80.3719 26.0656C79.6693 26.699 78.6415 26.9336 77.2883 26.7694L75.1025 26.5231V31.7666C75.1025 32.0716 75.2196 32.3531 75.4538 32.6112C75.688 32.8458 75.9742 32.9162 76.3125 32.8223C76.7028 32.7285 77.1062 32.5291 77.5225 32.2241C77.9649 31.9191 78.5244 31.7666 79.2009 31.7666C80.2158 31.7666 80.9964 32.095 81.5429 32.752C82.0894 33.4089 82.3626 34.2183 82.3626 35.1802C82.3626 35.9309 82.0633 36.6582 81.4648 37.3621C80.8924 38.0424 80.0727 38.5938 79.0058 39.0161C77.9389 39.4384 76.6638 39.6495 75.1806 39.6495Z" fill="#CD4918"/>
-<path id="Vector" d="M81.0691 28.3941C81.0691 26.5407 81.4724 24.9101 82.2791 23.5025C83.1118 22.0948 84.2828 20.9921 85.7921 20.1945C87.3274 19.3968 89.1489 18.998 91.2567 18.998C92.896 18.998 94.3663 19.2678 95.6674 19.8074C96.9945 20.347 98.0353 21.0743 98.79 21.9892C99.5446 22.8808 99.9219 23.8661 99.9219 24.9453C99.9219 26.0715 99.5576 26.8691 98.829 27.3384C98.1004 27.8076 97.0205 28.0422 95.5893 28.0422H87.3924C87.3924 28.6522 87.6526 29.1566 88.1731 29.5554C88.7195 29.9543 89.6303 30.1537 90.9054 30.1537C91.5559 30.1537 92.1544 30.095 92.7009 29.9777C93.2733 29.8604 93.8458 29.7548 94.4183 29.661C95.0168 29.5437 95.6804 29.485 96.409 29.485C97.4499 29.485 98.3086 29.8252 98.9851 30.5056C99.6617 31.1625 100 32.0775 100 33.2505C100 34.6347 99.2063 35.714 97.619 36.4882C96.0577 37.2624 94.002 37.6495 91.4518 37.6495C89.6563 37.6495 87.9649 37.3328 86.3776 36.6993C84.8162 36.0659 83.5412 35.0688 82.5523 33.708C81.5635 32.3238 81.0691 30.5525 81.0691 28.3941ZM93.7157 26.8809C94.106 26.8809 94.2362 26.7166 94.106 26.3882C94.002 26.0597 93.6897 25.7195 93.1693 25.3676C92.6488 25.0157 91.8942 24.8398 90.9054 24.8398C89.7604 24.8398 88.9017 25.0626 88.3292 25.5084C87.7827 25.9542 87.5095 26.4116 87.5095 26.8809H93.7157ZM88.6024 13.7896C89.331 13.3908 90.0596 13.0154 90.7883 12.6635C91.5169 12.2881 92.3626 11.8541 93.3254 11.3614C94.3142 10.8687 95.264 10.7045 96.1748 10.8687C97.0855 11.0095 97.7491 11.5139 98.1655 12.3819C98.6078 13.25 98.6729 14.0359 98.3606 14.7398C98.0484 15.4201 97.3588 15.9597 96.2919 16.3586C95.3551 16.7105 94.3012 17.039 93.1302 17.3439C91.9853 17.6489 91.0094 17.8601 90.2028 17.9774C89.5782 18.0712 88.9928 18.0243 88.4463 17.8366C87.8998 17.6255 87.4965 17.2149 87.2363 16.6049C87.0021 15.9949 87.0151 15.4553 87.2753 14.9861C87.5355 14.5169 87.9779 14.1181 88.6024 13.7896Z" fill="var(--fill-0, #CD4918)"/>
+<path d="M54.709 17.0565C54.709 16.0477 55.0473 15.2383 55.7238 14.6283C56.4264 13.9948 57.3892 13.6781 58.6123 13.6781C59.9134 13.6781 60.8762 13.9831 61.5007 14.5931C62.1512 15.2031 62.4765 16.0125 62.4765 17.0213C62.4765 18.0067 62.1512 18.8043 61.5007 19.4143C60.8762 20.0009 59.9134 20.2941 58.6123 20.2941C57.3372 20.2941 56.3614 20.0009 55.6848 19.4143C55.0343 18.8043 54.709 18.0184 54.709 17.0565ZM58.6123 39.5439C57.3892 39.5439 56.4785 39.2389 55.88 38.6289C55.2815 38.0189 54.9822 37.2565 54.9822 36.3415V24.306C54.9822 23.2971 55.2815 22.4995 55.88 21.9129C56.4785 21.3264 57.3892 21.0331 58.6123 21.0331C59.8353 21.0331 60.7461 21.3264 61.3446 21.9129C61.9691 22.4995 62.2813 23.2737 62.2813 24.2356V36.3415C62.2813 37.2565 61.9561 38.0189 61.3055 38.6289C60.681 39.2389 59.7832 39.5439 58.6123 39.5439Z" fill="#CD4918"/>
-<path id="Vector_2" d="M73.1805 37.6495C71.8013 37.6495 70.5523 37.368 69.4333 36.8049C68.3404 36.2418 67.4817 35.4442 66.8572 34.4119C66.2326 33.3561 65.9204 32.1244 65.9204 30.7168V24.523L64.4762 24.699C63.6955 24.7928 63.0059 24.5465 62.4074 23.96C61.8089 23.3734 61.5097 22.6344 61.5097 21.7429C61.5097 20.8514 61.8089 20.1241 62.4074 19.561C63.0059 18.9745 63.6955 18.7282 64.4762 18.822L65.9204 18.998L65.8813 16.6049C65.8553 15.6665 66.1546 14.9275 66.7791 14.3879C67.4036 13.8248 68.3144 13.5433 69.5114 13.5433C70.7084 13.5433 71.6322 13.8248 72.2827 14.3879C72.9333 14.9275 73.2325 15.6665 73.1805 16.6049L73.1024 18.998L75.1711 18.7516C76.5763 18.5639 77.6432 18.7985 78.3718 19.4554C79.1004 20.0889 79.4647 20.8514 79.4647 21.7429C79.4647 22.6344 79.1004 23.4086 78.3718 24.0655C77.6692 24.699 76.6414 24.9336 75.2882 24.7694L73.1024 24.523V29.7666C73.1024 30.0716 73.2195 30.3531 73.4537 30.6112C73.6879 30.8458 73.9741 30.9162 74.3124 30.8223C74.7027 30.7285 75.1061 30.5291 75.5224 30.2241C75.9648 29.9191 76.5243 29.7666 77.2008 29.7666C78.2157 29.7666 78.9964 30.095 79.5428 30.7519C80.0893 31.4089 80.3625 32.2183 80.3625 33.1802C80.3625 33.9309 80.0632 34.6582 79.4647 35.362C78.8923 36.0424 78.0726 36.5937 77.0057 37.016C75.9388 37.4383 74.6637 37.6495 73.1805 37.6495Z" fill="var(--fill-0, #CD4918)"/>
+<path d="M44.0485 39.5439C42.3571 39.5439 40.9129 39.0982 39.7159 38.2067C38.5189 37.3151 37.53 35.8371 36.7494 33.7725L33.6658 25.7488C33.2494 24.6931 33.2494 23.7195 33.6658 22.8279C34.1081 21.9364 34.9148 21.3734 36.0858 21.1387C37.1267 20.9276 38.0374 21.0214 38.8181 21.4203C39.6248 21.8191 40.1973 22.4878 40.5355 23.4262L43.5801 31.4851C43.9444 32.4235 44.3868 33.1156 44.9072 33.5614C45.4537 34.0071 46.1172 34.1127 46.8979 33.8781C47.6265 33.62 48.0168 33.1977 48.0689 32.6112C48.1469 32.0012 48.0038 31.2974 47.6395 30.4997C47.3273 29.7724 46.9109 29.1507 46.3905 28.6346C45.87 28.1184 45.4016 27.5788 44.9853 27.0157C44.5689 26.4527 44.3608 25.7488 44.3608 24.9042C44.3608 23.6843 44.7901 22.7341 45.6488 22.0537C46.5336 21.3499 47.6916 21.0214 49.1228 21.0684C50.3458 21.0918 51.3476 21.4789 52.1283 22.2297C52.9089 22.9804 53.2993 23.9306 53.2993 25.0802C53.2993 25.7137 53.1822 26.394 52.948 27.1213C52.7138 27.8486 52.4536 28.6111 52.1673 29.4088L50.606 33.8429C50.1897 35.016 49.7213 36.0365 49.2008 36.9046C48.7064 37.7492 48.0559 38.4061 47.2492 38.8753C46.4685 39.3211 45.4016 39.5439 44.0485 39.5439Z" fill="#CD4918"/>
-<path id="Vector_3" d="M52.709 15.0565C52.709 14.0476 53.0473 13.2382 53.7238 12.6283C54.4264 11.9948 55.3892 11.6781 56.6123 11.6781C57.9134 11.6781 58.8762 11.9831 59.5007 12.5931C60.1512 13.203 60.4765 14.0125 60.4765 15.0213C60.4765 16.0066 60.1512 16.8043 59.5007 17.4143C58.8762 18.0008 57.9134 18.2941 56.6123 18.2941C55.3372 18.2941 54.3614 18.0008 53.6848 17.4143C53.0343 16.8043 52.709 16.0184 52.709 15.0565ZM56.6123 37.5439C55.3892 37.5439 54.4785 37.2389 53.88 36.6289C53.2815 36.0189 52.9822 35.2564 52.9822 34.3415V22.3059C52.9822 21.2971 53.2815 20.4994 53.88 19.9129C54.4785 19.3264 55.3892 19.0331 56.6123 19.0331C57.8353 19.0331 58.7461 19.3264 59.3446 19.9129C59.9691 20.4994 60.2813 21.2736 60.2813 22.2356V34.3415C60.2813 35.2564 59.9561 36.0189 59.3055 36.6289C58.681 37.2389 57.7832 37.5439 56.6123 37.5439Z" fill="var(--fill-0, #CD4918)"/>
+<path d="M16.3409 39.544C15.1959 39.544 14.2721 39.239 13.5695 38.629C12.893 37.9956 12.5547 37.2213 12.5547 36.3064V24.658C12.5547 23.6726 12.88 22.8397 13.5305 22.1593C14.1811 21.479 15.1178 21.1388 16.3409 21.1388C17.5379 21.1388 18.4486 21.479 19.0732 22.1593C19.6977 22.8397 20.0099 23.696 20.0099 24.7283V26.4879H20.7125C20.7125 25.1506 20.9728 24.0949 21.4932 23.3207C22.0397 22.5465 22.7292 21.9951 23.5619 21.6667C24.3946 21.3148 25.2273 21.1388 26.06 21.1388C28.0637 21.1388 29.5339 21.7957 30.4707 23.1095C31.4075 24.3999 31.8759 26.2416 31.8759 28.6346V36.3064C31.8759 37.2213 31.5376 37.9956 30.8611 38.629C30.1845 39.239 29.2737 39.544 28.1288 39.544C26.9578 39.544 26.021 39.239 25.3184 38.629C24.6418 37.9956 24.3036 37.2213 24.3036 36.3064V30.0775C24.3036 29.2329 24.1214 28.5759 23.7571 28.1067C23.4188 27.6375 22.9114 27.4029 22.2348 27.4029C21.4542 27.4029 20.8817 27.661 20.5174 28.1771C20.1791 28.6933 20.0099 29.3502 20.0099 30.1478V36.3064C20.0099 37.2213 19.6847 37.9956 19.0341 38.629C18.3836 39.239 17.4858 39.544 16.3409 39.544Z" fill="#CD4918"/>
-<path id="Vector_4" d="M42.0485 37.5439C40.3571 37.5439 38.9129 37.0982 37.7159 36.2066C36.5189 35.3151 35.53 33.8371 34.7494 31.7725L31.6658 23.7488C31.2494 22.6931 31.2494 21.7194 31.6658 20.8279C32.1081 19.9364 32.9148 19.3733 34.0858 19.1387C35.1267 18.9276 36.0374 19.0214 36.8181 19.4203C37.6248 19.8191 38.1973 20.4877 38.5355 21.4262L41.5801 29.485C41.9444 30.4235 42.3868 31.1156 42.9072 31.5614C43.4537 32.0071 44.1172 32.1127 44.8979 31.8781C45.6265 31.62 46.0168 31.1977 46.0689 30.6112C46.1469 30.0012 46.0038 29.2974 45.6395 28.4997C45.3273 27.7724 44.9109 27.1507 44.3905 26.6345C43.87 26.1184 43.4016 25.5788 42.9853 25.0157C42.5689 24.4527 42.3608 23.7488 42.3608 22.9042C42.3608 21.6843 42.7901 20.7341 43.6488 20.0537C44.5336 19.3499 45.6916 19.0214 47.1228 19.0683C48.3458 19.0918 49.3476 19.4789 50.1283 20.2297C50.9089 20.9804 51.2993 21.9306 51.2993 23.0802C51.2993 23.7136 51.1822 24.394 50.948 25.1213C50.7138 25.8486 50.4536 26.6111 50.1673 27.4087L48.606 31.8429C48.1897 33.0159 47.7213 34.0365 47.2008 34.9046C46.7064 35.7492 46.0559 36.4061 45.2492 36.8753C44.4685 37.321 43.4016 37.5439 42.0485 37.5439Z" fill="var(--fill-0, #CD4918)"/>
+<path d="M6.05941 39.6144C4.8624 39.6144 3.88658 39.2859 3.13195 38.629C2.37732 37.9721 2 37.1392 2 36.1304V17.5141C2 16.4818 2.36431 15.6137 3.09292 14.9099C3.84755 14.206 4.83638 13.8541 6.05941 13.8541C7.3605 13.8541 8.37535 14.206 9.10397 14.9099C9.8586 15.5902 10.2359 16.4348 10.2359 17.4437V36.1304C10.2359 37.1392 9.83258 37.9721 9.0259 38.629C8.24524 39.2859 7.25641 39.6144 6.05941 39.6144Z" fill="#CD4918"/>
-<path id="Vector_5" d="M14.3409 37.544C13.1959 37.544 12.2721 37.239 11.5695 36.629C10.893 35.9955 10.5547 35.2213 10.5547 34.3063V22.6579C10.5547 21.6726 10.88 20.8397 11.5305 20.1593C12.1811 19.479 13.1178 19.1388 14.3409 19.1388C15.5379 19.1388 16.4486 19.479 17.0732 20.1593C17.6977 20.8397 18.0099 21.696 18.0099 22.7283V24.4879H18.7125C18.7125 23.1506 18.9728 22.0949 19.4932 21.3206C20.0397 20.5464 20.7292 19.9951 21.5619 19.6666C22.3946 19.3147 23.2273 19.1388 24.06 19.1388C26.0637 19.1388 27.5339 19.7957 28.4707 21.1095C29.4075 22.3999 29.8759 24.2416 29.8759 26.6346V34.3063C29.8759 35.2213 29.5376 35.9955 28.8611 36.629C28.1845 37.239 27.2737 37.544 26.1288 37.544C24.9578 37.544 24.021 37.239 23.3184 36.629C22.6418 35.9955 22.3036 35.2213 22.3036 34.3063V28.0774C22.3036 27.2328 22.1214 26.5759 21.7571 26.1067C21.4188 25.6375 20.9114 25.4029 20.2348 25.4029C19.4542 25.4029 18.8817 25.6609 18.5174 26.1771C18.1791 26.6932 18.0099 27.3501 18.0099 28.1478V34.3063C18.0099 35.2213 17.6847 35.9955 17.0341 36.629C16.3836 37.239 15.4858 37.544 14.3409 37.544Z" fill="var(--fill-0, #CD4918)"/>
+<path d="M19.9137 11.7901C20.0941 12.142 19.9271 12.5614 19.5405 12.7257C19.4344 12.7707 19.323 12.7913 19.2148 12.7913C18.9231 12.7913 18.6448 12.6412 18.5128 12.385C17.8511 11.0957 17.5027 9.53236 17.5027 7.86486C17.5027 7.47638 17.849 7.16108 18.2758 7.16108C18.7025 7.16108 19.0489 7.47638 19.0489 7.86486C19.0489 9.30809 19.355 10.7016 19.9137 11.7901ZM24.4595 7.16108C24.0327 7.16108 23.6864 7.47638 23.6864 7.86486C23.6864 9.30809 23.3792 10.7016 22.8205 11.7901C22.6401 12.142 22.8071 12.5614 23.1937 12.7257C23.2999 12.7707 23.4112 12.7913 23.5194 12.7913C23.8111 12.7913 24.0894 12.6412 24.2214 12.385C24.8832 11.0957 25.2316 9.53236 25.2316 7.86486C25.2316 7.47638 24.8852 7.16108 24.4585 7.16108H24.4595ZM30.3866 8.33405C30.3866 9.38504 29.9722 10.4032 29.2187 11.2008C28.8105 11.6325 28.325 12.3278 28.325 13.1827V17.7178C28.325 19.1414 27.054 20.2984 25.4903 20.2984H17.2439C15.6802 20.2984 14.4092 19.1414 14.4092 17.7178V13.1827C14.4092 12.3278 13.9227 11.6334 13.5155 11.2008C12.7631 10.4022 12.3477 9.3841 12.3477 8.33405C12.3477 6.11291 14.1052 4.28026 16.4904 3.94807C17.5965 2.72255 19.3911 2 21.3671 2C23.3431 2 25.1378 2.72255 26.2438 3.94807C28.628 4.28026 30.3866 6.11291 30.3866 8.33405ZM26.7788 17.7178V16.5449H15.9554V17.7178C15.9554 18.3644 16.5337 18.8908 17.2439 18.8908H25.4903C26.2005 18.8908 26.7788 18.3644 26.7788 17.7178ZM28.8404 8.33405C28.8404 6.74444 27.5189 5.44479 25.7665 5.31341C25.5387 5.29558 25.3326 5.18861 25.1996 5.02064C24.4224 4.02596 22.9535 3.40851 21.3671 3.40851C19.7807 3.40851 18.3118 4.02596 17.5346 5.02064C17.4016 5.18955 17.1955 5.29652 16.9677 5.31341C15.2153 5.44572 13.8938 6.74444 13.8938 8.33405C13.8938 9.05848 14.1691 9.73317 14.6886 10.284C15.5174 11.1633 15.9554 12.1655 15.9554 13.1827V15.1373H26.7788V13.1827C26.7788 12.1655 27.2169 11.1623 28.0456 10.284C28.5662 9.73317 28.8404 9.05848 28.8404 8.33405Z" fill="#CD4918"/>
 <path id="Vector_6" d="M4.05941 37.6143C2.8624 37.6143 1.88658 37.2859 1.13195 36.629C0.377317 35.9721 0 35.1392 0 34.1304V15.514C0 14.4817 0.364306 13.6137 1.09292 12.9098C1.84755 12.206 2.83638 11.8541 4.05941 11.8541C5.3605 11.8541 6.37535 12.206 7.10397 12.9098C7.8586 13.5902 8.23592 14.4348 8.23592 15.4436V34.1304C8.23592 35.1392 7.83258 35.9721 7.0259 36.629C6.24524 37.2859 5.25641 37.6143 4.05941 37.6143Z" fill="var(--fill-0, #CD4918)"/>
 </g>
 <path id="Vector_7" d="M17.9138 9.7901C18.0942 10.142 17.9272 10.5614 17.5406 10.7257C17.4345 10.7707 17.3231 10.7913 17.2149 10.7913C16.9232 10.7913 16.6449 10.6412 16.5129 10.385C15.8512 9.0957 15.5028 7.53236 15.5028 5.86486C15.5028 5.47638 15.8491 5.16108 16.2759 5.16108C16.7026 5.16108 17.049 5.47638 17.049 5.86486C17.049 7.30809 17.3551 8.70158 17.9138 9.7901ZM22.4596 5.16108C22.0328 5.16108 21.6865 5.47638 21.6865 5.86486C21.6865 7.30809 21.3793 8.70158 20.8206 9.7901C20.6402 10.142 20.8072 10.5614 21.1938 10.7257C21.3 10.7707 21.4113 10.7913 21.5195 10.7913C21.8112 10.7913 22.0895 10.6412 22.2215 10.385C22.8833 9.0957 23.2317 7.53236 23.2317 5.86486C23.2317 5.47638 22.8853 5.16108 22.4586 5.16108H22.4596ZM28.3867 6.33405C28.3867 7.38504 27.9723 8.40318 27.2188 9.2008C26.8106 9.63245 26.3251 10.3278 26.3251 11.1827V15.7178C26.3251 17.1414 25.0541 18.2984 23.4904 18.2984H15.244C13.6803 18.2984 12.4093 17.1414 12.4093 15.7178V11.1827C12.4093 10.3278 11.9228 9.63339 11.5156 9.2008C10.7632 8.40224 10.3478 7.3841 10.3478 6.33405C10.3478 4.11291 12.1053 2.28026 14.4905 1.94807C15.5966 0.722551 17.3912 0 19.3672 0C21.3432 0 23.1379 0.722551 24.2439 1.94807C26.6281 2.28026 28.3867 4.11291 28.3867 6.33405ZM24.7789 15.7178V14.5449H13.9555V15.7178C13.9555 16.3644 14.5338 16.8908 15.244 16.8908H23.4904C24.2006 16.8908 24.7789 16.3644 24.7789 15.7178ZM26.8405 6.33405C26.8405 4.74444 25.519 3.44479 23.7666 3.31341C23.5388 3.29558 23.3327 3.18861 23.1997 3.02064C22.4225 2.02596 20.9536 1.40851 19.3672 1.40851C17.7808 1.40851 16.3119 2.02596 15.5347 3.02064C15.4017 3.18955 15.1956 3.29652 14.9678 3.31341C13.2154 3.44572 11.8939 4.74444 11.8939 6.33405C11.8939 7.05848 12.1692 7.73317 12.6887 8.284C13.5175 9.16326 13.9555 10.1655 13.9555 11.1827V13.1373H24.7789V11.1827C24.7789 10.1655 25.217 9.16232 26.0457 8.284C26.5663 7.73317 26.8405 7.05848 26.8405 6.33405Z" fill="var(--fill-0, #CD4918)"/>
 </g>
 </svg>
--- a/assets/icon_register.png
+++ b/assets/icon_register.png
--- a/css/event_create.css
+++ b/css/event_create.css
@ -6,6 +6,25 @@
  --control-min-height: 3rem;
  --input-min-height: 3.5rem;
  --card-min-height: 6rem;
  --color-bg: var(--butter);
  --color-surface: var(--white);
  --color-surface-soft: var(--butter-light);
  --color-text: var(--black);
  --color-text-secondary: rgba(34, 33, 26, 0.8);
  --color-muted: rgba(34, 33, 26, 0.68);
  --color-border: rgba(102, 52, 13, 0.16);
  --color-border-strong: var(--brown);
  --color-divider: rgba(102, 52, 13, 0.14);
  --color-primary: var(--olive);
  --color-primary-hover: var(--olive-dark);
  --color-progress-bg: rgba(212, 75, 36, 0.18);
  --color-focus: var(--blue);
  --color-error: var(--error);
  --shadow-soft: 0 12px 30px rgba(102, 52, 13, 0.1);
  --input-border-soft: rgba(102, 52, 13, 0.2);
  --input-border-focus: rgba(107, 107, 5, 0.45);
  --input-shadow-focus: 0 0 0 4px rgba(107, 107, 5, 0.12);
 }
 *,
@ -108,6 +127,10 @@ a {
  padding: var(--space-4) 0 var(--space-7);
 }
 .submission-success {
  padding: var(--space-4) 0 var(--space-7);
 }
 .step--active {
  display: block;
 }
@ -123,6 +146,7 @@ a {
  min-height: 60vh;
  align-content: center;
  grid-template-columns: 1fr;
  gap: var(--space-7);
 }
 .step-copy,
@ -185,9 +209,22 @@ h2 {
  background: linear-gradient(135deg, var(--color-surface), var(--color-surface-soft));
 }
-.intro-card-emoji {
+.intro-card--image {
-  font-size: 2rem;
+  width: 100%;
-  margin-bottom: var(--space-3);
+  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
 }
 .intro-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  border-radius: 1.875rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
 }
 label,
@ -208,11 +245,13 @@ input[type="number"],
 textarea {
  width: 100%;
  min-height: var(--input-min-height);
-  padding: 0.95rem 1rem;
+  padding: 1rem 1.1rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--input-border-soft);
-  border-radius: 1rem;
+  border-radius: 1.125rem;
-  background: var(--color-surface);
+  background: var(--butter-light);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(102, 52, 13, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
 }
 textarea {
@ -220,6 +259,30 @@ textarea {
  resize: vertical;
 }
 input[type="text"]:hover,
 input[type="date"]:hover,
 input[type="time"]:hover,
 input[type="number"]:hover,
 textarea:hover {
  border-color: rgba(102, 52, 13, 0.28);
 }
 input[type="text"]:focus,
 input[type="date"]:focus,
 input[type="time"]:focus,
 input[type="number"]:focus,
 textarea:focus {
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
  background: var(--butter-light);
  outline: none;
 }
 .field-invalid {
  border-color: var(--tomato) !important;
  box-shadow: 0 0 0 2px rgba(212, 75, 36, 0.14);
 }
 .field-row {
  display: grid;
  gap: var(--space-4);
@ -238,8 +301,8 @@ textarea {
  padding: 1rem 1rem 1rem 1.05rem;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
-  background: var(--color-surface);
+  background: var(--butter-light);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
 }
 .option-card small {
@ -247,6 +310,7 @@ textarea {
 }
 .option-card:hover {
  background: var(--olive-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
 }
@ -259,7 +323,18 @@ textarea {
 }
 .option-card:has(input:checked) {
-  border: 2px solid var(--color-border-strong);
+  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--white);
 }
 .option-card:has(input:checked) small {
  color: rgba(247, 246, 230, 0.88);
 }
 .option-card--invalid {
  border-color: var(--tomato) !important;
  box-shadow: 0 0 0 2px rgba(212, 75, 36, 0.14);
 }
 .counter {
@ -281,15 +356,44 @@ textarea {
 .counter-button {
  width: var(--control-min-height);
  height: var(--control-min-height);
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-primary);
  border-radius: 50%;
-  background: var(--color-surface);
+  background: var(--color-primary);
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(107, 107, 5, 0.18);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
 }
 .counter-button:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
 }
 .counter-button:focus-visible {
  outline: 3px solid rgba(107, 107, 5, 0.22);
  outline-offset: 3px;
 }
 .review-card {
-  padding: var(--space-5);
+  display: grid;
-  border-radius: var(--radius-lg);
+  gap: var(--space-4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
 }
 .review-card--success {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-3) 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
 }
 .review-list {
@ -300,14 +404,29 @@ textarea {
 .review-item {
  display: grid;
-  gap: var(--space-1);
+  gap: var(--space-2);
-  padding-bottom: var(--space-4);
+  padding: 1rem 1.1rem;
-  border-bottom: 1px solid var(--color-divider);
+  border: 1px solid var(--input-border-soft);
  border-radius: 1.125rem;
  background: var(--butter-light);
  box-shadow: 0 1px 2px rgba(102, 52, 13, 0.04);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
 }
 .review-item:last-child {
-  border-bottom: 0;
+  border-bottom: 1px solid var(--input-border-soft);
-  padding-bottom: 0;
+}
 .review-item:hover {
  border-color: rgba(102, 52, 13, 0.28);
  background: rgba(247, 246, 230, 0.92);
  transform: translateY(-1px);
 }
 .review-item:focus-visible {
  outline: 3px solid rgba(107, 107, 5, 0.2);
  outline-offset: 3px;
 }
 .review-item dt {
@ -320,16 +439,29 @@ textarea {
  color: var(--color-text-secondary);
 }
 .submission-success-actions {
  display: flex;
  justify-content: center;
 }
 .flow-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: auto;
-  background: rgba(247, 247, 242, 0.96);
+  background: var(--color-bg);
-  backdrop-filter: blur(8px);
+  backdrop-filter: none;
  padding-top: var(--space-4);
  padding-bottom: env(safe-area-inset-bottom);
 }
 .progress-wrap {
  position: relative;
  width: min(100%, var(--content-width));
  margin: 0 auto;
  padding-top: 4.35rem;
 }
 .progress {
  width: 100%;
  height: 0.375rem;
@ -340,15 +472,50 @@ textarea {
  display: block;
  width: 0;
  height: 100%;
-  background: var(--color-primary);
+  background: var(--tomato);
  transition: width 0.25s ease;
 }
 .progress-marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  pointer-events: none;
 }
 .progress-marker::after {
  content: "";
  width: 0.125rem;
  height: 1rem;
  background: var(--tomato);
  border-radius: 999px;
 }
 .progress-marker__circle {
  width: 2.9rem;
  height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tomato);
  color: var(--butter-light);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(212, 75, 36, 0.18);
 }
 .flow-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: min(100%, var(--content-width));
  margin: 0 auto;
  padding: var(--space-4) 0;
 }
@ -455,8 +622,10 @@ textarea:focus-visible {
@media (min-width: 768px) {
  .step-layout--intro {
-    grid-template-columns: 1.25fr 0.8fr;
+    width: min(100%, 56rem);
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-8);
  }
  .field-row {
@ -470,4 +639,4 @@ textarea:focus-visible {
  .option-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
-}
+}
--- a/css/index.css
+++ b/css/index.css
@ -1,375 +0,0 @@
 /* ===========================================
   INDEX.CSS — Styles specific to index.html
   Global styles (reset, variables, body, nav,
   brand, typography) are in stylesheet_global.css
   =========================================== */
 /* --- Navigation overrides (index-specific) --- */
 .nav-link {
  border: 2px solid var(--olive-light);
  transition: background-color 0.2s ease, color 0.2s ease;
 }
 .nav-link:hover,
 .nav-link.active,
 .nav-link:focus-visible {
  background: var(--olive);
  color: var(--white);
  border-color: var(--olive);
 }
 .nav-link--login {
  background: var(--olive);
  color: var(--white);
  border-color: var(--olive);
 }
 .nav-link--login:hover,
 .nav-link--login:focus-visible {
  background: var(--white);
  color: var(--olive);
  border-color: var(--olive);
 }
 /* --- Page layout --- */
 .main-content {
  width: min(100% - 4rem, 1120px);
  margin: 0 auto;
  padding: 0 20px;
 }
 /* --- Hero section --- */
 .hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin-bottom: 80px;
  align-items: center;
  padding: 40px 0;
 }
 .hero__left h1 {
  white-space: nowrap;
  font-size: 2.4rem;
  color: var(--black);
 }
 .hero__left p {
  margin: 24px 0 32px;
  line-height: 1.8;
 }
 .hero__right {
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .image-card {
  width: 100%;
  max-width: 396px;
  overflow: hidden;
  border-radius: var(--radius-lg);
 }
 .hero-image {
  width: 100%;
  max-width: 396px;
  max-height: 464px;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
 }
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 30px 0;
  }
  .hero__right {
    order: -1;
  }
  .hero-image {
    min-height: 320px;
  }
 }
 /* --- "So funktioniert's" steps --- */
 .how-it-works {
  margin-bottom: 70px;
 }
 .how-it-works__header {
  text-align: center;
  margin-bottom: 32px;
 }
 .how-it-works__header h2 {
  font-size: 2rem;
  margin: 0;
  color: var(--black);
 }
 .how-it-works__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 20px;
 }
 .how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 20px;
  background: var(--white);
  border-radius: 28px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
 }
 .how-step--numbered {
  position: relative;
 }
 .how-step__corner-number {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 2.2rem;
  font-weight: 700;
 }
 .how-step__corner-number--brown {
  color: var(--brown);
 }
 .how-step__png {
  width: 192px;
  height: 192px;
  object-fit: contain;
 }
 .how-step__png--brown {
  filter: brightness(0) saturate(100%) invert(18%) sepia(56%) saturate(2800%) hue-rotate(16deg) brightness(92%) contrast(95%);
 }
 .how-step__label {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--black);
  text-align: center;
 }
 .how-step__label--brown {
  color: var(--brown);
 }
 .how-step__label--big {
  font-size: 1.25rem;
  font-weight: 700;
 }
@media (max-width: 900px) {
  .how-it-works__steps {
    grid-template-columns: 1fr;
  }
 }
 /* --- Carousel gallery --- */
 .gallery__carousel {
  position: relative;
  overflow: hidden;
 }
 .gallery__track {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
 }
 .gallery__item {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: calc((100% - 40px) / 3);
  border-radius: 24px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
  aspect-ratio: 2 / 3;
 }
 .gallery__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
 }
 .gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  cursor: pointer;
  font-size: 1.2rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
 }
 .gallery__arrow:hover {
  background: rgba(0, 0, 0, 0.55);
  transform: translateY(-50%) scale(1.1);
 }
 .gallery__arrow:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 3px;
 }
 .gallery__arrow--prev {
  left: 12px;
 }
 .gallery__arrow--next {
  right: 12px;
 }
 /* --- Carousel dot indicators --- */
 .gallery__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px 0 8px;
 }
 .gallery__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--brown);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, transform 0.2s ease;
 }
 .gallery__dot:hover {
  background: rgba(102, 52, 13, 0.3);
  transform: scale(1.2);
 }
 .gallery__dot:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 3px;
 }
 .gallery__dot--active {
  background: var(--brown);
 }
@media (max-width: 900px) {
  .gallery__track {
    gap: 16px;
  }
  .gallery__item {
    flex: 0 0 100%;
    min-width: 100%;
  }
 }
 /* --- Gallery info (Instagram link) --- */
 .gallery__info {
  display: flex;
  align-items: center;
  gap: 10px;
 }
 .gallery__icon--instagram {
  height: 32px;
  width: 32px;
  object-fit: contain;
  border-radius: 8px;
  background: none;
  filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%);
 }
 .gallery__icon--invite {
  height: 56px;
  width: 56px;
  object-fit: contain;
  margin-left: 0;
  transform: translate(-4%, -1%);
  position: relative;
 }
 /* --- CTA button --- */
 .btn {
  border: none;
  background: var(--olive);
  color: var(--white);
  padding: 12px 22px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  transition: background-color 0.2s ease, transform 0.2s ease;
 }
 .btn:hover {
  background-color: var(--olive-dark);
  transform: translateY(-1px);
 }
 /* --- Footer --- */
 .footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  border: none;
  margin-top: 40px;
 }
 .footer__link {
  color: var(--black);
  text-decoration: underline;
  font-size: 0.8rem;
  font-weight: 400;
 }
--- a/css/landingpage.css
+++ b/css/landingpage.css
@ -0,0 +1,534 @@
 /* Instagram and Invite logo in gallery info area */
 .gallery__icon--instagram {
  height: 32px;
  width: 32px;
  object-fit: contain;
  border-radius: 8px;
  background: none;
  /* Olive green filter for PNG: #6b6b05 */
  filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%);
 }
 .gallery__icon--invite {
  height: 56px;
  width: 56px;
  object-fit: contain;
  margin-left: 0;
  transform: translate(-4%, -1%);
  position: relative;
 }
 * { box-sizing: border-box; }
 :root {
  --black: #000000;
  --white: #ffffff;
  --button-green: #6b6b05;
  --button-green-dark: #514c04;
 }
 body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: #FFFDE3; /* butter background color from stylesheet */
 }
 .page-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  background: var(--white);
  padding: 40px;
  border: 1px solid var(--black);
 }
 /* --- 1. Basic Layout Logic --- */
 .header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 16px 24px;
  border: 1px solid var(--black);
  margin-bottom: 40px; /* Using your 40px margin from the first block */
 }
 .header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.2rem;
 }
 .brand__logo {
  height: 34px;
  width: auto;
  object-fit: contain;
 }
 /* Grouping container for 'Event finden' and 'Login' */
 .header__actions {
  display: flex;
  align-items: center;
    gap: 6px;
 }
 .top-nav-wrap {
  background: #FFFDE3;
  padding: 18px 0;
 }
 .top-nav {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 30px;
  box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
  padding: 12px 24px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0 0 40px;
 }
 .brand {
  display: inline-flex;
  align-items: center;
  height: 50px;
  text-decoration: none;
 }
 .brand img {
  width: auto;
  height: 100%;
  max-width: 104px;
  display: block;
 }
 .top-nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
 }
 .nav-link {
  color: #221c1a;
  line-height: 1.3;
  text-decoration: none;
  padding: 8px 20px;
  border: 2px solid #e5e1b7;
  border-radius: 20px;
  transition: background-color 0.2s ease, color 0.2s ease;
 }
 .nav-link:hover,
 .nav-link.active,
 .nav-link:focus-visible {
  background: #6b6b05;
  color: #ffffff;
  border-color: #6b6b05;
 }
 .nav-link--login {
  background: #6b6b05;
  color: #ffffff;
  border-color: #6b6b05;
 }
 .nav-link--login:hover,
 .nav-link--login:focus-visible {
  background: #ffffff;
  color: #6b6b05;
  border-color: #6b6b05;
 }
 .main-content {
  width: min(100% - 4rem, 1120px);
  margin: 0 auto;
  padding: 0 20px;
 }
 .hero { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 50px; 
  margin-bottom: 80px; 
  align-items: center;
  padding: 40px 0;
 }
 .how-it-works {
  margin-bottom: 70px;
 }
 .how-it-works__header {
  text-align: center;
  margin-bottom: 32px;
 }
 .how-it-works__header h2 {
  font-size: 2rem;
  margin: 0;
  color: #221c1a;
 }
 .how-it-works__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 20px;
 }
 .how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 20px;
  background: var(--white) !important;
  border: 2px solid var(--tomato) !important;
  border-radius: 28px;
  box-shadow: 0 12px 30px rgba(212, 75, 36, 0.08);
 }
 .how-step__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: var(--button-green);
  color: var(--white);
  border-radius: 50%;
  font-size: 1.4rem;
 }
 .how-step__number {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #f4efd7;
  color: #221c1a;
  border-radius: 50%;
  font-weight: 700;
 }
 .how-step__label {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 600;
  color: #221c1a;
  text-align: center;
 }
 .how-step__icon--brown {
  background: #66340d;
 }
 .how-step__label--brown {
  color: var(--tomato);
 }
 .how-step__label--big {
  font-size: 1.25rem;
  font-weight: 700;
 }
 .how-step--numbered {
  position: relative;
 }
 .how-step__corner-number {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 2.2rem;
  font-weight: 700;
 }
 .how-step__corner-number--brown {
  color: var(--tomato);
 }
 .how-step__png {
  width: 192px;
  height: 192px;
  object-fit: contain;
 }
 .how-step__png--brown {
  filter: brightness(0) saturate(100%) invert(39%) sepia(84%) saturate(1682%) hue-rotate(349deg) brightness(93%) contrast(86%);
 }
 }
@media (max-width: 900px) {
  .how-it-works__steps {
    grid-template-columns: 1fr;
  }
 }
 .hero__left {
  max-width: 520px;
 }
 .hero__left p {
  margin: 24px 0 32px;
  line-height: 1.8;
 }
 .hero__right {
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .image-card {
  width: 100%;
  max-width: 396px;
  overflow: hidden;
  border-radius: 30px;
 }
 .hero-image {
  width: 100%;
  max-width: 396px;
  max-height: 464px;
  height: auto;
  border-radius: 30px;
  object-fit: cover;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
 }
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 30px 0;
  }
  .hero__right {
    order: -1;
  }
  .hero-image {
    min-height: 320px;
  }
 }
 /* Carousel gallery */
 .gallery__carousel {
  position: relative;
 }
 .gallery__track {
  display: flex;
  gap: 20px;
  overflow: hidden;
  margin-bottom: 30px; /* Space between photos and dots */
  scroll-behavior: smooth;
 }
 .gallery__item {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: calc((100% - 40px) / 3);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
  aspect-ratio: 2 / 3;
 }
 .gallery__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
 }
 .gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 1.6rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, color 0.2s ease;
  z-index: 2;
 }
 .gallery__arrow:hover {
  transform: translateY(-50%) scale(1.15);
  color: #e5e1b7;
 }
 .gallery__arrow--prev {
  left: 12px;
 }
 .gallery__arrow--next {
  right: 12px;
 }
 /* Center arrow removed – using side arrows only */
 }
@media (max-width: 900px) {
  .gallery__track {
    gap: 16px;
  }
  .gallery__item {
    flex: 0 0 100%;
    min-width: 100%;
  }
 }
 /* --- 2. Button & Link Styling --- */
 .btn {
  border: none;
  background: var(--button-green);
  color: var(--white);
  padding: 12px 22px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none; /* Keeps the link from having an underline */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.95rem;
  transition: background-color 0.2s ease, transform 0.2s ease;
 }
 .btn:hover {
  background-color: var(--button-green-dark);
  transform: translateY(-1px);
 }
 .nav__link {
  color: var(--black); /* Fixes the purple link issue */
 }
 /* --- 3. The "X" Box Logic --- */
 .image-card__placeholder, .placeholder {
  width: 100%;
  height: 100%;
  min-height: 250px; 
  position: relative; 
  border: 1px solid var(--black);
  background: var(--white);
 }
 .image-card__placeholder::before, .image-card__placeholder::after,
 .placeholder::before, .placeholder::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
 }
 /* Drawing the diagonal lines for the wireframe look */
 .image-card__placeholder::before, .placeholder::before {
  background: linear-gradient(to top left, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%);
 }
 .image-card__placeholder::after, .placeholder::after {
  background: linear-gradient(to top right, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%);
 }
 /* The "X" Box Logic - IMPORTANT */
 .image-card__placeholder, .placeholder {
  width: 100%;
  height: 100%;
  min-height: 250px; /* Ensures the box has height */
  position: relative; /* REQUIRED for the X lines to stay inside */
  border: 1px solid var(--black);
  background: var(--white);
 }
 /* Creating the diagonal lines */
 .image-card__placeholder::before, .image-card__placeholder::after,
 .placeholder::before, .placeholder::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
 }
 .image-card__placeholder::before, .placeholder::before {
  background: linear-gradient(to top left, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%);
 }
 .image-card__placeholder::after, .placeholder::after {
  background: linear-gradient(to top right, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%);
 }
 /* Badges and Buttons */
 .social-badge {
  display: flex;
  justify-content: center; /* This centers the dots */
  gap: 10px;
  margin-top: 20px; /* This creates space between the photos and the dots */
  /* REMOVE any line that says "position: absolute" or "bottom: 16px" */
 }
 .social-badge__dot { width: 12px; height: 12px; background: var(--black); border-radius: 50%; }
 .profile-badge {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1px solid var(--black);
  margin-top: 20px;
 }
 .gallery__info {
  display: flex;
  align-items: center;
  gap: 10px;
 }
 .gallery__handle {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--black);
  gap: 6px;
 }
 .gallery__icon {
  font-size: 1.15rem;
  color: #DD541A;
 }
 .gallery__at {
  font-size: 1.1rem;
  color: #222;
 }
 .gallery__brand {
  font-family: 'Inter', sans-serif;
  color: #DD541A;
 }
 /* Footer */
 .footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  border: none;
  margin-top: 40px;
 }
 .footer__link {
  color: var(--black);
  text-decoration: underline;
  font-size: 0.8rem;
  font-weight: 400;
 }
--- a/css/login_signup.css
+++ b/css/login_signup.css
@ -1,37 +1,17 @@
 /* ===========================================
   LOGIN_SIGNUP.CSS — Styles for login & signup
   Global styles (reset, variables, body, nav,
   typography) are in stylesheet_global.css
   =========================================== */
 /* --- Page layout --- */
 .main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: var(--space-4);
 }
 .container {
    margin-top: 5rem;
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 1000px;
    width: 100%;
    display: flex;
-    gap: var(--space-4);
+    gap: 20px;
    overflow: hidden;
 }
 /* --- Image section --- */
 .image-section {
    flex: 1;
-    background-color: var(--butter-light);
+    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
@ -44,9 +24,6 @@
    object-fit: cover;
 }
 /* --- Form section --- */
 .form-section {
    flex: 1;
    padding: 40px;
@ -55,130 +32,85 @@
    justify-content: center;
 }
-h1 {
+/* Formularelemente */
 .info-box {
    background-color: var(--olive-light);
    padding: 15px;
    margin-bottom: 30px;
    border-radius: 8px;
    font-size: 16px;
    color: var(--black);
-    margin-bottom: var(--space-4);
+    line-height: 1.4;
    text-align: center;
 }
 /* --- Form elements --- */
 .form-group {
-    margin-bottom: var(--space-4);
+    margin-bottom: 20px;
 }
 label {
    display: block;
-    margin-bottom: var(--space-1);
+    margin-bottom: 6px;
    color: var(--black);
-    font-weight: 600;
+    font-weight: 500;
-    font-size: 0.9rem;
+    font-size: 14px;
 }
 input[type="text"],
 input[type="email"],
 input[type="password"] {
    width: 100%;
-    padding: var(--space-2);
+    padding: 12px;
-    border: 2px solid var(--olive-light);
+    border: 1px solid #ddd;
-    border-radius: var(--radius-md);
+    border-radius: 4px;
-    font-size: 0.9rem;
+    font-size: 14px;
    font-family: var(--font-main);
    transition: border-color 0.3s ease;
    background: var(--white);
    color: var(--black);
 }
 input:focus {
    outline: none;
-    border-color: var(--olive);
+    border-color: var(--olive-dark);
    box-shadow: 0 0 5px rgba(107, 107, 5, 0.25);
 }
-button[type="submit"] {
+
-    width: 100%;
+
-    padding: var(--space-2);
+/* Hilfstexte & Fehler */
-    background-color: var(--olive);
+.signup-hint, .login-hint {
-    color: var(--white);
+    text-align: left;
-    border: none;
+    margin-top: 20px;
-    border-radius: var(--radius-pill);
+    color: var(--black);
    font-size: 1rem;
-    font-weight: 700;
+    line-height: 130%;
    font-family: var(--font-main);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: var(--space-2);
 }
-button[type="submit"]:hover {
+.signup-hint a, .login-hint a {
-    background-color: var(--olive-dark);
+    color: var(--blue);
    transform: translateY(-1px);
 }
 button[type="submit"]:active {
    background-color: var(--olive-dark);
    transform: translateY(0);
 }
 /* --- Info box --- */
 .info-box {
    background-color: var(--butter-light);
    border-left: 4px solid var(--olive);
    padding: var(--space-3);
    margin-bottom: var(--space-6);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--black);
    line-height: 1.5;
 }
 /* --- Hints & errors --- */
 .signup-hint,
 .login-hint {
    text-align: center;
    margin-top: var(--space-4);
    color: var(--black);
    font-size: 0.9rem;
 }
 .signup-hint a,
 .login-hint a {
    color: var(--olive);
    text-decoration: none;
-    font-weight: 600;
+    font-weight: 500;
    transition: color 0.3s ease;
 }
-.signup-hint a:hover,
+.signup-hint a:hover, .login-hint a:hover {
 .login-hint a:hover {
    text-decoration: underline;
-    color: var(--olive-dark);
+    text-underline-offset: 2px; 
    color: var(--blue);
 }
 .error-message {
-    color: var(--tomato);
+    color: var(--error);
-    font-size: 0.8rem;
+    font-size: 13px;
    margin-top: 5px;
    display: none;
 }
 .form-group.has-error input {
-    border-color: var(--tomato);
+    border-color: var(--error);
    box-shadow: 0 0 5px rgba(212, 75, 36, 0.3);
 }
 .form-group.has-error .error-message {
    display: block;
 }
-
+/* Modal / Popup Styles */
 /* --- Modal / Popup --- */
 .modal {
    display: none;
    position: fixed;
@ -203,9 +135,9 @@ button[type="submit"]:active {
 }
 .modal-content {
-    background-color: var(--white);
+    background-color: white;
    padding: 40px;
-    border-radius: var(--radius-lg);
+    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
@ -220,12 +152,12 @@ button[type="submit"]:active {
 .modal-header {
    position: relative;
-    margin-bottom: var(--space-4);
+    margin-bottom: 20px;
 }
 .modal-header h2 {
-    color: var(--olive);
+    color: #0084ff;
-    font-size: 1.5rem;
+    font-size: 24px;
 }
 .close-btn {
@ -233,7 +165,7 @@ button[type="submit"]:active {
    right: 0;
    top: 0;
    font-size: 28px;
-    color: var(--black);
+    color: #999;
    background: none;
    border: none;
    cursor: pointer;
@ -245,57 +177,19 @@ button[type="submit"]:active {
 }
 .modal-body {
-    color: var(--black);
+    color: #333;
-    font-size: 1rem;
+    font-size: 16px;
    line-height: 1.6;
-    margin-bottom: var(--space-6);
+    margin-bottom: 30px;
 }
 .modal-footer {
    display: flex;
-    gap: var(--space-2);
+    gap: 10px;
    justify-content: center;
 }
-.btn-primary {
+/* Responsive Anpassungen */
    padding: var(--space-2) var(--space-5);
    background-color: var(--olive);
    color: var(--white);
    border: none;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-main);
    cursor: pointer;
    transition: background-color 0.3s ease;
 }
 .btn-primary:hover {
    background-color: var(--olive-dark);
 }
 /* --- Footer --- */
 .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    border: none;
    margin-top: 40px;
 }
 .footer__link {
    color: var(--black);
    text-decoration: underline;
    font-size: 0.8rem;
    font-weight: 400;
 }
 /* --- Responsive --- */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
@ -304,31 +198,19 @@ button[type="submit"]:active {
    .image-section {
        min-height: 300px;
    }
 }
    .header {
        flex-direction: column;
        gap: 15px;
    }
-/* --- Snackbar --- */
+    .header-buttons {
        width: 100%;
        flex-direction: column;
    }
-.snackbar {
+    .header-btn {
-    position: fixed;
+        width: 100%;
-    bottom: 30px;
+        text-align: center;
-    left: 50%;
+    }
    transform: translateX(-50%) translateY(100px);
    background: var(--olive);
    color: var(--white);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-main);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    z-index: 9999;
    pointer-events: none;
 }
 .snackbar--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
 }
--- a/css/stylesheet_global.css
+++ b/css/stylesheet_global.css
@ -1,9 +1,7 @@
-/* Font Import */ 
+/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600&display=swap');
 /* Reset / Normalize */
 *,
 *::before,
@ -15,43 +13,54 @@
 /* Colors + Main Font */
 :root {
    --max-width: 1200px;
    --padding: 1.5rem;
    --tomato: #D44B24;
    --tomato-dark: #D44B24;
    --olive: #6B6B05;
    --olive-dark: #5C5C05;
-    --olive-light: #E5E1B7;
+    --olive-light: #C8CC7A;
-    --butter: #FFFBD1;
+    --butter: #F5F1BC;
-    --butter-light: #FFFDE3;
+    --butter-light: #F7F6E6;
    --white: #ffffff;
-    --black: #221C1A;
+    --black: #22211A;
    --brown: #66340d;
    --blue: #3489DA;
    --blue-dark: #1D70BF;
    --error: #FF3B30;
    --font-main: 'Jost', sans-serif;
-    --font-size-base: 16px;
+    --font-size-base: 1rem;
-/* Spacing Scale */
+    /* Spacing Scale */
-    --space-1: 8px;
+    --space-1: 0.5rem;
-    --space-2: 12px;
+    --space-2: 0.75rem;
-    --space-3: 16px;
+    --space-3: 1rem;
-    --space-4: 20px;
+    --space-4: 1.25rem;
-    --space-5: 24px;
+    --space-5: 1.5rem;
-    --space-6: 32px;
+    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
 /* Radius Scale */
    --radius-pill: 999px;
    --radius-md: 20px;
    --radius-lg: 30px;
-/* Letter Spacing Scale */
+    /* Radius Scale */
    --radius-pill: 62.4375rem;
    --radius-sm: 0.5rem;
    --radius-md: 1.5rem;
    --radius-lg: 1.875rem;
    /* Letter Spacing */
    --ls-none: 0;
-    --ls-ui: 0.03em;
+    --ls-sm: 2.5%;
-    --ls-label: 0.045em;
+    --ls-label: 0.045rem;
 }
 /* Base Styles */
 body {
    font-family: var(--font-main);
-    font-size: 1.125em;
+    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--black);
    background-color: var(--butter);
@ -64,98 +73,150 @@ img {
 /* Typography */
-h1, h2 {
+h1, h2, h3, h4, h5, h6 {
    font-family: 'Bagel Fat One';
-    margin-bottom: 0.5em;
+}
 h1 {
    font-size: 2em;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: var(--ls-sm);
    color: var(--brown);
 }
 p {
    font-family: 'Jost', sans-serif;
-    margin-bottom: 1em;
+    margin-bottom: 1rem;
 }
 /* Layout */
 .main-content {
    margin-top: var(--space-8);
 }
 .container {
    width: 90%;
-    max-width: 1200px;
+    max-width: 75rem;
    margin: 0 auto;
 }
 /* Top Navigation */
 .top-nav-wrap {
-    background: var(--butter);
+    position: sticky;
-    padding: 6px 12px;
+    height: 58px;
    top: 1rem;
    z-index: 1000;
    background: none;
    padding: 0 1rem;
 }
 .top-nav {
-    background: rgba(255, 255, 255, 0.95);
+    background: var(--white);
    /*backdrop-filter: blur(3px) saturate(140%);
    -webkit-backdrop-filter: blur(3px) saturate(140%);*/
    border-radius: var(--radius-lg);
-    box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
+    box-shadow: 0 0.1875rem 0.75rem rgba(102, 52, 13, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
-    min-height: 58px;
+    min-height: 3rem;
-    padding: 3px 9px 3px var(--space-5);
+    padding: 0.1875rem 0.75rem 0.1875rem var(--space-5);
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
 }
 .brand {
    display: inline-flex;
    align-items: center;
-    height: 50px;
+    height: 3.125rem;
    text-decoration: none;
 }
 .brand img {
    width: auto;
    height: 100%;
-    max-width: 104px;
+    max-width: 6.5rem;
    display: block;
 }
-.top-nav-links {
+.nav-tab {
    color: var(--black);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: var(--ls-sm);
    line-height: 1;
    text-decoration: none;
 }
 .nav-tab:hover, .nav-tab:active, 
 .nav-tab:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px; 
 }
 .button-small:hover, .button-small:active, 
 .button-small:focus-visible {
    background: var(--olive-dark);
    color: var(--black);
 }
 .nav-tab-links {
    display: flex;
    align-items: center;
-    gap: 16px;
+    gap: var(--space-5);
 }
-.nav-link {
+
-    color: var(--black);
+/* Buttons */
-    line-height: 1.3;
+.button {
-    text-decoration: none;
+    display: inline-block;
-    padding: var(--space-1) var(--space-4);
+    padding: 0.5rem 1.25rem;
-    border-radius: var(--radius-md);
+    background-color: var(--olive);
-    border-width: 2px;
+    border: none;
-    border-color: none;
+    border-radius: var(--radius-lg);
-    border-radius: 20px
+    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--butter-light);
    cursor: pointer;
 }
-.nav-link:hover,
+.button:hover {
-.nav-link:focus-visible {
+    background-color: var(--olive-dark);
    background: var(--olive-light);
    color: var(--black);
 }
-.login-pill {
+
 .button-small {
    background: var(--olive);
-    border-radius: var(--radius-md);
+    color: var(--butter-light);
-    color: var(--butter);
+    font-size: 1.125rem;
-    line-height: 1.3;
+    font-weight: 500;
-    padding: var(--space-1) var(--space-4);
+    letter-spacing: var(--ls-sm);
    line-height: 1;
    text-decoration: none;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-md);
 }
 .button-small:hover, .button-small:active, 
 .button-small:focus-visible {
    background: var(--olive-dark);
    color: var(--butter-light);
 }
 .profile-pill {
-    width: 38px;
+    width: 2.375rem;
-    height: 38px;
+    height: 2.375rem;
-    border-radius: 19px;
+    border-radius: 1.1875rem;
    background: var(--tomato);
    color: var(--butter);
-    font-size: 17px;
+    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: var(--ls-ui);
    line-height: 1.3;
@ -165,30 +226,6 @@ p {
    text-decoration: none;
 }
 /* Components */
 .button {
    display: inline-block;
    padding: 0.5em 1.25em;
    background-color: var(--olive-color);
    font-family: 'Jost', sans-serif;
    font-size: 1em;
    color: var(--butter-light);
    border: none;
    border-radius: 2em;
    cursor: pointer;
 }
 .button:hover {
    background-color: var(--olive-dark);
 }
 /* Navigation */
 .nav {
    display: flex;
    gap: 1rem;
 }
 /* Utilities */
 .text-center {
    text-align: left;
@ -199,7 +236,7 @@ p {
 }
 /* Media Queries (Responsive) */
-@media (max-width: 768px) {
+@media (max-width: 48rem) {
    .container {
        width: 95%;
    }
--- a/datenschutz.html
+++ b/datenschutz.html
@ -1,95 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Invité | Datenschutz</title>
  <link rel="stylesheet" href="css/stylesheet_global.css" />
  <link rel="stylesheet" href="css/index.css" />
 </head>
 <body>
  <header class="top-nav-wrap">
    <div class="top-nav">
      <a class="brand" href="index.html" aria-label="Zur Startseite">
        <img src="assets/logo_invite.svg" alt="Invité">
      </a>
      <nav class="top-nav-links" aria-label="Hauptnavigation">
        <a class="nav-link" href="event_create.html">Event erstellen</a>
        <a class="nav-link nav-link--login" href="login.html">Login</a>
      </nav>
    </div>
  </header>
  <main class="main-content" style="padding: 40px 20px; max-width: 800px; margin: 0 auto;">
    <h1>Datenschutzerklärung</h1>
    <h2>1. Verantwortliche Stelle</h2>
    <p>
      Invité GmbH<br>
      Musterstrasse 12<br>
      7000 Chur<br>
      Schweiz<br>
      E-Mail: datenschutz@invite-cooking.ch
    </p>
    <h2>2. Erhebung und Verarbeitung personenbezogener Daten</h2>
    <p>
      Beim Besuch unserer Website werden automatisch Informationen allgemeiner Natur erfasst.
      Diese Informationen (Server-Logfiles) beinhalten die Art des Webbrowsers, das verwendete
      Betriebssystem, den Domainnamen Ihres Internet-Service-Providers, Ihre IP-Adresse und
      Ähnliches. Sie werden ausschliesslich zur technischen Bereitstellung und Verbesserung
      unserer Website verwendet.
    </p>
    <h2>3. Registrierung und Nutzerkonto</h2>
    <p>
      Bei der Erstellung eines Nutzerkontos erheben wir folgende Daten: Name, E-Mail-Adresse
      und Passwort. Diese Daten werden ausschliesslich zur Bereitstellung unserer Dienste
      verwendet und nicht an Dritte weitergegeben.
    </p>
    <h2>4. Cookies</h2>
    <p>
      Unsere Website verwendet Cookies, um die Nutzererfahrung zu verbessern. Cookies sind
      kleine Textdateien, die auf Ihrem Endgerät gespeichert werden. Sie können die Verwendung
      von Cookies in Ihren Browsereinstellungen deaktivieren. Bitte beachten Sie, dass dadurch
      die Funktionalität der Website eingeschränkt sein kann.
    </p>
    <h2>5. Datenweitergabe an Dritte</h2>
    <p>
      Eine Übermittlung Ihrer persönlichen Daten an Dritte findet nicht statt, es sei denn,
      wir sind gesetzlich dazu verpflichtet oder Sie haben Ihre ausdrückliche Einwilligung
      erteilt.
    </p>
    <h2>6. Datensicherheit</h2>
    <p>
      Wir setzen technische und organisatorische Sicherheitsmassnahmen ein, um Ihre Daten
      gegen zufällige oder vorsätzliche Manipulation, Verlust, Zerstörung oder den Zugriff
      unberechtigter Personen zu schützen. Unsere Sicherheitsmassnahmen werden entsprechend
      der technologischen Entwicklung fortlaufend verbessert.
    </p>
    <h2>7. Ihre Rechte</h2>
    <p>
      Sie haben jederzeit das Recht auf Auskunft über die bei uns gespeicherten
      personenbezogenen Daten. Ebenso haben Sie das Recht auf Berichtigung, Löschung
      oder Einschränkung der Verarbeitung Ihrer Daten. Bitte wenden Sie sich dazu an:
      datenschutz@invite-cooking.ch
    </p>
    <h2>8. Änderungen dieser Datenschutzerklärung</h2>
    <p>
      Wir behalten uns vor, diese Datenschutzerklärung gelegentlich anzupassen, damit sie
      stets den aktuellen rechtlichen Anforderungen entspricht oder um Änderungen unserer
      Leistungen umzusetzen. Für Ihren erneuten Besuch gilt dann die neue Datenschutzerklärung.
    </p>
  </main>
  <footer class="footer">
    <a href="impressum.html" class="footer__link">Impressum</a>
    <a href="datenschutz.html" class="footer__link">Datenschutz</a>
  </footer>
 </body>
 </html>
--- a/event_create.html
+++ b/event_create.html
@ -9,26 +9,26 @@
  <link rel="stylesheet" href="css/event_create.css" />
  <!-- Globales Stylesheet -->
  <link rel="stylesheet" href="css/stylesheet_global.css">
 </head>
 <body>
-<!-- Top navigation: global entry points and current page indicator -->
+<!-- Top Navigation mit Seitenlinks -->
 <header class="top-nav-wrap">
    <div class="top-nav">
        <a class="brand" href="index.html" aria-label="Zur Startseite">
            <img src="assets/logo_invite.svg" alt="Invite Logo">
        </a>
-        <nav class="top-nav-links" aria-label="Hauptnavigation">
+        <nav class="nav-tab-links" aria-label="Hauptnavigation">
-            <a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a>
+            <a class="nav-tab" href="event_overview.html">Event finden</a>
-            <a class="nav-link" href="event_create.html">Event erstellen</a>
+            <a class="nav-tab" href="event_create.html">Event erstellen</a>
-            <a class="profile-pill" href="login.html" aria-label="Profil">M</a>
+            <a class="button-small" href="login.html" aria-label="Profil">Login</a>
        </nav>
    </div>
 </header>
  <main class="event-create-page">
    <section class="event-flow-header" aria-label="Event erstellen Aktionen">
      <a href="event_overview.html" class="button button--ghost">Abbrechen</a>
    </section>
    <form id="eventForm" class="event-form" novalidate>
@ -43,16 +43,19 @@
            <h1 id="intro-title">Hey <span id="username">{{username}}</span>, was hast du vor?</h1>
            <p class="step-text">
              Erzähl uns von deiner Idee – vom Essen bis zur Stimmung. Ob Dinner, Brunch
-              oder etwas ganz Eigenes – wir helfen dir dabei, dein Event Schritt für Schritt aufzubauen.
+              oder etwas ganz Eigenes – wir helfen dir dabei, dein Event in sieben Schritten aufzubauen.
            </p>
            <button type="button" class="button button--primary button--intro" data-start-flow>
              Los geht’s!
            </button>
          </div>
-          <aside class="intro-card" aria-label="Hinweis zur Event-Erstellung">
+          <aside class="intro-card intro-card--image" aria-label="Stimmungsbild zur Event-Erstellung">
-            <div class="intro-card-emoji" aria-hidden="true">🍽️</div>
+            <img
-            <p>Aus einer Idee wird Schritt für Schritt dein Event.</p>
+              class="intro-image"
              src="assets/eventcreate_foodtable.jpg"
              alt="Ein gedeckter Tisch mit gemeinsamem Essen"
            />
          </aside>
        </div>
      </section>
@ -69,11 +72,6 @@
          </div>
          <div class="step-fields">
            <div class="form-field">
              <label for="eventTitle">Wie soll dein Event heißen?</label>
              <input type="text" id="eventTitle" name="eventTitle" required />
            </div>
            <fieldset class="form-field">
              <legend>Art des Essens / Eventtyp</legend>
@ -99,47 +97,7 @@
                </label>
              </div>
            </fieldset>
          </div>
        </div>
      </section>
      <section class="step" data-step="2" aria-labelledby="step2-title">
        <div class="step-layout">
          <div class="step-copy">
            <p class="step-kicker">Schritt 2</p>
            <h2 id="step2-title">Was kommt auf den Tisch?</h2>
            <p class="step-text">
              Mach uns neugierig. Was kochst du – und wie fühlt sich dein Abend an?
              Hier entsteht die Geschichte, auf die sich deine Gäste freuen.
            </p>
          </div>
          <div class="step-fields">
            <div class="form-field">
              <label for="menuDescription">Was ist das Menü?</label>
              <textarea id="menuDescription" name="menuDescription" rows="5" required></textarea>
            </div>
            <div class="form-field">
              <label for="eventDescription">Beschreibung des Event-Abends</label>
              <textarea id="eventDescription" name="eventDescription" rows="6" required></textarea>
            </div>
          </div>
        </div>
      </section>
      <section class="step" data-step="3" aria-labelledby="step3-title">
        <div class="step-layout">
          <div class="step-copy">
            <p class="step-kicker">Schritt 3</p>
            <h2 id="step3-title">Wen lädst du ein?</h2>
            <p class="step-text">
              Wie viele Gäste passen zu deinem Event? Und gibt es etwas, das du bei
              Ernährung oder Unverträglichkeiten beachten möchtest?
            </p>
          </div>
          <div class="step-fields">
            <fieldset class="form-field">
              <legend>Maximale Personenanzahl</legend>
@ -171,7 +129,21 @@
                </button>
              </div>
            </fieldset>
          </div>
        </div>
      </section>
      <section class="step" data-step="2" aria-labelledby="step2-title">
        <div class="step-layout">
          <div class="step-copy">
            <p class="step-kicker">Schritt 2</p>
            <h2 id="step2-title">Was kommt auf den Tisch?</h2>
            <p class="step-text">
              Mach uns neugierig. Was gibt es zu essen? Gibt es eine bestimmte Ernährungsform oder ein Motto? Je mehr du verrätst, desto besser können sich deine Gäste auf dein Event freuen.
            </p>
          </div>
          <div class="step-fields">
            <fieldset class="form-field">
              <legend>Ernährungsform</legend>
@ -194,6 +166,25 @@
              </div>
            </fieldset>
            <div class="form-field">
              <label for="menuDescription">Was ist das Menü?</label>
              <textarea id="menuDescription" name="menuDescription" rows="5" required></textarea>
            </div>
          </div>
        </div>
      </section>
      <section class="step" data-step="3" aria-labelledby="step3-title">
        <div class="step-layout">
          <div class="step-copy">
            <p class="step-kicker">Schritt 3</p>
            <h2 id="step3-title">Gibt es etwas zu beachten?</h2>
            <p class="step-text">
              Gibt es Allergien, Unverträglichkeiten oder andere Hinweise, die für dein Event wichtig sind? So wissen deine Gäste gleich, worauf sie sich einstellen können.
            </p>
          </div>
          <div class="step-fields">
            <fieldset class="form-field">
              <legend>Allergene / Unverträglichkeiten</legend>
              <p class="field-hint">Optional – nur auswählen, wenn es für dein Event relevant ist.</p>
@ -214,12 +205,12 @@
                  <span>ohne Nüsse</span>
                </label>
              </div>
              <div class="form-field">
                <label for="allergiesOther">Weitere Unverträglichkeiten oder Hinweise (optional)</label>
                <textarea id="allergiesOther" name="allergiesOther" rows="3"></textarea>
              </div>
            </fieldset>
            <div class="form-field">
              <label for="allergiesOther">Weitere Unverträglichkeiten oder Hinweise (optional)</label>
              <textarea id="allergiesOther" name="allergiesOther" rows="3"></textarea>
            </div>
          </div>
        </div>
      </section>
@ -230,8 +221,7 @@
            <p class="step-kicker">Schritt 4</p>
            <h2 id="step4-title">Wann findet dein Event statt?</h2>
            <p class="step-text">
-              Wähle Datum und Uhrzeit – und sag uns, wo dein Event stattfindet.
+              Wähle Datum und Uhrzeit für dein Event. So können deine Gäste direkt einschätzen, ob der Termin für sie passt.
              Keine Sorge: Die genaue Adresse sehen Gäste erst nach der Buchung.
            </p>
          </div>
@ -247,7 +237,21 @@
                <input type="time" id="eventTime" name="eventTime" required />
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="step" data-step="5" aria-labelledby="step5-title">
        <div class="step-layout">
          <div class="step-copy">
            <p class="step-kicker">Schritt 5</p>
            <h2 id="step5-title">Wo findet dein Event statt?</h2>
            <p class="step-text">
              Sag uns, wo dein Event stattfindet. Keine Sorge: Die genaue Adresse sehen Gäste erst nach der Buchung.
            </p>
          </div>
          <div class="step-fields">
            <div class="form-field">
              <label for="eventAddress">Adresse</label>
              <input type="text" id="eventAddress" name="eventAddress" autocomplete="street-address" required />
@ -261,81 +265,111 @@
        </div>
      </section>
-      <section class="step" data-step="5" aria-labelledby="step5-title">
+      <section class="step" data-step="6" aria-labelledby="step6-title">
        <div class="step-layout">
          <div class="step-copy">
-            <p class="step-kicker">Schritt 5</p>
+            <p class="step-kicker">Schritt 6</p>
-            <h2 id="step5-title">Alles bereit für deine Gäste?</h2>
+            <h2 id="step6-title">Gib deinem Event den letzten Schliff.</h2>
            <p class="step-text">
-              Schau dir dein Event nochmal in Ruhe an. Passt alles?
+              Jetzt bekommt dein Event seinen Namen und die Atmosphäre, die Lust aufs Dabeisein macht.
-              Dann kannst du es jetzt veröffentlichen und Gäste einladen.
+              Ein klarer Titel (z.B. "Italienische Tavolata") und ein guter Beschreibungstext (Ablauf etc.) machen den Unterschied.
            </p>
          </div>
          <div class="step-fields">
            <div class="form-field">
              <label for="eventTitle">Wie soll dein Event heißen?</label>
              <input type="text" id="eventTitle" name="eventTitle" required />
            </div>
            <div class="form-field">
              <label for="eventDescription">Beschreibung des Event-Abends</label>
              <textarea id="eventDescription" name="eventDescription" rows="6" required></textarea>
            </div>
          </div>
        </div>
      </section>
      <section class="step" data-step="7" aria-labelledby="step7-title">
        <div class="step-layout">
          <div class="step-copy">
            <p class="step-kicker">Schritt 7</p>
            <h2 id="step7-title">Dein Event auf einen Blick.</h2>
            <p class="step-text">
              Schau dir alle Details nochmal in Ruhe an. Wenn alles passt,
              kannst du dein Event jetzt veröffentlichen und Gäste einladen.
            </p>
          </div>
          <div class="review-card" aria-live="polite">
            <dl class="review-list">
-              <div class="review-item">
+              <div class="review-item" data-edit-step="1" data-edit-field="eventType" role="button" tabindex="0" aria-label="Eventtyp bearbeiten">
                <dt>Eventtitel</dt>
                <dd data-review="eventTitle">–</dd>
              </div>
              <div class="review-item">
                <dt>Eventtyp</dt>
                <dd data-review="eventType">–</dd>
              </div>
-              <div class="review-item">
+              <div class="review-item" data-edit-step="1" data-edit-field="maxGuests" role="button" tabindex="0" aria-label="Maximale Personenanzahl bearbeiten">
                <dt>Menü</dt>
                <dd data-review="menuDescription">–</dd>
              </div>
              <div class="review-item">
                <dt>Event-Abend</dt>
                <dd data-review="eventDescription">–</dd>
              </div>
              <div class="review-item">
                <dt>Maximale Personenanzahl</dt>
                <dd data-review="maxGuests">–</dd>
              </div>
-              <div class="review-item">
+              <div class="review-item" data-edit-step="2" data-edit-field="dietType" role="button" tabindex="0" aria-label="Ernährungsform bearbeiten">
                <dt>Ernährungsform</dt>
                <dd data-review="dietType">–</dd>
              </div>
-              <div class="review-item">
+              <div class="review-item" data-edit-step="2" data-edit-field="menuDescription" role="button" tabindex="0" aria-label="Menü bearbeiten">
                <dt>Menü</dt>
                <dd data-review="menuDescription">–</dd>
              </div>
              <div class="review-item" data-edit-step="3" data-edit-field="allergiesOther" role="button" tabindex="0" aria-label="Allergene und Unverträglichkeiten bearbeiten">
                <dt>Allergene / Unverträglichkeiten</dt>
                <dd data-review="allergies">Keine Angabe</dd>
              </div>
-              <div class="review-item">
+              <div class="review-item" data-edit-step="4" data-edit-field="eventDate" role="button" tabindex="0" aria-label="Datum bearbeiten">
                <dt>Datum</dt>
                <dd data-review="eventDate">–</dd>
              </div>
-              <div class="review-item">
+              <div class="review-item" data-edit-step="4" data-edit-field="eventTime" role="button" tabindex="0" aria-label="Uhrzeit bearbeiten">
                <dt>Uhrzeit</dt>
                <dd data-review="eventTime">–</dd>
              </div>
-              <div class="review-item">
+              <div class="review-item" data-edit-step="5" data-edit-field="eventAddress" role="button" tabindex="0" aria-label="Adresse bearbeiten">
                <dt>Adresse</dt>
                <dd data-review="eventAddress">–</dd>
              </div>
-              <div class="review-item">
+              <div class="review-item" data-edit-step="5" data-edit-field="eventCity" role="button" tabindex="0" aria-label="Ort bearbeiten">
                <dt>Ort</dt>
                <dd data-review="eventCity">–</dd>
              </div>
              <div class="review-item" data-edit-step="6" data-edit-field="eventTitle" role="button" tabindex="0" aria-label="Eventtitel bearbeiten">
                <dt>Eventtitel</dt>
                <dd data-review="eventTitle">–</dd>
              </div>
              <div class="review-item" data-edit-step="6" data-edit-field="eventDescription" role="button" tabindex="0" aria-label="Event-Abend bearbeiten">
                <dt>Event-Abend</dt>
                <dd data-review="eventDescription">–</dd>
              </div>
            </dl>
          </div>
        </div>
      </section>
      <div class="flow-footer" id="flowFooter" hidden>
-        <div class="progress" aria-hidden="true">
+        <div class="progress-wrap" aria-hidden="true">
-          <span id="progressBar" class="progress-bar"></span>
+          <div class="progress-marker" id="progressMarker">
            <span class="progress-marker__circle" id="progressMarkerLabel">1</span>
          </div>
          <div class="progress">
            <span id="progressBar" class="progress-bar"></span>
          </div>
        </div>
        <div class="flow-actions">
@ -347,14 +381,38 @@
          </div>
        </div>
      </div>
      <section
        id="submissionSuccess"
        class="submission-success"
        aria-labelledby="success-title"
        aria-live="polite"
        hidden
      >
        <div class="step-layout">
          <div class="step-copy">
            <p class="step-kicker">Event erstellt</p>
            <h2 id="success-title">Dein Event ist ready.</h2>
            <p class="step-text">
              Sieht gut aus: Deine Idee ist jetzt live und bereit für Gäste.
              Im Profil kannst du dein Event anschauen, verwalten oder direkt das nächste planen.
            </p>
          </div>
          <div class="review-card review-card--success">
            <div class="submission-success-actions">
              <a class="button button--primary" href="event_overview.html">Weiter zu deinem Profil</a>
            </div>
          </div>
        </div>
      </section>
    </form>
  </main>
-  <footer class="footer">
+  <footer class="site-footer">
-    <a href="impressum.html" class="footer__link">Impressum</a>
+    <p>&copy; Social Cooking</p>
    <a href="datenschutz.html" class="footer__link">Datenschutz</a>
  </footer>
  <script src="js/event_create.js"></script>
 </body>
-</html>
+</html>
--- a/event_detail.html
+++ b/event_detail.html
@ -4,24 +4,24 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event-Detail</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Jost:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/stylesheet_global.css">
    <link rel="stylesheet" href="css/event_overview.css">
 </head>
 <body>
-<!-- Top navigation: shared with overview, highlights current area -->
+    <!-- Stylesheet für diese Seite-->
    <link rel="stylesheet" href="css/event_overview.css">
    <!-- Globales Stylesheet -->
    <link rel="stylesheet" href="css/stylesheet_global.css">
 </head>
 <body>
 <!-- Top Navigation mit Seitenlinks -->
 <header class="top-nav-wrap">
    <div class="top-nav">
        <a class="brand" href="index.html" aria-label="Zur Startseite">
            <img src="assets/logo_invite.svg" alt="Invite Logo">
        </a>
-        <nav class="top-nav-links" aria-label="Hauptnavigation">
+        <nav class="nav-tab-links" aria-label="Hauptnavigation">
-            <a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a>
+            <a class="nav-tab" href="event_overview.html">Event finden</a>
-            <a class="nav-link" href="event_create.html">Event erstellen</a>
+            <a class="nav-tab" href="event_create.html">Event erstellen</a>
-            <a class="profile-pill" href="login.html" aria-label="Profil">M</a>
+            <a class="button-small" href="login.html" aria-label="Profil">Login</a>
        </nav>
    </div>
 </header>
@ -36,10 +36,6 @@
 <!-- Page logic: fetch by URL id, compose detail UI, handle gallery lightbox -->
 <script src="js/event_detail.js"></script>
 <footer class="footer">
  <a href="impressum.html" class="footer__link">Impressum</a>
  <a href="datenschutz.html" class="footer__link">Datenschutz</a>
 </footer>
 </body>
 </html>
--- a/event_overview.html
+++ b/event_overview.html
@ -6,23 +6,22 @@
    <title>Event-Overview</title>
    <!-- Stylesheet für diese Seite-->
    <link rel="stylesheet" href="css/stylesheet_global.css">
    <!-- Globales Stylesheet -->
    <link rel="stylesheet" href="css/event_overview.css">
-
+    <!-- Globales Stylesheet -->
-
+    <link rel="stylesheet" href="css/stylesheet_global.css">
 </head>
 <body>
-<!-- Top navigation: global entry points and current page indicator -->
+<!-- Top Navigation mit Seitenlinks -->
 <header class="top-nav-wrap">
    <div class="top-nav">
        <a class="brand" href="index.html" aria-label="Zur Startseite">
            <img src="assets/logo_invite.svg" alt="Invite Logo">
        </a>
-        <nav class="top-nav-links" aria-label="Hauptnavigation">
+        <nav class="nav-tab-links" aria-label="Hauptnavigation">
-            <a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a>
+            <a class="nav-tab" href="event_overview.html">Event finden</a>
-            <a class="nav-link" href="event_create.html">Event erstellen</a>
+            <a class="nav-tab" href="event_create.html">Event erstellen</a>
-            <a class="profile-pill" href="login.html" aria-label="Profil">M</a>
+            <a class="button-small" href="login.html" aria-label="Profil">Login</a>
        </nav>
    </div>
 </header>
@ -68,9 +67,5 @@
 <!-- Page logic: data loading, filtering and card rendering -->
 <script src="js/event_overview.js"></script>
 <footer class="footer">
  <a href="impressum.html" class="footer__link">Impressum</a>
  <a href="datenschutz.html" class="footer__link">Datenschutz</a>
 </footer>
 </body>
 </html>
--- a/impressum.html
+++ b/impressum.html
@ -1,69 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Invité | Impressum</title>
  <link rel="stylesheet" href="css/stylesheet_global.css" />
  <link rel="stylesheet" href="css/index.css" />
 </head>
 <body>
  <header class="top-nav-wrap">
    <div class="top-nav">
      <a class="brand" href="index.html" aria-label="Zur Startseite">
        <img src="assets/logo_invite.svg" alt="Invité">
      </a>
      <nav class="top-nav-links" aria-label="Hauptnavigation">
        <a class="nav-link" href="event_create.html">Event erstellen</a>
        <a class="nav-link nav-link--login" href="login.html">Login</a>
      </nav>
    </div>
  </header>
  <main class="main-content" style="padding: 40px 20px; max-width: 800px; margin: 0 auto;">
    <h1>Impressum</h1>
    <h2>Angaben gemäss § 5 TMG</h2>
    <p>
      Invité GmbH<br>
      Musterstrasse 12<br>
      7000 Chur<br>
      Schweiz
    </p>
    <h2>Kontakt</h2>
    <p>
      Telefon: +41 81 123 45 67<br>
      E-Mail: info@invite-cooking.ch
    </p>
    <h2>Vertretungsberechtigte Person</h2>
    <p>Max Mustermann, Geschäftsführer</p>
    <h2>Handelsregistereintrag</h2>
    <p>
      Eingetragen im Handelsregister des Kantons Graubünden<br>
      Firmennummer: CHE-123.456.789
    </p>
    <h2>Haftungsausschluss</h2>
    <p>
      Die Inhalte dieser Website wurden mit grösster Sorgfalt erstellt. Für die Richtigkeit,
      Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen.
    </p>
    <h2>Urheberrecht</h2>
    <p>
      Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen
      dem schweizerischen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede
      Art der Verwertung ausserhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen
      Zustimmung des jeweiligen Autors bzw. Erstellers.
    </p>
  </main>
  <footer class="footer">
    <a href="impressum.html" class="footer__link">Impressum</a>
    <a href="datenschutz.html" class="footer__link">Datenschutz</a>
  </footer>
 </body>
 </html>
--- a/index.html
+++ b/index.html
@ -4,24 +4,30 @@
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Invité | Events entdecken</title>
  <link rel="stylesheet" href="css/stylesheet_global.css" />
  <link rel="stylesheet" href="css/index.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-dU7ZrF1pFq5kVnPzlV9+04YhARzNjCX5Q5P1shgMpuN4s5I8mI8QD4981h7kYtV7sSgNldR0z5pZW5bS2ZpY3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body>
    <!-- Header: matches event detail/create with invite logo and pill navigation links -->
    <header class="top-nav-wrap">
      <div class="top-nav">
        <a class="brand" href="index.html" aria-label="Zur Startseite">
          <img src="assets/logo_invite.svg" alt="Invité">
        </a>
-        <nav class="top-nav-links" aria-label="Hauptnavigation">
+  <!-- Stylesheet für diese Seite-->
-          <a class="nav-link" href="event_create.html">Event erstellen</a>
+  <link rel="stylesheet" href="css/landingpage.css?v=2" />
-          <a class="nav-link nav-link--login" href="login.html">Login</a>
+  <!-- Globales Stylesheet -->
  <link rel="stylesheet" href="css/stylesheet_global.css?v=2">
  <!-- Font Awesome
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-dU7ZrF1pFq5kVnPzlV9+04YhARzNjCX5Q5P1shgMpuN4s5I8mI8QD4981h7kYtV7sSgNldR0z5pZW5bS2ZpY3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
 </head>
 <body>
 <!-- Top Navigation mit Seitenlinks -->
 <header class="top-nav-wrap">
    <div class="top-nav">
        <a class="brand" href="index.html" aria-label="Zur Startseite">
            <img src="assets/logo_invite.svg" alt="Invite Logo">
        </a>
        <nav class="nav-tab-links" aria-label="Hauptnavigation">
            <a class="nav-tab" href="event_overview.html">Event finden</a>
            <a class="nav-tab" href="event_create.html">Event erstellen</a>
            <a class="button-small" href="login.html" aria-label="Profil">Login</a>
        </nav>
-      </div>
+    </div>
-    </header>
+</header>
    <main class="main-content">
      <!-- Hero: uses .hero, .btn, .image-card, and .hero-image for a polished first impression -->
@ -34,7 +40,7 @@
        <div class="hero__right">
          <div class="image-card">
-            <img class="hero-image" src="assets/index_ingredients.jpg" alt="Startpage Ingredients" />
+            <img class="hero-image" src="assets/Startpage ingredients.jpg" alt="Startpage Ingredients" />
          </div>
        </div>
      </section>
@ -46,65 +52,62 @@
        <div class="how-it-works__steps">
          <article class="how-step how-step--numbered">
            <span class="how-step__corner-number how-step__corner-number--brown">1</span>
-            <img src="assets/icon_register.png" alt="Register" class="how-step__png how-step__png--brown" />
+            <img src="assets/register icon.png" alt="Register" class="how-step__png how-step__png--brown" />
            <p class="how-step__label how-step__label--brown how-step__label--big">Anmelden</p>
          </article>
          <article class="how-step how-step--numbered">
            <span class="how-step__corner-number how-step__corner-number--brown">2</span>
-            <img src="assets/icon_add-event.png" alt="Event erstellen" class="how-step__png how-step__png--brown" />
+            <img src="assets/add-event icon.png" alt="Event erstellen" class="how-step__png how-step__png--brown" />
            <p class="how-step__label how-step__label--brown how-step__label--big">Event erstellen</p>
          </article>
          <article class="how-step how-step--numbered">
            <span class="how-step__corner-number how-step__corner-number--brown">3</span>
-            <img src="assets/icon_Plate.png" alt="Gemeinsam essen" class="how-step__png how-step__png--brown" />
+            <img src="assets/Plate icon.png" alt="Gemeinsam essen" class="how-step__png how-step__png--brown" />
            <p class="how-step__label how-step__label--brown how-step__label--big">Gemeinsam essen</p>
          </article>
        </div>
      </section>
      <!-- Main Content: uses .gallery, .gallery__carousel, .gallery__track, .gallery__item, and .gallery__info to present event carousel content -->
-      <section class="gallery" aria-label="Bildergalerie" aria-roledescription="Karussell">
+      <section class="gallery">
        <div class="gallery__carousel">
          <button type="button" class="gallery__arrow gallery__arrow--prev" aria-label="Vorheriges Bild">
            <i class="fas fa-chevron-left"></i>
          </button>
-          <div class="gallery__track" aria-live="polite">
+          <div class="gallery__track">
-            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 1 von 12">
+            <article class="gallery__item">
-              <img src="assets/index_Red checkered social eating.jpg" alt="Red checkered social eating">
+              <img src="assets/Red checkered social eating.jpg" alt="Red checkered social eating">
            </article>
-            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 2 von 12">
+            <article class="gallery__item">
-              <img src="assets/index_Pasta and many forks.jpg" alt="Pasta and many forks">
+              <img src="assets/Pasta and many forks.jpg" alt="Pasta and many forks">
            </article>
-            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 3 von 12">
+            <article class="gallery__item">
-              <img src="assets/index_Zoomed in asian eating.jpg" alt="Zoomed in asian eating">
+              <img src="assets/Zoomed in asian eating.jpg" alt="Zoomed in asian eating">
            </article>
-            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 4 von 12">
+            <article class="gallery__item">
-              <img src="assets/index_Burger eating together.jpg" alt="Burger eating together">
+              <img src="assets/Burger eating together.jpg" alt="Burger eating together">
            </article>
-            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 5 von 12">
+            <article class="gallery__item">
-              <img src="assets/index_Cake cutting figs.jpg" alt="Cake cutting figs">
+              <img src="assets/Cake cutting figs.jpg" alt="Cake cutting figs">
            </article>
-            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 6 von 12">
+            <article class="gallery__item">
-              <img src="assets/index_Cooking woman at home.jpg" alt="Cooking woman at home">
+              <img src="assets/Cooking woman at home.jpg" alt="Cooking woman at home">
            </article>
-            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 7 von 12">
+            <article class="gallery__item">
-              <img src="assets/index_Eating and laughing girls.jpg" alt="Eating and laughing girls">
+              <img src="assets/Eating and laughing girls.jpg" alt="Eating and laughing girls">
            </article>
-            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 8 von 12">
+            <article class="gallery__item">
-              <img src="assets/index_Pasta in cheese.jpg" alt="Pasta in cheese">
+              <img src="assets/Pasta in cheese.jpg" alt="Pasta in cheese">
            </article>
-            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 9 von 12">
+            <article class="gallery__item">
-              <img src="assets/index_Salad roommates.jpg" alt="Salad roommates">
+              <img src="assets/Salad roommates.jpg" alt="Salad roommates">
            </article>
-            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 10 von 12">
+            <article class="gallery__item">
-              <img src="assets/index_Sharing food table.jpg" alt="Sharing food table">
+              <img src="assets/Sharing food table.jpg" alt="Sharing food table">
            </article>
-            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 11 von 12">
+            <article class="gallery__item">
-              <img src="assets/index_Spicy food zoomed.jpg" alt="Spicy food zoomed">
+              <img src="assets/Spicy food zoomed.jpg" alt="Spicy food zoomed">
            </article>
            <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 12 von 12">
              <img src="assets/index_cooking.jpg" alt="Cooking">
            </article>
          </div>
@ -113,22 +116,19 @@
          </button>
        </div>
        <div class="gallery__dots" role="tablist" aria-label="Seite auswählen"></div>
        <div class="gallery__info">
-          <a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="gallery__handle" style="display: flex; align-items: center; gap: 16px; text-decoration: none;">
+          <div class="gallery__handle" style="display: flex; align-items: center; gap: 16px;">
-            <img src="assets/Icon_instagram.png" alt="Instagram" class="gallery__icon--instagram" />
+            <img src="assets/instagram.png" alt="Instagram" class="gallery__icon--instagram" />
            <img src="assets/logo_invite.svg" alt="Invité Logo" class="gallery__icon--invite" />
-          </a>
+          </div>
        </div>
      </section>
    </main>
    <script src="js/index-carousel.js"></script>
    <footer class="footer">
-      <a href="impressum.html" class="footer__link">Impressum</a>
+      <a href="#" class="footer__link">Impressum</a>
      <a href="datenschutz.html" class="footer__link">Datenschutz</a>
    </footer>
 </body>
 </html>
--- a/js/event_create.js
+++ b/js/event_create.js
@ -8,9 +8,13 @@ const steps = Array.from(document.querySelectorAll(".step"));
 const backButton = document.getElementById("backButton");
 const nextButton = document.getElementById("nextButton");
 const progressBar = document.getElementById("progressBar");
 const progressMarker = document.getElementById("progressMarker");
 const progressMarkerLabel = document.getElementById("progressMarkerLabel");
 const errorMessage = document.getElementById("errorMessage");
 const usernameElement = document.getElementById("username");
 const flowFooter = document.getElementById("flowFooter");
 const submissionSuccess = document.getElementById("submissionSuccess");
 const EVENTS_STORAGE_KEY = "socialCookingEvents";
 // =============================
 // STATE: aktueller Schritt im Flow
@ -27,7 +31,9 @@ const nextLabels = {
  2: "Weiter",
  3: "Weiter",
  4: "Weiter",
-  5: "Event veröffentlichen"
+  5: "Weiter",
  6: "Weiter",
  7: "Event veröffentlichen"
 };
 // Demo-Wert: Später könnte der Name z. B. aus einem User-Profil kommen
@ -57,6 +63,39 @@ function setErrorMessage(message = "") {
  errorMessage.textContent = message;
 }
 /**
 * Entfernt alle Fehlermarkierungen innerhalb eines Schritts.
 */
 function clearStepInvalidState(stepIndex) {
  if (!steps[stepIndex]) return;
  steps[stepIndex]
    .querySelectorAll(".field-invalid, .option-card--invalid")
    .forEach(element => {
      element.classList.remove("field-invalid", "option-card--invalid");
    });
 }
 /**
 * Markiert ein einzelnes Feld visuell als ungültig.
 */
 function markFieldInvalid(field) {
  field.classList.add("field-invalid");
 }
 /**
 * Markiert eine ganze Radio-Gruppe visuell als ungültig.
 */
 function markRadioGroupInvalid(group) {
  group.forEach(field => {
    const card = field.closest(".option-card");
    if (card) {
      card.classList.add("option-card--invalid");
    }
  });
 }
 // =============================
 // STEP 2: Schritt anzeigen & Oberfläche aktualisieren
@ -71,6 +110,8 @@ function setErrorMessage(message = "") {
 */
 function showStep(index) {
  currentStep = index;
  submissionSuccess.hidden = true;
  clearStepInvalidState(index);
  // Nur der aktuelle Schritt soll sichtbar sein
  steps.forEach((step, stepIndex) => {
@ -115,12 +156,21 @@ function updateFlowVisibility(stepIndex) {
 */
 function updateProgressBar(stepIndex, totalStepIndex) {
  let progress = 0;
  let markerPosition = 0;
  let markerStep = 1;
  let markerTransform = "translateX(-50%)";
  if (stepIndex > 0) {
    progress = ((stepIndex - 1) / (totalStepIndex - 1)) * 100;
    markerPosition = ((stepIndex - 1) / (totalStepIndex - 1)) * 100;
    markerStep = stepIndex;
  }
  progressBar.style.width = `${progress}%`;
  progressMarker.style.left = `${markerPosition}%`;
  progressMarker.style.transform = markerTransform;
  progressMarker.hidden = stepIndex === 0;
  progressMarkerLabel.textContent = String(markerStep);
 }
@ -225,7 +275,18 @@ function buildAllergiesReviewValue() {
 * und schreibt sie gesammelt in die Review-Ansicht.
 */
 function updateReview() {
-  const reviewValues = {
+  const reviewValues = getReviewValues();
  Object.entries(reviewValues).forEach(([key, value]) => {
    updateReviewField(key, value);
  });
 }
 /**
 * Liest alle wichtigen Formularwerte gesammelt aus.
 */
 function getReviewValues() {
  return {
    eventTitle: getFieldValue("eventTitle"),
    eventType: getFieldValue("eventType"),
    menuDescription: getFieldValue("menuDescription"),
@ -238,12 +299,137 @@ function updateReview() {
    eventAddress: getFieldValue("eventAddress"),
    eventCity: getFieldValue("eventCity")
  };
  Object.entries(reviewValues).forEach(([key, value]) => {
    updateReviewField(key, value);
  });
 }
 /**
 * Liest lokal gespeicherte Events robust aus dem Browser-Storage.
 */
 function getStoredEvents() {
  try {
    const stored = localStorage.getItem(EVENTS_STORAGE_KEY);
    return stored ? JSON.parse(stored) : [];
  } catch (error) {
    console.error("Lokale Events konnten nicht gelesen werden:", error);
    return [];
  }
 }
 /**
 * Speichert die komplette Eventliste zurück in den Browser-Storage.
 */
 function setStoredEvents(events) {
  localStorage.setItem(EVENTS_STORAGE_KEY, JSON.stringify(events));
 }
 /**
 * Formatiert ein ISO-Datum in das bestehende Eventformat der Demo-Daten.
 */
 function formatDateForStorage(value) {
  if (!value) return "";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  const monthMap = {
    0: "JAN",
    1: "FEB",
    2: "MRZ",
    3: "APR",
    4: "MAI",
    5: "JUN",
    6: "JUL",
    7: "AUG",
    8: "SEP",
    9: "OKT",
    10: "NOV",
    11: "DEZ"
  };
  const day = String(date.getDate()).padStart(2, "0");
  const month = monthMap[date.getMonth()];
  const year = date.getFullYear();
  return `${day}. ${month}. ${year}`;
 }
 /**
 * Formatiert die Zeit in das bestehende Eventformat der Demo-Daten.
 */
 function formatTimeForStorage(value) {
  return value ? `${value} UHR` : "";
 }
 /**
 * Zerlegt das Menü-Textarea in saubere Listenpunkte.
 */
 function buildMenuItems(value) {
  return value
    .split("\n")
    .map(item => item.replace(/^[•-]\s*/, "").trim())
    .filter(Boolean);
 }
 /**
 * Leitet den gewählten Eventtyp in die Kategorien der Übersicht über.
 */
 function mapEventTypeToCategory(value) {
  const categoryMap = {
    Brunch: "BRUNCH",
    Lunch: "LUNCH",
    Dinner: "DINNER",
    "Kaffee + Kuchen": "COFFEE"
  };
  return categoryMap[value] || value.toUpperCase();
 }
 /**
 * Baut aus den Formulardaten ein lokal speicherbares Event-Objekt.
 */
 function buildStoredEvent() {
  const eventType = getFieldValue("eventType");
  const dietType = getFieldValue("dietType");
  const menuDescription = form.elements.menuDescription.value.trim();
  const eventDescription = form.elements.eventDescription.value.trim();
  const eventDate = form.elements.eventDate.value;
  const eventTime = form.elements.eventTime.value;
  const eventCity = form.elements.eventCity.value.trim();
  return {
    id: Date.now(),
    title: form.elements.eventTitle.value.trim(),
    location: eventCity,
    address: form.elements.eventAddress.value.trim(),
    date: formatDateForStorage(eventDate),
    time: formatTimeForStorage(eventTime),
    category: mapEventTypeToCategory(eventType),
    diet: dietType,
    spots: Number(form.elements.maxGuests.value),
    host: {
      name: usernameElement.textContent.trim() || "Host",
      initial: (usernameElement.textContent.trim().charAt(0) || "H").toUpperCase()
    },
    hostMessage: [eventDescription],
    menu: buildMenuItems(menuDescription),
    specifications: getCheckboxValues("allergies") === "Keine Angabe"
      ? []
      : getCheckboxValues("allergies").split(", ").filter(Boolean),
    allergiesNote: form.elements.allergiesOther.value.trim(),
    participants: [usernameElement.textContent.trim() || "Host"],
    gallery: [],
    createdAt: new Date().toISOString(),
    source: "local"
  };
 }
 /**
 * Speichert das aktuell erstellte Event lokal im Browser.
 */
 function saveCurrentEvent() {
  const storedEvents = getStoredEvents();
  const nextEvents = [buildStoredEvent(), ...storedEvents];
  setStoredEvents(nextEvents);
 }
 // =============================
 // STEP 5: Validierung
@ -263,6 +449,7 @@ function validateCurrentStep() {
  if (currentStep === 0 || currentStep === lastStep) return true;
  const fields = getStepFields(currentStep);
  clearStepInvalidState(currentStep);
  // Zuerst Radio-Gruppen prüfen
  const radioCheck = validateRadioGroups(fields);
@ -297,6 +484,7 @@ function validateRadioGroups(fields) {
    const selected = group.some(f => f.checked);
    if (required && !selected) {
      markRadioGroupInvalid(group);
      return {
        isValid: false,
        message: "Bitte wähle eine Option aus."
@ -318,6 +506,7 @@ function validateRequiredFields(fields) {
    if (field.type === "radio" || field.type === "checkbox") continue;
    if (!field.checkValidity()) {
      markFieldInvalid(field);
      return {
        isValid: false,
        message: "Bitte fülle alle Pflichtfelder aus."
@ -374,11 +563,12 @@ function handleNextClick() {
 */
 function handleFormSubmit(event) {
  event.preventDefault();
-  // 1. Feedback geben
+  saveCurrentEvent();
-  alert("Dein Event wurde erfolgreich veröffentlicht!");
+  steps.forEach(step => step.classList.remove("step--active"));
-  
+  flowFooter.hidden = true;
-  // 2. Weiterleiten (z. B. zur Event-Übersicht)
+  submissionSuccess.hidden = false;
-  window.location.href = "event_overview.html";
+  setErrorMessage("");
  window.scrollTo({ top: 0, behavior: "smooth" });
 }
@ -412,6 +602,126 @@ function updateCounterValue(input, change) {
  input.value = Math.max(min, currentValue + change);
 }
 /**
 * Macht aus "-"+Enter im Menüfeld eine einfache Bullet-Liste.
 */
 function registerMenuBulletHandler() {
  const menuField = document.getElementById("menuDescription");
  if (!menuField) return;
  menuField.addEventListener("keydown", event => {
    if (event.key !== "Enter") return;
    const { selectionStart, selectionEnd, value } = menuField;
    const lineStart = value.lastIndexOf("\n", selectionStart - 1) + 1;
    const lineEnd = value.indexOf("\n", selectionStart);
    const currentLineEnd = lineEnd === -1 ? value.length : lineEnd;
    const currentLine = value.slice(lineStart, currentLineEnd);
    const trimmedLine = currentLine.trim();
    if (trimmedLine !== "-" && !currentLine.startsWith("• ")) return;
    event.preventDefault();
    const isEmptyBullet = currentLine.trim() === "•";
    if (isEmptyBullet) {
      const beforeLine = value.slice(0, lineStart);
      const afterLine = value.slice(currentLineEnd);
      const separator = beforeLine.endsWith("\n") || afterLine.startsWith("\n") ? "" : "\n";
      const nextValue = `${beforeLine}${separator}${afterLine}`.replace(/\n{3,}/g, "\n\n");
      menuField.value = nextValue;
      const caretPosition = Math.min(lineStart, nextValue.length);
      menuField.setSelectionRange(caretPosition, caretPosition);
      menuField.dispatchEvent(new Event("input", { bubbles: true }));
      return;
    }
    const bulletLine = currentLine.startsWith("• ") ? currentLine : currentLine.replace("-", "•");
    const updatedLine = bulletLine.startsWith("• ") ? bulletLine : `• ${trimmedLine.slice(1).trimStart()}`;
    const beforeLine = value.slice(0, lineStart);
    const afterLine = value.slice(currentLineEnd);
    const nextValue = `${beforeLine}${updatedLine}\n• ${afterLine}`;
    const caretPosition = beforeLine.length + updatedLine.length + 3;
    menuField.value = nextValue;
    menuField.setSelectionRange(caretPosition, caretPosition);
    menuField.dispatchEvent(new Event("input", { bubbles: true }));
  });
 }
 /**
 * Springt aus der Review zurück zum passenden Schritt
 * und fokussiert das gewünschte Feld für direktes Weiterbearbeiten.
 */
 function registerReviewEditHandlers() {
  document.querySelectorAll(".review-item[data-edit-step]").forEach(item => {
    const activateEdit = () => {
      const stepIndex = Number(item.dataset.editStep);
      const fieldName = item.dataset.editField;
      showStep(stepIndex);
      focusFieldByName(fieldName);
    };
    item.addEventListener("click", activateEdit);
    item.addEventListener("keydown", event => {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        activateEdit();
      }
    });
  });
 }
 /**
 * Entfernt Fehlermarkierungen, sobald der User ein Feld korrigiert.
 */
 function registerValidationFeedbackHandlers() {
  form.querySelectorAll("input, textarea, select").forEach(field => {
    const clearInvalidState = () => {
      field.classList.remove("field-invalid");
      if (field.type === "radio") {
        const group = Array.from(form.querySelectorAll(`input[name="${field.name}"]`));
        const hasSelection = group.some(item => item.checked);
        if (hasSelection) {
          group.forEach(item => {
            const card = item.closest(".option-card");
            if (card) {
              card.classList.remove("option-card--invalid");
            }
          });
        }
      }
    };
    field.addEventListener("input", clearInvalidState);
    field.addEventListener("change", clearInvalidState);
  });
 }
 /**
 * Setzt den Fokus auf ein bestimmtes Feld oder die erste Option einer Radio-Gruppe.
 */
 function focusFieldByName(fieldName) {
  const field = form.elements[fieldName];
  if (!field) return;
  const focusTarget = field instanceof RadioNodeList ? field[0] : field;
  if (focusTarget && typeof focusTarget.focus === "function") {
    window.setTimeout(() => {
      focusTarget.focus();
    }, 150);
  }
 }
 // =============================
 // STEP 9: Alles starten
@ -438,10 +748,14 @@ function initEventCreationFlow() {
  // Counter aktivieren
  registerCounterHandlers();
  registerMenuBulletHandler();
  registerValidationFeedbackHandlers();
  registerReviewEditHandlers();
  // Startzustand: Intro anzeigen
  submissionSuccess.hidden = true;
  showStep(0);
 }
 // Startpunkt des Skripts
-initEventCreationFlow();
+initEventCreationFlow();
--- a/js/event_detail.js
+++ b/js/event_detail.js
@ -1,4 +1,5 @@
 document.addEventListener('DOMContentLoaded', async () => {
    const EVENTS_STORAGE_KEY = 'socialCookingEvents';
    // -------------------------------------------------------------
    // DOM entry point and shared asset path.
    // -------------------------------------------------------------
@ -14,10 +15,21 @@ document.addEventListener('DOMContentLoaded', async () => {
        return;
    }
    function getStoredEvents() {
        try {
            const stored = localStorage.getItem(EVENTS_STORAGE_KEY);
            return stored ? JSON.parse(stored) : [];
        } catch (error) {
            console.error('Lokale Events konnten nicht gelesen werden.', error);
            return [];
        }
    }
    // Fetch data source and resolve the matching event record.
    try {
        const response = await fetch('data/events.json');
-        const allEvents = await response.json();
+        const apiEvents = await response.json();
        const allEvents = [...getStoredEvents(), ...apiEvents];
        const event = allEvents.find(e => e.id === eventId);
        if (event) {
@ -257,4 +269,4 @@ document.addEventListener('DOMContentLoaded', async () => {
            });
        }
    }
-});
+});
--- a/js/event_overview.js
+++ b/js/event_overview.js
@ -1,4 +1,5 @@
 document.addEventListener('DOMContentLoaded', () => {
    const EVENTS_STORAGE_KEY = 'socialCookingEvents';
    // -------------------------------------------------------------
    // DOM references used throughout the page lifecycle.
    // -------------------------------------------------------------
@ -14,6 +15,16 @@ document.addEventListener('DOMContentLoaded', () => {
    let allEvents = [];
    let activeCategory = 'ALLE';
    function getStoredEvents() {
        try {
            const stored = localStorage.getItem(EVENTS_STORAGE_KEY);
            return stored ? JSON.parse(stored) : [];
        } catch (error) {
            console.error('Lokale Events konnten nicht gelesen werden.', error);
            return [];
        }
    }
    // -------------------------------------------------------------
    // Initial data bootstrap:
    // 1) fetch JSON,
@ -24,7 +35,9 @@ document.addEventListener('DOMContentLoaded', () => {
    async function fetchEvents() {
        try {
            const response = await fetch('data/events.json');
-            allEvents = await response.json();
+            const apiEvents = await response.json();
            const localEvents = getStoredEvents();
            allEvents = [...localEvents, ...apiEvents];
            populateMetaFilters();
            const savedCategory = sessionStorage.getItem('activeFilter') || 'ALLE';
@ -62,6 +75,10 @@ document.addEventListener('DOMContentLoaded', () => {
    // Convert localized event date (e.g. 19. MÄR. 2026) into ISO format for date input comparison.
    function parseEventDateToIso(dateString) {
        if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
            return dateString;
        }
        const months = {
            JAN: '01',
            FEB: '02',
@ -92,6 +109,11 @@ document.addEventListener('DOMContentLoaded', () => {
    // Convert short month notation into full German month label for UI display.
    function formatEventDate(dateString) {
        if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
            const [year, month, day] = dateString.split('-');
            return `${Number(day)}. ${['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'][Number(month) - 1]} ${year}`;
        }
        const labels = {
            JAN: 'Januar',
            FEB: 'Februar',
@ -122,7 +144,13 @@ document.addEventListener('DOMContentLoaded', () => {
    // Normalize time label from UHR to Uhr for consistent typography.
    function formatEventTime(timeString) {
-        return timeString.replace('UHR', 'Uhr').trim();
+        if (!timeString) {
            return '';
        }
        return timeString.includes('UHR')
            ? timeString.replace('UHR', 'Uhr').trim()
            : `${timeString} Uhr`;
    }
    // Safely verify whether a value exists in the given select element.
--- a/js/index-carousel.js
+++ b/js/index-carousel.js
@ -1,85 +1,52 @@
 const carouselTrack = document.querySelector('.gallery__track');
 const prevArrow = document.querySelector('.gallery__arrow--prev');
 const nextArrow = document.querySelector('.gallery__arrow--next');
 const dotsContainer = document.querySelector('.gallery__dots');
 if (carouselTrack) {
  const items = Array.from(carouselTrack.querySelectorAll('.gallery__item'));
  const getItemsPerPage = () => (window.matchMedia('(max-width: 900px)').matches ? 1 : 3);
  let itemsPerPage = getItemsPerPage();
-  let pageCount = Math.ceil(items.length / itemsPerPage);
+  const pageCount = Math.ceil(items.length / itemsPerPage);
  let activePage = 0;
  var dots = [];
-  function buildDots() {
+  function scrollToPage(page) {
    if (!dotsContainer) return;
    dotsContainer.innerHTML = '';
    dots = [];
    for (var i = 0; i < pageCount; i++) {
      var dot = document.createElement('button');
      dot.type = 'button';
      dot.className = 'gallery__dot' + (i === activePage ? ' gallery__dot--active' : '');
      dot.setAttribute('role', 'tab');
      dot.setAttribute('aria-selected', i === activePage ? 'true' : 'false');
      dot.setAttribute('aria-label', 'Seite ' + (i + 1) + ' von ' + pageCount);
      dot.dataset.page = i;
      dot.addEventListener('click', function() {
        goToPage(parseInt(this.dataset.page));
      });
      dotsContainer.appendChild(dot);
      dots.push(dot);
    }
  }
  function updateDots() {
    dots.forEach(function(dot, i) {
      dot.classList.toggle('gallery__dot--active', i === activePage);
      dot.setAttribute('aria-selected', i === activePage ? 'true' : 'false');
    });
  }
  function updateTrack() {
    var gap = parseFloat(getComputedStyle(carouselTrack).gap) || 20;
    var itemWidth = items[0].getBoundingClientRect().width;
    var offset = activePage * (itemWidth + gap) * itemsPerPage;
    carouselTrack.style.transform = 'translateX(-' + offset + 'px)';
    carouselTrack.style.transition = 'transform 0.4s ease';
    updateDots();
  }
  function goToPage(page) {
    activePage = page;
-    updateTrack();
+    const pageWidth = carouselTrack.clientWidth;
    carouselTrack.scrollTo({ left: pageWidth * page, behavior: 'smooth' });
  }
  function showNext() {
    activePage = (activePage + 1) % pageCount;
-    updateTrack();
+    scrollToPage(activePage);
  }
  function showPrev() {
    activePage = (activePage - 1 + pageCount) % pageCount;
-    updateTrack();
+    scrollToPage(activePage);
  }
-  buildDots();
+  function refreshCarousel() {
    const responsiveItemsPerPage = getItemsPerPage();
    if (responsiveItemsPerPage !== itemsPerPage) {
      itemsPerPage = responsiveItemsPerPage;
      window.location.reload();
    }
  }
  if (nextArrow) nextArrow.addEventListener('click', showNext);
  if (prevArrow) prevArrow.addEventListener('click', showPrev);
-  document.addEventListener('keydown', function(event) {
+  document.addEventListener('keydown', (event) => {
-    if (event.key === 'ArrowRight') showNext();
+    if (event.key === 'ArrowRight') {
-    if (event.key === 'ArrowLeft') showPrev();
+      showNext();
    }
    if (event.key === 'ArrowLeft') {
      showPrev();
    }
  });
-  window.addEventListener('resize', function() {
+  window.addEventListener('resize', () => {
-    var newPerPage = getItemsPerPage();
+    refreshCarousel();
-    if (newPerPage !== itemsPerPage) {
+    scrollToPage(activePage);
      itemsPerPage = newPerPage;
      pageCount = Math.ceil(items.length / itemsPerPage);
      activePage = 0;
    }
    buildDots();
    updateTrack();
  });
 }
--- a/js/login.js
+++ b/js/login.js
@ -45,11 +45,10 @@ function validateForm(event) {
    // Wenn alle Validierungen bestanden, Form absenden
    if (isValid) {
-        var snackbar = document.getElementById('snackbar');
+        //alert('Login erfolgreich! (Dies ist eine Demo)');
-        snackbar.classList.add('snackbar--visible');
+
-        setTimeout(function() {
+    // Weiterleitung zur event overview Page
-            window.location.href = 'event_overview.html';
+        window.location.href = 'event_overview.html';
        }, 2000);
    }
 }
--- a/login.html
+++ b/login.html
@ -3,24 +3,26 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Invité | Login</title>
+    <title>Login - Social Cooking</title>
    <!-- Stylesheet für diese Seite-->
    <link rel="stylesheet" href="css/login_signup.css">
    <!-- Globales Stylesheet -->
    <link rel="stylesheet" href="css/stylesheet_global.css">
    <!-- Stylesheet für diese Seite -->
    <link rel="stylesheet" href="css/login_signup.css">
 </head>
 <body>
-<!-- Top navigation: global entry points and current page indicator -->
+<!-- Top Navigation mit Seitenlinks -->
 <header class="top-nav-wrap">
    <div class="top-nav">
        <a class="brand" href="index.html" aria-label="Zur Startseite">
-            <img src="assets/logo_invite.svg" alt="Invité">
+            <img src="assets/logo_invite.svg" alt="Invite Logo">
        </a>
-        <nav class="top-nav-links" aria-label="Hauptnavigation">
+        <nav class="nav-tab-links" aria-label="Hauptnavigation">
-            <a class="nav-link nav-link--login" href="login.html">Anmelden</a>
+            <a class="nav-tab" href="event_overview.html">Event finden</a>
            <a class="nav-tab" href="event_create.html">Event erstellen</a>
            <a class="button-small" href="login.html" aria-label="Profil">Login</a>
        </nav>
    </div>
 </header>
@ -33,35 +35,30 @@
            </div>
        <div class="form-section">
-            <h1>Willkommen zurück</h1>
+            <h1>Login</h1>
            <form id="loginForm">
                <div class="form-group">
-                    <label for="email">Deine E-Mail Adresse *</label>
+                    <label for="email">E-Mail</label>
                    <input type="email" id="email" name="email" required placeholder="deine.email@example.com">
                    <div class="error-message" id="emailError">Bitte gib eine gültige E-Mail Adresse ein.</div>
                </div>
                <div class="form-group">
-                    <label for="passwort">Dein Passwort *</label>
+                    <label for="passwort">Passwort</label>
                    <input type="password" id="passwort" name="passwort" required placeholder="Gib dein Passwort ein">
                    <div class="error-message" id="passwortError">Bitte gib dein Passwort ein.</div>
                </div>
-                <button type="submit">Login</button>
+                <button type="submit" class="button">Login</button>
                <div class="signup-hint">
-                    Du hast noch keinen Account? <a href="signup.html">Hier geht es zur Anmeldung</a>
+                    Du hast noch keinen Account? <a href="signup.html">Hier geht es zur Anmeldung.</a>
                </div>
            </form>
        </div>
    </div>
    </div>  <!-- Schliesst main-content -->
    <div class="snackbar" id="snackbar">Willkommen zurück! Du wirst weitergeleitet...</div>
    <script src="js/login.js"></script>
    <footer class="footer">
      <a href="impressum.html" class="footer__link">Impressum</a>
      <a href="datenschutz.html" class="footer__link">Datenschutz</a>
    </footer>
 </body>
-</html>
+</html>
--- a/signup.html
+++ b/signup.html
@ -4,17 +4,27 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kontaktseite - Invité</title>
    <!-- Stylesheet für diese Seite-->
    <link rel="stylesheet" href="css/login_signup.css">
    <!-- Globales Stylesheet -->
    <link rel="stylesheet" href="css/stylesheet_global.css">
 </head>
 <body>
-    <!-- Header -->
+<!-- Top Navigation mit Seitenlinks -->
-    <header class="header">
+<header class="top-nav-wrap">
-        <div class="header-logo">Invité</div>
+    <div class="top-nav">
-        <div class="header-buttons">
+        <a class="brand" href="index.html" aria-label="Zur Startseite">
-            <button class="header-btn header-btn-secondary">Event finden</button>
+            <img src="assets/logo_invite.svg" alt="Invite Logo">
-            <a href="login.html" class="header-btn header-btn-primary">Login</a>
+        </a>
-        </div>
+        <nav class="nav-tab-links" aria-label="Hauptnavigation">
-    </header>
+            <a class="nav-tab" href="event_overview.html">Event finden</a>
            <a class="nav-tab" href="event_create.html">Event erstellen</a>
            <a class="button-small" href="login.html" aria-label="Profil">Login</a>
        </nav>
    </div>
 </header>
    <!-- Main Content -->
    <div class="main-content">
@ -27,7 +37,7 @@
            <h1>Erstelle deinen Account</h1>
            <div class="info-box">
-                <strong>Hinweis:</strong> Sichtbar auf der Plattform ist nur der Vorname, erst einer Anmeldung zum Event ist der Nachname für die Teilnehmenden sichtbar.
+                <strong>Hinweis:</strong> Sichtbar auf der Plattform ist nur dein Vorname. Erst einer Anmeldung zum Event ist der Nachname für die Teilnehmenden sichtbar.
            </div>
            <form id="signupForm">
@ -44,7 +54,7 @@
                </div>
                <div class="form-group">
-                    <label for="email">E-Mail Adresse *</label>
+                    <label for="email">E-Mail *</label>
                    <input type="email" id="email" name="email" required placeholder="deine.email@example.com">
                    <div class="error-message" id="emailError">Bitte gib eine gültige E-Mail Adresse ein.</div>
                </div>
@ -55,10 +65,11 @@
                    <div class="error-message" id="passwortError">Dein Passwort muss mindestens 8 Zeichen lang sein.</div>
                </div>
-                <button type="submit">Konto erstellen</button>
+                <button type="submit" class="button">Konto erstellen</button>
                <div class="login-hint">
-                    Du hast bereits einen Account? <a href="login.html">Hier geht's zum Log-in</a>
+                    Du hast bereits einen Account? <a href="login.html">Hier geht es zum Login.</a>
                </div>
            </form>
        </div>
@ -81,9 +92,5 @@
        </div>
    </div>
    <script src="js/signup.js"></script>
    <footer class="footer">
      <a href="impressum.html" class="footer__link">Impressum</a>
      <a href="datenschutz.html" class="footer__link">Datenschutz</a>
    </footer>
 </body>
-</html>
+</html>
Author	SHA1	Message	Date
Ysabelle Moser	46074df578	Merge pull request 'Anpassungen event erstellung Sprint 1' (#10 ) from event_create into main Reviewed-on: #10	2026-04-09 17:24:38 +02:00
Ysabelle Moser	ad6b6c2c8c	Anpassungen event erstellung Sprint 1	2026-04-09 17:01:37 +02:00
Estelle Köhler	481f3e3934	Fix how-it-works card styling	2026-04-09 12:14:35 +02:00
Estelle Köhler	6b01e178b9	Update how-it-works button styling	2026-04-09 12:07:55 +02:00
«schmona»	c6d8df790e	Typographie ergänzt H3-H6	2026-03-30 22:25:59 +02:00
«schmona»	cba0ab45ba	Globales stylesheet verknüpft, Navigation auf allen Seiten angepasst	2026-03-30 22:12:06 +02:00
«schmona»	ddd294dd79	Austausch Logo	2026-03-30 01:36:48 +02:00
«schmona»	5c0806dc67	Logo ersetzen	2026-03-30 01:16:04 +02:00
«schmona»	601d416339	Anpassungen stylesheet global	2026-03-30 00:45:56 +02:00
«schmona»	56ed78b4f7	Anpassung css login_Signup	2026-03-29 23:57:00 +02:00
«schmona»	8e1d591d5c	Anpassung html Sign up	2026-03-29 23:56:48 +02:00
«schmona»	5a893d7da8	Anpassung html Login	2026-03-29 23:55:54 +02:00
Estelle Köhler	2aa49d93a2	Merge pull request 'feature/index2.0' (#9 ) from feature/index2.0 into main Reviewed-on: #9	2026-03-29 19:24:53 +02:00