US_0202: Angebotsübersicht implementiert und als PDF downloadbar
Justin Muravjev
parent
44a16ba57c
commit
52bbfd2566
|
|
@ -0,0 +1,53 @@
|
|||
/* Eigene helle Vergleichs- und Druckansicht nach der TriHub-Vorlage. */
|
||||
:root { color-scheme: light; }
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; padding: 32px 20px; background: #f3f0e9; color: #10151d; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.65; }
|
||||
.comparison-sheet { max-width: 1160px; margin: auto; padding: 32px 40px; background: #fff; border: 1px solid #e3e7eb; border-radius: 32px; box-shadow: 0 18px 50px #10202b0a; }
|
||||
.comparison-header { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid #e1e5e9; padding-bottom: 22px; margin-bottom: 28px; }
|
||||
.brand img { display: block; object-fit: contain; border-radius: 14px; }
|
||||
nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: 1; flex-wrap: wrap; }
|
||||
a { color: inherit; text-underline-offset: 4px; }
|
||||
nav a { text-decoration: none; color: #46515f; }
|
||||
button { font: inherit; font-weight: 600; border: 1px solid #dce1e7; background: #fff; color: #111820; padding: 10px 18px; border-radius: 999px; cursor: pointer; }
|
||||
button:hover { background: #f1f5f9; }
|
||||
:focus-visible { outline: 3px solid #217c86; outline-offset: 4px; }
|
||||
.skip { position: absolute; top: -100px; } .skip:focus { top: 8px; background: white; padding: 10px; }
|
||||
h1,h2 { font-family: "Sora", sans-serif; letter-spacing: -.045em; line-height: 1.2; color: #080e17; }
|
||||
h1 { font-size: clamp(2rem, 4vw, 3.15rem); margin: 18px 0 24px; max-width: 940px; }
|
||||
h2 { font-size: 1.4rem; margin: 36px 0 20px; }
|
||||
p { margin: 0 0 16px; }
|
||||
.eyebrow { color: #647081; font-size: .72rem; font-weight: 700; letter-spacing: .22em; }
|
||||
.intro { max-width: 850px; color: #4b5563; font-size: 1.08rem; }
|
||||
.concept { border-left: 3px solid #b7c9ce; padding: 12px 18px; background: #f7f9fa; color: #4b5563; font-size: .9rem; margin: 24px 0 36px; }
|
||||
.table-scroll { overflow-x: auto; border: 1px solid #dfe5ec; border-radius: 22px; }
|
||||
table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; text-align: left; font-size: .9rem; }
|
||||
.feature-column { width: 25%; }
|
||||
caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
|
||||
th,td { padding: 16px; vertical-align: top; border-bottom: 1px solid #e2e7ed; overflow-wrap: break-word; }
|
||||
thead { background: #f1f5f9; } thead th { font-weight: 700; }
|
||||
thead span { display: block; font-size: .78rem; font-weight: 400; color: #596574; margin-top: 4px; }
|
||||
tbody th { font-weight: 600; } td { color: #46515f; }
|
||||
.group th { background: #f8fafb; color: #52606e; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: 10px 16px; }
|
||||
tfoot th,tfoot td { border-bottom: 0; } tfoot a { font-weight: 600; color: #235b65; }
|
||||
.notes { margin-top: 20px; font-size: .83rem; color: #5c6673; }
|
||||
.framework { margin-top: 32px; border-top: 1px solid #e1e5e9; color: #4b5563; }
|
||||
.bottom-actions { display: flex; flex-wrap: wrap; gap: 20px; margin: 28px 0; font-weight: 600; }
|
||||
footer { padding-top: 20px; border-top: 1px solid #e1e5e9; font-size: .8rem; color: #667181; }
|
||||
.scroll-hint { display: none; font-size: .85rem; color: #5c6673; }
|
||||
@media (max-width: 800px) { body { padding: 12px; } .comparison-sheet { padding: 22px 18px; border-radius: 22px; } .comparison-header { align-items: flex-start; gap: 16px; } nav { gap: 12px; font-size: .85rem; } .brand img { width: 56px; height: 56px; } .scroll-hint { display: block; } }
|
||||
@page { size: A4 landscape; margin: 12mm; }
|
||||
@media print {
|
||||
body { padding: 0; background: #fff; font-size: 10pt; color: #000; }
|
||||
.comparison-sheet { max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
|
||||
nav,.skip,.bottom-actions,.scroll-hint,tfoot { display: none !important; }
|
||||
.comparison-header { margin-bottom: 12px; padding-bottom: 10px; }
|
||||
.brand img { width: 50px; height: 50px; }
|
||||
h1 { font-size: 23pt; margin: 8px 0 14px; } h2 { font-size: 14pt; margin: 20px 0 12px; }
|
||||
.intro { font-size: 10pt; } .concept { font-size: 9pt; margin: 12px 0; padding: 8px 12px; }
|
||||
.table-scroll { overflow: visible; border-radius: 0; border: 0; }
|
||||
table { min-width: 0; font-size: 9pt; }
|
||||
th,td { padding: 8px 10px; border: 1px solid #cbd2da; color: #000; }
|
||||
thead { display: table-header-group; } tr { break-inside: avoid; } .group { break-after: avoid; }
|
||||
h2 { break-after: avoid; } .notes,.framework { font-size: 9pt; }
|
||||
footer { font-size: 8pt; } a { text-decoration: none; }
|
||||
}
|
||||
|
|
@ -313,6 +313,7 @@
|
|||
<a class="button" href="ernaehrungsberatung.html#angebote"
|
||||
>Zur Angebotsübersicht</a
|
||||
>
|
||||
<a class="text-link" href="ernaehrung-vergleich.html">Pakete vergleichen →</a>
|
||||
</div>
|
||||
<div class="detail-alternatives">
|
||||
<a class="button outline" href="ernaehrung-starter.html"
|
||||
|
|
|
|||
|
|
@ -315,6 +315,7 @@
|
|||
<a class="button" href="ernaehrungsberatung.html#angebote"
|
||||
>Zur Angebotsübersicht</a
|
||||
>
|
||||
<a class="text-link" href="ernaehrung-vergleich.html">Pakete vergleichen →</a>
|
||||
</div>
|
||||
<div class="detail-alternatives">
|
||||
<a class="button outline" href="ernaehrung-starter.html"
|
||||
|
|
|
|||
|
|
@ -309,6 +309,7 @@
|
|||
<a class="button" href="ernaehrungsberatung.html#angebote"
|
||||
>Zur Angebotsübersicht</a
|
||||
>
|
||||
<a class="text-link" href="ernaehrung-vergleich.html">Pakete vergleichen →</a>
|
||||
</div>
|
||||
<div class="detail-alternatives">
|
||||
<a class="button outline" href="ernaehrung-standard.html"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Ernährungsberatung im Vergleich | TriHub</title>
|
||||
<meta name="description" content="Starter, Standard und Premium: Preise, Laufzeiten und Leistungen der Ernährungsberatung im direkten Vergleich.">
|
||||
<link rel="icon" href="assets/images/icons/trihub-logo.jpg" type="image/jpeg">
|
||||
<link rel="stylesheet" href="css/assets.css">
|
||||
<link rel="stylesheet" href="css/sections/vergleich.css">
|
||||
<script src="js/vergleich.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip" href="#inhalt">Zum Vergleich</a>
|
||||
<div class="comparison-sheet">
|
||||
<header class="comparison-header">
|
||||
<a href="ernaehrungsberatung.html" class="brand" aria-label="Zur Ernährungsberatung"><img src="assets/images/icons/trihub-logo.jpg" width="72" height="72" alt="Trihub – fit und vital ab 50!"></a>
|
||||
<nav aria-label="Vergleichsnavigation"><a href="ernaehrungsberatung.html#angebote">← Zur Angebotsübersicht</a><button type="button" id="print-comparison" hidden>Ansicht drucken / als PDF speichern</button></nav>
|
||||
</header>
|
||||
<main id="inhalt">
|
||||
<p class="eyebrow">TRI-HUB · ERNÄHRUNGSBERATUNG</p>
|
||||
<h1>Drei Pakete.<br>Deine Begleitung im Vergleich.</h1>
|
||||
<p class="intro">Wie viel Unterstützung passt zu dir? Vergleiche Starter, Standard und Premium – von der ersten Beratung bis zur persönlichen Wettkampfstrategie. Alle Preise gelten für das gesamte Paket.</p>
|
||||
<p class="concept"><strong>Paketvorschläge zur Teamabstimmung.</strong> Preise, Laufzeiten und Leistungen sind beispielhaft und noch nicht von TriHub bestätigt. Diese Übersicht ist kein Vertrag und löst keine Buchung aus.</p>
|
||||
<section aria-labelledby="comparison-title">
|
||||
<h2 id="comparison-title">Preise und Leistungen auf einen Blick</h2>
|
||||
<p class="scroll-hint" id="scroll-help">Auf kleinen Bildschirmen kannst du die Tabelle seitlich verschieben.</p>
|
||||
<div class="table-scroll" tabindex="0" role="region" aria-label="Paketvergleich, horizontal scrollbar" aria-describedby="scroll-help">
|
||||
<table>
|
||||
<caption>Ernährungsberatung: Starter, Standard und Premium</caption>
|
||||
<colgroup><col class="feature-column"><col><col><col></colgroup>
|
||||
<thead><tr><th scope="col">Leistung</th><th scope="col">Starter<span>Ein klarer Einstieg</span></th><th scope="col">Standard<span>Dein individueller Plan</span></th><th scope="col">Premium<span>Enge persönliche Begleitung</span></th></tr></thead>
|
||||
<tbody><tr class="group"><th colspan="4" scope="colgroup">Preis und Laufzeit</th></tr>
|
||||
<tr><th scope="row">Gesamtpreis (Beispiel)</th><td>149,00 €</td><td>349,00 €</td><td>649,00 €</td></tr>
|
||||
<tr><th scope="row">Laufzeit</th><td>4 Wochen</td><td>8 Wochen</td><td>12 Wochen</td></tr>
|
||||
<tr><th scope="row">Abrechnung</th><td>Einmalig für das gesamte Paket</td><td>Einmalig für das gesamte Paket</td><td>Einmalig für das gesamte Paket</td></tr>
|
||||
<tr class="group"><th colspan="4" scope="colgroup">Persönliche Begleitung</th></tr>
|
||||
<tr><th scope="row">Video-Beratungen</th><td>2 Termine · insgesamt 90 Min.</td><td>4 Termine · insgesamt 150 Min.</td><td>7 Termine · insgesamt 240 Min.</td></tr>
|
||||
<tr><th scope="row">Erstgespräch</th><td>60 Minuten</td><td>60 Minuten</td><td>60 Minuten</td></tr>
|
||||
<tr><th scope="row">Folge- und Abschlussgespräche</th><td>1 × 30 Minuten</td><td>3 × 30 Minuten</td><td>6 × 30 Minuten</td></tr>
|
||||
<tr><th scope="row">Ernährungsprotokoll</th><td>Analyse von 3 Tagen</td><td>Analyse von 5 Tagen</td><td>Analyse von 7 Tagen</td></tr>
|
||||
<tr class="group"><th colspan="4" scope="colgroup">Dein Plan und dein Wissen</th></tr>
|
||||
<tr><th scope="row">Persönliche Empfehlungen</th><td>Maßnahmenplan als PDF</td><td>Im individuellen Ernährungsrahmen enthalten</td><td>Im individuellen Ernährungsrahmen enthalten</td></tr>
|
||||
<tr><th scope="row">Individueller Ernährungsrahmen</th><td>Nicht enthalten</td><td>7-Tage-Rahmen mit Mahlzeitenbausteinen, Portionsorientierung und Einkaufshilfe</td><td>7-Tage-Rahmen plus persönliche Wettkampfstrategie</td></tr>
|
||||
<tr><th scope="row">Wettkampfverpflegung</th><td>Nicht enthalten</td><td>Nicht enthalten</td><td>Strategie für einen Zielwettkampf: davor, währenddessen und danach</td></tr>
|
||||
<tr><th scope="row">Plananpassungen</th><td>Keine laufende Anpassung</td><td>2 gezielte Anpassungen</td><td>Bis zu 5 Anpassungen</td></tr>
|
||||
<tr><th scope="row">Selbstlernkurse</th><td>1 Kurs à 45 Minuten</td><td>2 Kurse à 45 Minuten</td><td>3 Kurse à 45 Minuten</td></tr>
|
||||
<tr><th scope="row">Kursinhalte</th><td>Essen und Trinken rund ums Training</td><td>Grundlagen plus Mahlzeitenplanung und Regeneration</td><td>Grundlagen, Mahlzeitenplanung und Regeneration plus Wettkampfverpflegung</td></tr>
|
||||
<tr><th scope="row">Kurszugriff</th><td>Während der Paketlaufzeit</td><td>Während der Paketlaufzeit</td><td>Während der Paketlaufzeit</td></tr>
|
||||
<tr class="group"><th colspan="4" scope="colgroup">Fragen zwischen den Terminen</th></tr>
|
||||
<tr><th scope="row">E-Mail-Rückfragen</th><td>1 gebündelte Rückfragerunde insgesamt</td><td>1 gebündelte Rückfragerunde pro Woche</td><td>Bis zu 2 gebündelte Rückfragerunden pro Woche</td></tr>
|
||||
<tr><th scope="row">Rückmeldung innerhalb von</th><td>3 Werktagen¹</td><td>2 Werktagen¹</td><td>1 Werktag¹</td></tr>
|
||||
<tr class="group"><th colspan="4" scope="colgroup">Dein Coaching-Vorteil²</th></tr>
|
||||
<tr><th scope="row">Mit Starter-Coaching · 3 %</th><td>144,53 €</td><td>338,53 €</td><td>629,53 €</td></tr>
|
||||
<tr><th scope="row">Mit Standard-Coaching · 5 %</th><td>141,55 €</td><td>331,55 €</td><td>616,55 €</td></tr>
|
||||
<tr><th scope="row">Mit Premium-Coaching · 10 %</th><td>134,10 €</td><td>314,10 €</td><td>584,10 €</td></tr>
|
||||
</tbody>
|
||||
<tfoot><tr><th scope="row">Mehr zum Paket</th><td><a href="ernaehrung-starter.html">Starter entdecken →</a></td><td><a href="ernaehrung-standard.html">Standard entdecken →</a></td><td><a href="ernaehrung-premium.html">Premium entdecken →</a></td></tr></tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<div class="notes"><p>¹ Werktage: Montag bis Freitag, ausgenommen Feiertage.</p><p>² Der Rabatt richtet sich nach deinem <strong>bestehenden Coaching-1zu1-Paket</strong>, unabhängig vom gewählten Ernährungsangebot. Er gilt während der Coaching-Laufzeit. Die drei Rabattstufen sind Alternativen und werden nicht addiert.</p><p>Unverbindliche Beispielpreise. Endpreise und steuerliche Angaben müssen vor Veröffentlichung abgestimmt werden.</p></div>
|
||||
</section>
|
||||
<section class="framework" aria-labelledby="framework-title"><h2 id="framework-title">Für alle drei Pakete gilt</h2><p>Starttermin und Beratungstermine werden gemeinsam vereinbart. Die Laufzeit beginnt mit dem Erstgespräch. Nach dem aktuellen Konzept endet das Paket ohne automatische Verlängerung. Zusatztermine sind nicht im Beispielpreis enthalten und würden separat vereinbart.</p><p>Alle Konditionen sind Vorschläge zur Abstimmung. Ausführliche Leistungsbeschreibungen und Zeitpläne findest du auf den jeweiligen Paketdetailseiten.</p></section>
|
||||
<div class="bottom-actions"><a href="ernaehrungsberatung.html#angebote">← Zurück zu den Angeboten</a><a href="ernaehrungsberatung.html#kontakt">Fragen zur Beratung?</a></div>
|
||||
</main>
|
||||
<footer>TriHub · Ernährungsberatung · Projektprototyp · Stand: 30.09.2026</footer>
|
||||
</div>
|
||||
</body></html>
|
||||
|
|
@ -246,7 +246,8 @@
|
|||
</article>
|
||||
</div>
|
||||
<div class="coaching-banner">
|
||||
<div class="bonus-symbol" aria-hidden="true">%</div>
|
||||
<p style="margin: 32px 0"><a class="button" href="ernaehrung-vergleich.html">Alle Pakete im Vergleich →</a></p>
|
||||
<div class="bonus-symbol" aria-hidden="true">%</div>
|
||||
<div>
|
||||
<h3>Schon im Coaching 1zu1? Dein Vorteil kommt mit.</h3>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
/* Druckdialog bietet auch „Als PDF speichern“ an. */
|
||||
(() => {
|
||||
const printButton = document.getElementById("print-comparison");
|
||||
if (!printButton) return;
|
||||
printButton.hidden = false;
|
||||
printButton.addEventListener("click", () => window.print());
|
||||
})();
|
||||
Loading…
Reference in New Issue