diff --git a/assets/icon_eating-svgrepo-com.svg b/assets/icon_eating-svgrepo-com.svg
new file mode 100644
index 0000000..36662df
--- /dev/null
+++ b/assets/icon_eating-svgrepo-com.svg
@@ -0,0 +1,40 @@
+
+
+
\ No newline at end of file
diff --git a/assets/icon_table-dinner-svgrepo-com.svg b/assets/icon_table-dinner-svgrepo-com.svg
new file mode 100644
index 0000000..dc9565d
--- /dev/null
+++ b/assets/icon_table-dinner-svgrepo-com.svg
@@ -0,0 +1,82 @@
+
+
+
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index ea5bc3b..91f06d0 100644
--- a/css/index.css
+++ b/css/index.css
@@ -48,15 +48,18 @@
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
- gap: 50px;
- margin-bottom: 80px;
+ gap: 55px;
+ margin-bottom: 88px;
align-items: center;
- padding: 40px 0;
+ padding: 44px 0;
+}
+
+.hero__left .badge {
+ margin-bottom: var(--space-3);
}
.hero__left h1 {
- white-space: nowrap;
- font-size: 2.4rem;
+ font-size: 2.64rem;
color: var(--black);
}
@@ -65,6 +68,12 @@
line-height: 1.8;
}
+.hero__buttons {
+ display: flex;
+ gap: var(--space-3);
+ flex-wrap: wrap;
+}
+
.hero__right {
display: flex;
align-items: center;
@@ -73,15 +82,15 @@
.image-card {
width: 100%;
- max-width: 396px;
+ max-width: 436px;
overflow: hidden;
border-radius: var(--radius-lg);
}
.hero-image {
width: 100%;
- max-width: 396px;
- max-height: 464px;
+ max-width: 436px;
+ max-height: 510px;
height: auto;
border-radius: var(--radius-lg);
object-fit: cover;
@@ -131,7 +140,7 @@
display: flex;
flex-direction: column;
align-items: center;
- gap: 16px;
+ gap: 12px;
padding: 28px 20px;
background: var(--white);
border-radius: 28px;
@@ -154,6 +163,12 @@
color: var(--brown);
}
+.how-step__icon {
+ font-size: 2.4rem;
+ color: var(--brown);
+ margin-top: 12px;
+}
+
.how-step__png {
width: 192px;
height: 192px;
@@ -166,9 +181,9 @@
.how-step__label {
margin: 0;
- font-size: 1rem;
+ font-size: 0.95rem;
line-height: 1.6;
- font-weight: 600;
+ font-weight: 400;
color: var(--black);
text-align: center;
}
@@ -182,6 +197,28 @@
font-weight: 700;
}
+.how-step__footer-pill {
+ margin-bottom: 4px;
+}
+
+.how-step__footer-badges {
+ display: flex;
+ gap: var(--space-2);
+ justify-content: center;
+}
+
+.how-step__footer-banner {
+ width: 100%;
+ padding: 10px 16px;
+ background: var(--butter);
+ border-radius: var(--radius-sm);
+ text-align: center;
+ font-family: 'Bagel Fat One', sans-serif;
+ font-size: 0.85rem;
+ letter-spacing: 0.12rem;
+ color: var(--brown);
+}
+
@media (max-width: 900px) {
.how-it-works__steps {
grid-template-columns: 1fr;
diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css
index e1ef140..e56c40b 100644
--- a/css/stylesheet_global.css
+++ b/css/stylesheet_global.css
@@ -172,6 +172,22 @@ p {
}
+/* Badge */
+.badge {
+ display: inline-block;
+ padding: 0.25rem 0.75rem;
+ background-color: var(--olive-light);
+ color: var(--olive-dark);
+ font-family: 'Jost', sans-serif;
+ font-size: 0.75rem;
+ font-weight: 600;
+ letter-spacing: 0.08rem;
+ text-transform: uppercase;
+ border-radius: var(--radius-pill);
+ line-height: 1.4;
+}
+
+
/* Buttons */
.button {
display: inline-block;
@@ -184,12 +200,24 @@ p {
font-size: 1.25rem;
color: var(--butter-light);
cursor: pointer;
+ text-decoration: none;
}
.button:hover {
background-color: var(--olive-dark);
}
+.button--outline {
+ background-color: transparent;
+ color: var(--olive);
+ border: 2px solid var(--olive);
+}
+
+.button--outline:hover {
+ background-color: var(--olive-light);
+ color: var(--black);
+}
+
.button-small {
background: var(--olive);
@@ -254,6 +282,51 @@ p {
display: none;
}
+/* Card Footer */
+.card-footer {
+ margin-top: auto;
+ padding-top: var(--space-3);
+ width: 100%;
+}
+
+/* Text Muted */
+.text-muted {
+ color: #888;
+ font-size: 0.8rem;
+ font-weight: 400;
+ line-height: 1.4;
+}
+
+/* Instagram Invite */
+.instagram-invite {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ margin-top: var(--space-7);
+}
+
+.instagram-invite__link {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ text-decoration: none;
+}
+
+.instagram-invite__icon {
+ height: 32px;
+ width: 32px;
+ object-fit: contain;
+ border-radius: 8px;
+ filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%);
+}
+
+.instagram-invite__logo {
+ height: 56px;
+ width: 56px;
+ object-fit: contain;
+}
+
/* Footer */
.footer {
display: flex;
diff --git a/datenschutz.html b/datenschutz.html
index aef1b6c..39eae82 100644
--- a/datenschutz.html
+++ b/datenschutz.html
@@ -86,6 +86,12 @@
+
+ 
+
+