/* ==========================================================
EXECUTIVE PROFILE THEME — scoped to #journey (Elementor safe)
Matches palette + glassmorphism language of the landing page
========================================================== */
#journey.ux-journey{
/* Palette (aligned with Executive Profile Landingpage) */
–primary:#02235b;
–primary-light:#3580e1;
–primary-lighter:#60a5fa;
–bg-dark:#0f1419;
–bg-medium:#1a1d2e;
–text-light:#e5e7eb;
–text-gray:#9ca3af;
–white:#ffffff;
color:var(–text-light);
font-family:’Afacad‘,-apple-system,BlinkMacSystemFont,’Segoe UI‘,sans-serif;
}
#journey .ux-inner{
max-width:1400px;
margin:0 auto;
padding:100px 40px;
}
#journey .ux-sec__head{
text-align:center;
margin-bottom:60px;
}
#journey .ux-sec__kicker{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 22px;
margin-bottom:20px;
border-radius:999px;
background:rgba(53,128,225,0.08);
border:2px solid rgba(53,128,225,0.25);
color:var(–primary-light);
font-weight:800;
font-size:12px;
letter-spacing:2px;
}
#journey .ux-sec__title{
font-size:48px;
font-weight:800;
line-height:1.15;
margin:0 0 14px;
letter-spacing:-1px;
background:linear-gradient(135deg,var(–white) 0%, var(–primary-lighter) 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
#journey .ux-sec__sub{
font-size:20px;
color:var(–text-gray);
font-weight:500;
max-width:900px;
margin:0 auto;
line-height:1.7;
}
/* Timeline layout */
#journey .ux-tl{
display:flex;
flex-direction:column;
gap:22px;
}
#journey .ux-tl__item{
display:grid;
grid-template-columns:28px 1fr;
gap:18px;
align-items:stretch;
}
#journey .ux-tl__rail{
position:relative;
width:28px;
display:flex;
justify-content:center;
}
#journey .ux-tl__rail::before{
content:““;
position:absolute;
top:0;
bottom:0;
width:2px;
border-radius:2px;
background:linear-gradient(
to bottom,
rgba(var(–ux-tint),0.06),
rgba(var(–ux-tint),0.55),
rgba(var(–ux-tint),0.06)
);
}
#journey .ux-tl__dot{
width:14px;
height:14px;
margin-top:20px;
border-radius:50%;
background:rgb(var(–ux-tint));
box-shadow:
0 0 0 6px rgba(var(–ux-tint),0.16),
0 10px 20px rgba(2,35,91,0.35);
}
/* Card language mirrors landing page value-cards */
#journey .ux-tl__card{
position:relative;
overflow:hidden;
border-radius:16px;
padding:28px 28px 24px;
background:rgba(255,255,255,0.03);
backdrop-filter:blur(10px);
border:1px solid rgba(53,128,225,0.20);
transition:
transform .35s cubic-bezier(0.4,0,0.2,1),
border-color .35s ease,
box-shadow .35s ease,
background .35s ease;
}
#journey .ux-tl__card::before{
content:““;
position:absolute;
inset:0;
border-radius:16px;
padding:1px;
background:linear-gradient(135deg, rgba(var(–ux-tint),0.70), rgba(53,128,225,0.12));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity:.55;
pointer-events:none;
}
#journey .ux-tl__card:hover{
transform:translateY(-6px);
background:rgba(255,255,255,0.05);
border-color:rgba(53,128,225,0.40);
box-shadow:0 20px 40px rgba(2,35,91,0.30);
}
#journey .ux-tl__meta{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
margin-bottom:12px;
}
#journey .ux-tl__year{
font-size:14px;
font-weight:800;
color:var(–primary-light);
letter-spacing:.2px;
}
#journey .ux-tl__tag{
font-size:12px;
font-weight:800;
text-transform:uppercase;
letter-spacing:1px;
color:rgba(var(–ux-tint),0.95);
padding:6px 10px;
border-radius:999px;
background:rgba(var(–ux-tint),0.12);
border:1px solid rgba(var(–ux-tint),0.22);
}
#journey .ux-tl__h{
font-size:22px;
font-weight:800;
color:var(–white);
margin:0 0 10px;
}
#journey .ux-tl__p{
font-size:16px;
color:var(–text-gray);
line-height:1.7;
margin:0 0 14px;
}
/* Toggle (keeps the same UX cadence as CTA/outline buttons) */
#journey .ux-tl__toggle{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 18px;
border-radius:12px;
border:1px solid rgba(53,128,225,0.28);
background:rgba(255,255,255,0.04);
color:var(–text-light);
font-weight:800;
cursor:pointer;
font-family:inherit;
transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
#journey .ux-tl__toggle:focus{
outline:2px solid rgba(96,165,250,0.55);
outline-offset:2px;
}
#journey .ux-tl__toggle::after{
content:““;
width:10px;
height:10px;
border-right:2px solid var(–primary-light);
border-bottom:2px solid var(–primary-light);
transform:rotate(45deg);
transition:transform .25s ease;
margin-left:2px;
opacity:.9;
}
#journey .ux-tl__toggle[aria-expanded=“true“]::after{
transform:rotate(-135deg);
}
#journey .ux-tl__toggle:hover{
transform:translateY(-2px);
border-color:rgba(53,128,225,0.50);
background:rgba(255,255,255,0.07);
}
/* Smooth expand/collapse */
#journey .ux-tl__more{
margin-top:14px;
display:grid;
grid-template-rows:0fr;
opacity:0;
transition:grid-template-rows .35s ease, opacity .35s ease;
}
#journey .ux-tl__more > *{ overflow:hidden; }
#journey .ux-tl__item.is-open .ux-tl__more{
grid-template-rows:1fr;
opacity:1;
}
#journey .ux-list{
padding-left:18px;
color:var(–text-gray);
line-height:1.7;
}
#journey .ux-list–tight{
margin:0;
display:grid;
gap:6px;
}
/* Footer actions mirror landing page CTA styling */
#journey .ux-journey__foot{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
flex-wrap:wrap;
margin-top:38px;
padding-top:24px;
border-top:1px solid rgba(53,128,225,0.15);
}
#journey .ux-journey__note{
color:var(–text-gray);
font-size:14px;
line-height:1.6;
max-width:760px;
}
#journey .ux-journey__actions{
display:flex;
gap:14px;
flex-wrap:wrap;
}
#journey .ux-btn{
padding:14px 26px;
border-radius:12px;
text-decoration:none;
font-weight:800;
display:inline-flex;
align-items:center;
gap:10px;
transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
#journey .ux-btn–primary{
background:linear-gradient(135deg,var(–primary) 0%, var(–primary-light) 100%);
color:var(–white);
box-shadow:0 8px 24px rgba(2,35,91,0.40);
}
#journey .ux-btn–primary:hover{
transform:translateY(-3px);
box-shadow:0 12px 32px rgba(2,35,91,0.60);
}
#journey .ux-btn–secondary{
background:rgba(255,255,255,0.05);
border:2px solid rgba(53,128,225,0.30);
color:var(–text-light);
}
#journey .ux-btn–secondary:hover{
transform:translateY(-2px);
background:rgba(255,255,255,0.10);
border-color:rgba(53,128,225,0.50);
}
/* Responsive */
@media (max-width: 1024px){
#journey .ux-inner{ padding:80px 24px; }
#journey .ux-sec__title{ font-size:40px; }
}
@media (max-width: 768px){
#journey .ux-inner{ padding:60px 20px; }
#journey .ux-sec__title{ font-size:34px; }
#journey .ux-sec__sub{ font-size:18px; }
#journey .ux-tl__item{ grid-template-columns:24px 1fr; gap:14px; }
#journey .ux-tl__card{ padding:24px 20px 20px; }
}
From shopfloor fundamentals to international leadership.
A condensed, decision-grade timeline. Public version stays confidentiality-first (no client names).
Founder — Avantgarde Bearing Technology
Building and commercializing advanced bearing solutions with an execution mindset: proof, delivery logic, and long-cycle account development.
FOISSNER Coaching & Consulting
Coaching used as an execution instrument: clarity, decision velocity, negotiation strength, and leadership under pressure.
International Sales — Complex Industrial Systems
Leadership and execution across CEE and international environments: technical translation, negotiation, and delivery logic that retains accounts.
Mechanical Engineering Foundation
Shopfloor credibility plus engineering depth — the basis for pragmatic execution in sales, delivery, and problem-solving.
(()=>{„use strict“;
document.querySelectorAll(„[data-ux-journey]“).forEach(root=>{
if(root.dataset.uxJourneyInit===“1″) return;
root.dataset.uxJourneyInit=“1″;
root.querySelectorAll(„[data-ux-tl-toggle]“).forEach(btn=>{
const item = btn.closest(„.ux-tl__item“);
const more = item ? item.querySelector(„.ux-tl__more“) : null;
if(!item || !more) return;
// Ensure expandable area participates in transitions
if(more.hidden) more.hidden = false;
const labelClosed = (btn.dataset.labelClosed || btn.textContent || „Show details“).trim();
const labelOpen = (btn.dataset.labelOpen || „Hide details“).trim();
btn.setAttribute(„aria-expanded“,“false“);
btn.textContent = labelClosed;
item.classList.remove(„is-open“);
btn.addEventListener(„click“, ()=>{
const open = btn.getAttribute(„aria-expanded“)===“true“;
btn.setAttribute(„aria-expanded“, String(!open));
btn.textContent = open ? labelClosed : labelOpen;
item.classList.toggle(„is-open“, !open);
});
});
});
})();
Website-Titel 