diff --git a/css/beratung.css b/css/beratung.css index 53d2f49..74020db 100644 --- a/css/beratung.css +++ b/css/beratung.css @@ -278,11 +278,10 @@ /* ---------- Footer ---------- */ .beratung-bereich .logo { - font-family: var(--font-display); - font-weight: 700; + font-family: var(--font-display);; font-size: 1.35rem; letter-spacing: -0.02em; - color: var(--foreground); + color: var(--text-muted); text-decoration: none; white-space: nowrap; } diff --git a/css/html/kontakt.html b/css/html/kontakt.html new file mode 100644 index 0000000..e69de29 diff --git a/css/kontakt.css b/css/kontakt.css new file mode 100644 index 0000000..5adb242 --- /dev/null +++ b/css/kontakt.css @@ -0,0 +1,701 @@ +/* Dennis: Kontaktseite – Regeln sind auf .kontakt-seite begrenzt. + Tokens entsprechen css/beratung.css (tri-hub.de-Farbwelt). */ + +.kontakt-seite { + /* Farben – Tokens von tri-hub.de */ + --background: #0714198a; + --background-rgb: 7 20 25; + --background-panel: #152027; + --text-primary: #ffffff; + --text-muted: #9ba7aa; + --accent: #4597A3; + --accent-warm: #f7c230; + --border: rgba(234, 8, 8, 0.1); + + /* Typografie */ + --font-display: "Sora", sans-serif; + --font-body: "DM Sans", Arial, Helvetica, sans-serif; + + /* Layout */ + --container: 1120px; + --radius: 1.1rem; +} + +/* ---------- Basic ---------- */ + +.kontakt-seite, +.kontakt-seite *, +.kontakt-seite::before, +.kontakt-seite *::before, +.kontakt-seite::after, +.kontakt-seite *::after { + box-sizing: border-box; +} + +.kontakt-seite { + min-height: 100vh; + margin: 0; + background-color: var(--background); + color: var(--text-primary); + font-family: var(--font-body); + line-height: 1.625; + -webkit-font-smoothing: antialiased; + position: relative; + isolation: isolate; + scroll-behavior: smooth; +} + +/* Licht */ +.kontakt-seite::before { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + background: + radial-gradient(900px 520px at 78% -10%, rgba(0, 179, 194, 0.13), transparent 65%), + radial-gradient(700px 480px at -10% 30%, rgba(35, 137, 148, 0.1), transparent 60%), + radial-gradient(600px 420px at 90% 95%, rgba(247, 194, 48, 0.05), transparent 60%); + pointer-events: none; +} + +.kontakt-seite h1, +.kontakt-seite h2, +.kontakt-seite h3 { + margin-top: 0; + font-family: var(--font-display); + color: var(--text-primary); + line-height: 1.2; + letter-spacing: -0.01em; +} + +.kontakt-seite p { + margin: 0 0 1em; +} + +.kontakt-seite .container { + width: min(100% - 48px, var(--container)); + margin-inline: auto; +} + +/* ---------- Typo-Helfer ---------- */ + +.kontakt-seite .kicker { + display: inline-flex; + align-items: center; + gap: 10px; + font-size: 0.78rem; + font-weight: 600; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--accent); + margin-bottom: 18px; +} + +.kontakt-seite .kicker::before { + content: ""; + width: 28px; + height: 2px; + border-radius: 2px; + background: var(--accent); +} + +.kontakt-seite .lead { + font-size: 1.15rem; + color: var(--text-muted); + max-width: 660px; +} + +/* ---------- Header ---------- */ + +.kontakt-seite .site-header { + position: sticky; + top: 0; + z-index: 50; + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; + padding: 16px 0; + background: rgba(7, 20, 25, 0.85); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--border); +} + +.kontakt-seite .site-header .container { + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; + width: min(100% - 48px, calc(var(--container) + 48px)); +} + +.kontakt-seite .brand { + display: flex; + align-items: center; + gap: 14px; + text-decoration: none; + color: inherit; +} + +.kontakt-seite .brand__logo img { + display: block; + height: 52px; + width: auto; + border-radius: 12px; + border: 1px solid var(--border); + background: #fff; +} + +.kontakt-seite .brand__name { + display: block; + font-family: var(--font-display); + font-weight: 700; + letter-spacing: 0.06em; + color: var(--text-primary); +} + +.kontakt-seite .brand__label { + display: block; + font-size: 0.8rem; + color: var(--text-muted); +} + +.kontakt-seite .header-nav { + display: flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; +} + +.kontakt-seite .header-nav a { + display: inline-flex; + align-items: center; + min-height: 2.75rem; + padding: 0 14px; + border-radius: 999px; + color: var(--text-muted); + text-decoration: none; + font-size: 0.92rem; + transition: background-color 0.15s ease, color 0.15s ease; +} + +.kontakt-seite .header-nav a:hover { + background: rgba(255, 255, 255, 0.06); + color: var(--text-primary); +} + +.kontakt-seite .header-nav a.nav-back { + border: 1px solid var(--border); +} + +/* ---------- Hero ---------- */ + +.kontakt-seite .hero { + padding: 72px 0 88px; +} + +.kontakt-seite .hero__grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; + align-items: center; +} + +.kontakt-seite .hero h1 { + font-size: clamp(2.6rem, 6vw, 4rem); + font-weight: 500; + letter-spacing: -0.04em; + margin-bottom: 20px; +} + +.kontakt-seite .hero__text { + font-size: 1.15rem; + color: var(--text-muted); + max-width: 560px; +} + +.kontakt-seite .hero__image { + display: block; + width: 100%; + height: auto; + border-radius: calc(var(--radius) + 1rem); + border: 1px solid var(--border); + box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35); +} + +/* ---------- Sektionen ---------- */ + +.kontakt-seite .section { + padding: 88px 0; +} + +.kontakt-seite .section + .section { + border-top: 1px solid var(--border); +} + +.kontakt-seite .section-head { + max-width: 720px; + margin-bottom: 48px; +} + +.kontakt-seite .section-head h2 { + font-size: clamp(1.9rem, 4vw, 2.7rem); + margin-bottom: 16px; +} + +/* ---------- Karten (Nachricht) ---------- */ + +.kontakt-seite .cards-3 { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 24px; +} + +.kontakt-seite .card { + background-color: var(--background-panel); + border: 1px solid var(--border); + border-radius: calc(var(--radius) + 0.4rem); + padding: 28px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); +} + +.kontakt-seite .card__icon { + display: grid; + place-items: center; + width: 48px; + height: 48px; + margin-bottom: 16px; + border-radius: 12px; + font-size: 1.5rem; + background: rgba(69, 151, 163, 0.2); +} + +.kontakt-seite .card--warm .card__icon { + background: rgba(247, 194, 48, 0.16); +} + +.kontakt-seite .card--neutral .card__icon { + background: rgba(255, 255, 255, 0.1); +} + +.kontakt-seite .card h3 { + font-size: 1.08rem; + margin-bottom: 8px; +} + +.kontakt-seite .card p { + margin: 0; + color: var(--text-muted); + font-size: 0.95rem; +} + +/* ---------- Formular + Kontaktinfos ---------- */ + +.kontakt-seite .kontakt-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; + align-items: start; +} + +.kontakt-seite form { + margin-top: 32px; + display: grid; + gap: 20px; +} + +.kontakt-seite .field label { + display: block; + font-size: 0.9rem; + font-weight: 500; + color: var(--text-primary); + margin-bottom: 8px; +} + +.kontakt-seite .field input, +.kontakt-seite .field select, +.kontakt-seite .field textarea { + width: 100%; + padding: 12px 16px; + border-radius: 10px; + border: 1px solid var(--border); + background: rgba(255, 255, 255, 0.04); + color: var(--text-primary); + font-family: var(--font-body); + font-size: 0.95rem; + transition: border-color 0.15s ease, background-color 0.15s ease; +} + +.kontakt-seite .field input::placeholder, +.kontakt-seite .field textarea::placeholder { + color: rgba(255, 255, 255, 0.4); +} + +.kontakt-seite .field input:focus, +.kontakt-seite .field select:focus, +.kontakt-seite .field textarea:focus { + outline: none; + border-color: var(--accent); + background: rgba(255, 255, 255, 0.06); +} + +.kontakt-seite .field select option { + background: #0b1a20; + color: var(--text-primary); +} + +.kontakt-seite .field textarea { + min-height: 140px; + resize: vertical; +} + +.kontakt-seite .field input.invalid, +.kontakt-seite .field select.invalid, +.kontakt-seite .field textarea.invalid { + border-color: #ef4444; +} + +.kontakt-seite .field input.valid, +.kontakt-seite .field textarea.valid { + border-color: #22c55e; +} + +.kontakt-seite .field__error { + display: none; + margin-top: 6px; + font-size: 0.8rem; + color: #f87171; +} + +.kontakt-seite .field__hint { + display: none; + margin-top: 6px; + font-size: 0.8rem; + color: #4ade80; +} + +.kontakt-seite .field.has-error .field__error { + display: block; +} + +.kontakt-seite .field.is-ok .field__hint { + display: block; +} + +/* ---------- Button ---------- */ + +.kontakt-seite .btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.8rem 1.5rem; + border-radius: 999px; + font-family: var(--font-body); + font-weight: 600; + font-size: 0.95rem; + line-height: 1.2; + text-decoration: none; + border: 1px solid transparent; + cursor: pointer; + transition: transform 0.18s ease, box-shadow 0.18s ease, + background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; +} + +.kontakt-seite .btn-accent { + background: var(--accent); + color: #03242b; +} + +.kontakt-seite .btn-accent:hover:not(:disabled) { + transform: translateY(-1px); + box-shadow: 0 10px 28px rgba(0, 179, 194, 0.28); +} + +.kontakt-seite .btn-block { + width: 100%; +} + +.kontakt-seite .btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.kontakt-seite .form-status { + display: none; + font-size: 0.9rem; +} + +.kontakt-seite .form-status.is-visible { + display: block; +} + +.kontakt-seite .form-status--ok { + color: #4ade80; +} + +.kontakt-seite .form-status--error { + color: #f87171; +} + +/* ---------- Kontaktinformations-Karten ---------- */ + +.kontakt-seite .info-stack { + display: grid; + gap: 20px; +} + +.kontakt-seite .info-card { + display: flex; + align-items: flex-start; + gap: 16px; + background-color: var(--background-panel); + border: 1px solid var(--border); + border-radius: calc(var(--radius) + 0.4rem); + padding: 22px; + transition: border-color 0.15s ease; +} + +.kontakt-seite .info-card:hover { + border-color: rgba(69, 151, 163, 0.5); +} + +.kontakt-seite .info-card__icon { + display: grid; + place-items: center; + flex-shrink: 0; + width: 40px; + height: 40px; + margin-top: 2px; + border-radius: 10px; + background: rgba(69, 151, 163, 0.2); + color: var(--accent); +} + +.kontakt-seite .info-card__label { + font-size: 0.7rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--text-muted); + margin-bottom: 4px; +} + +.kontakt-seite .info-card a, +.kontakt-seite .info-card p { + color: var(--text-primary); + font-weight: 500; + text-decoration: none; + margin: 0; +} + +.kontakt-seite .info-card a:hover { + color: var(--accent); +} + +.kontakt-seite .info-card p small, +.kontakt-seite .info-card p.info-sub { + display: block; + font-size: 0.85rem; + font-weight: 400; + color: var(--text-muted); +} + +/* ---------- Socials ---------- */ + +.kontakt-seite .socials { + display: flex; + gap: 12px; +} + +.kontakt-seite .socials a { + display: grid; + place-items: center; + width: 44px; + height: 44px; + border-radius: 10px; + border: 1px solid var(--border); + background: rgba(255, 255, 255, 0.04); + color: var(--text-primary); + text-decoration: none; + font-weight: 600; + font-size: 0.8rem; + transition: border-color 0.15s ease, background-color 0.15s ease; +} + +.kontakt-seite .socials a:hover { + border-color: var(--accent); + background: rgba(69, 151, 163, 0.12); +} + +/* ---------- Standort / Karte ---------- */ + +.kontakt-seite .map-frame { + border-radius: calc(var(--radius) + 0.9rem); + border: 1px solid var(--border); + overflow: hidden; + height: 500px; + background: var(--background-panel); +} + +.kontakt-seite .map-frame iframe { + display: block; + width: 100%; + height: 100%; + border: 0; +} + +/* ---------- Footer ---------- */ + +.kontakt-seite .logo { + font-family: var(--font-display); + font-size: 1.35rem; + letter-spacing: -0.02em; + color: var(--text-muted); + text-decoration: none; + white-space: nowrap; +} + +.kontakt-seite .logo span { + color: var(--accent); +} + +.kontakt-seite .site-footer { + margin-top: 96px; + padding: 64px 0 40px; + border-top: 1px solid var(--border); + background: rgba(255, 255, 255, 0.015); +} + +.kontakt-seite .footer-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + gap: 48px; +} + +.kontakt-seite .footer-brand p { + color: var(--text-muted); + font-size: 0.95rem; + max-width: 340px; + margin-top: 14px; +} + +.kontakt-seite .footer-col h3 { + font-size: 0.85rem; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--text-muted); + margin-bottom: 16px; +} + +.kontakt-seite .footer-col ul { + list-style: none; + margin: 0; + padding: 0; +} + +.kontakt-seite .footer-col a { + display: block; + padding: 5px 0; + color: var(--text-muted); + text-decoration: none; + font-size: 0.92rem; + transition: color 0.15s ease; +} + +.kontakt-seite .footer-col a:hover { + color: var(--text-primary); +} + +.kontakt-seite .footer-legal { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 12px; + margin-top: 48px; + padding-top: 24px; + border-top: 1px solid var(--border); + color: var(--text-muted); + font-size: 0.85rem; +} + +.kontakt-seite .footer-legal a { + color: inherit; + text-decoration: none; +} + +.kontakt-seite .footer-legal a:hover { + color: var(--text-primary); +} + +/* ---------- Scroll-Reveal ---------- */ + +.kontakt-seite .reveal { + opacity: 0; + transform: translateY(18px); + transition: opacity 0.6s ease, transform 0.6s ease; +} + +.kontakt-seite .reveal.visible { + opacity: 1; + transform: none; +} + +/* ---------- Responsiv ---------- */ + +@media (max-width: 980px) { + .kontakt-seite .hero__grid, + .kontakt-seite .kontakt-grid { + grid-template-columns: minmax(0, 1fr); + } + + .kontakt-seite .cards-3 { + grid-template-columns: minmax(0, 1fr); + } + + .kontakt-seite .footer-grid { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 760px) { + .kontakt-seite .section { + padding: 64px 0; + } + + .kontakt-seite .hero { + padding: 56px 0 64px; + } + + .kontakt-seite .footer-grid { + grid-template-columns: 1fr; + gap: 32px; + } + + .kontakt-seite .site-header .container { + flex-direction: column; + align-items: flex-start; + } + + .kontakt-seite .map-frame { + height: 380px; + } +} + +/* ---------- Reduzierte Bewegung ---------- */ + +@media (prefers-reduced-motion: reduce) { + .kontakt-seite { + scroll-behavior: auto; + } + + .kontakt-seite .reveal { + opacity: 1; + transform: none; + transition: none; + } + + .kontakt-seite, + .kontakt-seite * { + transition-duration: 0.01ms !important; + } +} diff --git a/html/kontakt.html b/html/kontakt.html new file mode 100644 index 0000000..2e7d66a --- /dev/null +++ b/html/kontakt.html @@ -0,0 +1,244 @@ + + + + + + + Kontakt | Ernährungsberatung für Triathleten | tri-hub + + + + + + + + + +
+ +
+
+ + + + TRI-HUB + Kontakt & Unterstützung + + + +
+
+ +
+ +
+
+
+ Kontakt +

Wir sind für dich da

+

+ Hast du Fragen zur Ernährungsberatung oder möchtest mehr über Tri-hub erfahren? + Kontaktiere uns – wir freuen uns auf dich! +

+
+
+ Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht +
+
+
+ + +
+
+
+
+ +

Persönlicher Austausch

+

Wir nehmen uns Zeit für deine Fragen und Anliegen – schnell und unkompliziert.

+
+
+ +

Schnelle Antworten

+

Deine Fragen beantworten wir zeitnah – per Mail, Telefon oder persönlich.

+
+
+ +

Echte Beziehung

+

Für uns zählt nicht nur die Antwort – sondern der Mensch hinter der Frage.

+
+
+
+
+ + +
+
+
+ Nachricht +

Schreib uns eine Nachricht

+ +
+
+ + +

Bitte gib deinen Namen an.

+
+ +
+ + +

Bitte gib eine gültige E-Mail-Adresse an.

+
+ +
+ + +
+ +
+ + +

Bitte wähle einen Anfrage-Typ.

+
+ +
+ + +

Bitte gib einen kurzen Betreff an.

+
+ +
+ + +

Bitte beschreibe dein Anliegen in wenigen Sätzen.

+

✓ Nachricht ist lang genug

+
+ + +

+
+
+ +
+

Kontaktinformationen

+
+
+ +
+

Allgemeine Fragen & Beratung

+ info@trihub.de +
+
+ +
+ +
+

Telefon

+ 06203 / 1764877 +
+
+ +
+ +
+

Adresse

+

Schloßstr. 11 + 68535 Edingen-Neckarhausen +

+
+
+ +
+
+

Folge uns auf

+
+ FB + IN +
+
+
+
+
+
+
+ + +
+
+
+ Standort +

Unser Standort

+
+ +
+
+
+
+ + + +
+
+ + + diff --git a/index.html b/index.html index 90a3774..d6a1b05 100644 --- a/index.html +++ b/index.html @@ -188,26 +188,24 @@ +

Bereit für deinen nächsten Schritt?

Vereinbare ein unverbindliches Kennenlerngespräch – wir schauen gemeinsam, ob die Beratung zu dir passt.

- Jetzt - unverbindlich anfragen + Jetzt unverbindlich anfragen
-