7 persönliche Beratungen
++ Ein Erstgespräch à 60 Minuten und sechs Folgegespräche à 30 + Minuten in Woche 3, 5, 7, 9, 11 und 12, jeweils als + Video-Beratung. +
+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/css/responsive.css b/css/responsive.css new file mode 100644 index 0000000..9e22e44 --- /dev/null +++ b/css/responsive.css @@ -0,0 +1,133 @@ +/* Zuletzt laden: responsive Regeln und Dialoganimationen der vollständigen Vorlage. */ +/* 9. Tablet und Smartphone */ +@media (min-width: 1500px) { + .hero { gap: 72px; padding-block: 80px; } + .hero-visual { height: 600px; } +} +@media (max-width: 1200px) { + .header-cta { display: none; } + .hero { gap: 36px; } + .hero-visual { height: 530px; } + .hero-copy > .eyebrow { font-size: .625rem; letter-spacing: .12em; } + .shell { width: calc(100% - 80px); } + .header-inner { width: calc(100% - 64px); } + .section-heading { gap: 32px; } + .section-heading > p { max-width: 300px; } + .package { padding: 12px; border-radius: 1.6rem; } + .package-body { padding-inline: 8px; } + .coaching-banner { flex-wrap: wrap; } + .steps { gap: 24px; } +} +@media (max-width: 950px) { + .shell { width: calc(100% - 48px); } + .header-inner nav { display: none; } + .header-inner { min-height: 88px; padding-block: 12px; } + .menu-toggle { display: block; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / 4%); color: #fff; font-size: 1.4rem; } + #mobile-nav { display: grid; gap: 4px; padding: 6px 24px 20px; border-top: 1px solid var(--line); } + #mobile-nav a { padding: 10px 14px; border-radius: .75rem; color: var(--muted); } + #mobile-nav a:hover { background: rgb(255 255 255 / 5%); color: #fff; } + .hero { gap: 28px; padding-block: 48px; } + h1 { font-size: clamp(2.5rem, 4.9vw, 3rem); } + .hero-copy > .eyebrow { padding: 6px 10px; font-size: .625rem; letter-spacing: .08em; } + .hero-intro { font-size: 1rem; } + .hero-visual { height: 520px; } + .hero-visual figcaption { inset-inline: 22px; bottom: 22px; padding: 18px; } + .hero-visual figcaption p { font-size: 1.0625rem; } + .hero-visual figcaption span { font-size: .625rem; } + .values-strip .shell { gap: 24px; } + .section-heading { display: block; } + .section-heading > p { max-width: 560px; margin-top: 24px; } + .benefit-grid { gap: 24px; } + .benefit-grid h3 { font-size: 1.125rem; } + .package-grid { gap: 16px; } + .package-body { padding-inline: 4px; } + .package-body h3 { font-size: 1.375rem; } + .package-body > p:not(.eyebrow), .package-body ul { font-size: .9375rem; } + .package .button { padding-inline: 12px; font-size: .875rem; } + .package-badge { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 5px 8px; font-size: .5625rem; } + .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } +} +@media (max-width: 700px) { + html { scroll-padding-top: 100px; } + .shell { width: calc(100% - 40px); } + .header-inner { width: calc(100% - 32px); gap: 14px; min-height: 82px; } + .brand { gap: 12px; min-width: 0; } + .brand-mark { width: 64px; height: 58px; padding: 7px 10px; border-radius: 1rem; } + .brand-logo img { width: 42px; height: 42px; } + .brand-copy { min-width: 0; } + .brand-name { font-size: .75rem; } + .brand-sub { max-width: 230px; font-size: .75rem; } + .menu-toggle { flex-shrink: 0; } + .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 40px; } + .hero-copy > .eyebrow { font-size: .625rem; letter-spacing: .1em; } + h1 { margin-block: 24px; font-size: clamp(2.4rem, 8.7vw, 3.8rem); } + .hero-intro { max-width: 560px; font-size: 1.0625rem; } + .hero-actions { gap: 20px; margin-top: 28px; } + .hero-note { margin-top: 22px; font-size: .8125rem; } + .hero-visual { height: 410px; border-radius: 1.75rem; } + .hero-visual > img { object-position: center 40%; } + .hero-visual figcaption { padding: 18px 20px; } + .hero-visual figcaption p { font-size: 1.125rem; } + .hero-visual figcaption span { font-size: .6875rem; } + .image-tag { top: 24px; right: 24px; } + .values-strip .shell { justify-content: space-between; gap: 12px; padding-block: 18px; font-size: .75rem; } + .values-strip i { display: none; } + .values-strip span { max-width: 105px; text-align: center; } + .section { padding-block: 64px; } + .section-heading { margin-bottom: 32px; } + .section-heading h2 { font-size: clamp(1.75rem, 6.4vw, 2.5rem); } + .section-heading > p { margin-top: 22px; } + .benefit-grid { grid-template-columns: 1fr; gap: 30px; } + .benefit-grid article { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; padding-top: 24px; } + .benefit-icon { grid-row: span 2; margin: 0; } + .benefit-grid h3 { margin-bottom: 12px; font-size: 1.125rem; } + .benefit-grid p { max-width: none; } + .package-grid { grid-template-columns: 1fr; gap: 26px; } + .package { padding: 16px; border-radius: 1.75rem; } + .package-image img { aspect-ratio: 1.75; } + .package-body { padding: 24px 8px 8px; } + .package-body h3 { font-size: 1.875rem; } + .package-body > p:not(.eyebrow) { font-size: 1rem; } + .package-body ul { font-size: .9375rem; } + .package .button { font-size: 1rem; } + .package-badge { left: 12px; bottom: 12px; padding: 6px 12px; font-size: .6875rem; } + .coaching-banner { align-items: flex-start; gap: 18px; padding: 24px; } + .coaching-banner > div:nth-child(2) { flex: 1; min-width: 170px; } + .coaching-banner .text-link { margin-left: 0; } + .bonus-symbol { width: 42px; height: 42px; font-size: 1.25rem; } + .steps { gap: 28px 24px; } + .step-number { font-size: 1.75rem; } + .process-end { display: block; margin-top: 36px; } + .process-end .text-link { margin-top: 16px; } + .footer-main { flex-wrap: wrap; gap: 18px; } + .footer-main > a:last-child { margin-left: 0; } + .footer-note { display: grid; gap: 8px; } + dialog { width: calc(100% - 24px); max-height: calc(100dvh - 32px); border-radius: 1.5rem; } + .dialog-inner { padding: 32px 24px; } + .dialog-inner h2 { font-size: 1.75rem; } + .discount-box { padding: 20px; } +} +@media (max-width: 390px) { + .brand-sub { max-width: 150px; font-size: .6875rem; } + .hero-copy > .eyebrow { letter-spacing: .03em; } + .hero-actions .button { width: 100%; } + .hero-visual { height: 370px; } + .steps { grid-template-columns: 1fr; } + .dialog-inner { padding: 32px 20px; } + .discount-box { padding: 16px; } +} + +/* 10. Bestehende Animationen und reduzierte Bewegung */ +@media (prefers-reduced-motion: no-preference) { + #package-dialog[open] { animation: detail-enter 300ms var(--ease); } + #package-dialog[open]::backdrop { animation: backdrop-enter 250ms ease-out; } + @keyframes detail-enter { + from { opacity: 0; transform: translateY(12px) scale(.985); } + to { opacity: 1; transform: translateY(0) scale(1); } + } + @keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } } +} +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + *, *::before, *::after { animation: none !important; transition: none !important; } +} diff --git a/css/sections/angebote.css b/css/sections/angebote.css index bdef8d8..e7c6190 100644 --- a/css/sections/angebote.css +++ b/css/sections/angebote.css @@ -46,45 +46,9 @@ .coaching-banner p { color: var(--muted); font-size: .9375rem; } .coaching-banner .text-link { margin-left: auto; flex-shrink: 0; font-size: .875rem; } -/* 8. Produktdetails – weiterhin zentriert und innerhalb des Fensters scrollbar */ -dialog { - position: fixed; - inset: 0; - margin: auto; - width: min(720px, calc(100% - 32px)); - max-height: 90dvh; - padding: 0; - overflow-y: auto; - overscroll-behavior: contain; - border: 1px solid rgb(255 255 255 / 16%); - border-radius: 1.75rem; - background: linear-gradient(#ffffff07, #ffffff00), var(--surface-elevated); - color: var(--text); - box-shadow: 0 30px 100px rgb(0 0 0 / 55%); - scrollbar-color: #46545c transparent; - scrollbar-width: thin; -} -dialog::backdrop { background: rgb(2 8 12 / 78%); backdrop-filter: blur(7px); } -.dialog-inner { position: relative; padding: 42px; } -.close-dialog { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: rgb(255 255 255 / 4%); color: var(--muted); font-size: 1.75rem; line-height: 1; } -.close-dialog:hover { background: rgb(255 255 255 / 10%); color: #fff; } -.dialog-inner > .eyebrow { padding-right: 24px; } -.dialog-inner h2 { margin: 16px 18px 22px 0; font-size: 2rem; line-height: 1.2; } -.dialog-inner > p:not(.eyebrow) { color: var(--muted); font-size: 1rem; } -.dialog-inner h3 { margin: 28px 0 14px; font-size: 1.125rem; } -#dialog-features { padding-left: 20px; color: rgb(255 255 255 / 82%); font-size: 1rem; } -#dialog-features li { padding-block: 5px; } -#dialog-features li::marker { color: var(--quiet); } -.detail-note, .discount-help { color: var(--quiet); font-size: .8125rem; line-height: 1.7; } -.detail-note { margin-top: 12px; } -.discount-box { margin-block: 28px; padding: 24px; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--panel); } -.discount-box h3 { margin: 10px 0 22px; } -.discount-box label { display: block; margin-bottom: 10px; color: rgb(255 255 255 / 82%); font-size: .9375rem; } -.discount-box select { width: 100%; min-height: 50px; padding: 12px; border: 1px solid rgb(255 255 255 / 20%); border-radius: .75rem; background: var(--background); color: #fff; font-size: .9375rem; } -#discount-result { padding-block: 20px; color: rgb(255 255 255 / 88%); font-size: 1.0625rem; } -#discount-result strong { color: color-mix(in srgb, var(--accent-strong) 70%, white); font-size: 1.5rem; font-weight: 600; } -.discount-box a { display: inline-block; margin-top: 16px; color: rgb(255 255 255 / 84%); font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; } -.discount-box a:hover { color: #fff; } -.dialog-done { width: 100%; } -body:has(dialog[open]) { overflow: hidden; } +/* Laufzeit und Beispielpreis direkt an der Paketkarte. */ +.package-summary { display: grid; gap: 6px; margin-bottom: 22px; padding-top: 18px; border-top: 1px solid var(--line); } +.package-summary strong { color: #fff; font-family: var(--font-display); font-size: 1.35rem; } +.package-summary span { color: var(--muted); font-size: .9375rem; } +.package-summary small { color: var(--quiet); font-size: .75rem; } diff --git a/css/sections/hero.css b/css/sections/hero.css index 79df3d6..0c35e6f 100644 --- a/css/sections/hero.css +++ b/css/sections/hero.css @@ -5,7 +5,7 @@ display: grid; grid-template-columns: 1.08fr 1fr; gap: 56px; - align-items: center; + align-items: start; padding-block: 64px 72px; } .hero::before { diff --git a/css/sections/kontakt.css b/css/sections/kontakt.css new file mode 100644 index 0000000..23a2cdc --- /dev/null +++ b/css/sections/kontakt.css @@ -0,0 +1,140 @@ +/* 8. Trainer und Kontakt (US04-02) + Trainerprofil ist ein PLATZHALTER – Foto und Inhalte folgen vom Kunden. + Kontakt leitet auf https://tri-hub.de/kontakt weiter. */ + +.contact { border-top: 1px solid var(--line); } + +.contact-grid { + display: grid; + grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); + gap: 24px; + align-items: stretch; +} + +/* ---------- Trainerprofil (Platzhalter) ---------- */ +.trainer-card { + display: grid; + grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); + gap: 28px; + padding: 16px; + border: 1px solid var(--line); + border-radius: 2rem; + background: linear-gradient(#ffffff0f, #ffffff05), linear-gradient(#08151ee6, #091822fa); + box-shadow: 0 18px 48px rgb(0 0 0 / 16%); +} + +.trainer-photo { + display: flex; + align-items: center; + justify-content: center; + min-height: 320px; + border: 1px dashed rgb(255 255 255 / 22%); + border-radius: 1.35rem; + background: + radial-gradient(circle at 50% 38%, rgb(255 255 255 / 10%) 0 18%, transparent 19%), + radial-gradient(ellipse at 50% 100%, rgb(255 255 255 / 8%) 0 42%, transparent 43%), + rgb(255 255 255 / 3%); + color: var(--quiet); + font-size: .8125rem; + letter-spacing: .18em; + text-transform: uppercase; +} + +.trainer-photo span { margin-top: 62%; } + +.trainer-body { padding: 12px 12px 12px 0; } + +.placeholder-tag { + display: inline-block; + margin-bottom: 14px; + padding: 4px 12px; + border: 1px dashed rgb(255 255 255 / 28%); + border-radius: 999px; + color: var(--quiet); + font-size: .75rem; + font-weight: 600; + letter-spacing: .16em; + text-transform: uppercase; +} + +.trainer-body h3 { font-size: 1.5rem; } + +.trainer-role { margin-top: 6px; color: var(--muted); font-size: 1rem; } + +.trainer-facts { + margin: 22px 0 0; + padding: 0; + list-style: none; + border-top: 1px solid var(--line); +} + +.trainer-facts li { + display: grid; + grid-template-columns: 130px 1fr; + gap: 12px; + padding: 11px 0; + border-bottom: 1px solid var(--line); + font-size: 1rem; + color: rgb(255 255 255 / 86%); +} + +.trainer-facts span { color: var(--quiet); font-size: .875rem; } + +.trainer-quote { + margin-top: 20px; + color: var(--muted); + font-style: italic; + font-size: 1rem; +} + +/* ---------- Kontaktbox ---------- */ +.contact-card { + display: flex; + flex-direction: column; + padding: 36px; + border: 1px solid color-mix(in srgb, var(--accent-muted) 35%, transparent); + border-radius: 2rem; + background: + radial-gradient(circle at 100% 0, rgb(46 182 194 / 14%), transparent 45%), + var(--panel); +} + +.contact-card h3 { margin-top: 14px; font-size: clamp(1.5rem, 2.2vw, 1.9rem); } + +.contact-card > p:not(.eyebrow) { margin-top: 14px; color: var(--muted); font-size: 1rem; } + +.contact-points { + flex: 1; + margin: 22px 0 28px; + padding: 0; + list-style: none; +} + +.contact-points li { + position: relative; + padding: 6px 0 6px 26px; + font-size: 1rem; +} + +.contact-points li::before { + content: "✓"; + position: absolute; + left: 0; + color: var(--accent-strong); +} + +.contact-button { align-self: flex-start; } + +/* ---------- Responsiv ---------- */ +@media (max-width: 1100px) { + .contact-grid { grid-template-columns: 1fr; } +} + +@media (max-width: 760px) { + .trainer-card { grid-template-columns: 1fr; gap: 18px; } + .trainer-photo { min-height: 260px; } + .trainer-body { padding: 4px 8px 12px; } + .trainer-facts li { grid-template-columns: 1fr; gap: 2px; } + .contact-card { padding: 26px 22px; } + .contact-button { align-self: stretch; } +} \ No newline at end of file diff --git a/css/sections/paketdetails.css b/css/sections/paketdetails.css new file mode 100644 index 0000000..bed6d32 --- /dev/null +++ b/css/sections/paketdetails.css @@ -0,0 +1,299 @@ +/* US02-03: Detailseiten, auf Basis der bestehenden TriHub-Markenstile. */ +.detail-top { + padding: 32px 0 72px; + border-bottom: 1px solid var(--line); + background: + linear-gradient(rgb(4 14 20 / 85%), rgb(4 14 20 / 96%)), + url("../../assets/images/hero/trihub-ribbon.webp") center / cover; +} +.breadcrumb { + display: flex; + flex-wrap: wrap; + gap: 14px; + margin-bottom: 44px; + color: var(--quiet); + font-size: 0.875rem; +} +.breadcrumb a { + color: var(--muted); + border-bottom: 1px solid var(--line); +} +.breadcrumb a:hover { + color: #fff; +} +.detail-hero { + display: grid; + grid-template-columns: 1.12fr 1fr; + gap: 48px; + align-items: start; +} +.detail-hero h1 { + margin: 18px 0; + font-size: clamp(3rem, 5.5vw, 5rem); +} +.detail-subtitle { + margin-bottom: 22px; + font-size: clamp(1.5rem, 2.3vw, 2rem); + font-weight: 600; +} +.detail-intro { + color: var(--muted); + font-size: 1.125rem; + line-height: 1.8; +} +.proposal-note { + margin-top: 20px; + color: var(--quiet); + font-size: 0.8125rem; + line-height: 1.7; +} +.detail-facts { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 14px; + margin-top: 28px; +} +.detail-facts > div { + display: grid; + align-content: start; + gap: 10px; + padding: 20px; + background: var(--panel); + border: 1px solid var(--line); + border-radius: 1.25rem; +} +.detail-facts span { + color: var(--quiet); + font-size: 0.8125rem; +} +.detail-facts strong { + color: #fff; + font-family: var(--font-display); + font-weight: 600; + font-size: clamp(1.25rem, 2vw, 1.65rem); + line-height: 1.3; +} +.detail-facts small { + color: var(--muted); + font-size: 0.8125rem; +} +.detail-hero .hero-visual { + height: 630px; +} +.detail-section { + padding-block: 88px; +} +#leistungen, +.detail-price-section { + background: var(--surface-elevated); + border-block: 1px solid var(--line); +} +.detail-benefits { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 24px; +} +.detail-benefits article { + padding: 28px; + background: var(--panel); + border: 1px solid var(--line); + border-radius: 1.5rem; +} +.detail-number { + display: block; + margin-bottom: 24px; + color: var(--quiet); + font-size: 0.875rem; + letter-spacing: 0.12em; +} +.detail-benefits h3 { + margin-bottom: 16px; + font-size: 1.2rem; +} +.detail-benefits p, +.detail-benefits li { + color: var(--muted); + font-size: 1rem; + line-height: 1.8; +} +.detail-benefits ul { + margin: 18px 0 0; + padding-left: 20px; + list-style: disc; +} +.detail-benefits li + li { + margin-top: 10px; +} +.detail-timeline { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 32px; + margin: 0; + padding: 0; + list-style: none; +} +.detail-timeline li { + padding-top: 24px; + border-top: 1px solid var(--line); +} +.detail-timeline h3 { + margin-block: 16px; + font-size: 1.25rem; +} +.detail-timeline p { + color: var(--muted); + font-size: 1rem; +} +.detail-footnote { + margin-top: 40px; + padding: 28px; + border: 1px solid var(--line); + border-radius: 1.5rem; + background: #ffffff05; +} +.detail-footnote h3 { + font-size: 1.125rem; + margin-bottom: 12px; +} +.detail-footnote p { + color: var(--muted); + font-size: 1rem; +} +.detail-price-layout { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: start; + gap: 72px; +} +.detail-price-layout h2 { + margin-block: 18px 28px; + font-size: clamp(2rem, 3.1vw, 3rem); +} +.detail-price-layout > div > p:not(.eyebrow) { + color: var(--muted); + margin-bottom: 20px; +} +.price-panel { + padding: 36px; + border: 1px solid rgb(255 255 255 / 15%); + border-radius: 2rem; + background: var(--panel); +} +.price-panel .price-caption { + margin-block: 18px 8px; + font-size: 0.875rem; + color: var(--muted); +} +.price-panel .detail-price { + margin: 0; + font-family: var(--font-display); + color: #fff !important; + font-size: clamp(2.5rem, 4vw, 3.5rem); + font-weight: 600; + line-height: 1.3; + letter-spacing: -0.04em; +} +.price-panel label { + display: block; + margin: 28px 0 10px; + font-size: 0.9375rem; +} +.price-panel select { + width: 100%; + min-height: 52px; + padding: 12px; + border: 1px solid #ffffff33; + border-radius: 0.75rem; + color: #fff; + background: var(--background); + font-size: 1rem; +} +.price-panel .discount-summary { + margin: 20px 0; + color: var(--muted); + font-size: 1rem; +} +.price-panel .proposal-note { + margin-bottom: 0; + font-size: 0.8125rem; +} +.detail-alternatives { + display: flex; + flex-wrap: wrap; + gap: 16px; + margin-top: 28px; +} +.detail-page .process-end { + margin: 0; + padding: 0; + border: 0; +} +.detail-page .process-end h2 { + margin-block: 16px; + font-size: clamp(1.7rem, 2.7vw, 2.5rem); +} +.detail-page .process-end p:not(.eyebrow) { + color: var(--muted); + font-size: 1rem; +} +@media (max-width: 1100px) { + .detail-hero { + gap: 30px; + } + .detail-price-layout { + gap: 32px; + } + .detail-benefits { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .detail-hero .hero-visual { + height: 580px; + } +} +@media (max-width: 760px) { + .detail-top { + padding-block: 24px 48px; + } + .breadcrumb { + margin-bottom: 30px; + } + .detail-hero, + .detail-price-layout { + grid-template-columns: minmax(0, 1fr); + gap: 32px; + } + .detail-hero h1 { + font-size: 3rem; + } + .detail-hero .hero-visual { + height: 410px; + } + .detail-section { + padding-block: 56px; + } + .detail-benefits, + .detail-timeline { + grid-template-columns: minmax(0, 1fr); + } + .detail-benefits article, + .detail-footnote { + padding: 24px; + } + .price-panel { + padding: 26px; + } + .detail-page .process-end .button { + margin-top: 24px; + } + .detail-facts > div { + padding: 16px; + } +} +@media (max-width: 360px) { + .detail-facts { + grid-template-columns: minmax(0, 1fr); + } + .detail-alternatives .button { + width: 100%; + } +} diff --git a/ernaehrung-premium.html b/ernaehrung-premium.html new file mode 100644 index 0000000..bcd15c1 --- /dev/null +++ b/ernaehrung-premium.html @@ -0,0 +1,351 @@ + + +
+ + ++ Du bereitest dich auf ein sportliches Ziel vor und wünschst dir + enge Begleitung? Zwölf Wochen lang verbinden wir deine + Alltagsernährung mit einer im Training erprobten + Verpflegungsstrategie. +
++ Paketvorschlag zur Teamabstimmung. Preise, Laufzeiten und + Leistungen sind beispielhaft und noch nicht von TriHub + bestätigt. +
+
+ Dein Ziel. Ganz persönlich.
+DAS STECKT IN PREMIUM
++ Ein Erstgespräch à 60 Minuten und sechs Folgegespräche à 30 + Minuten in Woche 3, 5, 7, 9, 11 und 12, jeweils als + Video-Beratung. +
++ Analyse eines 7-Tage-Ernährungsprotokolls, individueller + 7-Tage-Rahmen und eine persönliche Verpflegungsstrategie für + einen Zielwettkampf: davor, währenddessen und danach. +
++ Je 45 Minuten Lernmaterial mit Übungen. Zugriff während der + Paketlaufzeit. +
++ Bis zu fünf Anpassungen von Ernährungsrahmen und + Verpflegungsstrategie, abgestimmt auf die Erfahrungen aus deinem + Training. +
++ Bis zu zwei gebündelte E-Mail-Rückfragerunden pro Woche während + der zwölf Wochen; Rückmeldung innerhalb eines Werktags. + Werktage: Montag bis Freitag, ausgenommen Feiertage. +
++ Du hast deine Ernährung über mehrere Trainingsphasen erprobt und + gehst mit einer getesteten Verpflegungsstrategie in deinen + Zielwettkampf. +
+DEINE ZEIT GUT GEPLANT
++ 60 Minuten Erstgespräch, sieben Tage Protokoll und Planung deiner + Ernährung und Verpflegung. +
++ Fünf Beratungen à 30 Minuten, drei Selbstlernkurse und bis zu fünf + Plananpassungen. +
++ 30 Minuten Abschlussgespräch: Erfahrungen auswerten und deine + Strategie für das Ziel festhalten. +
++ Der Starttermin und die einzelnen Gespräche werden gemeinsam + vereinbart. Die 12 Wochen beginnen mit dem Erstgespräch. Das Paket + endet anschließend ohne automatische Verlängerung. Zusatztermine + sind im Beispielpreis nicht enthalten und würden separat vereinbart. + Alle Konditionen sind Vorschläge zur Abstimmung. +
+PREIS UND COACHING-VORTEIL
++ Der Beispielpreis gilt für alle oben genannten Leistungen über 12 + Wochen. Die Rabattstufe richtet sich nach deinem bestehenden + Coaching-1zu1-Paket – unabhängig davon, welches Ernährungsangebot + du wählst. +
++ Starter-Coaching: 3 %, Standard-Coaching: 5 %, Premium-Coaching: + 10 %. Der Vorteil gilt während deiner Coaching-Laufzeit. +
+ Coaching 1zu1 kennenlernen +PREMIUM · 12 WOCHEN
+Beispiel-Gesamtpreis
+649,00 €
+Einmalig · kein monatliches Abo
+ ++ Ohne Coaching-Rabatt: 649,00 € für das gesamte Paket. +
+ ++ Unverbindliche Beispielrechnung. Endpreis und steuerliche Angaben + müssen vor Veröffentlichung abgestimmt werden. Hier wird keine + Buchung ausgelöst. +
+DEINE ENTSCHEIDUNG
+Entdecke die anderen Pakete oder gehe zurück zur Übersicht.
++ Du möchtest Ernährung und Training aufeinander abstimmen? Über + acht Wochen entwickelst du mit einem persönlichen Plan und + regelmäßigem Feedback Routinen, die in deinem Alltag + funktionieren. +
++ Paketvorschlag zur Teamabstimmung. Preise, Laufzeiten und + Leistungen sind beispielhaft und noch nicht von TriHub + bestätigt. +
+
+ Aus guten Vorsätzen wird dein Plan.
+DAS STECKT IN STANDARD
++ Ein Erstgespräch à 60 Minuten und drei Folgegespräche à 30 + Minuten in Woche 3, 5 und 8, jeweils als Video-Beratung. +
++ Analyse eines 5-Tage-Ernährungsprotokolls. Dazu ein + wiederverwendbarer 7-Tage-Rahmen mit Mahlzeitenbausteinen, + Portionsorientierung und Einkaufshilfe für Trainings- und + Ruhetage. +
++ Je 45 Minuten Lernmaterial mit Übungen. Zugriff während der + Paketlaufzeit. +
++ Zwei gezielte Anpassungen des Ernährungsrahmens nach deinem + Feedback, plus eine gemeinsame Abschlussauswertung. +
++ Eine gebündelte E-Mail-Rückfragerunde pro Woche während der acht + Wochen; Rückmeldung innerhalb von zwei Werktagen. Werktage: + Montag bis Freitag, ausgenommen Feiertage. +
++ Du hast einen erprobten Ernährungsrahmen für Trainings- und + Ruhetage und kannst Mahlzeiten selbstständig an deinen Alltag + anpassen. +
+DEINE ZEIT GUT GEPLANT
++ 60 Minuten Erstgespräch, fünf Tage Protokoll und dein + individueller Ernährungsrahmen. +
++ Zwei Beratungen à 30 Minuten, zwei Selbstlernkurse und zwei + gezielte Plananpassungen. +
++ Routinen im Alltag erproben und in Woche 8 gemeinsam 30 Minuten + Bilanz ziehen. +
++ Der Starttermin und die einzelnen Gespräche werden gemeinsam + vereinbart. Die 8 Wochen beginnen mit dem Erstgespräch. Das Paket + endet anschließend ohne automatische Verlängerung. Zusatztermine + sind im Beispielpreis nicht enthalten und würden separat vereinbart. + Alle Konditionen sind Vorschläge zur Abstimmung. +
+PREIS UND COACHING-VORTEIL
++ Der Beispielpreis gilt für alle oben genannten Leistungen über 8 + Wochen. Die Rabattstufe richtet sich nach deinem bestehenden + Coaching-1zu1-Paket – unabhängig davon, welches Ernährungsangebot + du wählst. +
++ Starter-Coaching: 3 %, Standard-Coaching: 5 %, Premium-Coaching: + 10 %. Der Vorteil gilt während deiner Coaching-Laufzeit. +
+ Coaching 1zu1 kennenlernen +STANDARD · 8 WOCHEN
+Beispiel-Gesamtpreis
+349,00 €
+Einmalig · kein monatliches Abo
+ ++ Ohne Coaching-Rabatt: 349,00 € für das gesamte Paket. +
+ ++ Unverbindliche Beispielrechnung. Endpreis und steuerliche Angaben + müssen vor Veröffentlichung abgestimmt werden. Hier wird keine + Buchung ausgelöst. +
+DEINE ENTSCHEIDUNG
+Entdecke die anderen Pakete oder gehe zurück zur Übersicht.
++ Du möchtest deine Ernährung besser verstehen und mit klaren + Empfehlungen starten? In vier Wochen schaffen wir eine + Grundlage, die zu deinem Alltag und deinem Triathlon passt. +
++ Paketvorschlag zur Teamabstimmung. Preise, Laufzeiten und + Leistungen sind beispielhaft und noch nicht von TriHub + bestätigt. +
+
+ Dein erster guter Schritt.
+DAS STECKT IN STARTER
++ Ein Erstgespräch à 60 Minuten und ein Abschlussgespräch à 30 + Minuten, jeweils als Video-Beratung. +
++ Analyse eines 3-Tage-Ernährungsprotokolls und ein schriftlicher + Maßnahmenplan für Mahlzeiten, Trinken und Trainingstage. Kein + individueller Wochenplan enthalten. +
++ Je 45 Minuten Lernmaterial mit Übungen. Zugriff während der + Paketlaufzeit. +
++ Einmalige Empfehlungen nach der Analyse; Einordnung der + Erfahrungen im Abschlussgespräch. Keine laufende Plananpassung. +
++ Eine gebündelte Rückfragerunde per E-Mail innerhalb der vier + Wochen; Rückmeldung innerhalb von drei Werktagen. Werktage: + Montag bis Freitag, ausgenommen Feiertage. +
++ Du kennst deine wichtigsten Ansatzpunkte und gehst mit drei + konkreten Ernährungsroutinen aus der Beratung. +
+DEINE ZEIT GUT GEPLANT
++ 60 Minuten Erstgespräch, Ziele klären und drei Tage Ernährung + protokollieren. +
++ Analyse besprechen, Empfehlungen umsetzen und den Grundlagenkurs + bearbeiten. +
++ 30 Minuten Abschlussgespräch und konkrete Routinen für die Zeit + danach. +
++ Der Starttermin und die einzelnen Gespräche werden gemeinsam + vereinbart. Die 4 Wochen beginnen mit dem Erstgespräch. Das Paket + endet anschließend ohne automatische Verlängerung. Zusatztermine + sind im Beispielpreis nicht enthalten und würden separat vereinbart. + Alle Konditionen sind Vorschläge zur Abstimmung. +
+PREIS UND COACHING-VORTEIL
++ Der Beispielpreis gilt für alle oben genannten Leistungen über 4 + Wochen. Die Rabattstufe richtet sich nach deinem bestehenden + Coaching-1zu1-Paket – unabhängig davon, welches Ernährungsangebot + du wählst. +
++ Starter-Coaching: 3 %, Standard-Coaching: 5 %, Premium-Coaching: + 10 %. Der Vorteil gilt während deiner Coaching-Laufzeit. +
+ Coaching 1zu1 kennenlernen +STARTER · 4 WOCHEN
+Beispiel-Gesamtpreis
+149,00 €
+Einmalig · kein monatliches Abo
+ ++ Ohne Coaching-Rabatt: 149,00 € für das gesamte Paket. +
+ ++ Unverbindliche Beispielrechnung. Endpreis und steuerliche Angaben + müssen vor Veröffentlichung abgestimmt werden. Hier wird keine + Buchung ausgelöst. +
+DEINE ENTSCHEIDUNG
+Entdecke die anderen Pakete oder gehe zurück zur Übersicht.
+