diff --git a/assets/icon_Plate.png b/assets/icon_Plate.png
deleted file mode 100644
index 7152cc5..0000000
Binary files a/assets/icon_Plate.png and /dev/null differ
diff --git a/assets/icon_add-event.png b/assets/icon_add-event.png
deleted file mode 100644
index cb06b43..0000000
Binary files a/assets/icon_add-event.png and /dev/null differ
diff --git a/assets/icon_register.png b/assets/icon_register.png
deleted file mode 100644
index 513e376..0000000
Binary files a/assets/icon_register.png and /dev/null differ
diff --git a/assets/icon_table-dinner-svgrepo-com.svg b/assets/icon_table-dinner-svgrepo-com.svg
deleted file mode 100644
index dc9565d..0000000
--- a/assets/icon_table-dinner-svgrepo-com.svg
+++ /dev/null
@@ -1,82 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/css/event_create.css b/css/event_create.css
index ea1fd10..7fb1c05 100644
--- a/css/event_create.css
+++ b/css/event_create.css
@@ -49,7 +49,7 @@
width: min(100%, var(--content-width));
margin: 0 auto;
display: grid;
- gap: var(--space-6);
+ gap: var(--space-40);
}
.step-layout--intro {
@@ -97,7 +97,7 @@ fieldset {
}
.intro-card {
- padding: var(--space-6);
+ padding: var(--space-40);
border-radius: 1.75rem;
background: linear-gradient(135deg, var(--color-surface), var(--color-surface-soft));
}
@@ -209,7 +209,7 @@ textarea:focus {
.option-card {
position: relative;
display: grid;
- padding: var(--space-31);
+ padding: var(--space-20);
border: 1.5px solid var(--olive-light);
border-radius: var(--radius-md);
background: var(--butter-light);
@@ -444,28 +444,11 @@ textarea:focus {
justify-content: center;
}
-.gallery-add-btn {
- width: 5.5rem;
- height: 5.5rem;
- border: 2px dashed var(--color-border-strong);
- border-radius: var(--radius-sm, 0.5rem);
- background: transparent;
- font-size: 2rem;
- color: var(--color-muted);
- cursor: pointer;
- flex-shrink: 0;
- transition: border-color 0.15s, color 0.15s;
-}
-
-.gallery-add-btn:hover {
- border-color: var(--olive);
- color: var(--olive);
-}
.site-footer {
width: min(100% - 2rem, var(--max-width));
margin: 0 auto;
- padding: var(--space-5) 0 var(--space-6);
+ padding: var(--space-5) 0 var(--space-40);
color: var(--color-muted);
text-align: center;
}
diff --git a/css/event_overview.css b/css/event_overview.css
index 196a1a6..4c70889 100644
--- a/css/event_overview.css
+++ b/css/event_overview.css
@@ -4,26 +4,15 @@
Shared Typography Tokens
Reuse common text styles across nav, controls and buttons
--------------------------------------------------------- */
-.nav-link,
-.login-pill,
-.category-item,
+
+
.meta-filter select,
.meta-filter input[type="date"],
-.btn-primary,
-.empty-state-btn,
.detail-primary-btn {
- font-family: "Jost", sans-serif;
- font-size: 17px;
- font-weight: 500;
- letter-spacing: var(--ls-ui);
-}
-
-.event-date-time,
-.event-location {
- color: var(--olive);
- font-size: 18px;
- font-weight: 400;
- line-height: 1.3;
+ font-family: var(--font-main);
+ font-size: 1.125rem;
+ line-height: 1;
+ color: var(--black);
}
/* Heading hierarchy: page title > detail title > card title > section title */
@@ -54,17 +43,15 @@
--------------------------------------------------------- */
.filter-label {
margin: 0 0 var(--space-1);
- color: var(--olive);
- font-size: 18px;
letter-spacing: var(--ls-la);
}
.filter-row {
display: flex;
- align-items: flex-end;
+ align-items: center;
justify-content: space-between;
gap: var(--space-3);
- margin-bottom: var(--space-6);
+ margin-bottom: var(--space-2);
}
.category-group {
@@ -75,26 +62,15 @@
flex: 1;
}
-.category-item {
+.event-tag {
border: 1.5px solid var(--tomato);
- border-radius: var(--radius-pill);
- background: var(--butter-light);
color: var(--tomato);
- line-height: 1.3;
- padding: var(--space-1) var(--space-31);
- min-height: 40px;
- cursor: pointer;
- transition: background-color 0.2s ease, color 0.2s ease;
-}
-
-.category-item:hover {
- background: var(--tomato);
- color: var(--butter-light);
-}
-
-.category-item.active {
- background: var(--tomato);
- color: var(--butter-light);
+ border-radius: var(--radius-pill);
+ font-family: var(--font-main);
+ font-weight: 400;
+ font-size: 1rem;
+ line-height: 1;
+ padding: var(--space-1) var(--space-20);
}
.meta-filter-group {
@@ -114,48 +90,43 @@
.meta-filter select,
.meta-filter input[type="date"] {
- border: 1.5px solid var(--tomato);
+ border: 1.5px solid var(--olive);
border-radius: var(--radius-sm);
background: var(--butter-light);
- color: var(--black);
- padding: var(--space-1) var(--space-4);
- min-height: 40px;
- height: 40px;
+ height: 37px;
+ padding: 0 var(--space-4);
box-sizing: border-box;
}
-/*
+
.meta-filter select:focus,
.meta-filter input[type="date"]:focus {
- outline: 2px solid rgba(107, 107, 5, 0.35);
- outline-offset: 1px;
-}*/
+ border: 1.5px solid var(--olive-dark);
+ outline: 2px solid var(--butter);
+}
.meta-filter input[type="date"] {
color-scheme: light;
- accent-color: var(--tomato);
+ accent-color: var(--olive-dark);
}
.meta-filter input[type="date"]::-webkit-calendar-picker-indicator {
cursor: pointer;
- border-radius: 4px;
- padding: 4px;
- filter: invert(35%) sepia(60%) saturate(600%) hue-rotate(22deg) brightness(90%) contrast(95%);
+ filter: invert(8%) sepia(5%) saturate(300%) hue-rotate(10deg) brightness(10%) contrast(95%);
transition: background-color 0.2s ease;
}
.meta-filter input[type="date"]::-webkit-calendar-picker-indicator:hover {
- background-color: var(--olive-light);
+ filter: brightness(0.8);
}
.meta-filter select {
cursor: pointer;
- appearance: none;
-webkit-appearance: none;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B05' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
background-repeat: no-repeat;
- background-position: right 12px center;
- padding-right: 36px;
+ color: var(--black);
+ background-position: right var(--space-4) center;
}
/* ---------------------------------------------------------
@@ -164,7 +135,7 @@
.event-list {
display: flex;
flex-direction: column;
- gap: 18px;
+ gap: var(--space-3);
}
.event-card {
@@ -172,11 +143,9 @@
background: var(--butter-light);
border: 1.5px solid var(--olive-light);
border-radius: var(--radius-lg);
- padding: var(--space-5) var(--space-6);
+ padding: var(--space-5) var(--space-40);
display: flex;
- /*justify-content: space-between;
- align-items: flex-start;*/
- gap: var(--space-6);
+ gap: var(--space-40);
cursor: pointer;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
@@ -232,7 +201,7 @@
font-weight: 400;
font-size: 1rem;
line-height: 1;
- padding: var(--space-1) var(--space-31);
+ padding: var(--space-1) var(--space-20);
}
.event-spec-chip {
@@ -311,9 +280,8 @@
padding: 42px var(--space-5);
border: 2px solid var(--olive-light);
border-radius: var(--radius-lg);
- background: rgba(255, 255, 255, 0.92);
+ background: var(--butter-light);
margin-top: 8px;
- box-shadow: 0 3px 12px rgba(102, 52, 13, 0.08);
}
.empty-state-kicker {
@@ -345,19 +313,6 @@
text-decoration: none;
}
-.empty-state-btn {
- border: 0;
- border-radius: var(--radius-pill);
- background: var(--olive);
- color: var(--butter-light);
- font-weight: 600;
- padding: 10px 22px;
- cursor: pointer;
-}
-
-.empty-state-btn:hover {
- filter: brightness(0.95);
-}
/* ---------------------------------------------------------
Detail Page
@@ -367,29 +322,9 @@
gap: 14px;
}
-.detail-back {
- display: inline-flex;
- align-items: center;
- justify-content: flex-start;
- gap: var(--space-1);
- width: fit-content;
- color: var(--tomato);
- text-decoration: none;
- font-family: "Jost", sans-serif;
- font-size: 17px;
- font-weight: 500;
- letter-spacing: var(--ls-none);
- line-height: 1.2;
-}
-
-.detail-back span {
- font-size: 24px;
- line-height: 1;
-}
-
.detail-hero {
display: grid;
- margin-bottom: var(--space-6);
+ margin-bottom: var(--space-40);
}
.detail-top-row {
@@ -414,7 +349,7 @@
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "side gallery";
- gap: var(--space-6);
+ gap: var(--space-40);
align-items: stretch;
}
@@ -460,7 +395,7 @@
font-size: 1rem;
line-height: 1;
letter-spacing: var(--ls-la);
- padding: var(--space-1) var(--space-31);
+ padding: var(--space-1) var(--space-20);
}
.detail-gallery {
@@ -661,9 +596,9 @@
box-shadow: var(--shadow-interaction);
padding: var(--space-4) var(--space-5);
- margin-top: var(--space-6);
+ margin-top: var(--space-40);
position: sticky;
- bottom: var(--space-6);
+ bottom: var(--space-40);
z-index: 100;
}
@@ -844,10 +779,6 @@
font-size: 15px;
}
- .category-item {
- font-size: 15px;
- padding: 8px 14px;
- }
.meta-filter {
min-width: 155px;
@@ -861,23 +792,6 @@
height: 38px;
}
- .event-card {
- flex-direction: column;
- align-items: stretch;
- gap: 16px;
- padding: 22px 20px 20px;
- }
-
- .event-date-time,
- .event-location,
- .event-spots {
- font-size: 18px;
- }
-
- .event-side {
- padding-top: 0;
- justify-content: space-between;
- }
.event-side-full {
justify-content: flex-end;
diff --git a/css/index.css b/css/index.css
index 3fd3f51..aec4272 100644
--- a/css/index.css
+++ b/css/index.css
@@ -127,33 +127,43 @@
display: flex;
flex-direction: column;
align-items: center;
- gap: 12px;
- padding: 28px 20px;
- background: var(--white);
- border-radius: 28px;
- box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
+ padding: var(--space-40);
+ background: var(--butter-light);
+ border-radius: var(--radius-lg);
}
-.how-step--numbered {
+.how-step-number-numbered {
position: relative;
}
-.how-step__corner-number {
+.how-step_corner-number {
position: absolute;
- top: 12px;
- left: 16px;
- font-size: 2.2rem;
- font-weight: 700;
+ color: var(--butter-light);
+ background: var(--tomato);
+ border-radius: var(--radius-lg);
+ top: var(--space-20);
+ left: var(--space-20);
+ width: 44px;
+ height: 44px;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ font-family: 'Bagel Fat One';
+ font-size: 1.5rem;
+ font-weight: 400;
+ color: var(--butter-light);
}
-.how-step__corner-number--brown {
+.how-step_corner-number--brown {
color: var(--brown);
}
-.how-step__icon {
- font-size: 2.4rem;
+.how-step_icon {
+ font-size: 3.5rem;
color: var(--brown);
- margin-top: 12px;
+ margin: var(--space-4) 0;
}
.how-step__png {
@@ -166,24 +176,14 @@
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: 0.95rem;
- line-height: 1.6;
- font-weight: 400;
- color: var(--black);
+.how-step_text {
+ margin-bottom: var(--space-4);
text-align: center;
}
-.how-step__label--brown {
- color: var(--brown);
+.text-left{
+ text-align: left;
}
-
-.how-step__label--big {
- font-size: 1.25rem;
- font-weight: 700;
-}
-
.how-step__footer-pill {
margin-bottom: 4px;
}
@@ -246,77 +246,71 @@
.gallery__arrow {
position: absolute;
- top: 50%;
- transform: translateY(-50%);
+ display: grid;
+ top: 45%;
width: 44px;
height: 44px;
- display: grid;
+ border: 1.5px solid var(--butter-light);
+ background: var(--butter-light);
+ border-radius: var(--radius-lg);
+ font-family: var(--font-main);
+ font-weight: 400;
+ font-size: 1.25rem;
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;
+ color: var(--olive);
+ cursor: pointer;
+ text-decoration: none;
+ transition: background-color 0.2s ease, border-color 0.2s ease;
}
-.gallery__arrow:hover {
- background: rgba(0, 0, 0, 0.55);
- transform: translateY(-50%) scale(1.1);
-}
+.gallery__arrow:hover,
.gallery__arrow:focus-visible {
- outline: 2px solid var(--brown);
- outline-offset: 3px;
+ border: 1.5px solid var(--butter);
+ background: var(--butter);
}
.gallery__arrow--prev {
- left: 12px;
+ left: var(--space-4);
}
.gallery__arrow--next {
- right: 12px;
+ right: var(--space-4);
}
/* --- Carousel dot indicators --- */
-.gallery__dots {
+.gallery_dots {
display: flex;
justify-content: center;
gap: 10px;
padding: 12px 0 8px;
}
-.gallery__dot {
+.gallery_dot {
width: 12px;
height: 12px;
border-radius: 50%;
- border: 2px solid var(--brown);
+ border: 2px solid var(--olive);
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);
+.gallery_dot:hover,
+.gallery_dot--active {
+ background: var(--olive);;
transform: scale(1.2);
}
-.gallery__dot:focus-visible {
- outline: 2px solid var(--brown);
+.gallery_dot:focus-visible {
+ outline: 2px solid var(--olive);
outline-offset: 3px;
}
-.gallery__dot--active {
- background: var(--brown);
-}
-
@media (max-width: 900px) {
.gallery__track {
gap: 16px;
diff --git a/css/login_signup.css b/css/login_signup.css
index 3b204d7..f2131db 100644
--- a/css/login_signup.css
+++ b/css/login_signup.css
@@ -128,7 +128,7 @@ button[type="submit"]:active {
background-color: var(--butter-light);
border-left: 4px solid var(--olive);
padding: var(--space-3);
- margin-bottom: var(--space-6);
+ margin-bottom: var(--space-40);
border-radius: 4px;
font-size: 0.9rem;
color: var(--black);
@@ -178,31 +178,12 @@ button[type="submit"]:active {
align-items: center;
}
-.modal-content {
- background-color: var(--white);
- padding: 40px;
- border-radius: var(--radius-lg);
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
- max-width: 500px;
- width: 90%;
- text-align: center;
- animation: slideIn 0.3s ease;
-}
@keyframes slideIn {
from { transform: translateY(-50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
-.modal-header {
- position: relative;
- margin-bottom: var(--space-4);
-}
-
-.modal-header h2 {
- color: var(--olive);
- font-size: 1.5rem;
-}
.close-btn {
position: absolute;
@@ -220,13 +201,6 @@ button[type="submit"]:active {
justify-content: center;
}
-.modal-body {
- color: var(--black);
- font-size: 1rem;
- line-height: 1.6;
- margin-bottom: var(--space-6);
-}
-
.modal-footer {
display: flex;
gap: var(--space-2);
@@ -253,13 +227,14 @@ button[type="submit"]:active {
/* --- Footer --- */
+
.footer {
- display: flex;
- justify-content: center;
- align-items: center;
- padding: var(--space-3) var(--space-5);
- border: none;
- margin-top: 40px;
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ align-items: center;
+ padding: var(--space-3) var(--space-5);
+ border: none;
+ margin-top: 40px;
}
.footer_link {
@@ -269,6 +244,23 @@ button[type="submit"]:active {
font-weight: 400;
}
+/* Left aligned */
+.footer-left {
+ justify-self: start;
+}
+
+/* Center aligned */
+.footer-center {
+ justify-self: center;
+}
+
+/* Right aligned */
+.footer-right {
+ justify-self: end;
+ display: flex;
+ gap: var(--space-4);
+}
+
/* --- Responsive --- */
@@ -292,7 +284,7 @@ button[type="submit"]:active {
transform: translateX(-50%) translateY(100px);
background: var(--olive);
color: var(--white);
- padding: var(--space-3) var(--space-6);
+ padding: var(--space-3) var(--space-40);
border-radius: var(--radius-pill);
font-size: 1rem;
font-weight: 600;
diff --git a/css/my_profil.css b/css/my_profil.css
index 94ea2f0..0e1403b 100644
--- a/css/my_profil.css
+++ b/css/my_profil.css
@@ -22,7 +22,7 @@
letter-spacing: var(--ls-la);
}
-#profile-headline {
+#headline {
margin: 0.4rem 0;
color: var(--brown);
font-size: clamp(2rem, 4.4vw, 2.8rem);
@@ -44,43 +44,11 @@
gap: var(--space-4);
}
-.profile-tabs {
- display: inline-flex;
- flex-wrap: wrap;
- gap: var(--space-2);
-}
-
-.profile-tab {
- border: 2px solid var(--olive);
- border-radius: var(--radius-md);
- background: var(--butter);
- color: var(--black);
- padding: 0.45rem 1rem;
- min-height: 2.5rem;
- font-family: "Jost", sans-serif;
- font-size: 1rem;
- font-weight: 500;
- letter-spacing: var(--ls-ui);
- cursor: pointer;
- transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
-}
-
-.profile-tab:hover,
-.profile-tab:focus-visible {
- background: #faf8e8;
-}
-
-.profile-tab.is-active {
- border-color: transparent;
- background: var(--olive);
- color: var(--white);
-}
/* Konsistentes Karten-Layout für alle Profilsektionen. */
.profile-panel {
- background: rgba(255, 255, 255, 0.88);
+ background: var(--butter-light);
border-radius: var(--radius-lg);
- box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
padding: var(--space-5);
}
@@ -115,38 +83,34 @@
/* Einzelne Eventkarte für "Meine Events" und "Meine Anmeldungen". */
.profile-event-card {
- border: 1px solid rgba(107, 107, 5, 0.25);
- border-radius: var(--radius-md);
- padding: var(--space-3);
+ background: var(--butter-light);
+ border: 1.5px solid var(--olive-light);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-interaction);
+ padding: var(--space-5) var(--space-40);
display: flex;
justify-content: space-between;
- align-items: center;
- gap: var(--space-3);
-}
-
-.profile-event-card-clickable {
+ gap: var(--space-40);
cursor: pointer;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
+.profile-event-card-clickable {
+ cursor: pointer;
+}
+
.profile-event-card-clickable:hover {
- box-shadow: 0 6px 16px rgba(102, 52, 13, 0.14);
transform: translateY(-1px);
}
-.profile-event-title {
+.profile-event-title h3{
margin: 0;
- color: var(--black);
- font-family: "Jost", sans-serif;
- font-size: 1.25rem;
- font-weight: 600;
}
+/*
.profile-event-meta {
- margin: 0.3rem 0 0;
- font-size: 0.95rem;
- color: var(--olive);
-}
+
+}*/
.profile-event-address-block {
margin-top: 0.55rem;
@@ -191,56 +155,6 @@
gap: var(--space-2);
}
-.profile-unregister-btn {
- border: none;
- border-radius: var(--radius-md);
- background: var(--tomato);
- color: var(--butter-light);
- padding: 0.45rem 0.95rem;
- font-family: "Jost", sans-serif;
- font-size: 0.95rem;
- font-weight: 500;
- cursor: pointer;
- transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.profile-cancel-btn {
- border: none;
- border-radius: var(--radius-md);
- background: var(--tomato);
- color: var(--butter-light);
- padding: 0.45rem 0.95rem;
- font-family: "Jost", sans-serif;
- font-size: 0.95rem;
- font-weight: 500;
- cursor: pointer;
- transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.profile-cancel-btn:hover,
-.profile-cancel-btn:focus-visible {
- background: var(--tomato-dark);
- transform: translateY(-1px);
- box-shadow: 0 4px 10px rgba(188, 74, 52, 0.28);
-}
-
-.profile-cancel-btn:active {
- transform: translateY(0);
- box-shadow: 0 2px 6px rgba(188, 74, 52, 0.25);
-}
-
-.profile-unregister-btn:hover,
-.profile-unregister-btn:focus-visible {
- background: var(--tomato-dark);
- transform: translateY(-1px);
- box-shadow: 0 4px 10px rgba(188, 74, 52, 0.28);
-}
-
-.profile-unregister-btn:active {
- transform: translateY(0);
- box-shadow: 0 2px 6px rgba(188, 74, 52, 0.25);
-}
-
.profile-empty {
margin: 0;
color: var(--black);
diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css
index e61ddb4..4a3b0ef 100644
--- a/css/stylesheet_global.css
+++ b/css/stylesheet_global.css
@@ -45,10 +45,10 @@
--space-1: 0.5rem; /* 8px */
--space-2: 0.75rem; /* 12px */
--space-3: 1rem; /* 16px */
- --space-31: 1.25rem; /* 20px */
+ --space-20: 1.25rem; /* 20px */
--space-4: 1.5rem; /* 24px */
--space-5: 2rem; /* 32px */
- --space-6: 2.5rem; /* 40px */
+ --space-40: 2.5rem; /* 40px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
@@ -151,6 +151,41 @@ p {
font-size: 1rem;
}
+/* Margins */
+
+.margin-bottom-24 {
+ margin-bottom: var(--space-4);
+}
+
+.margin-bottom-40 {
+ margin-bottom: var(--space-40);
+}
+
+.event-side {
+ /* Right-side action area: availability status and optional signup button. */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-end;
+ gap: var(--space-3);
+ padding-top: 36px;
+ flex-shrink: 0;
+}
+
+/* Event-Beschrieb oberhalb von Eventtitel */
+.event-date-time,
+.event-location,
+.profile-event-meta {
+ color: var(--olive);
+ font-family: var(--font-main);
+ font-size: 1.125rem;
+ font-weight: 400;
+ line-height: 1;
+
+ display: inline-flex;
+ gap: var(--space-0);
+}
+
/* Layout */
.main-content {
margin-top: var(--space-8);
@@ -251,7 +286,6 @@ p {
font-size: 1rem;
font-weight: 600;
letter-spacing: var(--ls-la);
- margin-bottom: var(--space-6);
z-index: 0;
}
@@ -324,10 +358,37 @@ p {
border-color: var(--blue-dark);
}
+.button-primary-eigener-event{
+ display: inline-block;
+ padding: 0.375rem 1.5rem;
+ background-color: var(--blue);
+ border: 1.5px solid var(--blue);
+ border-radius: var(--radius-lg);
+ font-family: var(--font-main);
+ font-weight: 400;
+ font-size: 1.25rem;
+ color: var(--butter-light);
+ cursor: pointer;
+ text-decoration: none;
+ transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.button-primary-eigener-event:hover {
+ background: var(--blue-dark);
+ border-color: var(--blue-dark);
+}
+
+.button-primary-eigener-event:disabled {
+ border-color: transparent;
+ background-color: var(--olive-light);
+ color: var(--olive-dark);
+ cursor: not-allowed;
+}
+
.button-secondary {
display: inline-block;
padding: 0.375rem 1.5rem;
- background-color: var(--butter);
+ background-color: transparent;
border: 1.5px solid var(--olive);
border-radius: var(--radius-lg);
font-family: var(--font-main);
@@ -366,7 +427,7 @@ p {
font-family: var(--font-main);
font-weight: 400;
font-size: 1.25rem;
- color: var(--butter);
+ color: var(--butter-light);
cursor: pointer;
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease;
@@ -377,6 +438,45 @@ p {
border-color: var(--olive-dark);
}
+
+.category-item {
+ border: 1.5px solid var(--tomato);
+ color: var(--tomato);
+ border-radius: var(--radius-pill);
+ background: var(--butter-light);
+ font-family: var(--font-main);
+ font-weight: 400;
+ font-size: 1.125rem;
+ line-height: 1;
+ padding: var(--space-1) var(--space-20);
+ cursor: pointer;
+ transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.category-item:hover, .category-item:focus-visible {
+ background: var(--tomato);
+ color: var(--butter-light);
+}
+
+.category-item.is-active, .category-item.active {
+ background: var(--tomato);
+ color: var(--butter-light);
+}
+
+.category-item-profile {
+ font-size: 1.25rem;
+ font-weight: 400;
+ line-height: 1;
+ padding: var(--space-1) var(--space-4);
+
+}
+
+.category-items {
+ display: inline-flex;
+ flex-wrap: wrap;
+ gap: var(--space-1);
+}
+
.button-small {
background: var(--olive);
color: var(--butter-light);
@@ -438,19 +538,13 @@ p {
/* Utilities */
.text-center {
- text-align: left;
+ text-align: center;
}
.hidden {
display: none !important;
}
-/* Card Footer */
-.card-footer {
- margin-top: auto;
- padding-top: var(--space-3);
- width: 100%;
-}
/* Text Muted */
.text-muted {
@@ -465,7 +559,7 @@ p {
display: flex;
align-items: center;
justify-content: center;
- gap: 10px;
+ height: 1em; /* keeps it aligned with text size */
margin-top: var(--space-7);
}
@@ -476,7 +570,7 @@ p {
text-decoration: none;
}
-.instagram-invite__icon {
+.instagram-invite_icon {
height: 32px;
width: 32px;
object-fit: contain;
@@ -484,12 +578,19 @@ p {
filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%);
}
-.instagram-invite__logo {
+.footer-invite_logo {
height: 56px;
width: 56px;
object-fit: contain;
}
+.inline {
+ color: var(--tomato);
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
/* Modal / Popup */
.modal {
display: none;
@@ -516,9 +617,9 @@ p {
.modal-content {
background-color: var(--white);
- padding: 40px;
+ padding: var(--space-20) var(--space-20) var(--space-40) var(--space-20);
border-radius: var(--radius-lg);
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+ box-shadow: var(--shadow-interaction);
max-width: 500px;
width: 90%;
text-align: center;
@@ -532,12 +633,10 @@ p {
.modal-header {
position: relative;
- margin-bottom: var(--space-4);
}
.modal-header h2 {
- color: var(--olive);
- font-size: 1.5rem;
+ padding: var(--space-20)var(--space-20) 0 var(--space-20);
}
.close-btn {
@@ -557,10 +656,7 @@ p {
}
.modal-body {
- color: var(--black);
- font-size: 1rem;
- line-height: 1.6;
- margin-bottom: var(--space-6);
+ padding: var(--space-20) var(--space-20) var(--space-4) var(--space-20);
}
.modal-footer {
@@ -577,7 +673,7 @@ p {
transform: translateX(-50%) translateY(100px);
background: var(--olive);
color: var(--white);
- padding: var(--space-3) var(--space-6);
+ padding: var(--space-3) var(--space-40);
border-radius: var(--radius-pill);
font-size: 1rem;
font-weight: 600;
@@ -649,12 +745,34 @@ p {
}
/* Footer */
+
.footer {
- display: flex;
- /*justify-content: space-between;*/
- align-items: center;
- gap: 1.5rem;
- padding: var(--space-3) var(--space-7);
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ align-items: center;
+ padding: var(--space-3) var(--space-7);
+}
+
+.footer-links {
+ display: flex;
+ gap: var(--space-4);
+}
+
+/* Left aligned */
+.footer-left {
+ justify-self: start;
+}
+
+/* Centered */
+.footer-center {
+ justify-self: center;
+}
+
+/* Right aligned */
+.footer-right {
+ justify-self: end;
+ display: flex;
+ gap: var(--space-4);
}
/* Media Queries (Responsive) */
diff --git a/data/events.json b/data/events.json
index 8134836..c09641e 100644
--- a/data/events.json
+++ b/data/events.json
@@ -90,7 +90,7 @@
"date": "02. MAI. 2026",
"time": "12:30 UHR",
"category": "Lunch",
- "diet": "Pescetarisch",
+ "diet": "Fisch",
"spots": 8,
"host": {
"name": "Akiko",
diff --git a/datenschutz.html b/datenschutz.html
index 1e08a59..505bd1d 100644
--- a/datenschutz.html
+++ b/datenschutz.html
@@ -22,7 +22,7 @@
Datenschutzerklärung
- 1. Verantwortliche Stelle
+ 1. Verantwortliche Stelle
Invité GmbH
Musterstrasse 12
@@ -31,7 +31,7 @@
E-Mail: datenschutz@invite-cooking.ch
- 2. Erhebung und Verarbeitung personenbezogener Daten
+ 2. Erhebung und Verarbeitung personenbezogener Daten
Beim Besuch unserer Website werden automatisch Informationen allgemeiner Natur erfasst.
Diese Informationen (Server-Logfiles) beinhalten die Art des Webbrowsers, das verwendete
@@ -40,14 +40,14 @@
unserer Website verwendet.
- 3. Registrierung und Nutzerkonto
+ 3. Registrierung und Nutzerkonto
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.
- 4. Cookies
+ 4. Cookies
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
@@ -55,14 +55,14 @@
die Funktionalität der Website eingeschränkt sein kann.
- 5. Datenweitergabe an Dritte
+ 5. Datenweitergabe an Dritte
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.
- 6. Datensicherheit
+ 6. Datensicherheit
Wir setzen technische und organisatorische Sicherheitsmassnahmen ein, um Ihre Daten
gegen zufällige oder vorsätzliche Manipulation, Verlust, Zerstörung oder den Zugriff
@@ -70,7 +70,7 @@
der technologischen Entwicklung fortlaufend verbessert.
- 7. Ihre Rechte
+ 7. Ihre Rechte
Sie haben jederzeit das Recht auf Auskunft über die bei uns gespeicherten
personenbezogenen Daten. Ebenso haben Sie das Recht auf Berichtigung, Löschung
@@ -78,7 +78,7 @@
datenschutz@invite-cooking.ch
- 8. Änderungen dieser Datenschutzerklärung
+ 8. Änderungen dieser Datenschutzerklärung
Wir behalten uns vor, diese Datenschutzerklärung gelegentlich anzupassen, damit sie
stets den aktuellen rechtlichen Anforderungen entspricht oder um Änderungen unserer
@@ -86,16 +86,22 @@
-