:root{--success:#40e065;--error:#b90a1c;--accent:#ffed10;--dark-contrast:#0a0a3a;--light-contrast:#fff;--purple-light:#9aaafd;--purple-medium:#c2bdfc;--card-border:2px solid #ffffff80;--card-border-dark:2px solid #0a0a3a4d;--card-shadow:0 0 10px 0 #0a0a3a4d;--focus-outline:3px solid var(--purple-light);--orange:orange;--grey:#9c9c9c;--natur-papier:#f4f1df}header .button{background:var(--accent);color:var(--dark-contrast)}#hero{color:var(--light-contrast);flex-direction:column-reverse;margin:0;max-width:none;padding:3rem 1rem;position:relative;width:100%;z-index:0}#hero_container{display:flex;justify-content:flex-start;margin:0 auto;max-width:1400px}.hero-container{background-color:var(--secondary)}#hero h2{font-size:2.8rem;line-height:1.2;margin-bottom:1.5rem;text-align:left}#hero p{font-size:1.1rem;line-height:1.6;margin-bottom:1rem;text-align:left}#hero_heading_container p{font-size:1rem;font-weight:500;margin-bottom:.5rem;opacity:.9}#hero img{height:250px;margin:0 auto;width:250px}#hero .button{background:var(--dark-contrast);color:var(--light-contrast)}#description_heading{text-align:start}#description img{border-radius:2rem;height:250px;width:250px}.card__features_item{background-color:var(--secondary)}.card__features_item h3{background:url(../assets/images/underline.svg) no-repeat 0 100%/85px;padding:0 0 .5rem}#steps .row-wrap{align-items:normal}#steps_container:before{background:var(--accent);border-radius:5px;content:"";display:none;height:5px;margin:45px 0;max-width:1000px;position:absolute;width:75%;z-index:-1}.steps_item{align-items:center;display:flex;flex-direction:column;gap:1rem}.steps_item img{background:var(--dark-contrast);border:3px solid var(--accent);border-radius:50%;height:90px;padding:1rem;width:90px}#summary{align-items:center;display:flex;flex-direction:column}#summary .grid{display:grid;max-width:1200px;width:100%}#summary .grid div{align-items:center;display:flex;flex-direction:column;gap:1rem}#summary .grid div img{background:var(--dark-contrast);border:3px solid var(--foreground);border-radius:50%;height:90px;padding:.5rem;width:90px}#summary .grid div p{font-weight:600;text-align:center}.row-wrap{align-items:center;display:flex;flex-wrap:wrap;gap:2rem;justify-content:center}#description,#features,#pricing,#steps,#summary{padding:10rem 4rem;position:relative;z-index:1}#contact,#showcase{padding:2rem}#accessibility_container{align-items:center;background-color:var(--secondary);border-radius:1rem;display:flex;flex-direction:column;gap:1rem;margin:0 auto;max-width:1200px;padding:2rem;& #accessibility_text{text-align:center;p{margin-bottom:.5rem}}}.card_container{display:grid;gap:1rem;justify-content:center}.card{border:var(--card-border);border-radius:2rem;gap:1.2rem;justify-content:space-between;padding:1.5rem;width:100%}.card,.card_group{display:flex;flex-direction:column}.card_group{align-items:center;gap:1rem}#showcase{align-items:center;gap:2rem;justify-content:flex-start}#showcase img{flex-shrink:0;height:auto;width:240px}#showcase_container{max-width:900px;width:100%}#contact_content{align-items:center;background-color:var(--secondary);border:var(--card-border);border-radius:2rem;display:grid;gap:3rem;justify-content:center;margin:0 auto;padding:1.5rem;& .contact-data{display:flex;flex-direction:column;gap:1.4rem;& p,h3,span{color:var(--foreground)}& .button{align-self:center}}& picture{justify-self:center;order:-1}& a:not(.button){color:var(--accent);font-weight:700}}#contact_content img{border:20px solid;border-image:url(../assets/images/circle.svg) 21 fill;border-radius:50%;height:250px;width:250px}#contact_appointment{max-width:35rem}footer{background:var(--dark-contrast);flex-direction:column;gap:1rem;padding:2rem 1rem;& p{color:var(--light-contrast)}& a{color:var(--accent);font-weight:700;width:fit-content}& ul{flex-direction:column;gap:.5rem}}footer .logo,footer a{width:fit-content}.cursor-click-container,.papierflieger-container,.preis-logo-container,.schritte-prozess-container{height:0;position:relative;width:100%;z-index:2}.cursor-click,.papierflieger,.preis-logo,.schritte-prozess{height:150px;opacity:.4;position:absolute;top:1rem;transition:all .3s ease;width:150px;z-index:2}.papierflieger{top:1rem;transform:rotate(-15deg);&:hover{opacity:.5;transform:rotate(-10deg) scale(1.05)}}.cursor-click{right:2rem;&:hover{opacity:.6;transform:rotate(10deg) scale(1.05)}}.schritte-prozess{left:2rem;transform:rotate(-5deg);&:hover{opacity:.6;transform:rotate(-1deg) scale(1.05)}}.preis-logo{right:2rem;transform:rotate(10deg);&:hover{opacity:.6;transform:rotate(5deg) scale(1.05)}}@media only screen and (max-width:300px){#description img,#hero img{height:100%;width:100%}}@media only screen and (min-width:600px){#description img,#hero img{height:350px;width:350px}footer ul{flex-direction:row}footer li:not(:last-child):after{color:var(--accent);content:"•";margin:0 1rem}#contact_content{grid-template-columns:repeat(3,1fr);& .contact-data{grid-column:1/3;& .button{align-self:start}}& picture{grid-column-start:3;order:1}}}@media only screen and (min-width:768px){#features_container,#summary .grid{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:992px){#hero_container{display:grid;gap:2rem;grid-template-columns:1fr 1fr;& img{align-self:flex-end;justify-self:center;margin-right:0;width:400px}}#summary .grid{gap:2rem;grid-template-columns:repeat(3,1fr);& :nth-child(7){grid-column:2};}.steps_item{width:15%}#steps_container:before{display:block}#description,#hero{flex-direction:row;justify-content:space-around}.cursor-click,.papierflieger,.preis-logo,.schritte-prozess{height:180px;width:180px}}@media (min-width:1200px){#hero{padding:8rem 4rem}#features_container{margin:0 auto;max-width:1200px}}