diff --git a/css/base.css b/css/base.css
index 9504043..45a5097 100644
--- a/css/base.css
+++ b/css/base.css
@@ -6,13 +6,21 @@
--muted: rgb(255 255 255 / 70%);
--quiet: rgb(255 255 255 / 56%);
--line: rgb(255 255 255 / 10%);
- --panel: linear-gradient(#ffffff14, #ffffff08);
+ --mint: oklch(70% .12 205);
+ --panel: linear-gradient(#ffffff14, #08060608);
--ease: cubic-bezier(.22, 1, .36, 1);
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 +30,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 +118,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 +133,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 +154,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;
@@ -104,15 +193,21 @@ button:disabled { cursor: default; }
color: var(--muted);
font-size: .875rem;
white-space: nowrap;
- transition: color .2s, background .2s, border-color .2s;
+ transition: color .2s, background .2s, border-color .2s, box-shadow .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: var(--mint);
+ background: var(--mint);
+ color: #000;
+ box-shadow: 0 0 18px color-mix(in srgb, var(--mint) 65%, transparent),
+ inset 0 0 10px rgb(255 255 255 / 28%);
}
-.menu-toggle { display: none; }
+
+.menu-toggle {
+ display: none;
+}
+
.skip {
position: fixed;
left: 16px;
@@ -123,7 +218,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 +240,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 +276,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 fc0f890..f59386c 100644
--- a/ernaehrungsberatung.html
+++ b/ernaehrungsberatung.html
@@ -1,332 +1,323 @@
-
-
-
- Ernährungsberatung ab 50 | TriHub
-
-
-
-
-
-
-
-
-
-
-
-
- Zum Inhalt
- 