koehleestell/Social_Cooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling Event erstellen

Browse Source
This commit is contained in:
Simona Oswald 2026-04-25 16:33:28 +02:00
parent e53d4c8031
commit 2bf3609662
7 changed files with 101 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
css/event_create.css
View File

@ -36,7 +36,7 @@
.submission-success-title-row { .submission-success-title-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-5); gap: var(--space-32);
width: 100%; width: 100%;
} }
@ -93,7 +93,6 @@
.form-field, .form-field,
fieldset { fieldset {
display: grid; display: grid;
gap: var(--space-24);
} }
.step-copy { .step-copy {
@ -102,7 +101,7 @@ fieldset {
} }
.step-fields { .step-fields {
gap: var(--space-5); gap: var(--space-32);
} }
.form-field, .form-field,
@ -110,7 +109,6 @@ fieldset {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
gap: var(--space-16);
} }
@ -141,9 +139,9 @@ fieldset {
} }
.field-hint { .field-hint {
margin: -0.25rem 0 0; color: var(--olive);
color: var(--color-muted); font-size: 1rem;
font-size: 0.95rem; margin-bottom: var(--space-8);
} }
input[type="text"], input[type="text"],
@ -184,7 +182,7 @@ input[type="date"]:hover,
input[type="time"]:hover, input[type="time"]:hover,
input[type="number"]:hover, input[type="number"]:hover,
textarea:hover { textarea:hover {
border-color: rgba(102, 52, 13, 0.28); border: 2px solid var(--olive);
} }
input[type="text"]:focus, input[type="text"]:focus,
@ -192,7 +190,7 @@ input[type="date"]:focus,
input[type="time"]:focus, input[type="time"]:focus,
input[type="number"]:focus, input[type="number"]:focus,
textarea:focus { textarea:focus {
border-color: var(--olive-dark); border: 2px solid var(--olive);
} }
.field-invalid { .field-invalid {
@ -224,13 +222,12 @@ textarea:focus {
justify-items: center; justify-items: center;
align-content: center; align-content: center;
gap: var(--space-12); gap: var(--space-12);
color: var(--brown); color: var(--black);
} }
.option-card__icon { .option-card__icon {
color: var(--brown); color: var(--black);
font-size: 1.35rem; font-size: 1.25rem;
line-height: 1;
pointer-events: none; pointer-events: none;
} }
@ -246,38 +243,25 @@ textarea:focus {
} }
.option-grid--tomato-choices .option-card:hover, .option-grid--tomato-choices .option-card:hover,
.option-grid--tomato-choices .option-card:has(input:focus-visible) { .option-grid--tomato-choices .option-card:has(input:focus-visible),
border-color: var(--tomato);
background: var(--tomato);
color: var(--butter-light);
}
.option-grid--tomato-choices .option-card:has(input:checked) { .option-grid--tomato-choices .option-card:has(input:checked) {
border-color: var(--tomato); background: var(--olive-light);
background: var(--tomato);
color: var(--butter-light);
}
.option-grid--icon-choices .option-card--with-icon:hover .option-card__icon,
.option-grid--icon-choices .option-card--with-icon:has(input:focus-visible) .option-card__icon,
.option-grid--icon-choices .option-card--with-icon:has(input:checked) .option-card__icon {
color: var(--butter-light);
} }
.option-grid--icon-choices .option-card--with-icon:has(input:disabled) { .option-grid--icon-choices .option-card--with-icon:has(input:disabled) {
opacity: 0.45; opacity: 0.6;
} }
.option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover { .option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover {
border-color: var(--olive-light); border-color: var(--olive-light);
background: var(--butter-light); background: var(--butter-light);
color: var(--brown); color: var(--black);
box-shadow: none; box-shadow: none;
transform: none; transform: none;
} }
.option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover .option-card__icon { .option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover .option-card__icon {
color: var(--brown); color: var(--blaxk);
} }
.option-card input { .option-card input {
@ -294,21 +278,16 @@ textarea:focus {
.option-card--invalid { .option-card--invalid {
border-color: var(--error) !important; border-color: var(--error) !important;
box-shadow: 0 0 0 2px rgba(212, 75, 36, 0.14); box-shadow: var(--shadow-error);
} }
.guest-count-icon { .guest-count-icon {
display: flex;
justify-content: center;
width: 100%;
color: var(--brown);
font-size: 3rem;
line-height: 1;
}
.guest-count-icon::before {
display: block; display: block;
transform: translateX(1.1rem); text-align: center;
width: 100%;
color: var(--black);
font-size: 1.5rem;
line-height: 1;
} }
.counter { .counter {
@ -319,7 +298,7 @@ textarea:focus {
.counter-value-group { .counter-value-group {
display: grid; display: grid;
justify-items: stretch; justify-items: center;
row-gap: var(--space-8); row-gap: var(--space-8);
width: 6rem; width: 6rem;
} }
@ -343,7 +322,7 @@ textarea:focus {
.review-card--success { .review-card--success {
display: grid; display: grid;
gap: var(--space-5); gap: var(--space-32);
padding: var(--space-16) 0 0; padding: var(--space-16) 0 0;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
@ -353,45 +332,33 @@ textarea:focus {
.review-list { .review-list {
display: grid; display: grid;
gap: var(--space-24); gap: var(--space-12);
margin: 0; margin: 0;
} }
.review-item { .review-item {
display: grid; display: grid;
gap: var(--space-12);
padding: 1rem 1.1rem; padding: 1rem 1.1rem;
border: 1px solid var(--input-border-soft); border: 1.5px solid var(--olive-light);
border-radius: 1.125rem; border-radius: 1.125rem;
background: var(--butter-light); background: var(--butter-light);
box-shadow: 0 1px 2px rgba(102, 52, 13, 0.04);
cursor: pointer; cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
} }
.review-item:last-child { .review-item:hover,
border-bottom: 1px solid var(--input-border-soft); .review-item:focus-visible {
} border: 2px solid var(--olive);
box-shadow: var(--shadow-interaction);
.review-item:hover { transform: translateY(-3px);
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 { .review-item dt {
font-weight: 700; font-weight: 600;
} }
.review-item dd { .review-item dd {
margin: 0; margin: 0;
white-space: pre-wrap;
color: var(--color-text-secondary);
} }
.review-gallery { .review-gallery {
@ -415,9 +382,8 @@ textarea:focus {
} }
.flow-footer { .flow-footer {
bottom: 0; padding-top: var(--space-80);
backdrop-filter: none; backdrop-filter: none;
padding-top: var(--space-24);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }
@ -471,7 +437,6 @@ textarea:focus {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: var(--space-24); gap: var(--space-24);
padding: var(--space-24) 0;
width: 100%; width: 100%;
} }
@ -498,37 +463,27 @@ textarea:focus {
margin-top: var(--space-12); margin-top: var(--space-12);
} }
.gallery-upload {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-16);
}
.gallery-preview { .gallery-preview {
display: contents; display: contents;
} }
.gallery-add-button { .gallery-add-button {
width: 7rem;
height: 7rem;
display: grid; display: grid;
place-items: center; place-items: center;
align-content: center; align-content: center;
gap: var(--space-8); gap: var(--space-8);
padding: var(--space-8); padding: var(--space-20);
border: 1.5px solid var(--olive-light); border: 1.5px solid var(--olive-light);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--butter-light); background: var(--butter-light);
color: var(--olive);
font-family: var(--font-main); font-family: var(--font-main);
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
} }
.gallery-add-button__icon { .gallery-add-button__icon {
color: var(--brown); color: var(--black);
font-size: 2rem; font-size: 1.5rem;
line-height: 1; line-height: 1;
} }
@ -584,7 +539,7 @@ textarea:focus {
.site-footer { .site-footer {
width: min(100% - 2rem, var(--max-width)); width: min(100% - 2rem, var(--max-width));
margin: 0 auto; margin: 0 auto;
padding: var(--space-5) 0 var(--space-40); padding: var(--space-32) 0 var(--space-40);
color: var(--color-muted); color: var(--color-muted);
text-align: center; text-align: center;
} }

25
css/event_overview.css
View File

@ -12,15 +12,6 @@
} }
/* Heading hierarchy: page title > detail title > card title > section title */ /* Heading hierarchy: page title > detail title > card title > section title */
.overview-title {
margin: 0 0 var(--space-24);
color: var(--olive);
font-family: "Bagel Fat One", cursive;
font-size: clamp(38px, 5vw, 44px);
font-weight: 400;
line-height: 1.15;
}
.overview-title-row { .overview-title-row {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -147,7 +138,7 @@
background: var(--butter-light); background: var(--butter-light);
border: 1.5px solid var(--olive-light); border: 1.5px solid var(--olive-light);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-40); padding: var(--space-32) var(--space-40);
display: flex; display: flex;
gap: var(--space-40); gap: var(--space-40);
cursor: pointer; cursor: pointer;
@ -282,7 +273,7 @@
--------------------------------------------------------- */ --------------------------------------------------------- */
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 42px var(--space-5); padding: 42px var(--space-32);
border: 2px solid var(--olive-light); border: 2px solid var(--olive-light);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
background: var(--butter-light); background: var(--butter-light);
@ -294,7 +285,7 @@
color: var(--olive); color: var(--olive);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
letter-spacing: var(--ls-la); letter-spacing: var(--ls-lg);
} }
.empty-state h3 { .empty-state h3 {
@ -335,7 +326,7 @@
.detail-top-row { .detail-top-row {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--space-5); gap: var(--space-32);
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -390,7 +381,7 @@
font-weight: 400; font-weight: 400;
font-size: 1rem; font-size: 1rem;
line-height: 1; line-height: 1;
letter-spacing: var(--ls-la); letter-spacing: var(--ls-lg);
padding: var(--space-8) var(--space-20); padding: var(--space-8) var(--space-20);
}*/ }*/
@ -516,7 +507,7 @@
.detail-panel { .detail-panel {
background: var(--butter-light); background: var(--butter-light);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: var(--space-24) var(--space-5); padding: var(--space-24) var(--space-32);
} }
.detail-panel-compact { .detail-panel-compact {
@ -541,7 +532,7 @@
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: var(--tomato); color: var(--tomato);
letter-spacing: var(--ls-la); letter-spacing: var(--ls-lg);
text-decoration: none; text-decoration: none;
} }
@ -615,7 +606,7 @@
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: var(--shadow-interaction); box-shadow: var(--shadow-interaction);
padding: var(--space-24) var(--space-5); padding: var(--space-24) var(--space-32);
margin-top: var(--space-40); margin-top: var(--space-40);
position: sticky; position: sticky;
bottom: var(--space-40); bottom: var(--space-40);

2
css/index.css
View File

@ -534,7 +534,7 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.faq-section { .faq-section {
padding: var(--space-40) var(--space-24); padding: var(--space-40) var(--space-24);
margin: var(--space-40) 0 var(--space-5); margin: var(--space-40) 0 var(--space-32);
} }
.faq-trigger { .faq-trigger {

5
css/login_signup.css
View File

@ -87,6 +87,7 @@ input:focus {
.form-group.has-error input { .form-group.has-error input {
border-color: var(--error); border-color: var(--error);
box-shadow: var(--shadow-error);
} }
.form-group.has-error .error-message--field-callout { .form-group.has-error .error-message--field-callout {
@ -149,7 +150,7 @@ input:focus {
} }
.btn-primary { .btn-primary {
padding: var(--space-2) var(--space-5); padding: var(--space-2) var(--space-32);
background-color: var(--olive); background-color: var(--olive);
color: var(--white); color: var(--white);
border: none; border: none;
@ -172,7 +173,7 @@ input:focus {
display: grid; display: grid;
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
align-items: center; align-items: center;
padding: var(--space-16) var(--space-5); padding: var(--space-16) var(--space-32);
border: none; border: none;
margin-top: 40px; margin-top: 40px;
} }

13
css/my_profil.css
View File

@ -6,7 +6,7 @@
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
gap: var(--space-24); gap: var(--space-24);
margin-bottom: var(--space-5); margin-bottom: var(--space-32);
} }
.profile-kicker { .profile-kicker {
@ -14,7 +14,7 @@
color: var(--olive); color: var(--olive);
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
letter-spacing: var(--ls-la); letter-spacing: var(--ls-lg);
} }
#headline { #headline {
@ -55,7 +55,7 @@
.profile-panel { .profile-panel {
background: var(--butter-light); background: var(--butter-light);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: var(--space-5); padding: var(--space-32);
} }
.panel-head { .panel-head {
@ -76,7 +76,7 @@
border: 1.5px solid var(--olive-light); border: 1.5px solid var(--olive-light);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-interaction); box-shadow: var(--shadow-interaction);
padding: var(--space-5) var(--space-40); padding: var(--space-32) var(--space-40);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: var(--space-40); gap: var(--space-40);
@ -114,7 +114,7 @@
color: var(--olive); color: var(--olive);
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 700; font-weight: 700;
letter-spacing: var(--ls-la); letter-spacing: var(--ls-lg);
} }
.profile-event-address { .profile-event-address {
@ -163,7 +163,7 @@
color: var(--olive); color: var(--olive);
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
letter-spacing: var(--ls-la); letter-spacing: var(--ls-lg);
} }
.profile-empty-state h3 { .profile-empty-state h3 {
@ -225,6 +225,7 @@
.form-group.has-error input { .form-group.has-error input {
border-color: var(--error); border-color: var(--error);
box-shadow: var(--shadow-error);
} }
.profile-feedback { .profile-feedback {

77
css/stylesheet_global.css
View File

@ -48,7 +48,7 @@
--space-16: 1rem; /* 16px */ --space-16: 1rem; /* 16px */
--space-20: 1.25rem; /* 20px */ --space-20: 1.25rem; /* 20px */
--space-24: 1.5rem; /* 24px */ --space-24: 1.5rem; /* 24px */
--space-5: 2rem; /* 32px */ --space-32: 2rem; /* 32px */
--space-40: 2.5rem; /* 40px */ --space-40: 2.5rem; /* 40px */
--space-7: 3rem; /* 48px */ --space-7: 3rem; /* 48px */
--space-64: 4rem; /* 64px */ --space-64: 4rem; /* 64px */
@ -64,7 +64,7 @@
/* Letter Spacing */ /* Letter Spacing */
--ls-none: 0; --ls-none: 0;
--ls-sm: 2.5%; --ls-sm: 2.5%;
--ls-la: 5%; --ls-lg: 5%;
} }
/* Base Styles */ /* Base Styles */
@ -91,7 +91,7 @@ h1, h2, h3, h4, h5, h6 {
h1 { h1 {
font-size: clamp(2.25rem, 5vw, 3rem); font-size: clamp(2.25rem, 5vw, 3rem);
letter-spacing: var(--ls-sm); letter-spacing: var(--ls-sm);
margin-bottom: var(--space-5); margin-bottom: var(--space-32);
} }
h2 { h2 {
@ -129,15 +129,15 @@ p {
margin-bottom: var(--space-8); margin-bottom: var(--space-8);
} }
/*
label { label {
font-family: var(--font-main); font-family: var(--font-main);
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 600; font-weight: 600;
letter-spacing: var(--ls-sm); letter-spacing: var(--ls-lg);
line-height: 1; line-height: 1;
margin-bottom: var(--space-0); margin-bottom: var(--space-16);
}*/ }
.option { .option {
font-family: var(--font-main); font-family: var(--font-main);
@ -145,7 +145,7 @@ label {
font-weight: 600; font-weight: 600;
letter-spacing: var(--ls-sm); letter-spacing: var(--ls-sm);
line-height: 1; line-height: 1;
margin-bottom: var(--space-16); margin-bottom: var(--space-8);
} }
.link-text a{ .link-text a{
@ -211,16 +211,13 @@ label {
display: none; display: none;
width: max-content; width: max-content;
max-width: 15rem; max-width: 15rem;
padding: 0.7rem 1.15rem; padding: var(--space-6) var(--space-16);
border-radius: 1rem; border-radius: var(--radius-md);
background: var(--error); background: var(--error);
color: #ffffff; color: var(--butter-light);
text-align: center; text-align: center;
font-size: 0.95rem;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere; overflow-wrap: anywhere;
box-shadow: var(--shadow-interaction);
z-index: 1; z-index: 1;
} }
@ -342,7 +339,7 @@ label {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
min-height: 3rem; min-height: 3rem;
padding: 0.1875rem 0.75rem 0.1875rem var(--space-5); padding: 0.1875rem 0.75rem 0.1875rem var(--space-32);
max-width: none; max-width: none;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -388,7 +385,7 @@ label {
.nav-tab-links { .nav-tab-links {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-5); gap: var(--space-32);
} }
@ -402,7 +399,7 @@ label {
font-family: var(--font-main); font-family: var(--font-main);
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
letter-spacing: var(--ls-la); letter-spacing: var(--ls-lg);
z-index: 0; z-index: 0;
} }
@ -760,7 +757,7 @@ label {
.modal-content { .modal-content {
background-color: var(--white); background-color: var(--white);
padding: var(--space-20) var(--space-20) var(--space-40) var(--space-20); padding: var(--space-40);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-interaction); box-shadow: var(--shadow-interaction);
max-width: 500px; max-width: 500px;
@ -773,27 +770,21 @@ label {
width: 48px; width: 48px;
height: 48px; height: 48px;
flex: 0 0 48px; flex: 0 0 48px;
border: 1.5px solid var(--olive); border: 1.5px solid var(--olive-light);
border-radius: 999px; border-radius: var(--radius-pill);
color: var(--black);
background: var(--butter-light); background: var(--butter-light);
color: var(--olive); font-family: "Bagel Fat One";
font-family: "Bagel Fat One", cursive; font-size: 1.75rem;
font-size: 1.7rem; font-weight: 500;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
box-shadow: var(--shadow-interaction); transition: background-color 0.2s ease;
transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
} }
.btn-info:hover, .btn-info:hover,
.btn-info:focus-visible { .btn-info:focus-visible {
background: var(--butter); background: var(--olive-light);
border-color: var(--olive-dark);
transform: translateY(-1px);
}
.btn-info:focus-visible {
outline: 2px solid var(--olive-dark);
} }
@keyframes modalSlideIn { @keyframes modalSlideIn {
@ -822,7 +813,7 @@ label {
margin-left: auto; margin-left: auto;
border: none; border: none;
background: transparent; background: transparent;
color: var(--olive); color: var(--black);
font-size: 2rem; font-size: 2rem;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
@ -830,20 +821,14 @@ label {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
transition: color 0.2s ease, transform 0.2s ease; transition: transform 0.2s ease;
} }
.modal-close:hover, .modal-close:hover,
.modal-close:focus-visible { .modal-close:focus-visible {
color: var(--olive-dark);
transform: translateY(-1px); transform: translateY(-1px);
} }
.modal-close:focus-visible {
outline: 2px solid var(--olive-dark);
outline-offset: 2px;
}
.close-btn { .close-btn {
font-size: 28px; font-size: 28px;
color: var(--black); color: var(--black);
@ -959,7 +944,7 @@ input[type="password"] {
padding: var(--space-12) var(--space-16); padding: var(--space-12) var(--space-16);
border: 1.5px solid var(--olive-light); border: 1.5px solid var(--olive-light);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: transparent; background: var(--butter-light);
transition: border-color 0.3s ease; transition: border-color 0.3s ease;
} }

26
event_create.html
View File

@ -70,7 +70,7 @@
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 1</p> <p class="badge">Schritt 1</p>
<h2 id="step1-title">Was hast du vor?</h2> <h2 id="step1-title">Was hast du vor?</h2>
<p class="step-text"> <p class="step-text margin-bottom-40">
Erzähl uns, was für ein Event du planst. Ist es ein gemütlicher Brunch, Erzähl uns, was für ein Event du planst. Ist es ein gemütlicher Brunch,
ein Dinner mit Wow-Effekt oder einfach ein entspanntes Mittagessen mit gutem Essen? ein Dinner mit Wow-Effekt oder einfach ein entspanntes Mittagessen mit gutem Essen?
</p> </p>
@ -150,7 +150,7 @@
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 2</p> <p class="badge">Schritt 2</p>
<h2 id="step2-title">Was kommt auf den Tisch?</h2> <h2 id="step2-title">Was kommt auf den Tisch?</h2>
<p class="step-text"> <p class="step-text margin-bottom-40">
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. 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> </p>
</div> </div>
@ -199,7 +199,7 @@
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 3</p> <p class="badge">Schritt 3</p>
<h2 id="step3-title">Gibt es etwas zu beachten?</h2> <h2 id="step3-title">Gibt es etwas zu beachten?</h2>
<p class="step-text"> <p class="step-text margin-bottom-40">
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. 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> </p>
</div> </div>
@ -228,7 +228,8 @@
</fieldset> </fieldset>
<div class="form-field"> <div class="form-field">
<label for="allergiesOther">Weitere Unverträglichkeiten oder Hinweise (optional)</label> <label for="allergiesOther">Weitere Unverträglichkeiten oder Hinweise</label>
<p class="field-hint">Optional – nur auswählen, wenn es für dein Event relevant ist.</p>
<textarea id="allergiesOther" name="allergiesOther" rows="3"></textarea> <textarea id="allergiesOther" name="allergiesOther" rows="3"></textarea>
</div> </div>
</div> </div>
@ -240,7 +241,7 @@
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 4</p> <p class="badge">Schritt 4</p>
<h2 id="step4-title">Wann findet dein Event statt?</h2> <h2 id="step4-title">Wann findet dein Event statt?</h2>
<p class="step-text"> <p class="step-text margin-bottom-40">
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. 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.
</p> </p>
</div> </div>
@ -266,7 +267,7 @@
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 5</p> <p class="badge">Schritt 5</p>
<h2 id="step5-title">Wo findet dein Event statt?</h2> <h2 id="step5-title">Wo findet dein Event statt?</h2>
<p class="step-text"> <p class="step-text margin-bottom-40">
Sag uns, wo dein Event stattfindet. Keine Sorge: Die genaue Adresse sehen Gäste erst nach der Buchung. Sag uns, wo dein Event stattfindet. Keine Sorge: Die genaue Adresse sehen Gäste erst nach der Buchung.
</p> </p>
</div> </div>
@ -290,7 +291,7 @@
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 6</p> <p class="badge">Schritt 6</p>
<h2 id="step6-title">Gib deinem Event den letzten Schliff.</h2> <h2 id="step6-title">Gib deinem Event den letzten Schliff.</h2>
<p class="step-text"> <p class="step-text margin-bottom-40">
Jetzt bekommt dein Event seinen Namen und die Atmosphäre, die Lust aufs Dabeisein macht. Jetzt bekommt dein Event seinen Namen und die Atmosphäre, die Lust aufs Dabeisein macht.
Ein klarer Titel (z.B. "Italienische Tavolata") und ein guter Beschreibungstext (Ablauf etc.) machen den Unterschied. Ein klarer Titel (z.B. "Italienische Tavolata") und ein guter Beschreibungstext (Ablauf etc.) machen den Unterschied.
</p> </p>
@ -308,12 +309,13 @@
</div> </div>
<div class="form-field"> <div class="form-field">
<label>Wie wird dein Event aussehen? <span class="field-hint-inline">(optional)</span></label> <label>Wie wird dein Event aussehen?</label>
<div class="gallery-upload"> <p class="field-hint">Optional – füge Bilder zu deinem Event hinzu.</p>
<div class= "option-grid option-grid--4">
<div class="gallery-preview" id="galleryPreview"></div> <div class="gallery-preview" id="galleryPreview"></div>
<button type="button" class="gallery-add-button" id="galleryAddBtn" aria-label="Foto hinzufügen"> <button type="button" class="gallery-add-button" id="galleryAddBtn" aria-label="Foto hinzufügen">
<i class="fa-solid fa-plus gallery-add-button__icon" aria-hidden="true"></i> <i class="fa-solid fa-plus gallery-add-button__icon" aria-hidden="true"></i>
<span class="gallery-add-button__text">Foto<br>hinzufügen</span> <span class="option">Foto hinzufügen</span>
</button> </button>
<input type="file" id="galleryFileInput" accept="image/*" multiple hidden /> <input type="file" id="galleryFileInput" accept="image/*" multiple hidden />
</div> </div>
@ -327,7 +329,7 @@
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 7</p> <p class="badge">Schritt 7</p>
<h2 id="step7-title">Dein Event auf einen Blick.</h2> <h2 id="step7-title">Dein Event auf einen Blick.</h2>
<p class="step-text"> <p class="step-text margin-bottom-40">
Schau dir alle Details nochmal in Ruhe an. Wenn alles passt, Schau dir alle Details nochmal in Ruhe an. Wenn alles passt,
kannst du dein Event jetzt veröffentlichen und Gäste einladen. kannst du dein Event jetzt veröffentlichen und Gäste einladen.
</p> </p>
@ -449,7 +451,7 @@
<i class="fa-solid fa-champagne-glasses"></i> <i class="fa-solid fa-champagne-glasses"></i>
</span> </span>
</div> </div>
<p class="step-text"> <p class="step-text margin-bottom-40">
Sieht gut aus: Deine Idee ist jetzt live und bereit für Gäste. 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. Im Profil kannst du dein Event anschauen, verwalten oder direkt das nächste planen.
</p> </p>