:root{
--color-text:#111;
--color-text-light:#333;
--color-border:#eee;
--color-border-dark:#ccc;
--color-highlight:#eee;
--color-white:#fff;
--radius:10px;
--radius-large:40px;
--transition:.25s ease;
--space-xs:10px;
--space-sm:20px;
--space-md:30px;
--space-lg:40px;
--space-xl:60px;
--space-xxl:80px;
} *,
*::before,
*::after{
box-sizing:border-box;
}
.webgaroo-minimal{
max-width:1100px;
margin:0 auto;
padding:80px 90px;
background:var(--color-white);
background:#fff;
} .referenz-hero-minimal{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
align-items:center;
margin-bottom:var(--space-xxl);
}
.hero-image img{
display:block;
width:100%;
height:auto;
border-radius:var(--radius);
}
.referenz-title{
margin:0 0 20px;
font-size:clamp(2rem,3vw,2.5rem);
line-height:1.2;
font-weight:700;
color:var(--color-text);
}
.referenz-intro{
max-width:520px;
font-size:18px;
line-height:1.6;
color:var(--color-text-light);
} .referenz-button{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:10px;
padding:12px 24px;
background:var(--color-text);
background:#111;
color:#fff!important;
text-decoration:none;
border-radius:6px;
transition:
background var(--transition),
transform var(--transition);
}
.referenz-button:hover{
background:#333;
transform:translateY(-2px);
} .referenz-facts{
margin:var(--space-xl) 0;
padding:30px 0;
border-top:1px solid var(--color-border);
border-bottom:1px solid var(--color-border-dark);
}
.referenz-facts p{
margin:0 0 14px;
line-height:1.6;
}
.referenz-facts strong{
display:inline-block;
font-weight:600;
color:var(--color-text);
}
.referenz-facts .highlights ul, .referenz-facts .optimierungen ul{
margin:0;
padding-left:25px;
}
.referenz-facts .highlights li, .referenz-facts  .optimierungen li {
margin-bottom:8px;
} .case-block{
margin-bottom:70px;
}
.case-block h2{
margin:0;
padding-bottom: 30px;
font-size:clamp(1.9rem,2.4vw,2rem);
line-height:1.5;
text-align:left;
font-weight:700;
color:var(--color-text);
}
.case-block p{
font-size:18px;
line-height:1.7;
font-weight:300;
color:var(--color-text-light);
} .case-loesung h2{
color:var(--color-text);
} .case-ergebnis{
padding:40px;
background:var(--color-highlight);
border-left:5px solid var(--color-text);
border-radius:var(--radius-large);
}
.case-ergebnis h2{
margin-bottom:20px;
color:#06825d;
}
.case-ergebnis p{
font-size:19px;
font-weight:500;
margin-bottom:0;
} .referenz-content{
margin-top:80px;
font-size:18px;
line-height:1.8;
color:var(--color-text-light);
}
.referenz-content h2{
margin:60px 0 20px;
font-size:30px;
line-height:1.3;
}
.referenz-content img{
display:block;
max-width:100%;
margin:30px 0;
border-radius:var(--radius);
} .separate-containers .inside-article{
background:transparent !important;
} @media (max-width:900px){
.webgaroo-minimal{
padding:20px;
text-align:left;
}
.referenz-hero-minimal{
grid-template-columns:1fr;
gap:30px;
margin-bottom:40px;
}
.referenz-title{
font-size:28px;
line-height:1.3;
}
.referenz-intro{
max-width:100%;
font-size:16px;
}
.referenz-facts{
margin:30px 0;
padding:20px 0;
}
.referenz-facts p{
font-size:16px;
}
.referenz-facts .highlights ul{
padding-left:20px;
}
.case-block{
margin-bottom:40px;
}
.case-block h2{
font-size:24px;
}
.case-block p{
font-size:16px;
}
.case-ergebnis {
border-left: none;
background:none;
}
.case-ergebnis{
padding:25px;
border-radius:25px;
}
.case-ergebnis p{
font-size:16px;
}
.referenz-content{
font-size:16px;
}
.referenz-content h2{
font-size:24px;
}
}