Ihor_Zhekov/DEKRA_sponsor_seite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

j

Browse Source
This commit is contained in:
Ihor_Zhekov
2026-02-26 09:51:27 +01:00
parent cc792ab620
commit bc3ea9212e
6 changed files with 111 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
WebApp/styles.css
View File

@@ -26,7 +26,7 @@
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Barlow', 'Segoe UI', sans-serif;
font-family: var(--font-body, 'Barlow', 'Segoe UI', sans-serif);
background: var(--c-bg);
color: var(--c-text);
min-height: 100dvh;
@@ -144,8 +144,8 @@ button { cursor: pointer; font-family: inherit; border: none; background: none;
.hero-half:active { transform: scale(0.985); transition: transform 0.1s; }
/* Eigenfarbe ohne Foto */
.hero-half--truck { background: linear-gradient(160deg, #0A1F09 0%, #1E4A1A 50%, #2A6E22 100%); }
.hero-half--family { background: linear-gradient(200deg, #2A1200 0%, #5C2E00 50%, #8B4500 100%); }
.hero-half--truck { background: var(--truck-bg-gradient, linear-gradient(160deg, #0A1F09 0%, #1E4A1A 50%, #2A6E22 100%)); }
.hero-half--family { background: var(--family-bg-gradient, linear-gradient(200deg, #2A1200 0%, #5C2E00 50%, #8B4500 100%)); }
/* Bild-Layer */
.half-img {
@@ -166,20 +166,10 @@ button { cursor: pointer; font-family: inherit; border: none; background: none;
transition: opacity var(--t-med);
}
.half-overlay--truck {
background: linear-gradient(
160deg,
rgba(0,0,0,0.42) 0%,
rgba(10,31,9,0.38) 50%,
rgba(0,0,0,0.52) 100%
);
background: var(--truck-overlay, linear-gradient(160deg, rgba(0,0,0,0.42) 0%, rgba(10,31,9,0.38) 50%, rgba(0,0,0,0.52) 100%));
}
.half-overlay--family {
background: linear-gradient(
200deg,
rgba(0,0,0,0.42) 0%,
rgba(42,18,0,0.38) 50%,
rgba(0,0,0,0.52) 100%
);
background: var(--family-overlay, linear-gradient(200deg, rgba(0,0,0,0.42) 0%, rgba(42,18,0,0.38) 50%, rgba(0,0,0,0.52) 100%));
}
/* #1.2: Card – weniger schwarz, mehr Bildwirkung */
@@ -210,10 +200,10 @@ button { cursor: pointer; font-family: inherit; border: none; background: none;
border-radius: 2px; margin-bottom: 10px;
}
.hero-half--truck .half-tag {
background: rgba(74,138,66,0.22); border: 1px solid rgba(74,138,66,0.4); color: #A8E0A0;
background: var(--truck-tag-bg, rgba(74,138,66,0.22)); border: 1px solid var(--truck-tag-border, rgba(74,138,66,0.4)); color: var(--truck-tag-color, #A8E0A0);
}
.hero-half--family .half-tag {
background: rgba(196,122,30,0.22); border: 1px solid rgba(196,122,30,0.45); color: #F5C878;
background: var(--family-tag-bg, rgba(196,122,30,0.22)); border: 1px solid var(--family-tag-border, rgba(196,122,30,0.45)); color: var(--family-tag-color, #F5C878);
}
.half-title {
@@ -224,8 +214,8 @@ button { cursor: pointer; font-family: inherit; border: none; background: none;
/* Text-Shadow statt Card-Opacity für Lesbarkeit */
text-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 0 40px rgba(0,0,0,0.4);
}
.hero-half--truck .half-title { color: #C8F0C0; }
.hero-half--family .half-title { color: #FFE4B0; }
.hero-half--truck .half-title { color: var(--truck-title-color, #C8F0C0); }
.hero-half--family .half-title { color: var(--family-title-color, #FFE4B0); }
.half-highlights {
list-style: none; margin-bottom: 20px;
@@ -242,8 +232,8 @@ button { cursor: pointer; font-family: inherit; border: none; background: none;
content: '›'; position: absolute; left: 0;
font-size: 1rem; line-height: 1;
}
.hero-half--truck .half-highlights li::before { color: #5AAA50; }
.hero-half--family .half-highlights li::before { color: #D4820A; }
.hero-half--truck .half-highlights li::before { color: var(--truck-bullet-color, #5AAA50); }
.hero-half--family .half-highlights li::before { color: var(--family-bullet-color, #D4820A); }
.half-cta {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
@@ -255,11 +245,11 @@ button { cursor: pointer; font-family: inherit; border: none; background: none;
transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.hero-half--truck .half-cta {
background: #5AAA50; color: #061206;
background: var(--truck-cta-bg, #5AAA50); color: var(--truck-cta-color, #061206);
box-shadow: 0 4px 16px rgba(74,138,66,0.35);
}
.hero-half--family .half-cta {
background: var(--c-accent); color: #1F1005;
background: var(--family-cta-bg, var(--c-accent)); color: var(--family-cta-color, #1F1005);
box-shadow: 0 4px 16px rgba(212,130,10,0.4);
}
.hero-half:hover .half-cta,