Styling Event erstellen
This commit is contained in:
parent
e53d4c8031
commit
2bf3609662
@ -36,7 +36,7 @@
|
||||
.submission-success-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-5);
|
||||
gap: var(--space-32);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -93,7 +93,6 @@
|
||||
.form-field,
|
||||
fieldset {
|
||||
display: grid;
|
||||
gap: var(--space-24);
|
||||
}
|
||||
|
||||
.step-copy {
|
||||
@ -102,7 +101,7 @@ fieldset {
|
||||
}
|
||||
|
||||
.step-fields {
|
||||
gap: var(--space-5);
|
||||
gap: var(--space-32);
|
||||
}
|
||||
|
||||
.form-field,
|
||||
@ -110,7 +109,6 @@ fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
gap: var(--space-16);
|
||||
}
|
||||
|
||||
|
||||
@ -141,9 +139,9 @@ fieldset {
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
margin: -0.25rem 0 0;
|
||||
color: var(--color-muted);
|
||||
font-size: 0.95rem;
|
||||
color: var(--olive);
|
||||
font-size: 1rem;
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
@ -184,7 +182,7 @@ input[type="date"]:hover,
|
||||
input[type="time"]:hover,
|
||||
input[type="number"]:hover,
|
||||
textarea:hover {
|
||||
border-color: rgba(102, 52, 13, 0.28);
|
||||
border: 2px solid var(--olive);
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
@ -192,7 +190,7 @@ input[type="date"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="number"]:focus,
|
||||
textarea:focus {
|
||||
border-color: var(--olive-dark);
|
||||
border: 2px solid var(--olive);
|
||||
}
|
||||
|
||||
.field-invalid {
|
||||
@ -224,13 +222,12 @@ textarea:focus {
|
||||
justify-items: center;
|
||||
align-content: center;
|
||||
gap: var(--space-12);
|
||||
color: var(--brown);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.option-card__icon {
|
||||
color: var(--brown);
|
||||
font-size: 1.35rem;
|
||||
line-height: 1;
|
||||
color: var(--black);
|
||||
font-size: 1.25rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -246,38 +243,25 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.option-grid--tomato-choices .option-card:hover,
|
||||
.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:focus-visible),
|
||||
.option-grid--tomato-choices .option-card:has(input:checked) {
|
||||
border-color: var(--tomato);
|
||||
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);
|
||||
background: var(--olive-light);
|
||||
}
|
||||
|
||||
.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 {
|
||||
border-color: var(--olive-light);
|
||||
background: var(--butter-light);
|
||||
color: var(--brown);
|
||||
color: var(--black);
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover .option-card__icon {
|
||||
color: var(--brown);
|
||||
color: var(--blaxk);
|
||||
}
|
||||
|
||||
.option-card input {
|
||||
@ -294,21 +278,16 @@ textarea:focus {
|
||||
|
||||
.option-card--invalid {
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
color: var(--brown);
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.guest-count-icon::before {
|
||||
display: block;
|
||||
transform: translateX(1.1rem);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
color: var(--black);
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.counter {
|
||||
@ -319,7 +298,7 @@ textarea:focus {
|
||||
|
||||
.counter-value-group {
|
||||
display: grid;
|
||||
justify-items: stretch;
|
||||
justify-items: center;
|
||||
row-gap: var(--space-8);
|
||||
width: 6rem;
|
||||
}
|
||||
@ -343,7 +322,7 @@ textarea:focus {
|
||||
|
||||
.review-card--success {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
gap: var(--space-32);
|
||||
padding: var(--space-16) 0 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
@ -353,45 +332,33 @@ textarea:focus {
|
||||
|
||||
.review-list {
|
||||
display: grid;
|
||||
gap: var(--space-24);
|
||||
gap: var(--space-12);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.review-item {
|
||||
display: grid;
|
||||
gap: var(--space-12);
|
||||
padding: 1rem 1.1rem;
|
||||
border: 1px solid var(--input-border-soft);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
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: 1px solid var(--input-border-soft);
|
||||
}
|
||||
|
||||
.review-item:hover {
|
||||
border-color: rgba(102, 52, 13, 0.28);
|
||||
background: rgba(247, 246, 230, 0.92);
|
||||
transform: translateY(-1px);
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.review-item:hover,
|
||||
.review-item:focus-visible {
|
||||
outline: 3px solid rgba(107, 107, 5, 0.2);
|
||||
outline-offset: 3px;
|
||||
border: 2px solid var(--olive);
|
||||
box-shadow: var(--shadow-interaction);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.review-item dt {
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.review-item dd {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.review-gallery {
|
||||
@ -415,9 +382,8 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.flow-footer {
|
||||
bottom: 0;
|
||||
padding-top: var(--space-80);
|
||||
backdrop-filter: none;
|
||||
padding-top: var(--space-24);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
@ -471,7 +437,6 @@ textarea:focus {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-24);
|
||||
padding: var(--space-24) 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -498,37 +463,27 @@ textarea:focus {
|
||||
margin-top: var(--space-12);
|
||||
}
|
||||
|
||||
.gallery-upload {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-16);
|
||||
}
|
||||
|
||||
.gallery-preview {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.gallery-add-button {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: var(--space-8);
|
||||
padding: var(--space-8);
|
||||
padding: var(--space-20);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--butter-light);
|
||||
color: var(--olive);
|
||||
font-family: var(--font-main);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.gallery-add-button__icon {
|
||||
color: var(--brown);
|
||||
font-size: 2rem;
|
||||
color: var(--black);
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@ -584,7 +539,7 @@ textarea:focus {
|
||||
.site-footer {
|
||||
width: min(100% - 2rem, var(--max-width));
|
||||
margin: 0 auto;
|
||||
padding: var(--space-5) 0 var(--space-40);
|
||||
padding: var(--space-32) 0 var(--space-40);
|
||||
color: var(--color-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -12,15 +12,6 @@
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@ -147,7 +138,7 @@
|
||||
background: var(--butter-light);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5) var(--space-40);
|
||||
padding: var(--space-32) var(--space-40);
|
||||
display: flex;
|
||||
gap: var(--space-40);
|
||||
cursor: pointer;
|
||||
@ -282,7 +273,7 @@
|
||||
--------------------------------------------------------- */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 42px var(--space-5);
|
||||
padding: 42px var(--space-32);
|
||||
border: 2px solid var(--olive-light);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--butter-light);
|
||||
@ -294,7 +285,7 @@
|
||||
color: var(--olive);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--ls-la);
|
||||
letter-spacing: var(--ls-lg);
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
@ -335,7 +326,7 @@
|
||||
.detail-top-row {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-5);
|
||||
gap: var(--space-32);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@ -390,7 +381,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
letter-spacing: var(--ls-la);
|
||||
letter-spacing: var(--ls-lg);
|
||||
padding: var(--space-8) var(--space-20);
|
||||
}*/
|
||||
|
||||
@ -516,7 +507,7 @@
|
||||
.detail-panel {
|
||||
background: var(--butter-light);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-24) var(--space-5);
|
||||
padding: var(--space-24) var(--space-32);
|
||||
}
|
||||
|
||||
.detail-panel-compact {
|
||||
@ -541,7 +532,7 @@
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--tomato);
|
||||
letter-spacing: var(--ls-la);
|
||||
letter-spacing: var(--ls-lg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -615,7 +606,7 @@
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-interaction);
|
||||
|
||||
padding: var(--space-24) var(--space-5);
|
||||
padding: var(--space-24) var(--space-32);
|
||||
margin-top: var(--space-40);
|
||||
position: sticky;
|
||||
bottom: var(--space-40);
|
||||
|
||||
@ -534,7 +534,7 @@
|
||||
@media (max-width: 768px) {
|
||||
.faq-section {
|
||||
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 {
|
||||
|
||||
@ -87,6 +87,7 @@ input:focus {
|
||||
|
||||
.form-group.has-error input {
|
||||
border-color: var(--error);
|
||||
box-shadow: var(--shadow-error);
|
||||
}
|
||||
|
||||
.form-group.has-error .error-message--field-callout {
|
||||
@ -149,7 +150,7 @@ input:focus {
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: var(--space-2) var(--space-5);
|
||||
padding: var(--space-2) var(--space-32);
|
||||
background-color: var(--olive);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
@ -172,7 +173,7 @@ input:focus {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
padding: var(--space-16) var(--space-5);
|
||||
padding: var(--space-16) var(--space-32);
|
||||
border: none;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-24);
|
||||
margin-bottom: var(--space-5);
|
||||
margin-bottom: var(--space-32);
|
||||
}
|
||||
|
||||
.profile-kicker {
|
||||
@ -14,7 +14,7 @@
|
||||
color: var(--olive);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-la);
|
||||
letter-spacing: var(--ls-lg);
|
||||
}
|
||||
|
||||
#headline {
|
||||
@ -55,7 +55,7 @@
|
||||
.profile-panel {
|
||||
background: var(--butter-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5);
|
||||
padding: var(--space-32);
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
@ -76,7 +76,7 @@
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-interaction);
|
||||
padding: var(--space-5) var(--space-40);
|
||||
padding: var(--space-32) var(--space-40);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-40);
|
||||
@ -114,7 +114,7 @@
|
||||
color: var(--olive);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: var(--ls-la);
|
||||
letter-spacing: var(--ls-lg);
|
||||
}
|
||||
|
||||
.profile-event-address {
|
||||
@ -163,7 +163,7 @@
|
||||
color: var(--olive);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--ls-la);
|
||||
letter-spacing: var(--ls-lg);
|
||||
}
|
||||
|
||||
.profile-empty-state h3 {
|
||||
@ -225,6 +225,7 @@
|
||||
|
||||
.form-group.has-error input {
|
||||
border-color: var(--error);
|
||||
box-shadow: var(--shadow-error);
|
||||
}
|
||||
|
||||
.profile-feedback {
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
--space-16: 1rem; /* 16px */
|
||||
--space-20: 1.25rem; /* 20px */
|
||||
--space-24: 1.5rem; /* 24px */
|
||||
--space-5: 2rem; /* 32px */
|
||||
--space-32: 2rem; /* 32px */
|
||||
--space-40: 2.5rem; /* 40px */
|
||||
--space-7: 3rem; /* 48px */
|
||||
--space-64: 4rem; /* 64px */
|
||||
@ -64,7 +64,7 @@
|
||||
/* Letter Spacing */
|
||||
--ls-none: 0;
|
||||
--ls-sm: 2.5%;
|
||||
--ls-la: 5%;
|
||||
--ls-lg: 5%;
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
@ -91,7 +91,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
h1 {
|
||||
font-size: clamp(2.25rem, 5vw, 3rem);
|
||||
letter-spacing: var(--ls-sm);
|
||||
margin-bottom: var(--space-5);
|
||||
margin-bottom: var(--space-32);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -129,15 +129,15 @@ p {
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
label {
|
||||
font-family: var(--font-main);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--ls-sm);
|
||||
letter-spacing: var(--ls-lg);
|
||||
line-height: 1;
|
||||
margin-bottom: var(--space-0);
|
||||
}*/
|
||||
margin-bottom: var(--space-16);
|
||||
}
|
||||
|
||||
.option {
|
||||
font-family: var(--font-main);
|
||||
@ -145,7 +145,7 @@ label {
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--ls-sm);
|
||||
line-height: 1;
|
||||
margin-bottom: var(--space-16);
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
.link-text a{
|
||||
@ -211,16 +211,13 @@ label {
|
||||
display: none;
|
||||
width: max-content;
|
||||
max-width: 15rem;
|
||||
padding: 0.7rem 1.15rem;
|
||||
border-radius: 1rem;
|
||||
padding: var(--space-6) var(--space-16);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--error);
|
||||
color: #ffffff;
|
||||
color: var(--butter-light);
|
||||
text-align: center;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.25;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
box-shadow: var(--shadow-interaction);
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -342,7 +339,7 @@ label {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
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;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@ -388,7 +385,7 @@ label {
|
||||
.nav-tab-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-5);
|
||||
gap: var(--space-32);
|
||||
}
|
||||
|
||||
|
||||
@ -402,7 +399,7 @@ label {
|
||||
font-family: var(--font-main);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--ls-la);
|
||||
letter-spacing: var(--ls-lg);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@ -760,7 +757,7 @@ label {
|
||||
|
||||
.modal-content {
|
||||
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);
|
||||
box-shadow: var(--shadow-interaction);
|
||||
max-width: 500px;
|
||||
@ -773,27 +770,21 @@ label {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
flex: 0 0 48px;
|
||||
border: 1.5px solid var(--olive);
|
||||
border-radius: 999px;
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-pill);
|
||||
color: var(--black);
|
||||
background: var(--butter-light);
|
||||
color: var(--olive);
|
||||
font-family: "Bagel Fat One", cursive;
|
||||
font-size: 1.7rem;
|
||||
font-family: "Bagel Fat One";
|
||||
font-size: 1.75rem;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-interaction);
|
||||
transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-info:hover,
|
||||
.btn-info:focus-visible {
|
||||
background: var(--butter);
|
||||
border-color: var(--olive-dark);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-info:focus-visible {
|
||||
outline: 2px solid var(--olive-dark);
|
||||
background: var(--olive-light);
|
||||
}
|
||||
|
||||
@keyframes modalSlideIn {
|
||||
@ -822,7 +813,7 @@ label {
|
||||
margin-left: auto;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--olive);
|
||||
color: var(--black);
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
@ -830,20 +821,14 @@ label {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
transition: color 0.2s ease, transform 0.2s ease;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-close:hover,
|
||||
.modal-close:focus-visible {
|
||||
color: var(--olive-dark);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.modal-close:focus-visible {
|
||||
outline: 2px solid var(--olive-dark);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
font-size: 28px;
|
||||
color: var(--black);
|
||||
@ -959,7 +944,7 @@ input[type="password"] {
|
||||
padding: var(--space-12) var(--space-16);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: transparent;
|
||||
background: var(--butter-light);
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
<div class="step-copy">
|
||||
<p class="badge">Schritt 1</p>
|
||||
<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,
|
||||
ein Dinner mit Wow-Effekt oder einfach ein entspanntes Mittagessen mit gutem Essen?
|
||||
</p>
|
||||
@ -150,7 +150,7 @@
|
||||
<div class="step-copy">
|
||||
<p class="badge">Schritt 2</p>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
@ -199,7 +199,7 @@
|
||||
<div class="step-copy">
|
||||
<p class="badge">Schritt 3</p>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
@ -228,7 +228,8 @@
|
||||
</fieldset>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@ -240,7 +241,7 @@
|
||||
<div class="step-copy">
|
||||
<p class="badge">Schritt 4</p>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
@ -266,7 +267,7 @@
|
||||
<div class="step-copy">
|
||||
<p class="badge">Schritt 5</p>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
@ -290,7 +291,7 @@
|
||||
<div class="step-copy">
|
||||
<p class="badge">Schritt 6</p>
|
||||
<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.
|
||||
Ein klarer Titel (z.B. "Italienische Tavolata") und ein guter Beschreibungstext (Ablauf etc.) machen den Unterschied.
|
||||
</p>
|
||||
@ -308,12 +309,13 @@
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label>Wie wird dein Event aussehen? <span class="field-hint-inline">(optional)</span></label>
|
||||
<div class="gallery-upload">
|
||||
<label>Wie wird dein Event aussehen?</label>
|
||||
<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>
|
||||
<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>
|
||||
<span class="gallery-add-button__text">Foto<br>hinzufügen</span>
|
||||
<span class="option">Foto hinzufügen</span>
|
||||
</button>
|
||||
<input type="file" id="galleryFileInput" accept="image/*" multiple hidden />
|
||||
</div>
|
||||
@ -327,7 +329,7 @@
|
||||
<div class="step-copy">
|
||||
<p class="badge">Schritt 7</p>
|
||||
<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,
|
||||
kannst du dein Event jetzt veröffentlichen und Gäste einladen.
|
||||
</p>
|
||||
@ -449,7 +451,7 @@
|
||||
<i class="fa-solid fa-champagne-glasses"></i>
|
||||
</span>
|
||||
</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.
|
||||
Im Profil kannst du dein Event anschauen, verwalten oder direkt das nächste planen.
|
||||
</p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user