/* OPTIONAL: In einfügen für 1:1 Typo-Vibe
*/
.wq-footer{
--wq-bg-1:#0d141c;
--wq-bg-2:#0a1016;
--wq-text:#ffffff;
--wq-muted:rgba(255,255,255,.72);
--wq-line:rgba(255,255,255,.10);
--wq-accent:#e10600; /* dein rot */
--wq-pill:#e94b5a; /* CTA-pink/rot wie Screenshot */
background: radial-gradient(1200px 700px at 30% 10%, rgba(255,255,255,.06), transparent 55%),
linear-gradient(180deg, var(--wq-bg-1), var(--wq-bg-2));
color: var(--wq-text);
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
position: relative;
overflow: hidden;
}
/* CURTAIN */
.footer-curtain{
transform: translateY(120px);
opacity: 0;
transition: transform 1s ease, opacity 1s ease;
}
.footer-curtain.is-visible{
transform: translateY(0);
opacity: 1;
}
.wq-footer__inner{
max-width: 1240px;
margin: 0 auto;
padding: 92px 24px 30px;
}
/* TOP: links huge title, rechts nav */
.wq-footer__top{
display: grid;
grid-template-columns: 1fr 260px;
gap: 56px;
align-items: start;
}
.wq-footer__title{
font-size: clamp(46px, 6vw, 84px);
line-height: .95;
letter-spacing: -0.04em;
font-weight: 800;
margin: 0 0 26px;
}
.wq-footer__cta{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
border-radius: 999px;
background: var(--wq-pill);
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 15px;
box-shadow: 0 10px 24px rgba(0,0,0,.25);
transition: transform .2s ease, filter .2s ease;
}
.wq-footer__cta:hover{
transform: translateY(-1px);
filter: brightness(1.03);
}
.wq-footer__nav{
display: flex;
flex-direction: column;
gap: 18px;
padding-top: 10px;
}
.wq-footer__link{
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: 500;
opacity: .95;
position: relative;
width: fit-content;
transition: color .2s ease, opacity .2s ease;
}
/* Hover ROT + Underline wie Screenshot */
.wq-footer__link:hover{
color: var(--wq-accent);
opacity: 1;
}
.wq-footer__link::after{
content:"";
position:absolute;
left:0;
bottom:-7px;
width:0;
height:2px;
background: var(--wq-accent);
transition: width .22s ease;
}
.wq-footer__link:hover::after{
width: 72px;
}
/* optional active state (wenn du willst) */
.wq-footer__link.is-active{
color: var(--wq-accent);
}
.wq-footer__link.is-active::after{
width: 72px;
}
.wq-footer__rule{
height: 1px;
background: var(--wq-line);
margin: 70px 0 44px;
}
/* MID: contact left (3 items row), newsletter right */
.wq-footer__mid{
display: grid;
grid-template-columns: 1fr 520px;
gap: 56px;
align-items: end;
}
.wq-footer__contact{
display: flex;
gap: 46px;
flex-wrap: wrap;
}
.wq-footer__item{
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--wq-muted);
font-size: 14px;
line-height: 1.5;
}
.wq-footer__icon{
opacity: .9;
transform: translateY(1px);
}
.wq-footer__textlink{
color: var(--wq-muted);
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.18);
padding-bottom: 2px;
}
.wq-footer__textlink:hover{
color: #fff;
border-bottom-color: rgba(255,255,255,.35);
}
.wq-footer__newsletter{
justify-self: end;
width: 100%;
max-width: 520px;
}
.wq-footer__nl-title{
margin: 0 0 14px;
font-size: 16px;
font-weight: 600;
color: #fff;
opacity: .95;
}
.wq-footer__nl-form{
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
}
.wq-footer__nl-form input{
width: 100%;
background: transparent;
color: #fff;
border: none;
outline: none;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,.35);
font-size: 14px;
}
.wq-footer__nl-form input::placeholder{
color: rgba(255,255,255,.55);
}
.wq-footer__nl-form button{
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,.35);
border-radius: 999px;
padding: 10px 18px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: border-color .2s ease, transform .2s ease, color .2s ease;
}
.wq-footer__nl-form button:hover{
border-color: rgba(255,255,255,.6);
transform: translateY(-1px);
}
/* BOTTOM: copyright left + legal right */
.wq-footer__bottom{
margin-top: 42px;
display: flex;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
font-size: 13px;
color: rgba(255,255,255,.62);
}
.wq-footer__legal{
display: flex;
gap: 22px;
flex-wrap: wrap;
justify-content: flex-end;
}
.wq-footer__legal a{
color: rgba(255,255,255,.62);
text-decoration: none;
}
.wq-footer__legal a:hover{
color: var(--wq-accent);
}
/* a11y helper */
.sr-only{
position:absolute;
width:1px;height:1px;
padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);
white-space:nowrap;border:0;
}
/* RESPONSIVE wie Screenshot */
@media (max-width: 980px){
.wq-footer__top{
grid-template-columns: 1fr;
}
.wq-footer__nav{
padding-top: 0;
}
.wq-footer__mid{
grid-template-columns: 1fr;
}
.wq-footer__newsletter{
justify-self: start;
max-width: 560px;
}
}
/* ===== HEADER ===== */
.wq-header{
position: sticky;
top: 0;
z-index: 1000;
background: linear-gradient(180deg, #0d141c, #0a1016);
border-bottom: 1px solid rgba(255,255,255,.08);
font-family: Inter, system-ui, sans-serif;
}
.wq-header__inner{
max-width: 1240px;
margin: 0 auto;
padding: 18px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.wq-header__logo img{
height: 42px;
display: block;
}
/* NAV */
.wq-nav{
display: flex;
align-items: center;
gap: 34px;
}
.wq-nav__link{
color: #ffffff;
text-decoration: none;
font-size: 15px;
font-weight: 500;
position: relative;
opacity: .9;
transition: color .2s ease, opacity .2s ease;
}
.wq-nav__link:hover{
color: #e10600;
opacity: 1;
}
.wq-nav__link::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:#e10600;
transition:width .22s ease;
}
.wq-nav__link:hover::after{
width:100%;
}
/* CTA */
.wq-nav__cta{
padding: 10px 22px;
border-radius: 999px;
background: #e94b5a;
color: #fff;
font-weight: 600;
text-decoration: none;
font-size: 14px;
transition: transform .2s ease, filter .2s ease;
}
.wq-nav__cta:hover{
transform: translateY(-1px);
filter: brightness(1.05);
}
/* BURGER */
.wq-nav-toggle{
display:none;
background:none;
border:none;
flex-direction:column;
gap:6px;
}
.wq-nav-toggle span{
width:26px;
height:2px;
background:#fff;
display:block;
}
/* MOBILE */
@media (max-width: 900px){
.wq-nav{
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #0a1016;
flex-direction: column;
padding: 24px;
gap: 22px;
display: none;
}
.wq-nav.is-open{
display:flex;
}
.wq-nav-toggle{
display:flex;
}
}
/* ===== WHITE INDEX HERO (nur für Startseite) ===== */
:root{
--accent:#e10600; /* rot */
--ink:#0b0f14;
--muted:#7b7f86;
--paper:#ffffff;
}
/* optional: wenn du willst, dass ALLE sections weiß sind */
body{
background: var(--paper);
}
/* Hero Section */
.wq-hero{
background: #fff;
color: var(--ink);
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.wq-hero__inner{
max-width: 1240px;
margin: 0 auto;
padding: 120px 24px 90px;
text-align: center;
}
.wq-hero__kicker{
margin: 0 0 22px;
color: var(--muted);
font-style: italic;
letter-spacing: .02em;
}
.wq-hero__title{
margin: 0;
font-size: clamp(46px, 6vw, 92px);
line-height: .98;
letter-spacing: -0.04em;
font-weight: 800;
}
/* rotating word */
.wq-hero__word{
font-style: italic;
font-weight: 500;
color: var(--accent); /* rot */
display: inline-block;
transition: opacity .28s ease, transform .28s ease;
will-change: opacity, transform;
}
.wq-word-out{
opacity: 0;
transform: translateY(6px);
}
.wq-word-in{
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 640px){
.wq-hero__inner{ padding: 96px 18px 70px; }
}
.wq-hero__title{
margin: 0;
font-size: clamp(46px, 6vw, 92px);
line-height: 1.15; /* MEHR LUFT */
letter-spacing: -0.04em;
font-weight: 800;
}
.wq-hero__word{
font-style: italic;
font-weight: 500;
color: #e10600;
display: inline-block;
margin: 0 10px; /* Abstand links / rechts */
transition: opacity .28s ease, transform .28s ease;
}
.word-out{
opacity: 0;
transform: translateY(6px);
}
.word-in{
opacity: 1;
transform: translateY(0);
}
/* ===== FIX: kein Layout-Wackeln beim Rotating Word ===== */
.wq-hero__title{
text-align: center;
}
/* Reserviert Platz für das längste Wort, damit "Wir" nicht mitspringt */
.wq-hero__word{
display: inline-block;
width: 9.2ch; /* "vermarkten" = 10 Zeichen -> 9.2–10ch passt nice */
text-align: center;
margin: 0 10px; /* Abstand links/rechts */
white-space: nowrap;
}
/* ===== AFTER HERO (White, Premium, Animated) ===== */
.wq-afterhero{
background:#fff;
color:#0b0f14;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
overflow: hidden;
}
.wq-afterhero__inner{
max-width: 1240px;
margin: 0 auto;
padding: 80px 24px 100px;
}
.wq-shimmer-line{
height: 1px;
width: 100%;
background: linear-gradient(90deg, transparent, rgba(225,6,0,.35), transparent);
transform: translateX(-40%);
animation: wqShimmer 2.8s ease-in-out infinite;
opacity: .9;
margin-bottom: 36px;
}
@keyframes wqShimmer{
0%{ transform: translateX(-45%); opacity: .25; }
50%{ transform: translateX(0%); opacity: .95; }
100%{ transform: translateX(45%); opacity: .25; }
}
.wq-afterhero__eyebrow{
margin: 0 0 10px;
color: rgba(11,15,20,.62);
letter-spacing: .06em;
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
}
.wq-afterhero__title{
margin: 0;
font-size: clamp(28px, 3.2vw, 44px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 800;
}
.wq-afterhero__sub{
display:block;
margin-top: 10px;
color: rgba(11,15,20,.62);
font-weight: 600;
font-size: clamp(14px, 1.5vw, 18px);
}
/* stats */
.wq-stats{
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 16px;
margin: 36px 0 34px;
}
.wq-stat{
border: 1px solid rgba(11,15,20,.10);
border-radius: 20px;
padding: 18px 18px 16px;
background: radial-gradient(900px 400px at 30% 0%, rgba(225,6,0,.06), transparent 60%);
box-shadow: 0 14px 30px rgba(0,0,0,.05);
transform: translateZ(0);
}
.wq-stat__num{
font-size: 32px;
font-weight: 900;
letter-spacing: -0.02em;
}
.wq-stat__label{
margin-top: 6px;
color: rgba(11,15,20,.65);
font-weight: 600;
font-size: 13px;
}
/* verb grid */
.wq-verbgrid{
display:grid;
grid-template-columns: repeat(5, minmax(0,1fr));
gap: 14px;
margin-top: 18px;
}
.wq-verbcard{
border: 1px solid rgba(11,15,20,.10);
border-radius: 22px;
padding: 18px 16px;
background:
radial-gradient(900px 500px at 30% 0%, rgba(225,6,0,.08), transparent 65%),
linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.98));
box-shadow: 0 14px 34px rgba(0,0,0,.06);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
position: relative;
overflow:hidden;
}
.wq-verbcard::before{
content:"";
position:absolute;
inset:-80px -80px auto auto;
width: 180px;
height: 180px;
background: rgba(225,6,0,.10);
filter: blur(28px);
opacity: .0;
transition: opacity .25s ease;
}
.wq-verbcard:hover{
transform: translateY(-6px);
border-color: rgba(225,6,0,.28);
box-shadow: 0 22px 60px rgba(0,0,0,.10);
}
.wq-verbcard:hover::before{ opacity: 1; }
.wq-verbcard__top{
display:flex;
align-items:center;
justify-content: space-between;
margin-bottom: 10px;
}
.wq-verb{
font-weight: 900;
letter-spacing: .10em;
font-size: 11px;
color: rgba(11,15,20,.75);
}
.wq-dot{
width: 10px;
height: 10px;
border-radius: 999px;
background: #e10600;
box-shadow: 0 0 0 6px rgba(225,6,0,.12);
}
.wq-verbcard h3{
margin: 0 0 8px;
font-size: 16px;
letter-spacing: -0.02em;
}
.wq-verbcard p{
margin: 0;
color: rgba(11,15,20,.65);
font-size: 13px;
line-height: 1.5;
}
/* CTA row */
.wq-afterhero__cta{
margin-top: 30px;
display:flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.wq-cta-pill{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 12px 22px;
border-radius: 999px;
background: #0b0f14;
color:#fff;
text-decoration:none;
font-weight: 700;
transition: transform .2s ease, filter .2s ease;
}
.wq-cta-pill:hover{
transform: translateY(-2px);
filter: brightness(1.05);
}
.wq-cta-ghost{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 12px 22px;
border-radius: 999px;
background: transparent;
color:#0b0f14;
text-decoration:none;
font-weight: 800;
border: 1px solid rgba(11,15,20,.18);
transition: transform .2s ease, border-color .2s ease;
}
.wq-cta-ghost:hover{
transform: translateY(-2px);
border-color: rgba(225,6,0,.35);
}
/* Reveal animation */
.wq-reveal{
opacity: 0;
transform: translateY(18px);
filter: blur(6px);
transition: opacity .75s ease, transform .75s ease, filter .75s ease;
will-change: opacity, transform, filter;
}
.wq-reveal.is-visible{
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* Responsive */
@media (max-width: 1100px){
.wq-verbgrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
.wq-stats{ grid-template-columns: 1fr; }
.wq-verbgrid{ grid-template-columns: 1fr; }
}
/* ===== After-Hero Simple Line ===== */
.wq-afterhero-line{
margin: 32px auto 0;
max-width: 720px;
text-align: center;
font-size: 16px;
line-height: 1.6;
color: rgba(11,15,20,.7);
}
.wq-afterhero-line a{
color: #e10600;
text-decoration: none;
font-weight: 600;
margin-left: 4px;
position: relative;
}
.wq-afterhero-line a::after{
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background: #e10600;
opacity: .4;
transition: opacity .2s ease;
}
.wq-afterhero-line a:hover::after{
opacity: 1;
}
/* ===== PROOF 1:1 (wie Screenshot) ===== */
.wq-proof{
background:#fff; /* Seite weiß */
}
.wq-proof__wrap{
max-width: 1240px;
margin: 0 auto;
padding: 200px 24px 120px;
display: grid;
grid-template-columns: 1.05fr 1fr; /* links groß, rechts cards */
gap: 42px;
align-items: start;
}
/* LEFT BIG GREY PANEL */
.wq-proof__left{
background: #f2f4f6;
border-radius: 0; /* Screenshot ist eher “blocky” */
padding: 70px 54px;
min-height: 760px;
display:flex;
align-items:center;
position: sticky;
top: 110px;
}
.wq-proof__left h2{
margin:0;
font-family: Inter, system-ui, sans-serif;
font-size: clamp(44px, 4.8vw, 78px);
line-height: .95;
letter-spacing: -0.04em;
font-weight: 800;
color: #2b3340;
}
/* RIGHT: 2-column card grid */
.wq-proof__right{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: start;
}
/* cards */
.wq-proof__card{
background:#fff;
border: 1px solid rgba(17,24,39,.08);
border-radius: 18px;
padding: 26px 24px 20px;
box-shadow: 0 10px 26px rgba(17,24,39,.06);
transform: translate3d(0,0,0);
will-change: transform;
}
.wq-proof__card .kpi{
font-size: 54px;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: #e10600; /* dein rot als Akzent */
}
.wq-proof__card p{
margin: 14px 0 0;
color: #4b5563;
font-size: 14px;
line-height: 1.55;
}
.wq-proof__card u{
text-decoration-color: rgba(225,6,0,.45);
text-underline-offset: 3px;
text-decoration-thickness: 2px;
}
/* mini chart line */
.wq-proof__card .spark{
margin-top: 18px;
height: 56px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(225,6,0,.10), rgba(225,6,0,.03));
position: relative;
overflow: hidden;
}
.wq-proof__card .spark::after{
content:"";
position:absolute;
left:-60%;
top:0;
width:70%;
height:100%;
background: linear-gradient(90deg, transparent, rgba(225,6,0,.22), transparent);
transform: skewX(-18deg);
animation: wqSparkMove 2.8s ease-in-out infinite;
}
@keyframes wqSparkMove{
0%{ left:-60%; opacity:.2; }
50%{ left:10%; opacity:.9; }
100%{ left:140%; opacity:.2; }
}
/* responsive */
@media (max-width: 980px){
.wq-proof__wrap{ grid-template-columns: 1fr; }
.wq-proof__left{ position: relative; top: 0; min-height: 320px; }
}
@media (max-width: 640px){
.wq-proof__right{ grid-template-columns: 1fr; }
}
/* =========================
LEGAL (Impressum/Datenschutz)
========================= */
.page--legal {
background: #070707;
color: #fff;
}
.legal {
padding: 140px 18px 90px; /* genug Platz für sticky header */
}
.legal__container {
max-width: 980px;
margin: 0 auto;
}
.legal__head {
margin-bottom: 28px;
}
.legal__title {
font-size: clamp(34px, 4vw, 54px);
line-height: 1.05;
letter-spacing: -0.02em;
font-weight: 800;
}
.legal__lead {
margin-top: 10px;
color: rgba(255,255,255,0.72);
font-size: 15px;
line-height: 1.6;
}
.legal__card {
margin-top: 16px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.04);
border-radius: 18px;
padding: 18px 18px;
box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.legal__h2 {
margin: 0 0 10px;
font-size: 16px;
font-weight: 800;
color: #fff;
}
.legal__card p {
margin: 0 0 10px;
color: rgba(255,255,255,0.82);
line-height: 1.75;
}
.legal__card p:last-child {
margin-bottom: 0;
}
.legal__link {
color: #e10600;
text-decoration: underline;
text-underline-offset: 3px;
}
.legal__link:hover {
opacity: 0.9;
}
.legal__meta {
margin-top: 22px;
font-size: 13px;
color: rgba(255,255,255,0.55);
}
.reviews{
padding:120px 0;
background:#070707;
color:#fff;
}
.reviews .container{
max-width:1200px;
margin:0 auto;
padding:0 18px;
}
.reviews h2{
font-size:clamp(30px,4vw,48px);
margin-bottom:24px;
font-weight:800;
}
/* FULL WIDTH REVIEWS SECTION */
.reviews-section {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: #000;
padding: 120px 0;
}
/* optional: inner content wieder zentrieren */
.reviews-section .reviews-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Headline */
.reviews-section h2 {
color: #fff;
font-size: clamp(32px, 4vw, 52px);
font-weight: 800;
margin-bottom: 48px;
}
/* =========================
SERVICES PAGE (service.html)
========================= */
.srv-page{
background:#0b0f12;
color:#fff;
}
.srv-inner{
width:min(1120px, calc(100% - 48px));
margin:0 auto;
}
.srv-hero{
padding:90px 0 70px;
background:
radial-gradient(900px 420px at 30% 20%, rgba(225,6,0,.22), transparent 60%),
radial-gradient(900px 420px at 70% 10%, rgba(255,255,255,.06), transparent 60%),
linear-gradient(180deg, #070a0c 0%, #0b0f12 100%);
border-bottom:1px solid rgba(255,255,255,.08);
}
.srv-kicker{
opacity:.75;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
font-size:12px;
margin:0 0 12px;
}
.srv-title{
font-size: clamp(34px, 4.2vw, 58px);
line-height:1.02;
margin:0 0 14px;
font-weight:900;
}
.srv-sub{
max-width: 68ch;
opacity:.85;
font-size:16px;
line-height:1.65;
margin:0 0 22px;
}
.srv-hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
}
.srv-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 16px;
border-radius:999px;
font-weight:800;
text-decoration:none;
transition: transform .18s ease, background .18s ease, border-color .18s ease;
will-change: transform;
}
.srv-btn--primary{
background: var(--accent, #e10600);
color:#fff;
border:1px solid rgba(255,255,255,.08);
}
.srv-btn--primary:hover{ transform: translateY(-1px); }
.srv-btn--ghost{
background: transparent;
color:#fff;
border:1px solid rgba(255,255,255,.16);
}
.srv-btn--ghost:hover{
border-color: rgba(255,255,255,.28);
transform: translateY(-1px);
}
.srv-list{
padding: 0;
}
.srv-block{
padding: 86px 0;
background:
radial-gradient(820px 360px at 20% 20%, rgba(255,255,255,.06), transparent 60%),
radial-gradient(820px 360px at 85% 50%, rgba(225,6,0,.16), transparent 65%),
linear-gradient(180deg, #0b0f12 0%, #090c0f 100%);
border-top:1px solid rgba(255,255,255,.08);
}
.srv-grid{
display:grid;
grid-template-columns: 1.15fr .85fr;
gap: 34px;
align-items:center;
}
.srv-content h2{
margin:0 0 14px;
font-size: clamp(34px, 4.0vw, 54px);
line-height:1.05;
font-weight:900;
}
.srv-content p{
margin:0 0 18px;
max-width: 62ch;
font-size: 16px;
line-height: 1.8;
opacity: .85;
}
.srv-cta{
display:inline-flex;
align-items:center;
gap:10px;
text-decoration:none;
color:#fff;
font-weight:900;
padding: 12px 16px;
border-radius: 999px;
border:1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.04);
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.srv-cta:hover{
transform: translateY(-1px);
border-color: rgba(255,255,255,.28);
background: rgba(255,255,255,.06);
}
.srv-aside-card{
border:1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.18);
border-radius: 18px;
padding: 18px 18px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.srv-aside-title{
font-weight:900;
margin:0 0 10px;
opacity:.9;
}
.srv-aside-card ul{
margin:0;
padding-left: 18px;
opacity:.82;
line-height:1.7;
}
.srv-end{
padding: 72px 0;
border-top:1px solid rgba(255,255,255,.08);
background:
radial-gradient(900px 420px at 20% 30%, rgba(225,6,0,.18), transparent 60%),
linear-gradient(180deg, #070a0c 0%, #0b0f12 100%);
}
.srv-end-grid{
display:grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items:center;
}
.srv-end h2{
margin:0 0 8px;
font-size: 32px;
font-weight: 900;
}
.srv-end p{
margin:0;
opacity:.85;
line-height:1.7;
}
.srv-end-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
justify-content:flex-end;
}
@media (max-width: 900px){
.srv-grid{ grid-template-columns: 1fr; }
.srv-end-grid{ grid-template-columns: 1fr; }
.srv-end-actions{ justify-content:flex-start; }
.srv-block{ padding: 70px 0; }
}
@media (max-width: 520px){
.srv-inner{ width: calc(100% - 28px); }
.srv-hero{ padding: 78px 0 58px; }
}
/* =========================
SERVICES – BASE
========================= */
.svc {
background:#0b0e11;
color:#e5e7eb;
overflow-x:hidden;
}
.svc-container{
max-width:1100px;
margin:0 auto;
padding:0 20px;
}
/* =========================
HERO
========================= */
.svc-hero{
background:#ffffff;
color:#0b0e11;
padding:96px 0 72px;
}
.svc-eyebrow{
font-size:13px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.08em;
opacity:.6;
margin-bottom:14px;
}
.svc-title{
font-size:clamp(36px,5vw,56px);
font-weight:800;
margin-bottom:16px;
}
.svc-lead{
font-size:18px;
max-width:640px;
line-height:1.6;
}
.svc-cta{
display:inline-flex;
align-items:center;
gap:10px;
margin-top:28px;
font-weight:700;
color:#e10600;
text-decoration:none;
}
/* =========================
CONTENT / ACCORDION
========================= */
.svc-content{
padding:80px 0;
}
.svc-grid{
display:block;
}
.svc-acc{
max-width:820px;
}
.svc-item{
border-bottom:1px solid rgba(255,255,255,.08);
padding:22px 0;
}
.svc-item summary{
list-style:none;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
}
.svc-item summary::-webkit-details-marker{
display:none;
}
.svc-item-title{
font-size:18px;
font-weight:700;
}
.svc-plus{
width:18px;
height:18px;
position:relative;
}
.svc-plus::before,
.svc-plus::after{
content:"";
position:absolute;
inset:0;
margin:auto;
background:#e5e7eb;
}
.svc-plus::before{
width:18px;
height:2px;
}
.svc-plus::after{
width:2px;
height:18px;
}
details[open] .svc-plus::after{
display:none;
}
.svc-body{
margin-top:16px;
max-width:720px;
}
.svc-body p{
margin-bottom:12px;
line-height:1.6;
}
.svc-body ul{
padding-left:18px;
margin-bottom:14px;
}
.svc-body li{
margin-bottom:6px;
opacity:.9;
}
.svc-mini{
font-weight:600;
color:#e10600;
text-decoration:none;
}
/* =========================
KONTAKT
========================= */
.svc-contact{
padding:96px 0;
background:#0b0e11;
}
.svc-contact__title{
font-size:clamp(28px,4vw,40px);
font-weight:800;
margin-bottom:12px;
}
.svc-contact__lead{
max-width:560px;
opacity:.85;
margin-bottom:40px;
}
.svc-form{
max-width:720px;
}
.svc-form__grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}
@media(max-width:720px){
.svc-form__grid{
grid-template-columns:1fr;
}
}
.svc-field{
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:18px;
}
.svc-field span{
font-size:13px;
opacity:.7;
}
.svc-field input,
.svc-field textarea{
background:#111;
border:1px solid rgba(255,255,255,.12);
border-radius:10px;
padding:14px 16px;
color:#fff;
font-family:inherit;
font-size:15px;
}
.svc-field input:focus,
.svc-field textarea:focus{
outline:none;
border-color:#e10600;
}
.svc-form__submit{
margin-top:12px;
background:#e10600;
color:#fff;
border:none;
border-radius:12px;
padding:16px 22px;
font-size:15px;
font-weight:800;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:10px;
}
/* =========================
SERVICES – FIX: FONT + ZENTRIERUNG
(nur Overrides, nix doppelt)
========================= */
/* gleiche Schrift wie index */
.svc,
.svc * {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
/* alles sauber zentrieren */
.svc,
.svc-hero,
.svc-content,
.svc-contact {
text-align: center;
}
/* container bleibt mittig */
.svc-container {
margin-left: auto;
margin-right: auto;
}
/* accordion mittig, inhalt lesbar */
.svc-grid {
display: flex;
justify-content: center;
}
.svc-acc {
max-width: 820px;
width: 100%;
margin: 0 auto;
text-align: left;
}
/* hero lead mittig */
.svc-lead {
margin-left: auto;
margin-right: auto;
}
/* kontakt */
.svc-contact__lead {
margin: 0 auto 40px;
}
/* formular mittig */
.svc-form {
margin: 0 auto;
text-align: left;
}
/* =========================
PARTNER / COPA – SMY STYLE
========================= */
.partner {
background: #ffffff;
padding: 96px 0;
}
.partner-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
text-align: center;
}
.partner-eyebrow {
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .6;
margin-bottom: 12px;
}
.partner-head h3 {
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
margin-bottom: 12px;
color: #0b0e11;
}
.partner-brand {
color: #e10600;
}
.partner-lead {
max-width: 720px;
margin: 0 auto;
font-size: 16px;
line-height: 1.6;
color: #6b7280;
}
.partner-grid {
margin-top: 48px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
@media (max-width: 768px) {
.partner-grid {
grid-template-columns: 1fr;
}
}
.partner-card {
border: 1px solid rgba(0,0,0,.08);
border-radius: 18px;
padding: 28px;
text-align: left;
background: #fafafa;
}
.partner-card h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: 14px;
color: #e10600;
}
.partner-card ul {
padding-left: 18px;
}
.partner-card li {
margin-bottom: 8px;
font-size: 15px;
color: #374151;
}
.partner-points {
margin-top: 36px;
display: flex;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
font-size: 14px;
color: #374151;
}
.partner-points span {
border: 1px solid rgba(0,0,0,.08);
border-radius: 999px;
padding: 10px 16px;
background: #fff;
}
.partner-cta {
margin-top: 40px;
}
.partner-cta a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
border-radius: 999px;
background: #e10600;
color: #fff;
font-weight: 700;
text-decoration: none;
}
/* =========================
USE CASES (usecases.html)
========================= */
.uc { background:#fff; color:#0b0e11; font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
.uc-container { max-width:1100px; margin:0 auto; padding:0 20px; }
.uc-hero { padding:110px 0 70px; text-align:center; }
.uc-kicker { font-size:16px; color:#6b7280; margin-bottom:18px; }
.uc-title{
font-size:clamp(44px, 6.5vw, 86px);
font-weight:800;
letter-spacing:-0.03em;
line-height:1.04;
margin:0 auto;
max-width:1000px;
color:#2b3440;
}
.uc-highlight{
position:relative;
display:inline-block;
padding:0 .12em;
background: rgba(225, 6, 0, 0.10);
border-radius:10px;
color:#2b3440;
}
.uc-filters{
margin-top:48px;
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}
.uc-pill{
border:1px solid rgba(0,0,0,.08);
background:#f3f4f6;
color:#111827;
border-radius:999px;
padding:10px 16px;
font-weight:600;
font-size:14px;
cursor:pointer;
}
.uc-pill.is-active{
background: rgba(225, 6, 0, 0.12);
border-color: rgba(225, 6, 0, 0.18);
color:#111827;
}
/* =========================
PROJEKTE
========================= */
.projects {
background:#faf7f5;
color:#0b0e11;
}
.projects-container {
max-width:1100px;
margin:0 auto;
padding:0 20px;
}
/* HERO */
.projects-hero {
padding:96px 0 64px;
text-align:center;
}
.projects-eyebrow {
font-size:13px;
text-transform:uppercase;
letter-spacing:.08em;
opacity:.6;
margin-bottom:14px;
}
.projects-title {
font-size:clamp(36px,5vw,56px);
font-weight:800;
margin-bottom:16px;
}
.projects-lead {
max-width:640px;
margin:0 auto;
font-size:17px;
line-height:1.6;
color:#374151;
}
/* GRID */
.projects-gridsec {
padding:40px 0 80px;
}
.projects-grid {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
gap:22px;
}
/* CARD */
.project-card {
background:#fff;
border-radius:18px;
padding:22px 22px 24px;
border:1px solid rgba(0,0,0,.06);
}
.project-card h3 {
font-size:17px;
font-weight:700;
margin-bottom:8px;
color:#e10600;
}
.project-card p {
font-size:14.5px;
line-height:1.5;
color:#374151;
}
.project-link {
display:inline-block;
margin-top:10px;
font-weight:600;
color:#e10600;
text-decoration:none;
}
/* FOOT */
.projects-foot {
padding:72px 0;
text-align:center;
}
.projects-instacta {
display:inline-block;
margin-top:14px;
background:#e10600;
color:#fff;
padding:14px 22px;
border-radius:999px;
font-weight:700;
text-decoration:none;
}
/* FIX TYPO – wie index.html */
.projects,
.projects h1,
.projects h2,
.projects h3,
.projects p {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.projects-title {
font-weight: 800; /* wie Index Hero */
letter-spacing: -0.03em; /* ganz wichtig */
line-height: 1.1;
}
.projects-eyebrow {
font-weight: 500;
letter-spacing: 0.08em;
}
.project-card h3 {
font-weight: 700;
letter-spacing: -0.01em;
}
.project-card p {
font-weight: 400;
line-height: 1.55;
}
.audit-cta{
padding:96px 20px;
background:#ffffff;
}
.audit-cta__inner{
max-width:900px;
margin:0 auto;
text-align:center;
}
.audit-cta h2{
font-size:clamp(32px, 4vw, 44px);
font-weight:800;
color:#111827;
margin-bottom:16px;
}
.audit-cta h2 .accent{
color:#e10600;
}
.audit-cta p{
max-width:640px;
margin:0 auto 36px;
font-size:18px;
line-height:1.6;
color:#6b7280;
}
.btn-primary{
display:inline-flex;
align-items:center;
gap:10px;
padding:16px 34px;
border-radius:999px;
background:#e10600;
color:#ffffff;
font-weight:700;
font-size:16px;
text-decoration:none;
transition:transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 10px 30px rgba(225,6,0,.25);
}