.concept-page{ overflow-x:hidden; }
:root{
--side:86px;
--side-m:20px;
--arrow:43px;
} .concept-page h1, .concept-page h2, .concept-page h3,
.concept-page h4, .concept-page h5, .concept-page h6{
font-family:"Swear Display", serif !important;
font-weight:400; font-synthesis:none;
}
.concept-page p, .concept-page .copy, .concept-page li{
font-family:"Swear Text", serif !important;
font-weight:400; font-style:normal; font-synthesis:none;
}
.text-white{ color:#fff; } .is-italic{ font-style:italic; } .is-regular{ font-style:normal; } .concept-page h1{ font-size:140px; line-height:.92; letter-spacing:-.02em; }
.concept-page h2{ font-size:80px;  line-height:.95; letter-spacing:-.01em; }
.concept-page h4{ font-size:32px;  line-height:1.15; }
@media (max-width:768px){
.concept-page h1{ font-size:80px; }
.concept-page h2{ font-size:60px; }
.concept-page h4{ font-size:28px; }
} .concept-page .wrap{ padding-left:var(--side); padding-right:var(--side); }
@media (max-width:768px){ .concept-page .wrap{ padding-left:var(--side-m); padding-right:var(--side-m); } } .concept-page .fullbleed{
position:relative; width:100vw;
margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
overflow:hidden;
}
@supports (width:100dvw){
.concept-page .fullbleed{ width:100dvw; margin-left:calc(50% - 50dvw); margin-right:calc(50% - 50dvw); }
}
.concept-page section{ margin:0 !important; padding-top:0; } .hero{ display:block; }
@media (min-width:1025px){ .hero{ height:1080px; min-height:1080px; } }
@media (max-width:1024px){
.hero{ height:100vh; min-height:100vh; }
@supports (height:100svh){ .hero{ height:100svh; min-height:100svh; } }
}
.hero--1{ background:url(https://designbymichelle.de/wp-content/uploads/2025/09/Concept_Hero_01_Desktop_Webp.webp) center/cover no-repeat; }
@media (max-width:768px){ .hero--1{ background-image:url(https://designbymichelle.de/wp-content/uploads/2025/09/Concept_Hero_01_Mobil_Webp.webp); } }
.hero--1 .overlay{
position:absolute; inset:0; z-index:2;
display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
}
.hero-h1 .hero-h1-small{ display:inline-block; width:3.5ch; } .hero--1 .overlay .hero-sub{
margin:280px auto 0 !important;
max-width:min(1200px,100%) !important;
text-align:center !important;
} @media (max-width:768px){
.hero--1 .overlay{ justify-content:flex-start; padding-top:16vh; }
.hero-h1{ margin-top:40px; }
.hero--1 .overlay .hero-sub{
margin:18px 0 0 !important;
max-width:100% !important;
text-align:center !important;
}
} .hero--2{ background:url(https://designbymichelle.de/wp-content/uploads/2025/09/Concept_Hero_02_Desktop_Webp-scaled.webp) center/cover no-repeat; }
@media (max-width:768px){ .hero--2{ background-image:url(https://designbymichelle.de/wp-content/uploads/2025/09/Concept_Hero_02_Mobil_Webp-scaled.webp); } }
.hero--2 .overlay{
position:absolute; inset:0; z-index:2;
display:flex; flex-direction:column; align-items:stretch;
padding-top:80px;
}
.leistungen-title{ color:#000; text-align:left; font-style:italic; }
.hero--2 .tiles{ margin-top:100px !important; }
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:79px; width:100%; } .tile-blur{
min-height:490px !important;
padding:60px 29px 32px; border-radius:0;
background:rgba(255,255,255,0.30) !important;
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
display:grid; grid-template-rows:120px auto 1fr; align-items:start;
}
.tile-icon{ display:block; width:64px; height:auto; margin:0 auto; align-self:center; }
.tile-title{ margin:90px 0 0 !important; color:#000; text-align:left; }
.tile .copy{ margin:32px 0 0 !important; color:#000; } .tiles-dots{ display:none; } @media (max-width:768px){
.tiles{
display:flex; gap:0;
overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
touch-action:pan-x; overscroll-behavior-x:contain;
padding-bottom:4px;
}
.tiles::-webkit-scrollbar{ display:none; }
.tiles .tile{ flex:0 0 100%; scroll-snap-align:center; } .tiles .tile .tile-blur{
min-height:var(--tile-eq-h, auto) !important;
padding:48px 24px 28px; display:block;
}
.tile-icon{ margin:0 auto 24px; }
.tile-title{ margin:0 0 16px !important; }
.tile .copy{ margin:12px 0 0 !important; }
.tiles-dots{
display:flex !important; justify-content:center; gap:8px;
margin-top:14px; margin-bottom:8px; position:static !important;
}
.tiles-dots .dot{
appearance:none; -webkit-appearance:none;
width:6px; height:6px; border-radius:50%;
border:1px solid #000; background:transparent; opacity:.55; padding:0; margin:0;
}
.tiles-dots .dot.is-active{ opacity:1; background:#000; }
} .concept-process-stepper{
--process-visual-w:clamp(500px, 35.7vw, 571px);
--process-visual-ratio:1.2626970228;
--process-visual-h:calc(var(--process-visual-w) * var(--process-visual-ratio));
--process-stage-gap:clamp(96px, 7.5vw, 150px);
--process-head-y:clamp(58px, 4.8vw, 82px);
--process-dot-y:calc(var(--process-head-y) + 17px);
--process-ease:cubic-bezier(.19, 1, .22, 1);
position:relative;
background:#fff;
color:#000;
overflow:visible;
}
.concept-process-stepper__inner{
position:relative;
padding-top:150px;
padding-bottom:180px;
}
.concept-process-stepper__intro{
max-width:100%;
}
.concept-process-stepper__title{
margin:0 !important;
color:#000;
}
.concept-process-stepper__intro-copy{
max-width:822px;
margin-top:82px;
}
.concept-process-stepper__intro-copy p,
.concept-process-stepper__panel p,
.concept-process-stepper__cta p,
.concept-process-stepper__mobile-content p{
color:#000;
font-family:"Swear Text", serif !important;
font-weight:400;
font-style:normal;
line-height:1.42;
margin:0;
}
.concept-process-stepper__intro-copy p + p,
.concept-process-stepper__panel p + p,
.concept-process-stepper__mobile-content p + p{
margin-top:24px;
}
.concept-process-stepper__stage{
position:relative;
margin-top:128px;
}
.concept-process-stepper__desktop-layout{
display:grid;
grid-template-columns:var(--process-visual-w) minmax(0, 1fr);
column-gap:var(--process-stage-gap);
align-items:start;
width:100%;
max-width:100%;
margin:0;
}
.concept-process-stepper__visuals{
position:relative;
width:var(--process-visual-w);
height:var(--process-visual-h);
min-width:var(--process-visual-w);
overflow:hidden;
background:transparent;
isolation:isolate;
}
.concept-process-stepper__image{
position:absolute;
inset:0;
z-index:1;
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
opacity:0;
transform:translate3d(0, 34px, 0) scale(.985);
filter:blur(3px);
transition:
opacity 560ms var(--process-ease),
transform 760ms var(--process-ease),
filter 560ms ease;
will-change:opacity, transform, filter;
}
.concept-process-stepper[data-step-direction="up"] .concept-process-stepper__image{
transform:translate3d(0, -34px, 0) scale(.985);
}
.concept-process-stepper__image.is-active{
z-index:2;
opacity:1;
transform:translate3d(0, 0, 0) scale(1);
filter:blur(0);
}
.concept-process-stepper__right{
position:relative;
display:grid;
grid-template-columns:86px 42px minmax(0, 700px);
column-gap:32px;
height:var(--process-visual-h);
min-height:var(--process-visual-h);
min-width:0;
}
.concept-process-stepper__numbers{
position:relative;
grid-column:1;
height:100%;
}
.concept-process-stepper__number{
position:absolute;
left:0;
top:var(--process-head-y);
display:block;
color:#000;
font-family:"Swear Display", serif !important;
font-size:52px;
font-weight:400;
font-style:italic;
line-height:1;
letter-spacing:-.02em;
opacity:0;
transform:translate3d(0, 20px, 0);
transition:
opacity 460ms var(--process-ease),
transform 620ms var(--process-ease);
will-change:opacity, transform;
}
.concept-process-stepper[data-step-direction="up"] .concept-process-stepper__number{
transform:translate3d(0, -20px, 0);
}
.concept-process-stepper__number.is-active{
opacity:1;
transform:translate3d(0, 0, 0);
}
.concept-process-stepper__rail{
position:relative;
grid-column:2;
width:42px;
height:var(--process-visual-h);
}
.concept-process-stepper__line{
position:absolute;
top:0;
left:50%;
width:1px;
height:calc(100% - 42px);
background:#111;
transform:translateX(-50%);
}
.concept-process-stepper__dot{
position:absolute;
top:var(--process-dot-y);
left:50%;
width:10px;
height:10px;
border-radius:999px;
background:#000;
transform:translate(-50%, -50%);
}
.concept-process-stepper__cursor{
position:absolute;
left:50%;
bottom:-1px;
width:33px;
height:auto;
transform:translateX(-50%);
}
.concept-process-stepper__content{
grid-column:3;
display:flex;
flex-direction:column;
height:var(--process-visual-h);
min-width:0;
padding-top:var(--process-head-y);
padding-bottom:0;
}
.concept-process-stepper__panels{
position:relative;
min-height:252px;
}
.concept-process-stepper__panel{
position:absolute;
inset:0 auto auto 0;
width:100%;
max-width:700px;
opacity:0;
pointer-events:none;
transform:translate3d(0, 24px, 0);
transition:
opacity 480ms var(--process-ease),
transform 680ms var(--process-ease);
will-change:opacity, transform;
}
.concept-process-stepper[data-step-direction="up"] .concept-process-stepper__panel{
transform:translate3d(0, -24px, 0);
}
.concept-process-stepper__panel.is-active{
opacity:1;
pointer-events:auto;
transform:translate3d(0, 0, 0);
}
.concept-process-stepper__panel h3,
.concept-process-stepper__cta h3,
.concept-process-stepper__mobile-content h3{
color:#000;
font-family:"Swear Display", serif !important;
font-weight:400;
font-style:italic;
line-height:1.08;
letter-spacing:-.01em;
margin:0;
}
.concept-process-stepper__panel h3{
font-size:38px;
margin-bottom:24px;
}
.concept-process-stepper__cta{
max-width:690px;
}
.concept-process-stepper__cta--desktop{
margin-top:auto;
padding-bottom:0;
}
.concept-process-stepper__cta h3{
font-size:34px;
margin-bottom:22px;
}
.concept-process-stepper__buttons{
display:flex;
flex-wrap:wrap;
gap:15px;
margin-top:26px;
}
.concept-process-stepper__button,
.ally-pane .btn-outline{
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
min-height:42px;
padding:10px 22px;
border:1px solid #000;
border-radius:999px;
color:#000;
background:transparent;
text-decoration:none;
font-family:"Swear Display", serif !important;
font-size:16px;
font-style:normal !important;
font-weight:400;
line-height:1.2;
white-space:nowrap;
transition:
background-color 220ms ease,
color 220ms ease,
transform 220ms ease;
}
.concept-process-stepper__button:hover,
.concept-process-stepper__button:focus-visible{
color:#fff;
background:#000;
transform:translateY(-1px);
}
.concept-process-stepper__mobile-list{
display:none;
}
.concept-process-stepper + .ally{
margin-top:0 !important;
padding-top:130px;
background:#fff;
}
@media (min-width:769px) and (max-width:1180px){
.concept-process-stepper{
--process-visual-w:clamp(360px, 42vw, 460px);
--process-stage-gap:54px;
--process-head-y:62px;
}
.concept-process-stepper__right{
grid-template-columns:68px 36px minmax(0, 1fr);
column-gap:26px;
}
.concept-process-stepper__number{
font-size:44px;
}
.concept-process-stepper__panel h3{
font-size:32px;
}
.concept-process-stepper__cta h3{
font-size:30px;
}
}
@media (prefers-reduced-motion:reduce){
.concept-process-stepper__image,
.concept-process-stepper__number,
.concept-process-stepper__panel,
.concept-process-stepper__button{
transition:none !important;
}
} @media (max-width:768px){
.concept-process-stepper{
overflow:hidden;
}
.concept-process-stepper__inner{
padding-top:78px;
padding-bottom:120px;
}
.concept-process-stepper__intro-copy{
margin-top:42px;
max-width:none;
}
.concept-process-stepper__stage{
margin-top:66px;
}
.concept-process-stepper__desktop-layout{
display:none !important;
}
.concept-process-stepper__mobile-list{
display:grid;
row-gap:48px;
}
.concept-process-stepper__mobile-step{
display:grid;
grid-template-columns:46px 22px minmax(0, 1fr);
column-gap:12px;
align-items:start;
color:#000;
}
.concept-process-stepper__mobile-number{
color:#000;
font-family:"Swear Display", serif !important;
font-size:38px;
font-weight:400;
font-style:italic;
line-height:1;
letter-spacing:-.02em;
}
.concept-process-stepper__mobile-rail{
position:relative;
min-height:100%;
}
.concept-process-stepper__mobile-rail::before{
content:"";
position:absolute;
top:4px;
left:50%;
width:1px;
height:calc(100% + 48px);
background:#000;
transform:translateX(-50%);
}
.concept-process-stepper__mobile-rail::after{
content:"";
position:absolute;
top:10px;
left:50%;
width:8px;
height:8px;
border-radius:999px;
background:#000;
transform:translate(-50%, -50%);
}
.concept-process-stepper__mobile-step:last-child .concept-process-stepper__mobile-rail::before{
height:100%;
}
.concept-process-stepper__mobile-content h3{
font-size:28px;
margin-bottom:18px;
}
.concept-process-stepper__mobile-content p{
font-size:15px;
line-height:1.45;
}
.concept-process-stepper__cta--mobile{
display:block;
margin-top:38px;
}
.concept-process-stepper__cta--mobile h3{
font-size:28px;
}
.concept-process-stepper__buttons{
flex-direction:column;
align-items:flex-start;
gap:10px;
margin-top:22px;
}
.concept-process-stepper + .ally{
margin-top:0 !important;
padding-top:90px;
background:#fff;
}
} .ally{ margin-top:200px !important; background:#fff; }
.ally-intro .center{
text-align:center; color:#000;
margin-top:66px;
margin-bottom:120px;
}
.ally-split{
display:grid; grid-template-columns:1fr 1fr;
width:100%; min-height:720px;
}
.ally-img{ width:100%; height:100%; object-fit:cover; display:block; }
.ally-pane{ background:#E1E0DE; padding:80px var(--side); display:flex; flex-direction:column; justify-content:center; }
.ally-pane .ally-quote{ color:#000; margin-bottom:18px; text-align:left; }
.ally-pane .copy{ color:#000; max-width:640px; }
.ally-pane .btn-outline,
.ally-links .ally-linkedin span{
font-family:"Swear Display", serif !important; font-style:normal !important;
}
.ally-pane .btn-outline{ margin-top:24px; align-self:flex-start; }
.ally-links{
display:flex; align-items:center; justify-content:space-between;
border-top:none; background:#fff;
padding:12px 0; margin-top:0;
}
.ally-linkedin{ display:flex; align-items:center; gap:8px; text-decoration:none; color:#000; }
.ally-linkedin img{ width:18px; height:18px; }
.ally-arrow img{ width:var(--arrow); height:var(--arrow); display:block; }  @media (max-width:768px){
.ally-split{ grid-template-columns:1fr; min-height:auto; }
.ally-pane{ padding:40px var(--side-m); }
.ally-arrow img{ width:var(--arrow) !important; height:var(--arrow) !important; display:block; }
} .cta-black{ position:relative; background:#000; color:#fff; }
.cta-inner{
min-height:60vh;
display:flex; flex-direction:column; justify-content:center; gap:24px;
padding-top:80px; padding-bottom:120px;
}
.cta-pre{ color:#fff; margin-bottom:10px; }
.cta-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.cta-head{ color:#fff; line-height:.95; }
.cta-mail img{ width:var(--arrow); height:var(--arrow); filter:invert(1); } @supports selector(body:has(main)){
body:has(main.concept-page) .site-footer{
position:relative; z-index:3;
background:#000 !important;
color:#fff !important;
padding-top:28px !important; padding-bottom:28px !important;
box-shadow:none !important; border:0 !important;
margin-top:0 !important;
}
body:has(main.concept-page) .site-footer a{ color:#fff !important; }
} @supports selector(body:has(main)){
body:has(main.concept-page) .grid-container,
body:has(main.concept-page) .container,
body:has(main.concept-page) .site-content,
body:has(main.concept-page) .content-area,
body:has(main.concept-page) .inside-article,
body:has(main.concept-page) .entry-content{
max-width:none !important; width:100% !important;
padding-left:0 !important; padding-right:0 !important;
margin-left:0 !important; margin-right:0 !important;
border:0 !important; box-shadow:none !important; overflow:visible !important;
}
body.separate-containers:has(main.concept-page) .site-main > .inside-article{ padding:0 !important; }
body.separate-containers:has(main.concept-page) .site-main{ margin:0 !important; }
.concept-page .hero--1, .concept-page .hero--2{
width:calc(100vw + 2px) !important;
margin-left:calc(50% - 50vw - 1px) !important;
margin-right:calc(50% - 50vw - 1px) !important;
}
@supports (width:100dvw){
.concept-page .hero--1, .concept-page .hero--2{
width:calc(100dvw + 2px) !important;
margin-left:calc(50% - 50dvw - 1px) !important;
margin-right:calc(50% - 50dvw - 1px) !important;
}
}
html, body{ overflow-x:hidden !important; scrollbar-gutter:stable both-edges; }
} .concept-page .inside-article,
.concept-page .entry-content{
padding-left:0 !important; padding-right:0 !important;
margin-left:0 !important; margin-right:0 !important;
max-width:none !important; width:100% !important;
border:0 !important; box-shadow:none !important;
}
html, body{ overflow-x:hidden; }
.concept-page img{ display:block; }