diff --git a/assets/css/main.css b/assets/css/main.css index eb1de0d..ea49e36 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -190,14 +190,19 @@ header.site-header { } .nav-dropdown a:hover, .nav-dropdown a.active { background: var(--bg-alt); color: var(--accent); } +/* "Bewerben" ist der Treffpunkt beider Welten (Team Dogi + Spicy Media) — + deshalb bewusst FEST halb babyblau, halb rot, unabhängig vom Theme der + gerade offenen Seite. Kein var(--accent), sondern die festen Markenfarben. */ .nav-cta { padding: .55rem 1.1rem; border-radius: 999px; - background: var(--accent); - color: var(--accent-contrast); + background: linear-gradient(90deg, #8fd9ea 0%, #8fd9ea 49%, #d94a5c 51%, #d94a5c 100%); + color: #0a0c10; font-weight: 700; font-size: .88rem; + transition: filter .2s ease, transform .2s ease; } +.nav-cta:hover { filter: brightness(1.08); transform: translateY(-1px); } /* Interner Login — dezent, aber auf jeder Seite oben rechts auffindbar */ .nav-login { @@ -1079,6 +1084,81 @@ body.mit-hintergrund::after { .pyramid-tier .profile-card { max-width: min(78vw, 240px) !important; } } +/* ========================================================================== + BEWERBEN-SPLIT — zwei Welten, zwei Spalten, kleine Trennwand in der Mitte + Passend zum Hintergrundbild: Community/Team Dogi (blau) links, + Agentur/Spicy Media (rot) rechts. + ========================================================================== */ +.bewerben-split { + display: flex; + align-items: stretch; + gap: clamp(1.4rem, 4vw, 3.2rem); + max-width: 980px; + margin: 0 auto; +} +.bewerben-side { + flex: 1 1 0; + min-width: 0; + display: flex; + flex-direction: column; + gap: 1.2rem; +} +.bewerben-side-label { + text-align: center; + font-family: var(--font-head); + font-weight: 800; + font-size: .74rem; + letter-spacing: .1em; + text-transform: uppercase; + margin-bottom: .2rem; +} +.bewerben-side-blau .bewerben-side-label { color: #8fd9ea; text-shadow: 0 0 14px rgba(143, 217, 234, .5); } +.bewerben-side-rot .bewerben-side-label { color: #d94a5c; text-shadow: 0 0 14px rgba(217, 74, 92, .5); } +.bewerben-side .card { height: auto; } + +/* Die kleine Trennungswand: ein leuchtender Steg von blau nach rot, + mit einem Blitz-Knoten in der Mitte — passend zur Lichtgrenze im Bild. */ +.bewerben-wall { + flex: none; + width: 3px; + align-self: stretch; + position: relative; + border-radius: 3px; + background: linear-gradient(to bottom, + transparent 0%, + #8fd9ea 18%, + #b285c9 50%, + #d94a5c 82%, + transparent 100%); + box-shadow: 0 0 16px rgba(143, 217, 234, .35), 0 0 16px rgba(217, 74, 92, .3); +} +.bewerben-wall span { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 42px; + height: 42px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.1rem; + background: linear-gradient(135deg, #8fd9ea 0%, #8fd9ea 48%, #d94a5c 52%, #d94a5c 100%); + border: 2px solid rgba(255, 255, 255, .18); + box-shadow: 0 0 0 6px rgba(10, 12, 16, .55), + 0 0 20px rgba(143, 217, 234, .4), + 0 0 20px rgba(217, 74, 92, .35); +} +@media (max-width: 760px) { + .bewerben-split { flex-direction: column; gap: 2.2rem; } + .bewerben-wall { + width: 100%; + height: 3px; + background: linear-gradient(to right, transparent 0%, #8fd9ea 18%, #b285c9 50%, #d94a5c 82%, transparent 100%); + } +} + /* ========================================================================== TEAM-DOGI-HINTERGRUND — die große Team-Collage hinter dem Team-Abschnitt ========================================================================== */ @@ -1136,6 +1216,8 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; } align-items: flex-end; gap: 12px; } +/* Musik gehört zu Hasidog UND Van-Van, also zu beiden Welten — deshalb + auch hier fest halb babyblau, halb rot, statt der Theme-Farbe. */ .music-toggle { width: 54px; height: 54px; @@ -1147,11 +1229,12 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; } align-items: center; justify-content: center; cursor: pointer; - color: var(--accent-contrast); - border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); - background: linear-gradient(135deg, var(--accent), var(--accent-2)); + color: #0a0c10; + border: 1px solid rgba(255, 255, 255, .18); + background: linear-gradient(90deg, #8fd9ea 0%, #8fd9ea 49%, #d94a5c 51%, #d94a5c 100%); box-shadow: 0 12px 30px rgba(0, 0, 0, .45), - 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent); + 0 0 18px rgba(143, 217, 234, .35), + 0 0 18px rgba(217, 74, 92, .3); transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; } .music-toggle:hover, @@ -1159,7 +1242,8 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; } transform: translateY(-2px) scale(1.05); filter: brightness(1.12); box-shadow: 0 16px 38px rgba(0, 0, 0, .5), - 0 0 34px color-mix(in srgb, var(--accent) 55%, transparent); + 0 0 26px rgba(143, 217, 234, .5), + 0 0 26px rgba(217, 74, 92, .45); } .music-widget.open .music-toggle { transform: rotate(12deg); } diff --git a/assets/img/bg-bewerben-split-mobile.jpg b/assets/img/bg-bewerben-split-mobile.jpg new file mode 100644 index 0000000..0e2bf8d Binary files /dev/null and b/assets/img/bg-bewerben-split-mobile.jpg differ diff --git a/assets/img/bg-bewerben-split.jpg b/assets/img/bg-bewerben-split.jpg new file mode 100644 index 0000000..90d7bc8 Binary files /dev/null and b/assets/img/bg-bewerben-split.jpg differ diff --git a/bewerben.html b/bewerben.html index a60bc7d..4e0d23a 100644 --- a/bewerben.html +++ b/bewerben.html @@ -22,7 +22,7 @@ - +
@@ -36,28 +36,36 @@