Ihor_Zhekov/DEKRA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7082cc4d595e1c5fb4d1d1e08a3871785dba865c
DEKRA/Dekra WebSite/truck-country-dekra-ci_1.html
Ihor_Zhekov 7082cc4d59 new website
2026-02-24 15:11:45 +01:00

1498 lines
55 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Truck & Country Festival 2026 – DEKRA Lausitzring</title>
<!--
============================================================
NOTO SANS – DSGVO-KONFORM SELBSTGEHOSTET
Fonts müssen lokal auf dem Webserver liegen:
/fonts/NotoSans-Light.woff2
/fonts/NotoSans-LightItalic.woff2
/fonts/NotoSans-Regular.woff2
/fonts/NotoSans-SemiBold.woff2
/fonts/NotoSans-Bold.woff2
/fonts/NotoSans-Black.woff2
Download: https://fonts.google.com/noto/specimen/Noto+Sans
============================================================
-->
<style>
@font-face {
font-family: 'Noto Sans';
src: local('Noto Sans Light'),
url('/fonts/NotoSans-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans';
src: local('Noto Sans Light Italic'),
url('/fonts/NotoSans-LightItalic.woff2') format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans';
src: local('Noto Sans'),
local('Noto Sans Regular'),
url('/fonts/NotoSans-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans';
src: local('Noto Sans SemiBold'),
url('/fonts/NotoSans-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans';
src: local('Noto Sans Bold'),
url('/fonts/NotoSans-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans';
src: local('Noto Sans Black'),
url('/fonts/NotoSans-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* ============================================================
DEKRA CI – DESIGN TOKENS
============================================================ */
:root {
/* Primärpalette */
--dekra-logo-gruen: #008143; /* Nur Logo / Shield */
--dekra-dunkelgruen: #006B52; /* Akzentfarbe für Elemente */ /* Hauptfarbe Web: BGs, Headlines, große Elemente */
--dekra-hellgruen: #64B32C; /* Ausschließlich CTAs & kleine funktionale Elemente */
--dekra-weiss: #FFFFFF;
--dekra-schwarz: #000000;
/* Akzentfarben – nur Störer / Highlights */
--akzent-dunkelblau: #002E55;
--akzent-orange: #EF7C00;
--akzent-gelb: #FFCC00;
/* Hintergründe – Dark/Black wie Version 1 */
--bg-dunkel: #111210; /* Basis-Hintergrund */
--bg-tief: #1a1b18; /* Abschnittswechsel */
--bg-surface: #222320; /* Karten, Felder */
--bg-raised: #2a2b28; /* Erhöhte Elemente */
--overlay: rgba(17,18,16,.82);
--overlay-light: rgba(17,18,16,.55);
--border: rgba(255,255,255,.08);
--text-muted: rgba(255,255,255,.55);
--font: 'Noto Sans', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg-dunkel);
color: var(--dekra-weiss);
font-family: var(--font);
font-weight: 400;
line-height: 1.65;
overflow-x: hidden;
}
/* ============================================================
NAVIGATION
============================================================ */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
height: 72px;
background: rgba(17,18,16,.95);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
display: flex; align-items: center;
justify-content: space-between;
padding: 0 56px;
}
.nav-logo {
display: flex; align-items: center; gap: 14px;
text-decoration: none; color: var(--dekra-weiss);
}
.nav-logo-shield {
/* DEKRA Shield Silhouette – CSS-only */
width: 34px; height: 42px;
background: var(--dekra-logo-gruen);
clip-path: polygon(50% 0%, 100% 15%, 100% 65%, 50% 100%, 0% 65%, 0% 15%);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.nav-logo-text {
font-weight: 600; /* SemiBold */
font-size: .95rem;
letter-spacing: .04em;
line-height: 1.2;
color: var(--dekra-weiss);
}
.nav-logo-text span { display: block; font-weight: 400; font-size: .75rem; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a {
font-weight: 600; font-size: .88rem;
letter-spacing: .06em; text-transform: uppercase;
color: var(--text-muted); text-decoration: none;
transition: color .2s;
}
.nav-links a:hover { color: var(--dekra-weiss); }
.nav-cta {
font-weight: 700; font-size: .85rem;
letter-spacing: .08em; text-transform: uppercase;
background: var(--dekra-hellgruen);
color: var(--dekra-weiss) !important;
padding: 10px 24px; border-radius: 2px;
text-decoration: none;
transition: filter .2s, transform .15s;
}
.nav-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
/* ============================================================
HERO 1 – Fullscreen Video / Bild
============================================================ */
.hero-1 {
position: relative;
height: 100vh; min-height: 620px;
display: flex; align-items: flex-end;
overflow: hidden;
}
.hero-media {
position: absolute; inset: 0;
background: var(--bg-tief);
}
.hero-media img,
.hero-media video {
width: 100%; height: 100%;
object-fit: cover;
opacity: .55;
}
.hero-1-overlay {
position: absolute; inset: 0;
background: linear-gradient(
to top,
rgba(17,18,16,1) 0%,
rgba(17,18,16,.5) 45%,
rgba(17,18,16,.1) 100%
);
}
.hero-1-content {
position: relative; z-index: 2;
padding: 0 80px 88px;
max-width: 860px;
}
.eyebrow {
/* CI: Subheadline → SemiBold 600, Weiß */
font-weight: 600; font-size: .82rem;
letter-spacing: .28em; text-transform: uppercase;
color: var(--dekra-hellgruen);
margin-bottom: 20px;
display: flex; align-items: center; gap: 14px;
}
.eyebrow::before {
content: ''; display: block;
width: 28px; height: 2px;
background: var(--dekra-hellgruen);
}
.hero-1-content h1 {
/* CI: H1 → Regular 400, Weiß */
font-weight: 400;
font-size: clamp(3.2rem, 6.5vw, 6.5rem);
line-height: 1.0;
color: var(--dekra-weiss);
margin-bottom: 14px;
}
.hero-1-content h1 strong {
/* CI: Starke Hervorhebung → Black 900, Dunkelgrün oder Weiß */
font-weight: 900;
color: var(--dekra-weiss);
display: block;
}
.hero-date-badge {
/* Störer → Akzentfarbe Orange erlaubt */
display: inline-block;
background: var(--akzent-orange);
color: var(--dekra-weiss);
font-weight: 700; font-size: .78rem;
letter-spacing: .14em; text-transform: uppercase;
padding: 5px 14px; border-radius: 1px;
margin-bottom: 28px;
}
.hero-meta {
display: flex; gap: 28px; flex-wrap: wrap;
margin-bottom: 44px;
}
.hero-meta-item {
/* CI: Body → Regular 400 */
font-weight: 400; font-size: .9rem;
color: var(--text-muted);
display: flex; align-items: center; gap: 8px;
}
.hero-meta-item strong {
/* CI: Hervorhebung → Bold 700 */
font-weight: 700;
color: var(--dekra-weiss);
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
/* CI: Buttons = Hellgrün */
.btn-primary {
font-weight: 700; font-size: .9rem;
letter-spacing: .1em; text-transform: uppercase;
background: var(--dekra-hellgruen);
color: var(--dekra-weiss);
padding: 15px 36px; border: none;
border-radius: 2px; cursor: pointer;
text-decoration: none;
display: inline-flex; align-items: center; gap: 10px;
transition: filter .2s, transform .15s;
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-ghost {
font-weight: 700; font-size: .9rem;
letter-spacing: .1em; text-transform: uppercase;
background: transparent;
color: var(--dekra-weiss);
padding: 14px 32px;
border: 1.5px solid rgba(255,255,255,.35);
border-radius: 2px; cursor: pointer;
text-decoration: none;
display: inline-flex; align-items: center; gap: 10px;
transition: border-color .2s;
}
.btn-ghost:hover { border-color: var(--dekra-weiss); }
.scroll-hint {
position: absolute; bottom: 40px; right: 80px; z-index: 2;
display: flex; flex-direction: column; align-items: center; gap: 8px;
font-weight: 300; font-size: .7rem;
letter-spacing: .22em; text-transform: uppercase;
color: var(--text-muted);
}
.scroll-line {
width: 1px; height: 52px;
background: linear-gradient(to bottom, var(--dekra-hellgruen), transparent);
animation: scrollpulse 2.2s ease-in-out infinite;
}
@keyframes scrollpulse {
0%,100% { opacity:.35; transform:scaleY(.7); }
50% { opacity:1; transform:scaleY(1); }
}
/* ============================================================
COUNTDOWN
============================================================ */
.countdown-bar {
background: var(--bg-tief);
border-bottom: 1px solid var(--border);
padding: 48px 80px;
display: flex; align-items: center;
justify-content: space-between;
gap: 40px; flex-wrap: wrap;
}
.countdown-label {
/* SemiBold 600, muted */
font-weight: 600; font-size: .78rem;
letter-spacing: .22em; text-transform: uppercase;
color: var(--text-muted);
}
.countdown-numbers { display: flex; gap: 28px; align-items: center; }
.cd-block { display: flex; flex-direction: column; align-items: center; }
.cd-num {
/* Eyecatcher → Black 900, Weiß */
font-weight: 900; font-size: clamp(2.4rem,5vw,4.5rem);
line-height: 1; color: var(--dekra-weiss);
min-width: 76px; text-align: center;
}
.cd-sep {
font-weight: 300; font-size: 3rem;
color: var(--dekra-hellgruen); margin-bottom: 14px;
}
.cd-unit {
font-weight: 300; font-size: .68rem; /* Light 300 */
letter-spacing: .18em; text-transform: uppercase;
color: var(--text-muted); margin-top: 6px;
}
/* ============================================================
SECTION SCAFFOLDING
============================================================ */
.section-label {
/* SemiBold 600, Hellgrün = CTA-Funktion/Akzent hier als Orientierungsfarbe */
font-weight: 600; font-size: .74rem;
letter-spacing: .3em; text-transform: uppercase;
color: var(--dekra-hellgruen);
margin-bottom: 14px;
display: flex; align-items: center; gap: 12px;
}
.section-label::before {
content: ''; display: block; width: 22px; height: 2px;
background: var(--dekra-hellgruen);
}
h2.section-title {
/* H2 → Regular 400, Weiß */
font-weight: 400;
font-size: clamp(2rem, 4vw, 3.6rem);
line-height: 1.05; color: var(--dekra-weiss);
margin-bottom: 20px;
}
h2.section-title strong {
/* Eyecatcher innerhalb H2 → Black 900 */
font-weight: 900;
}
.section-sub {
/* Body → Regular 400, muted */
font-weight: 400; font-size: 1rem;
color: var(--text-muted);
max-width: 600px; line-height: 1.75;
}
/* ============================================================
HIGHLIGHTS GRID
============================================================ */
.highlights {
padding: 100px 80px;
background: var(--bg-dunkel);
}
.highlights-header {
display: flex; justify-content: space-between;
align-items: flex-end; margin-bottom: 56px;
gap: 32px; flex-wrap: wrap;
}
.highlights-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
}
.hl-card {
background: var(--bg-tief);
padding: 36px 28px;
border-top: 2px solid transparent;
transition: border-color .3s, background .3s;
}
.hl-card:hover {
border-top-color: var(--dekra-hellgruen);
background: var(--bg-surface);
}
.hl-icon { font-size: 1.8rem; margin-bottom: 18px; display: block; }
.hl-card h3 {
/* H3 → Regular 400, Weiß */
font-weight: 400; font-size: 1.15rem;
margin-bottom: 10px; color: var(--dekra-weiss);
line-height: 1.2;
}
.hl-card h3 strong {
/* Hervorhebung → Bold 700 */
font-weight: 700;
}
.hl-card p {
/* Body */
font-weight: 400; font-size: .88rem;
color: var(--text-muted); line-height: 1.65;
}
/* ============================================================
PROGRAMM
============================================================ */
.program {
padding: 100px 80px;
background: var(--bg-tief);
}
.program-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 2px; margin-top: 56px;
}
.prog-day { background: var(--bg-surface); padding: 44px 36px; }
.prog-day-label {
font-weight: 600; font-size: .72rem;
letter-spacing: .28em; text-transform: uppercase;
color: var(--dekra-hellgruen); margin-bottom: 6px;
}
.prog-day-title {
/* H3 Regular 400, Weiß */
font-weight: 400; font-size: 1.6rem;
color: var(--dekra-weiss);
margin-bottom: 28px; padding-bottom: 22px;
border-bottom: 1px solid var(--border);
}
.prog-item {
display: flex; gap: 18px;
padding: 14px 0; border-bottom: 1px solid var(--border);
}
.prog-time {
/* SemiBold 600 */
font-weight: 600; font-size: .82rem;
letter-spacing: .08em; color: var(--dekra-hellgruen);
min-width: 56px; padding-top: 2px;
}
.prog-info h4 {
/* Bold 700 */
font-weight: 700; font-size: .95rem;
color: var(--dekra-weiss); margin-bottom: 2px;
}
.prog-info p {
/* Light 300 – funktioniert als Subtext/Fußnote-artig */
font-weight: 300; font-size: .82rem;
color: var(--text-muted);
}
/* ============================================================
HERO 2 – Aftermovie / Erlebnis
============================================================ */
.hero-2 {
position: relative;
height: 80vh; min-height: 500px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.hero-2-media {
position: absolute; inset: 0;
}
.hero-2-media img,
.hero-2-media video {
width: 100%; height: 100%; object-fit: cover; opacity: .4;
}
.hero-2-overlay {
position: absolute; inset: 0;
background: linear-gradient(135deg,
rgba(17,18,16,.88) 0%,
rgba(17,18,16,.45) 60%,
rgba(17,18,16,.85) 100%
);
}
.hero-2-content {
position: relative; z-index: 2;
text-align: center; padding: 0 40px; max-width: 760px;
}
.hero-2-content h2 {
/* H2 Regular 400 + Black 900 Eyecatcher */
font-weight: 400;
font-size: clamp(2.6rem, 5.5vw, 5rem);
line-height: 1.05; color: var(--dekra-weiss);
margin-bottom: 20px;
}
.hero-2-content h2 strong { font-weight: 900; }
.hero-2-content p {
font-weight: 400; font-size: 1.05rem;
color: var(--text-muted); margin-bottom: 36px;
max-width: 480px; margin-left: auto; margin-right: auto;
}
.play-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 72px; height: 72px; border-radius: 50%;
background: rgba(100,179,44,.15);
border: 2px solid var(--dekra-hellgruen);
margin-bottom: 36px; cursor: pointer;
text-decoration: none;
transition: background .3s, transform .2s;
}
.play-btn:hover { background: rgba(100,179,44,.3); transform: scale(1.08); }
.play-btn svg { width: 26px; height: 26px; fill: var(--dekra-hellgruen); margin-left: 4px; }
/* ============================================================
TICKETS
============================================================ */
.tickets { padding: 100px 80px; background: var(--bg-dunkel); }
.ticket-grid {
display: grid; grid-template-columns: repeat(3,1fr);
gap: 2px; margin-top: 56px;
}
.ticket-card {
background: var(--bg-tief);
padding: 44px 32px; position: relative;
border-top: 2px solid transparent;
transition: background .3s;
}
.ticket-card.featured {
background: var(--bg-surface);
border-top-color: var(--dekra-hellgruen);
}
/* Störer – Akzentfarbe Orange erlaubt */
.ticket-badge {
position: absolute; top: 0; left: 32px;
font-weight: 700; font-size: .68rem;
letter-spacing: .18em; text-transform: uppercase;
background: var(--akzent-orange);
color: var(--dekra-weiss);
padding: 4px 12px;
}
.ticket-type {
/* Light 300 als Kategoriebeschriftung */
font-weight: 300; font-size: .76rem;
letter-spacing: .22em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 10px;
}
.ticket-card h3 {
font-weight: 400; font-size: 1.7rem;
color: var(--dekra-weiss); margin-bottom: 10px;
}
.ticket-price {
/* Eyecatcher Black 900 für Preis */
font-weight: 900; font-size: 3.2rem;
line-height: 1; color: var(--dekra-hellgruen); margin-bottom: 4px;
}
.ticket-price-note {
font-weight: 300; font-size: .78rem;
color: var(--text-muted); margin-bottom: 28px;
font-style: italic; /* Light Italic für Zusatzinfos */
}
.ticket-features { list-style: none; margin-bottom: 32px; }
.ticket-features li {
font-weight: 400; font-size: .88rem;
color: var(--text-muted);
padding: 9px 0; border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 10px;
}
.ticket-features li::before {
content: '✓'; color: var(--dekra-hellgruen);
font-weight: 700; font-size: .78rem; flex-shrink: 0;
}
.btn-outline {
font-weight: 700; font-size: .85rem;
letter-spacing: .1em; text-transform: uppercase;
background: transparent; color: var(--dekra-weiss);
padding: 12px 24px; border: 1.5px solid rgba(255,255,255,.3);
border-radius: 2px; cursor: pointer;
text-decoration: none; display: block;
text-align: center; transition: border-color .2s;
}
.btn-outline:hover { border-color: var(--dekra-weiss); }
/* ============================================================
LOCATION
============================================================ */
.location {
padding: 100px 80px; background: var(--bg-tief);
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: center;
}
.location-map {
aspect-ratio: 4/3; background: var(--bg-surface);
overflow: hidden; border-radius: 2px;
}
.location-map iframe { width: 100%; height: 100%; border: none; }
.loc-info { display: flex; flex-direction: column; gap: 28px; margin-top: 36px; }
.loc-item { display: flex; gap: 16px; }
.loc-icon { font-size: 1.3rem; min-width: 30px; margin-top: 2px; }
.loc-item h4 {
/* Bold 700 Hervorhebung */
font-weight: 700; font-size: .9rem;
text-transform: uppercase; letter-spacing: .07em;
color: var(--dekra-weiss); margin-bottom: 3px;
}
.loc-item p {
font-weight: 400; font-size: .88rem;
color: var(--text-muted); line-height: 1.55;
}
/* ============================================================
NEWSLETTER STRIPE
============================================================ */
.newsletter-strip {
background: var(--bg-surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 56px 80px;
display: flex; align-items: center;
justify-content: space-between;
gap: 40px; flex-wrap: wrap;
}
.newsletter-strip h3 {
font-weight: 400; font-size: 1.5rem;
color: var(--dekra-weiss); margin-bottom: 4px;
}
.newsletter-strip p {
font-weight: 300; font-size: .88rem;
color: var(--text-muted);
}
.nl-form {
display: flex; gap: 0; flex-shrink: 0;
}
.nl-input {
font-family: var(--font); font-weight: 400; font-size: .9rem;
background: var(--bg-dunkel); border: 1px solid var(--border);
border-right: none; color: var(--dekra-weiss);
padding: 13px 20px; outline: none;
border-radius: 2px 0 0 2px; width: 280px;
transition: border-color .2s;
}
.nl-input:focus { border-color: var(--dekra-hellgruen); }
.nl-input::placeholder { color: var(--text-muted); }
/* Button CI: Hellgrün */
.nl-btn {
font-family: var(--font); font-weight: 700; font-size: .85rem;
letter-spacing: .1em; text-transform: uppercase;
background: var(--dekra-hellgruen); color: var(--dekra-weiss);
border: none; padding: 13px 24px;
cursor: pointer; border-radius: 0 2px 2px 0;
transition: filter .2s;
}
.nl-btn:hover { filter: brightness(1.1); }
.nl-dsgvo {
font-weight: 300; font-style: italic; font-size: .72rem; /* Light Italic → Fußnotencharakter */
color: var(--text-muted); margin-top: 8px;
}
/* ============================================================
AI CHATBOT
============================================================ */
#chatbot-toggle {
position: fixed; bottom: 32px; right: 32px; z-index: 999;
width: 62px; height: 62px; border-radius: 50%;
background: var(--dekra-hellgruen); border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 32px rgba(100,179,44,.35);
transition: transform .2s, box-shadow .2s;
}
#chatbot-toggle:hover {
transform: scale(1.08);
box-shadow: 0 12px 40px rgba(100,179,44,.5);
}
#chatbot-toggle svg { width: 26px; height: 26px; fill: var(--dekra-weiss); }
.chat-pulse {
position: absolute; width: 100%; height: 100%; border-radius: 50%;
border: 2px solid var(--dekra-hellgruen);
animation: pulse-ring 2.8s ease-out infinite; opacity: 0;
}
@keyframes pulse-ring {
0% { transform: scale(1); opacity: .6; }
100% { transform: scale(1.8); opacity: 0; }
}
.chat-badge {
position: absolute; top: -4px; right: -4px;
background: var(--akzent-orange); color: var(--dekra-weiss);
width: 20px; height: 20px; border-radius: 50%;
font-size: .65rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
#chatbot-window {
position: fixed; bottom: 110px; right: 32px; z-index: 998;
width: 380px; max-height: 560px;
background: var(--bg-tief);
border: 1px solid var(--border); border-radius: 4px;
box-shadow: 0 24px 80px rgba(0,0,0,.55);
display: none; flex-direction: column; overflow: hidden;
animation: chat-open .22s ease;
}
@keyframes chat-open {
from { opacity:0; transform:translateY(14px) scale(.97); }
to { opacity:1; transform:translateY(0) scale(1); }
}
#chatbot-window.open { display: flex; }
.chat-header {
background: var(--bg-dunkel);
padding: 14px 18px;
display: flex; align-items: center; gap: 12px;
border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.chat-avatar {
width: 36px; height: 36px;
background: var(--dekra-hellgruen); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1rem; flex-shrink: 0;
}
.chat-header-info h4 {
font-weight: 700; font-size: .9rem;
color: var(--dekra-weiss); letter-spacing: .03em;
}
.chat-header-info p {
font-weight: 300; font-size: .72rem;
color: var(--dekra-hellgruen);
display: flex; align-items: center; gap: 5px;
}
.online-dot { width: 6px; height: 6px; border-radius: 50%; background: #48BB78; flex-shrink: 0; }
.chat-close {
margin-left: auto; background: none; border: none;
color: var(--text-muted); font-size: 1.2rem;
cursor: pointer; transition: color .2s; padding: 4px;
}
.chat-close:hover { color: var(--dekra-weiss); }
.chat-messages {
flex: 1; overflow-y: auto; padding: 18px;
display: flex; flex-direction: column; gap: 12px;
}
.chat-messages::-webkit-scrollbar { width: 3px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--bg-dunkel); border-radius: 2px; }
.msg { max-width: 86%; font-size: .86rem; font-weight: 400; line-height: 1.55; }
.msg-bot {
align-self: flex-start;
background: var(--bg-dunkel); color: var(--dekra-weiss);
padding: 11px 15px; border-radius: 2px 10px 10px 10px;
}
.msg-user {
align-self: flex-end;
background: var(--dekra-hellgruen); color: var(--dekra-weiss);
padding: 11px 15px; border-radius: 10px 2px 10px 10px;
}
.msg-time {
font-weight: 300; font-style: italic; font-size: .68rem;
color: var(--text-muted); align-self: flex-start;
}
.msg-time.ut { align-self: flex-end; }
.chat-suggestions {
padding: 0 18px 10px; display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0;
}
.suggest-btn {
font-family: var(--font); font-weight: 600; font-size: .72rem;
letter-spacing: .06em; text-transform: uppercase;
background: var(--bg-dunkel); color: var(--text-muted);
border: 1px solid var(--border); padding: 6px 12px;
border-radius: 20px; cursor: pointer; white-space: nowrap;
transition: color .2s, border-color .2s;
}
.suggest-btn:hover { color: var(--dekra-weiss); border-color: rgba(255,255,255,.35); }
.chat-input-wrap {
padding: 10px 18px 14px;
display: flex; gap: 8px;
border-top: 1px solid var(--border); flex-shrink: 0;
}
#chat-input {
flex: 1; font-family: var(--font); font-weight: 400; font-size: .86rem;
background: var(--bg-dunkel); border: 1px solid var(--border);
color: var(--dekra-weiss); padding: 9px 13px;
border-radius: 2px; outline: none; transition: border-color .2s;
}
#chat-input:focus { border-color: rgba(100,179,44,.6); }
#chat-input::placeholder { color: var(--text-muted); }
#chat-send {
background: var(--dekra-hellgruen); border: none;
color: var(--dekra-weiss); width: 38px; height: 38px;
border-radius: 2px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: filter .2s;
}
#chat-send:hover { filter: brightness(1.12); }
#chat-send svg { width: 15px; height: 15px; fill: var(--dekra-weiss); }
.typing-indicator {
display: flex; gap: 4px; align-items: center; padding: 11px 15px;
background: var(--bg-dunkel); border-radius: 2px 10px 10px 10px;
align-self: flex-start; width: fit-content;
}
.typing-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--text-muted);
animation: typedot 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typedot {
0%,80%,100% { transform:scale(.7); opacity:.35; }
40% { transform:scale(1); opacity:1; }
}
/* ============================================================
FOOTER
============================================================ */
footer {
background: var(--bg-dunkel);
border-top: 1px solid var(--border);
padding: 64px 80px 40px;
}
.footer-grid {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px; margin-bottom: 48px;
}
.footer-brand p {
font-weight: 400; font-size: .86rem;
color: var(--text-muted); line-height: 1.7;
margin: 16px 0 22px; max-width: 260px;
}
.footer-social { display: flex; gap: 10px; }
.social-link {
width: 34px; height: 34px; background: var(--bg-surface);
border-radius: 2px; display: flex; align-items: center;
justify-content: center; font-size: .9rem;
text-decoration: none; transition: background .2s;
}
.social-link:hover { background: var(--dekra-hellgruen); }
.footer-col h4 {
font-weight: 600; font-size: .78rem;
letter-spacing: .18em; text-transform: uppercase;
margin-bottom: 18px; color: var(--dekra-weiss);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-col ul li a {
font-weight: 400; font-size: .86rem;
color: var(--text-muted); text-decoration: none; transition: color .2s;
}
.footer-col ul li a:hover { color: var(--dekra-weiss); }
.footer-bottom {
border-top: 1px solid var(--border);
padding-top: 26px; display: flex;
justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 14px;
}
.footer-bottom p {
/* Light Italic als Fußnote / Quellenangabe */
font-weight: 300; font-style: italic; font-size: .78rem;
color: var(--text-muted);
}
.footer-legal { display: flex; gap: 22px; }
.footer-legal a {
font-weight: 300; font-size: .78rem;
color: var(--text-muted); text-decoration: none; transition: color .2s;
}
.footer-legal a:hover { color: var(--dekra-weiss); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
.highlights-grid { grid-template-columns: 1fr 1fr; }
.ticket-grid { grid-template-columns: 1fr; max-width: 480px; }
.location { grid-template-columns: 1fr; gap: 48px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 768px) {
nav { padding: 0 24px; }
nav .nav-links { display: none; }
.hero-1-content, .countdown-bar, .highlights, .program,
.tickets, .location, .newsletter-strip, footer {
padding-left: 24px; padding-right: 24px;
}
.hero-1-content { padding-bottom: 64px; }
.scroll-hint { right: 24px; }
.highlights-grid, .program-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.nl-form { flex-direction: column; width: 100%; }
.nl-input { width: 100%; border-right: 1px solid var(--border); border-bottom: none; border-radius: 2px 2px 0 0; }
.nl-btn { border-radius: 0 0 2px 2px; }
#chatbot-window { width: calc(100vw - 32px); right: 16px; bottom: 96px; }
}
</style>
</head>
<body>
<!-- ============================================================
NAVIGATION
============================================================ -->
<nav>
<a class="nav-logo" href="#">
<div class="nav-logo-shield"></div>
<div class="nav-logo-text">
Truck &amp; Country Festival
<span>DEKRA Lausitzring · 2026</span>
</div>
</a>
<ul class="nav-links">
<li><a href="#highlights">Programm</a></li>
<li><a href="#tickets">Tickets</a></li>
<li><a href="#location">Anfahrt</a></li>
<li><a href="https://shop.dekra-lausitzring.de/" class="nav-cta" target="_blank">Tickets sichern →</a></li>
</ul>
</nav>
<!-- ============================================================
HERO 1 – Fullscreen Stimmungsvideo
============================================================ -->
<section class="hero-1">
<div class="hero-media">
<!--
VIDEO einbinden:
<video autoplay muted loop playsinline poster="/img/hero-poster.jpg">
<source src="/video/hero.mp4" type="video/mp4">
</video>
-->
<img
src="https://dekra-lausitzring.de/wp-content/uploads/2026/02/Truck_Country_Festival-Muster-ETT-e1771579026655-1920x870.jpg"
alt="Trucks und Offroad-Fahrzeuge auf dem DEKRA Lausitzring">
</div>
<div class="hero-1-overlay"></div>
<div class="hero-1-content">
<div class="eyebrow">DEKRA Lausitzring · Klettwitz</div>
<h1>
Truck &amp;<br>
<strong>Country<br>Festival</strong>
</h1>
<div class="hero-date-badge">8. – 9. August 2026</div>
<div class="hero-meta">
<span class="hero-meta-item"><strong>🏆</strong> EM Truck Trial</span>
<span class="hero-meta-item"><strong>🎵</strong> Live Country Music</span>
<span class="hero-meta-item"><strong>🚛</strong> Show &amp; Shine Contest</span>
<span class="hero-meta-item"><strong>🏕️</strong> Camping vor Ort</span>
</div>
<div class="hero-actions">
<a href="#tickets" class="btn-primary">Jetzt Tickets sichern →</a>
<a href="#highlights" class="btn-ghost">Programm entdecken</a>
</div>
</div>
<div class="scroll-hint">
Scroll
<div class="scroll-line"></div>
</div>
</section>
<!-- ============================================================
COUNTDOWN
============================================================ -->
<div class="countdown-bar">
<div>
<div class="countdown-label">Countdown zum Festival</div>
</div>
<div class="countdown-numbers">
<div class="cd-block">
<div class="cd-num" id="cd-days">000</div>
<div class="cd-unit">Tage</div>
</div>
<div class="cd-sep">:</div>
<div class="cd-block">
<div class="cd-num" id="cd-hours">00</div>
<div class="cd-unit">Stunden</div>
</div>
<div class="cd-sep">:</div>
<div class="cd-block">
<div class="cd-num" id="cd-mins">00</div>
<div class="cd-unit">Minuten</div>
</div>
<div class="cd-sep">:</div>
<div class="cd-block">
<div class="cd-num" id="cd-secs">00</div>
<div class="cd-unit">Sekunden</div>
</div>
</div>
<a href="#tickets" class="btn-primary">Frühbucherticket →</a>
</div>
<!-- ============================================================
HIGHLIGHTS
============================================================ -->
<section class="highlights" id="highlights">
<div class="highlights-header">
<div>
<div class="section-label">Was erwartet dich</div>
<h2 class="section-title">Das <strong>Festival</strong></h2>
<p class="section-sub">
Trucks, Offroad-Action, Country-Atmosphäre und unvergessliche Erlebnisse –
ein Wochenende für die ganze Familie auf dem DEKRA Lausitzring.
</p>
</div>
</div>
<div class="highlights-grid">
<div class="hl-card">
<span class="hl-icon">🏆</span>
<h3><strong>Truck Trial EM</strong></h3>
<p>Internationale Teams steuern tonnenschwere LKW durch technisch anspruchsvolle Parcours mit Steilhängen, Gräben und Hindernissen.</p>
</div>
<div class="hl-card">
<span class="hl-icon">🎵</span>
<h3><strong>Country Village</strong></h3>
<p>Live-Musik, Line-Dance, Western-Spiele und Marktstände – echte Country-Atmosphäre mit Bands den ganzen Tag.</p>
</div>
<div class="hl-card">
<span class="hl-icon">🚛</span>
<h3><strong>Show &amp; Shine</strong></h3>
<p>Der Truck-Contest für die schönsten Showtrucks – Publikumsvoting, attraktive Preise und jede Menge Chrom.</p>
</div>
<div class="hl-card">
<span class="hl-icon">🦅</span>
<h3><strong>Falknerei-Show</strong></h3>
<p>Beeindruckende Greifvogel-Flugshows mit Kommentar – Naturerlebnis mitten auf dem Festivalgelände.</p>
</div>
<div class="hl-card">
<span class="hl-icon">🪓</span>
<h3><strong>Kettensägenkunst</strong></h3>
<p>Live-Schnitzvorführungen – Kunstwerke entstehen direkt vor den Augen der Besucher.</p>
</div>
<div class="hl-card">
<span class="hl-icon">🛒</span>
<h3><strong>Aussteller &amp; Händler</strong></h3>
<p>Trucks, Technik, Outdoor und Lifestyle – ein großer Marktbereich rund um die Leidenschaft für LKW und Country.</p>
</div>
<div class="hl-card">
<span class="hl-icon">🏕️</span>
<h3><strong>Truck &amp; Country Camp</strong></h3>
<p>Übernachte direkt auf dem Gelände – Camping für Besucher und eigene LKW-Stellflächen inklusive.</p>
</div>
<div class="hl-card">
<span class="hl-icon">👨‍👩‍👧‍👦</span>
<h3><strong>Familienprogramm</strong></h3>
<p>Erlebnisbereiche für Besucher jeden Alters – von Kindern bis Truck-Fans, hier ist für alle etwas dabei.</p>
</div>
</div>
</section>
<!-- ============================================================
PROGRAMM
============================================================ -->
<section class="program" id="programm">
<div class="section-label">Ablauf</div>
<h2 class="section-title">Programm <strong>2026</strong></h2>
<div class="program-grid">
<div class="prog-day">
<div class="prog-day-label">Tag 1</div>
<div class="prog-day-title">Samstag, 8. August</div>
<div class="prog-item">
<div class="prog-time">09:00</div>
<div class="prog-info">
<h4>Einlass &amp; Truck Parade</h4>
<p>Einfahrt der gemeldeten Trucks, Aufstellung zum Show &amp; Shine</p>
</div>
</div>
<div class="prog-item">
<div class="prog-time">10:30</div>
<div class="prog-info">
<h4>Truck Trial EM – Runde 1</h4>
<p>Qualifikationsläufe mit internationalem Starterfeld</p>
</div>
</div>
<div class="prog-item">
<div class="prog-time">13:00</div>
<div class="prog-info">
<h4>Country Village eröffnet</h4>
<p>Live-Musik, Line-Dance, Marktstände, Falknerei-Show</p>
</div>
</div>
<div class="prog-item">
<div class="prog-time">15:00</div>
<div class="prog-info">
<h4>Kettensägenkunst Live</h4>
<p>Vorführung auf der Hauptbühne</p>
</div>
</div>
<div class="prog-item">
<div class="prog-time">17:30</div>
<div class="prog-info">
<h4>Show &amp; Shine Voting</h4>
<p>Publikumsvoting für die schönsten Showtrucks</p>
</div>
</div>
<div class="prog-item">
<div class="prog-time">20:00</div>
<div class="prog-info">
<h4>Country Night</h4>
<p>Liveband auf der Hauptbühne, Tanz &amp; Lagerfeueratmosphäre</p>
</div>
</div>
</div>
<div class="prog-day">
<div class="prog-day-label">Tag 2</div>
<div class="prog-day-title">Sonntag, 9. August</div>
<div class="prog-item">
<div class="prog-time">09:00</div>
<div class="prog-info">
<h4>Einlass &amp; Frühstück im Camp</h4>
<p>Camping-Bereich erwacht, Food-Village öffnet</p>
</div>
</div>
<div class="prog-item">
<div class="prog-time">10:00</div>
<div class="prog-info">
<h4>Truck Trial EM – Finaltag</h4>
<p>Entscheidungsläufe – Spannung bis zum letzten Meter</p>
</div>
</div>
<div class="prog-item">
<div class="prog-time">12:00</div>
<div class="prog-info">
<h4>Falknerei &amp; Naturshow</h4>
<p>Greifvogel-Flugshow mit Kommentar</p>
</div>
</div>
<div class="prog-item">
<div class="prog-time">14:00</div>
<div class="prog-info">
<h4>Show &amp; Shine Siegerehrung</h4>
<p>Preisverleihung der Truck-Kategorien</p>
</div>
</div>
<div class="prog-item">
<div class="prog-time">15:30</div>
<div class="prog-info">
<h4>EM Siegerehrung</h4>
<p>Podium, Pokalvergabe, Ehrungsrunde der Trucks</p>
</div>
</div>
<div class="prog-item">
<div class="prog-time">17:00</div>
<div class="prog-info">
<h4>Abschluss &amp; Ausfahrt</h4>
<p>Große Truck-Parade als würdiger Abschluss des Wochenendes</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
HERO 2 – Aftermovie / Erlebnisvideo
============================================================ -->
<section class="hero-2">
<div class="hero-2-media">
<!--
AFTERMOVIE einbinden:
<video autoplay muted loop playsinline poster="/img/hero2-poster.jpg">
<source src="/video/aftermovie.mp4" type="video/mp4">
</video>
-->
<img
src="https://dekra-lausitzring.de/wp-content/uploads/2026/01/FPM_1016.jpg"
alt="Truck Trial Aktion auf dem DEKRA Lausitzring">
</div>
<div class="hero-2-overlay"></div>
<div class="hero-2-content">
<a href="#" class="play-btn" title="Aftermovie abspielen" aria-label="Video abspielen">
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</a>
<h2>Erlebe es<br><strong>selbst</strong></h2>
<p>Tonnenschwere LKW, Country-Flair und ein Wochenende, das unvergessen bleibt – bist du dabei?</p>
<a href="#tickets" class="btn-primary">Ticket sichern – 8. &amp; 9. August 2026</a>
</div>
</section>
<!-- ============================================================
TICKETS
============================================================ -->
<section class="tickets" id="tickets">
<div class="section-label">Eintritt</div>
<h2 class="section-title">Tickets &amp; <strong>Preise</strong></h2>
<p class="section-sub">Ticketinformationen werden in Kürze veröffentlicht. Jetzt vormerken und als Erster informiert werden.</p>
<div class="ticket-grid">
<div class="ticket-card">
<div class="ticket-type">Einzeltag</div>
<h3>Tagesticket</h3>
<div class="ticket-price">ab €&thinsp;19</div>
<div class="ticket-price-note">pro Person, Vorverkauf</div>
<ul class="ticket-features">
<li>Eintritt 1 Tag (Sa. oder So.)</li>
<li>Truck Trial EM</li>
<li>Country Village &amp; Bühne</li>
<li>Alle Showbereiche</li>
</ul>
<a href="https://shop.dekra-lausitzring.de/" class="btn-outline" target="_blank">Zum Ticketshop</a>
</div>
<div class="ticket-card featured">
<div class="ticket-badge">Empfohlen</div>
<div class="ticket-type">Ganzes Wochenende</div>
<h3>Wochenendticket</h3>
<div class="ticket-price">ab €&thinsp;32</div>
<div class="ticket-price-note">pro Person, beide Tage</div>
<ul class="ticket-features">
<li>Eintritt Samstag + Sonntag</li>
<li>Truck Trial EM Finale</li>
<li>Country Village &amp; Bühne</li>
<li>Show &amp; Shine Contest</li>
<li>Alle Showbereiche</li>
</ul>
<a href="https://shop.dekra-lausitzring.de/" class="btn-primary" target="_blank">Jetzt buchen →</a>
</div>
<div class="ticket-card">
<div class="ticket-type">Camper</div>
<h3>Camping + Ticket</h3>
<div class="ticket-price">ab €&thinsp;55</div>
<div class="ticket-price-note">Wochenende inkl. Stellplatz</div>
<ul class="ticket-features">
<li>Wochenendticket inklusive</li>
<li>Campingstellplatz Fr.–So.</li>
<li>Anreise bereits Freitag</li>
<li>LKW-Stellflächen verfügbar</li>
<li>Sanitäranlagen vor Ort</li>
</ul>
<a href="https://shop.dekra-lausitzring.de/" class="btn-outline" target="_blank">Zum Ticketshop</a>
</div>
</div>
</section>
<!-- ============================================================
LOCATION
============================================================ -->
<section class="location" id="location">
<div>
<div class="section-label">Wo</div>
<h2 class="section-title">Anfahrt &amp; <strong>Location</strong></h2>
<div class="loc-info">
<div class="loc-item">
<span class="loc-icon">📍</span>
<div>
<h4>DEKRA Lausitzring</h4>
<p>Lausitzring 1 · 01994 Klettwitz<br>Brandenburg, Deutschland</p>
</div>
</div>
<div class="loc-item">
<span class="loc-icon">🚗</span>
<div>
<h4>Mit dem PKW</h4>
<p>A13 · Ausfahrt Ruhland. Beschilderung ab Autobahnabfahrt. Großes Parkgelände direkt am Ring.</p>
</div>
</div>
<div class="loc-item">
<span class="loc-icon">🚛</span>
<div>
<h4>Truck-Zufahrt</h4>
<p>Eigene LKW-Zufahrt für Ausfahrer und Showtrucks. Anmeldung im Voraus erforderlich.</p>
</div>
</div>
<div class="loc-item">
<span class="loc-icon">🚌</span>
<div>
<h4>ÖPNV &amp; Shuttle</h4>
<p>Shuttlebus ab Bahnhof Ruhland geplant. Weitere Infos folgen zeitnah.</p>
</div>
</div>
</div>
</div>
<div class="location-map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2484.9!2d13.9359!3d51.5122!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4708d8f8cf8b8b8b%3A0x8b8b8b8b8b8b8b8b!2sDEKRA+Lausitzring!5e0!3m2!1sde!2sde!4v1700000000000!5m2!1sde!2sde"
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"
title="DEKRA Lausitzring Anfahrtskarte">
</iframe>
</div>
</section>
<!-- ============================================================
NEWSLETTER
============================================================ -->
<div class="newsletter-strip">
<div>
<h3>Frühzeitig informiert sein</h3>
<p>Lineup, Tickets &amp; News als Erster erhalten – jetzt eintragen.</p>
</div>
<div>
<form onsubmit="return false;">
<div class="nl-form">
<input type="email" class="nl-input" placeholder="E-Mail-Adresse" autocomplete="email">
<button type="submit" class="nl-btn">Anmelden →</button>
</div>
<p class="nl-dsgvo">Ich stimme der Verarbeitung meiner Daten gemäß Datenschutzerklärung zu. Abmeldung jederzeit möglich.</p>
</form>
</div>
</div>
<!-- ============================================================
FOOTER
============================================================ -->
<footer>
<div class="footer-grid">
<div class="footer-brand">
<div style="display:flex;align-items:center;gap:12px;">
<div class="nav-logo-shield"></div>
<div class="nav-logo-text">
Truck &amp; Country Festival
<span>DEKRA Lausitzring · 2026</span>
</div>
</div>
<p>Das Truck &amp; Country Festival findet am 8. und 9. August 2026 auf dem DEKRA Lausitzring in Klettwitz statt.</p>
<div class="footer-social">
<a class="social-link" href="https://www.instagram.com/dekra_lausitzring/" target="_blank" rel="noopener" aria-label="Instagram">📷</a>
<a class="social-link" href="https://www.facebook.com/DEKRALausitzring/" target="_blank" rel="noopener" aria-label="Facebook">📘</a>
</div>
</div>
<div class="footer-col">
<h4>Festival</h4>
<ul>
<li><a href="#highlights">Programm</a></li>
<li><a href="#tickets">Tickets</a></li>
<li><a href="#location">Anfahrt</a></li>
<li><a href="#">Camping</a></li>
<li><a href="#">Aussteller</a></li>
</ul>
</div>
<div class="footer-col">
<h4>DEKRA Lausitzring</h4>
<ul>
<li><a href="https://dekra-lausitzring.de" target="_blank" rel="noopener">Zur Homepage</a></li>
<li><a href="https://dekra-lausitzring.de/veranstaltungen/" target="_blank" rel="noopener">Alle Events</a></li>
<li><a href="https://dekra-lausitzring.de/fahrprogramme/" target="_blank" rel="noopener">Fahrprogramme</a></li>
<li><a href="https://dekra-lausitzring.de/ueber-uns/kontakt/" target="_blank" rel="noopener">Kontakt</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Rechtliches</h4>
<ul>
<li><a href="https://dekra-lausitzring.de/impressum/" target="_blank" rel="noopener">Impressum</a></li>
<li><a href="https://dekra-lausitzring.de/datenschutz/" target="_blank" rel="noopener">Datenschutz</a></li>
<li><a href="https://dekra-lausitzring.de/cookie-richtlinien/" target="_blank" rel="noopener">Cookie-Richtlinien</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 DEKRA Lausitzring – Truck &amp; Country Festival. DEKRA Lausitzring ist eine eingetragene Marke der DEKRA Automobil GmbH.</p>
<div class="footer-legal">
<a href="https://dekra-lausitzring.de/impressum/" target="_blank" rel="noopener">Impressum</a>
<a href="https://dekra-lausitzring.de/datenschutz/" target="_blank" rel="noopener">Datenschutz</a>
</div>
</div>
</footer>
<!-- ============================================================
AI CHATBOT – Festival-Assistent
============================================================ -->
<button id="chatbot-toggle" aria-label="Festival-Assistent öffnen">
<span class="chat-pulse"></span>
<span class="chat-badge" id="chat-notif">1</span>
<svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
</button>
<div id="chatbot-window" role="dialog" aria-label="Festival-Chatbot">
<div class="chat-header">
<div class="chat-avatar">🚛</div>
<div class="chat-header-info">
<h4>Festival-Assistent</h4>
<p><span class="online-dot"></span> Online – antwortet sofort</p>
</div>
<button class="chat-close" id="chat-close-btn" aria-label="Chat schließen">✕</button>
</div>
<div class="chat-messages" id="chat-messages">
<div class="msg msg-bot">
Hey! Ich bin dein Assistent für das <strong>Truck &amp; Country Festival 2026</strong>. 🚛<br><br>
Frag mich alles – Tickets, Programm, Anfahrt, Camping &amp; mehr!
</div>
<div class="msg-time">Gerade eben</div>
</div>
<div class="chat-suggestions" id="chat-suggestions">
<button class="suggest-btn" data-q="Wann findet das Festival statt?">📅 Datum?</button>
<button class="suggest-btn" data-q="Was kostet ein Ticket?">🎟️ Preise?</button>
<button class="suggest-btn" data-q="Gibt es Camping?">🏕️ Camping?</button>
<button class="suggest-btn" data-q="Wie komme ich hin?">🗺️ Anfahrt?</button>
<button class="suggest-btn" data-q="Darf ich meinen LKW mitbringen?">🚛 LKW?</button>
<button class="suggest-btn" data-q="Was ist die Truck Trial EM?">🏆 Truck Trial?</button>
</div>
<div class="chat-input-wrap">
<input type="text" id="chat-input" placeholder="Deine Frage ..." autocomplete="off" maxlength="200">
<button id="chat-send" aria-label="Senden">
<svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
</button>
</div>
</div>
<!-- ============================================================
SCRIPTS
============================================================ -->
<script>
// ── COUNTDOWN ──────────────────────────────────────────────
(function() {
const target = new Date('2026-08-08T09:00:00');
function update() {
const diff = target - new Date();
if (diff <= 0) return;
const d = Math.floor(diff / 86400000);
const h = Math.floor((diff % 86400000) / 3600000);
const m = Math.floor((diff % 3600000) / 60000);
const s = Math.floor((diff % 60000) / 1000);
document.getElementById('cd-days').textContent = String(d).padStart(3,'0');
document.getElementById('cd-hours').textContent = String(h).padStart(2,'0');
document.getElementById('cd-mins').textContent = String(m).padStart(2,'0');
document.getElementById('cd-secs').textContent = String(s).padStart(2,'0');
}
update();
setInterval(update, 1000);
})();
// ── CHATBOT ────────────────────────────────────────────────
(function() {
const toggle = document.getElementById('chatbot-toggle');
const win = document.getElementById('chatbot-window');
const closeBtn = document.getElementById('chat-close-btn');
const input = document.getElementById('chat-input');
const sendBtn = document.getElementById('chat-send');
const msgs = document.getElementById('chat-messages');
const notif = document.getElementById('chat-notif');
const sugg = document.getElementById('chat-suggestions');
toggle.addEventListener('click', () => {
win.classList.toggle('open');
notif.style.display = 'none';
if (win.classList.contains('open')) input.focus();
});
closeBtn.addEventListener('click', () => win.classList.remove('open'));
const faq = {
"wann": "Das Festival findet am <strong>8. und 9. August 2026</strong> auf dem DEKRA Lausitzring in Klettwitz statt. 📅",
"datum": "Das Festival ist am <strong>8. und 9. August 2026</strong>. Beide Tage vollgepackt mit Programm! 🗓️",
"preis": "Tagesticket ab <strong>€ 19</strong>, Wochenendticket ab <strong>€ 32</strong>, Camping + Wochenende ab <strong>€ 55</strong>. Genaue Preise bald im Ticketshop. 🎟️",
"ticket": "Tickets gibt es im <a href='https://shop.dekra-lausitzring.de/' target='_blank' style='color:var(--dekra-hellgruen)'>offiziellen DEKRA-Ticketshop</a>. Tages-, Wochenend- und Camping-Tickets verfügbar.",
"camping": "Ja! Das <strong>Truck &amp; Country Camp</strong> liegt direkt auf dem Gelände. Anreise bereits Freitag möglich. Camping + Wochenendticket ab € 55. 🏕️",
"lkw": "Ja! Es gibt eigene <strong>LKW-Stellflächen</strong> und eine separate Truck-Zufahrt für Ausfahrer und Showtrucks. Vorherige Anmeldung erforderlich. 🚛",
"truck trial": "Die <strong>Truck Trial Europameisterschaft</strong> ist das sportliche Highlight: Internationale Teams steuern tonnenschwere LKW durch Parcours mit Steilhängen, Gräben und Hindernissen. Präzision pur! 🏆",
"anfahrt": "DEKRA Lausitzring, <strong>Lausitzring 1, 01994 Klettwitz</strong>. Über A13 Ausfahrt Ruhland. Parkplätze direkt am Ring, Shuttle ab Ruhland geplant. 🗺️",
"programm": "Samstag &amp; Sonntag: Truck Trial EM, Country Village mit Live-Musik, Show &amp; Shine Contest, Falknerei, Kettensägenkunst, Händlermarkt. Beide Tage von 9:00 bis in den Abend.",
"musik": "Im Country Village spielen <strong>Live-Bands</strong> den ganzen Tag. Samstag Abend gibt es eine große Country Night! Line-up wird bald bekannt gegeben. 🎵",
"hunde": "Infos zu Haustieren werden noch bekannt gegeben. Bitte direkt bei DEKRA anfragen: <a href='mailto:lausitzring@dekra.com' style='color:var(--dekra-hellgruen)'>lausitzring@dekra.com</a>. 🐕",
"kinder": "Das Festival bietet <strong>Familien- und Erlebnisbereiche für alle Altersgruppen</strong>. Kinder werden Trucks und Falknerei lieben! 👨‍👩‍👧‍👦",
"kontakt": "Kontakt DEKRA Lausitzring:<br>📧 <a href='mailto:lausitzring@dekra.com' style='color:var(--dekra-hellgruen)'>lausitzring@dekra.com</a><br>☎️ <a href='tel:+493575433733' style='color:var(--dekra-hellgruen)'>+49 35754 33733</a>",
};
function getAnswer(q) {
const l = q.toLowerCase();
for (const [k, v] of Object.entries(faq)) {
if (l.includes(k)) return v;
}
return "Gute Frage! Schau auf <a href='https://dekra-lausitzring.de/highlights/truck-country-festival/' target='_blank' style='color:var(--dekra-hellgruen)'>dekra-lausitzring.de</a> oder schreib uns: <a href='mailto:lausitzring@dekra.com' style='color:var(--dekra-hellgruen)'>lausitzring@dekra.com</a> 👍";
}
function addMsg(html, type) {
const el = document.createElement('div');
el.className = 'msg msg-' + type;
el.innerHTML = html;
msgs.appendChild(el);
const t = document.createElement('div');
t.className = 'msg-time' + (type === 'user' ? ' ut' : '');
t.textContent = 'Gerade eben';
msgs.appendChild(t);
msgs.scrollTop = msgs.scrollHeight;
}
function showTyping() {
const el = document.createElement('div');
el.className = 'typing-indicator'; el.id = 'typing';
el.innerHTML = '<div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div>';
msgs.appendChild(el);
msgs.scrollTop = msgs.scrollHeight;
}
function removeTyping() { const el = document.getElementById('typing'); if (el) el.remove(); }
async function send(text) {
const q = (text || input.value).trim();
if (!q) return;
addMsg(q, 'user');
input.value = '';
sugg.style.display = 'none';
showTyping();
try {
const response = await fetch('https://n8n.profice.de/webhook/a0029ebd-a73a-4f6d-bc24-f8ac80d363ee', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: q })
});
if (!response.ok) throw new Error('Webhook error');
const data = await response.json();
removeTyping();
addMsg(data.output || data.response || data.message || data.text || 'Entschuldigung, ich konnte keine Antwort generieren.', 'bot');
} catch (error) {
console.error('Chat webhook error:', error);
removeTyping();
addMsg('Entschuldigung, es gab ein Problem bei der Verbindung. Bitte versuche es später erneut oder kontaktiere uns: <a href="mailto:lausitzring@dekra.com" style="color:var(--dekra-hellgruen)">lausitzring@dekra.com</a>', 'bot');
}
}
sendBtn.addEventListener('click', () => send());
input.addEventListener('keydown', e => { if (e.key === 'Enter') send(); });
document.querySelectorAll('.suggest-btn').forEach(b => b.addEventListener('click', () => send(b.dataset.q)));
// Auto-open nach 8s
setTimeout(() => { if (!win.classList.contains('open')) { win.classList.add('open'); notif.style.display = 'none'; } }, 8000);
})();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink