From 820f13767a291148ea5da9c6d9b5ebbf9ba41233 Mon Sep 17 00:00:00 2001
From: Daniel Fromm <3015351@stud.hs-mannheim.de>
Date: Tue, 29 Sep 2026 14:53:50 +0200
Subject: [PATCH 1/7] =?UTF-8?q?US01-05=20Men=C3=BCleiste=20+=202=20Fehlerb?=
=?UTF-8?q?ereinigung?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
css/base.css | 224 ++++++++++---
ernaehrungsberatung.html | 666 ++++++++++++++++++---------------------
2 files changed, 482 insertions(+), 408 deletions(-)
diff --git a/css/base.css b/css/base.css
index 9504043..464842b 100644
--- a/css/base.css
+++ b/css/base.css
@@ -11,8 +11,15 @@
color-scheme: dark;
}
-* { box-sizing: border-box; }
-html { scroll-behavior: smooth; scroll-padding-top: 120px; }
+* {
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+ scroll-padding-top: 120px;
+}
+
body {
margin: 0;
background: var(--background);
@@ -22,29 +29,87 @@ body {
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
-main { overflow: clip; }
-h1, h2, h3, p, figure { margin: 0; }
-h1, h2, h3 {
+
+main {
+ overflow: clip;
+}
+
+h1,
+h2,
+h3,
+p,
+figure {
+ margin: 0;
+}
+
+h1,
+h2,
+h3 {
font-family: var(--font-display), sans-serif;
font-weight: 700;
letter-spacing: -.04em;
text-wrap: balance;
}
-h1, h2 { line-height: 1.12; }
-h3 { line-height: 1.35; }
-a { color: inherit; text-decoration: none; }
-button, select { font: inherit; }
-button { cursor: pointer; border: 0; }
-button, a, select { -webkit-tap-highlight-color: transparent; }
-a, button, select { touch-action: manipulation; }
+
+h1,
+h2 {
+ line-height: 1.12;
+}
+
+h3 {
+ line-height: 1.35;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+button,
+select {
+ font: inherit;
+}
+
+button {
+ cursor: pointer;
+ border: 0;
+}
+
+button,
+a,
+select {
+ -webkit-tap-highlight-color: transparent;
+}
+
+a,
+button,
+select {
+ touch-action: manipulation;
+}
+
:where(button, a, select):focus-visible {
outline: 2px solid var(--accent-strong);
outline-offset: 5px;
}
-img { display: block; max-width: 100%; object-fit: cover; }
-button:disabled { cursor: default; }
-[hidden] { display: none !important; }
-.shell { width: min(1280px, calc(100% - 128px)); margin-inline: auto; }
+
+img {
+ display: block;
+ max-width: 100%;
+ object-fit: cover;
+}
+
+button:disabled {
+ cursor: default;
+}
+
+[hidden] {
+ display: none !important;
+}
+
+.shell {
+ width: min(1280px, calc(100% - 128px));
+ margin-inline: auto;
+}
/* 2. Kopfbereich – Website-Logo ganz links, wie auf der Referenzseite */
.site-header {
@@ -52,13 +117,12 @@ button:disabled { cursor: default; }
top: 0;
z-index: 20;
border-bottom: 1px solid var(--line);
- background: linear-gradient(
- color-mix(in oklab, var(--background) 95%, transparent),
- color-mix(in oklab, var(--background) 80%, transparent)
- );
+ background: linear-gradient(color-mix(in oklab, var(--background) 95%, transparent),
+ color-mix(in oklab, var(--background) 80%, transparent));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
+
.header-inner {
width: calc(100% - 64px);
min-height: 98px;
@@ -68,12 +132,14 @@ button:disabled { cursor: default; }
gap: 24px;
padding-block: 16px;
}
+
.brand {
display: inline-flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
+
.brand-mark {
display: flex;
align-items: center;
@@ -87,16 +153,38 @@ button:disabled { cursor: default; }
background: #fff;
box-shadow: 0 14px 34px rgb(0 0 0 / 22%);
}
-.brand-logo img { width: 48px; height: 48px; object-fit: contain; }
-.brand-copy { display: grid; gap: 3px; }
+
+.brand-logo img {
+ width: 48px;
+ height: 48px;
+ object-fit: contain;
+}
+
+.brand-copy {
+ display: grid;
+ gap: 3px;
+}
+
.brand-name {
color: var(--quiet);
font-size: .75rem;
letter-spacing: .28em;
text-transform: uppercase;
}
-.brand-sub { color: var(--muted); font-size: .875rem; line-height: 1.5; }
-.header-inner nav { display: flex; align-items: center; gap: 5px; }
+
+.brand-sub {
+ color: var(--muted);
+ font-size: .875rem;
+ line-height: 1.5;
+}
+
+.header-inner nav {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ margin-left: auto;
+}
+
.header-inner nav a {
padding: 9px 14px;
border: 1px solid transparent;
@@ -106,13 +194,17 @@ button:disabled { cursor: default; }
white-space: nowrap;
transition: color .2s, background .2s, border-color .2s;
}
-.header-inner nav a:hover,
-.header-inner nav a[aria-current] {
- border-color: var(--line);
- background: rgb(255 255 255 / 5%);
- color: #fff;
+
+.header-inner nav a:hover {
+ border-color: transparent;
+ background: rgb(255 255 255 / 20%);
+ color: var(--accent-strong);
}
-.menu-toggle { display: none; }
+
+.menu-toggle {
+ display: none;
+}
+
.skip {
position: fixed;
left: 16px;
@@ -123,7 +215,10 @@ button:disabled { cursor: default; }
background: #fff;
color: var(--ink-strong);
}
-.skip:focus { top: 12px; }
+
+.skip:focus {
+ top: 12px;
+}
/* 3. Buttons – weiße Primär-CTAs, zurückhaltende Konturen */
.button {
@@ -142,17 +237,29 @@ button:disabled { cursor: default; }
text-align: center;
transition: background .25s, border-color .25s, transform .25s var(--ease);
}
-.button:hover { background: #e9edf0; transform: translateY(-2px); }
-.button.small { min-height: 42px; padding: 10px 20px; font-size: .875rem; }
-.button.outline, .header-cta {
+
+.button:hover {
+ background: #e9edf0;
+ transform: translateY(-2px);
+}
+
+.button.small {
+ min-height: 42px;
+ padding: 10px 20px;
+ font-size: .875rem;
+}
+
+.button.outline {
border-color: rgb(255 255 255 / 16%);
background: transparent;
color: #fff;
}
-.button.outline:hover, .header-cta:hover {
+
+.button.outline:hover {
border-color: rgb(255 255 255 / 28%);
background: rgb(255 255 255 / 7%);
}
+
.text-link {
display: inline-flex;
align-items: center;
@@ -166,14 +273,47 @@ button:disabled { cursor: default; }
line-height: 1.4;
transition: color .2s, border-color .2s;
}
-.text-link:hover { color: #fff; border-color: #fff; }
+
+.text-link:hover {
+ color: #fff;
+ border-color: #fff;
+}
/* Footer */
-footer { border-top: 1px solid var(--line); background: var(--sidebar); }
-.footer-main { display: flex; align-items: center; gap: 24px; padding-block: 32px; }
-.footer-main p { color: var(--muted); font-size: .9375rem; }
-.footer-main > a:last-child { margin-left: auto; color: var(--muted); font-size: .875rem; }
-.footer-main > a:last-child:hover { color: #fff; }
-.footer-note { display: flex; justify-content: space-between; gap: 24px; padding-block: 20px; border-top: 1px solid var(--line); color: var(--quiet); font-size: .75rem; }
+footer {
+ border-top: 1px solid var(--line);
+ background: var(--sidebar);
+}
+.footer-main {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+ padding-block: 32px;
+}
+
+.footer-main p {
+ color: var(--muted);
+ font-size: .9375rem;
+}
+
+.footer-main>a:last-child {
+ margin-left: auto;
+ color: var(--muted);
+ font-size: .875rem;
+}
+
+.footer-main>a:last-child:hover {
+ color: #fff;
+}
+
+.footer-note {
+ display: flex;
+ justify-content: space-between;
+ gap: 24px;
+ padding-block: 20px;
+ border-top: 1px solid var(--line);
+ color: var(--quiet);
+ font-size: .75rem;
+}
\ No newline at end of file
diff --git a/ernaehrungsberatung.html b/ernaehrungsberatung.html
index 3345199..24e80f2 100644
--- a/ernaehrungsberatung.html
+++ b/ernaehrungsberatung.html
@@ -1,389 +1,323 @@
-
-
-
- Ernährungsberatung ab 50 | TriHub
-
-
-
-
-
-
-
-
-
-
-
-
- Zum Inhalt
- 