.concept-page{ --cp-side:86px; --ink:#141414; --lime:#d8ff00; color:var(--ink); background:#fff; }
.concept-page *{ box-sizing:border-box; }
.concept-page h1, .concept-page h2, .concept-page h3, .concept-page p, .concept-page blockquote{ margin:0; }
.concept-page ul{ margin:0; padding:0; list-style:none; } .concept-page .dts-btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
height:55px; padding:0 26px; border-radius:999px;
border:1.5px solid currentColor; background:transparent;
font:500 22px/1 "Swear Display", serif; text-decoration:none; white-space:nowrap; cursor:pointer;
transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.concept-page .dts-btn--dark{ color:var(--ink); }
.concept-page .dts-btn--light{ color:#fff; }
@media (hover:hover){
.concept-page .dts-btn:hover{ background:var(--lime); border-color:var(--lime); color:var(--ink); }
}
.concept-page .dts-btn:focus-visible{ outline:2px solid currentColor; outline-offset:3px; } .concept-hero{ position:relative; height:100svh; min-height:620px; overflow:hidden; background:#0b0b0b; }
.concept-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 40%; }
.concept-hero__h1{
position:absolute; left:var(--cp-side); top:23%;
font:400 140px/1.02 "Swear Display", serif; color:#fff; letter-spacing:-0.01em;
}
.concept-hero__sub{
position:absolute; left:0; right:0; bottom:22%;
text-align:center; font:400 32px/1.2 "Swear Text", serif; color:#fff;
}  .concept-wege{ position:relative; padding:97px var(--cp-side) 90px; background:#f2f1ef; overflow:hidden; }
.concept-wege__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; }
.concept-wege__head, .concept-cards, .concept-wege__note{ position:relative; z-index:1; }
.concept-wege__h2{ font:italic 500 80px/1.05 "Swear Display", serif; }
.concept-page .concept-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:7.09%; margin-top:73px; } .concept-card{ position:relative; aspect-ratio:500 / 657; container-type:inline-size; } .concept-card__front, .concept-card__back{
position:absolute; inset:0;
border-radius:8px;
background:rgba(255,255,255,.34);
-webkit-backdrop-filter:blur(26px) saturate(115%); backdrop-filter:blur(26px) saturate(115%);
box-shadow:0 1px 0 rgba(255,255,255,.45) inset;
display:flex; flex-direction:column; align-items:center; text-align:center;
} .concept-card__front{ padding:51.6% 8% 7.8%; }
.concept-card__mid{ display:flex; flex-direction:column; align-items:center; gap:7.6cqw; }
.concept-card__foot{ margin-top:auto; }
.concept-card__title{ display:flex; flex-direction:column; gap:14px; }
.concept-card__name{ font:italic 500 10cqw/1 "Swear Display", serif; }
.concept-card__for{ font:400 3.8cqw/1.4 "Swear Text", serif; }
.concept-card__scope{ font:400 3.8cqw/1.4 "Swear Text", serif; } .concept-card__back{ justify-content:flex-start; gap:0; text-align:center; align-items:center; padding:23.2% 6.4% 5.8%; } .concept-card__question{ font:italic 500 10cqw/1 "Swear Display", serif; letter-spacing:-0.02em; min-height:20cqw; }
.concept-card__text{ font:400 3.8cqw/1.3 "Swear Text", serif; margin-top:12.2% !important; text-align:left; align-self:stretch; }
.concept-card__scope--back{ margin-top:auto !important; }
.concept-card__close{
position:absolute; top:6.24%; right:5.8%; width:10.8cqw; height:10.8cqw;
display:flex; align-items:center; justify-content:center;
border:1.5px solid var(--ink); border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; padding:0;
}
.concept-page .concept-card__close:hover,
.concept-page .concept-card__close:focus{ background:var(--ink); color:#fff; }
.concept-card__back .dts-btn{ margin-top:6.6cqw; }
.concept-card__back[hidden]{ display:none; }
.concept-card.is-open .concept-card__front{ visibility:hidden; }
.concept-wege__note{ margin-top:54px !important; font:400 19px/1.5 "Swear Text", serif; } .concept-statement{ padding:150px var(--cp-side); background:#fff; } .concept-statement__text{
font:400 140px/1 "Swear Display", serif; letter-spacing:-0.01em;
font-size:max(40px, min(140px, calc((100vw - 172px) * 0.0801)));
} .concept-more{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px;
padding:0 var(--cp-side) 150px; background:#fff;
}
.concept-more__h2{ font:400 50px/1.15 "Swear Display", serif; margin-bottom:46px !important; }
.concept-list__head{ margin:0; } .concept-list__btn{
display:block; width:100%; text-align:left; padding:0; border:0; background:none; cursor:pointer;
font:italic 500 32px/43px "Swear Display", serif; color:#9a9a9a;
transition:color .16s ease;
}
.concept-list__head button[aria-expanded="true"]{ color:var(--ink); }
@media (hover:hover){ .concept-list__btn:hover{ color:var(--ink); } }
.concept-list__panel{ padding:25px 0 30px; max-width:700px; }
.concept-list__panel p{ font:400 19px/29px "Swear Text", serif; } .concept-more__right{ display:flex; flex-direction:column; align-items:flex-end; gap:109px; }
.concept-projektband{ position:relative; width:249px; height:249px; margin-right:44px; border-radius:50%; overflow:hidden; display:block; }
.concept-projektband img{ width:100%; height:100%; object-fit:cover; transition:filter .25s ease, transform .35s ease; }
.concept-projektband__label{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
font:500 22px/1.2 "Swear Display", serif; color:#fff; padding:0 20px;
background:rgba(20,20,20,.55); opacity:0; transition:opacity .25s ease;
}
@media (hover:hover){
.concept-projektband:hover img{ filter:grayscale(1); transform:rotate(-4deg) scale(1.04); }
.concept-projektband:hover .concept-projektband__label{ opacity:1; }
}
.concept-projektband:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.concept-box{ width:571px; max-width:100%; background:var(--lime); padding:37px 29px 36px 31px; }
.concept-box__title{ font:italic 500 50px/1.1 "Swear Display", serif; }
.concept-box__buttons{ display:flex; gap:15px; margin-top:50px; flex-wrap:nowrap; }
.concept-box .dts-btn{ width:248px; min-width:0; } .concept-prozess{ position:relative; background:var(--ink); color:#fff; height:500svh; }
.concept-prozess__sticky{ position:sticky; top:0; height:100svh; display:flex; align-items:center; }
.concept-prozess__left{ padding-top:88px; }
.concept-prozess__intro{ margin-top:38px; max-width:660px; }
.concept-prozess__intro p{ font:400 19px/1.55 "Swear Text", serif; color:#e9e9e9; }
.concept-prozess__intro p + p{ margin-top:22px !important; }
.concept-step{ margin-top:74px; }
.concept-prozess__inner{
position:relative;
width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px; align-items:start;
height:min(793px, 100svh); padding:0 var(--cp-side);
} .concept-prozess__h2{ font:italic 500 80px/1.05 "Swear Display", serif; margin-bottom:0 !important; }
.concept-step{ display:none; }
.concept-step--cta .concept-step__cta{ font:italic 500 50px/1.1 "Swear Display", serif; }
.concept-step__buttons{ display:flex; gap:15px; margin-top:40px; flex-wrap:wrap; }
.concept-step.is-active{ display:block; }
.concept-step__no{ font:italic 500 50px/1 "Swear Display", serif; margin:0 0 51px !important; }
.concept-step__no span{ font-style:italic; margin-left:0.42em; }
.concept-step__text{ font:400 19px/1.55 "Swear Text", serif; max-width:660px; color:#e9e9e9; margin-left:71px; }
.concept-prozess__right{ position:relative; height:662px; max-height:100%; margin-top:65px; padding-left:128px; }
.concept-prozess__shot{
position:absolute; left:128px; top:0; width:567px; max-width:calc(100% - 128px); height:100%;
object-fit:contain; object-position:left top; border-radius:6px;
opacity:0; transform:translateY(20px); transition:opacity .4s ease, transform .4s ease;
}
.concept-prozess__shot.is-on{ opacity:1; transform:none; } .concept-prozess__bar{
position:absolute; right:var(--cp-side); top:170px; width:12px; height:454px; max-height:calc(100% - 200px);
background:#363636; border-radius:6px;
}
.concept-prozess__bar span{
position:absolute; top:0; left:0; display:block; width:100%; height:81px; max-height:30%;
background:#fff; border-radius:6px; transition:transform .3s ease;
} .concept-ally{ padding:150px 0 0; background:#fff; }
.concept-ally__h2{ font:italic 500 80px/1 "Swear Display", serif; padding:0 var(--cp-side); }
.concept-ally__statement{
margin:90px auto 90px !important; max-width:1180px; text-align:center;
font:italic 500 32px/1.5 "Swear Display", serif;
}
.concept-ally__media{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.concept-ally__img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); display:block; }
.concept-ally__pane{ background:var(--lime); padding:90px 80px; display:flex; flex-direction:column; justify-content:center; gap:34px; }
.concept-page blockquote.concept-ally__quote{
position:relative; margin:0; padding:0; border:0; background:none;
font:italic 500 32px/1.35 "Swear Display", serif; max-width:560px;
}
.concept-ally__mark{ font:500 64px/0 "Swear Display", serif; vertical-align:-0.15em; margin-right:6px; }
.concept-ally__mark--end{ margin-left:6px; margin-right:0; }
.concept-ally__in{ display:block; width:22px; height:auto; }
.concept-ally__text{ font:400 19px/1.6 "Swear Text", serif; max-width:560px; }
.concept-ally__foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px var(--cp-side) 110px; background:#fff; }
.concept-ally__linkedin{ display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font:400 22px/1 "Swear Text", serif; } .concept-cta{ background:var(--ink); color:#fff; }
.concept-cta__inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding:34px var(--cp-side); }
.concept-cta__title{ font:italic 500 50px/1.1 "Swear Display", serif; }
.concept-cta__buttons{ display:flex; gap:16px; flex-wrap:wrap; } .concept-faq{ padding:120px var(--cp-side) 140px; background:#fff; }
.concept-faq__h2{ font:italic 500 80px/1.05 "Swear Display", serif; margin-bottom:60px !important; }
.concept-faq__item{ border-bottom:1px solid #d9d9d9; }
.concept-faq__head{ margin:0; }
.concept-faq__btn{
width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
padding:26px 0; border:0; background:none; cursor:pointer; text-align:left;
font:italic 500 32px/1.3 "Swear Display", serif; color:var(--ink);
}
.concept-faq__chev{
flex:0 0 auto; width:38px; height:38px; border:1.5px solid var(--ink); border-radius:50%;
display:flex; align-items:center; justify-content:center; transition:transform .25s ease;
}
.concept-faq__btn[aria-expanded="true"] .concept-faq__chev{
transform:rotate(180deg);
background:var(--lime); border-color:transparent;
}
.concept-faq__panel{ padding:0 0 30px; max-width:1100px; }
.concept-faq__panel p{ font:400 19px/1.65 "Swear Text", serif; } @media (max-width:900px){ .concept-page{ --cp-side:36px; } .concept-hero{ height:calc(100svh - var(--wp-admin--admin-bar--height, 0px)); min-height:620px; }
.concept-hero__h1{ top:189px; left:36px; right:36px; font-size:80px; line-height:1; }
.concept-hero__h1 .dts-line{ display:block; }
.concept-hero__h1 br{ display:none; }
.concept-hero__h1 .dts-line:nth-of-type(2){ text-align:right; }
.concept-hero__sub{ bottom:57px; font-size:32px; line-height:40px; padding:0 36px; } .concept-wege{ padding:52px var(--cp-side) 40px; }
.concept-wege__h2{ font-size:50px; line-height:50px; }
.concept-page .concept-cards{
display:flex; grid-template-columns:none; gap:16px; margin:47px -36px 0; padding:0 18px 12px;
overflow-x:auto; scroll-snap-type:x mandatory;
}
.concept-card{ flex:0 0 calc(100vw - 36px); width:calc(100vw - 36px); aspect-ratio:354 / 629; scroll-snap-align:center; }
.concept-card__front{ padding:69.5% 6% 8.2%; }
.concept-card__mid{ gap:24px; }
.concept-card__name, .concept-card__question{ font-size:32px; line-height:1; }
.concept-card__question{ min-height:64px; }
.concept-card__for, .concept-card__scope, .concept-card__text{ font-size:19px; line-height:1.4; }
.concept-card__back{ padding:16% 6% 8%; }
.concept-page .concept-card .dts-btn{ width:250px; max-width:100%; height:83px; font-size:22px; padding:0 20px; gap:10px; }
.concept-card__close{ width:44px; height:44px; }
.concept-card__back .dts-btn{ margin-top:24px; } .concept-statement{ padding:182px var(--cp-side) 0; }
.concept-statement__text{ font-size:50px; line-height:50px; } .concept-more{ grid-template-columns:1fr; gap:0; padding:49px var(--cp-side) 37px; }
.concept-more__h2{ font-size:32px; line-height:32px; margin-bottom:110px !important; }
.concept-list__btn{ font-size:32px; line-height:43px; }
.concept-list__panel p{ font-size:19px; line-height:29px; }
.concept-more__right{ align-items:center; gap:60px; margin-top:60px; }
.concept-projektband{ width:249px; height:249px; margin-right:0; }
.concept-projektband__label{ opacity:1; font-size:22px; }
.concept-box{ width:auto; max-width:none; align-self:stretch; margin:0 -18px; padding:38px 19px; }
.concept-box__title{ letter-spacing:-0.01em; }
.concept-box__title{ font-size:50px; line-height:50px; }
.concept-box__title br{ display:none; }
.concept-box__buttons{ flex-direction:column; gap:19px; margin-top:56px; }
.concept-box .dts-btn{ width:100%; height:83px; background:var(--ink); border-color:var(--ink); color:#fff; } .concept-prozess{ height:auto; overflow:hidden; }
.concept-prozess__sticky{ position:static; height:auto; padding:87px 0 0; }
.concept-prozess__inner{ position:relative; grid-template-columns:minmax(0,1fr); gap:0; height:auto; padding-bottom:0; }
.concept-prozess__left{ min-width:0; padding-top:0; padding-right:0; } .concept-prozess__bar{ display:none; } .concept-steps{
display:flex; margin:44px -36px 0; padding:0;
overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.concept-steps::-webkit-scrollbar{ display:none; }
.concept-step{ display:block; flex:0 0 100%; width:100%; margin:0; padding:0 36px; scroll-snap-align:start; }
.concept-step--cta{ display:none; }
.concept-prozess__h2{ font-size:50px; line-height:50px; }
.concept-prozess__intro{ margin-top:30px; }
.concept-prozess__intro p{ font-size:19px; line-height:29px; }
.concept-step__no{ font-size:32px; line-height:1; margin:0 0 26px !important; }
.concept-step__text{ font-size:19px; line-height:29px; margin-left:0; }
.concept-step--cta .concept-step__cta{ font-size:32px; line-height:1.1; }
.concept-step__buttons{ flex-direction:column; gap:19px; } .concept-prozess__right{ display:none; }
.concept-step .concept-prozess__shot{
position:static; display:block; width:261px; max-width:100%; height:auto;
margin:40px 0 0; opacity:1; transform:none;
}
.concept-prozess__progress{ margin-left:36px; margin-right:36px; } .concept-step--cta{ display:none; } .concept-ally{ padding-top:90px; }
.concept-ally__h2{ font-size:50px; line-height:50px; }
.concept-ally__statement{ margin:50px 0 !important; padding:0 var(--cp-side); font-size:32px; line-height:40px; text-align:center; }
.concept-ally__media{ grid-template-columns:1fr; }
.concept-ally__pane{ padding:77px var(--cp-side) 60px; gap:56px; }
.concept-ally__quote{ font-size:32px; line-height:40px; }
.concept-ally__text{ font-size:19px; line-height:29px; } .concept-ally{ display:flex; flex-direction:column; }
.concept-ally__media, .concept-ally__foot{ display:contents; }
.concept-ally__h2{ order:1; }
.concept-ally__statement{ order:2; }
.concept-ally__img{ order:3; width:100%; height:auto; }
.concept-ally__linkedin{ order:4; font-size:15px; padding:22px var(--cp-side) 26px; }
.concept-ally__pane{ order:5; }
.concept-page .concept-ally__foot .dts-btn{ order:6; align-self:center; margin:42px 0 56px; }
.concept-page .concept-ally__foot .dts-btn{ width:317px; max-width:100%; height:83px; } .concept-cta__inner{ flex-direction:column; align-items:center; gap:36px; padding:38px var(--cp-side) 46px; text-align:center; }
.concept-cta__title{ font-size:32px; line-height:32px; }
.concept-cta__buttons{ width:100%; flex-direction:column; gap:19px; align-items:center; }
.concept-page .concept-cta .dts-btn{ width:317px; max-width:100%; height:83px; } .concept-faq{ padding:90px var(--cp-side) 80px; }
.concept-faq__h2{ font-size:50px; line-height:50px; margin-bottom:95px !important; }
.concept-faq__btn{ font-size:32px; line-height:32px; padding:22px 0; gap:16px; }
.concept-faq__panel p{ font-size:19px; line-height:29px; }
}
@media (prefers-reduced-motion: reduce){
.concept-prozess__shot, .concept-projektband img, .concept-faq__chev{ transition:none; }
} .concept-page .concept-list__btn,
.concept-page .concept-list__btn:hover,
.concept-page .concept-list__btn:focus,
.concept-page .concept-faq__btn,
.concept-page .concept-faq__btn:hover,
.concept-page .concept-faq__btn:focus{
background:none; box-shadow:none; padding-left:0; padding-right:0;
}
.concept-page .concept-faq__btn, .concept-page .concept-faq__btn:hover, .concept-page .concept-faq__btn:focus{ color:var(--ink); }
.concept-page .concept-list__btn:focus-visible,
.concept-page .concept-faq__btn:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.concept-page .concept-card__close,
.concept-page .concept-card__close:hover,
.concept-page .concept-card__close:focus{ background:transparent; color:var(--ink); box-shadow:none; } .concept-page .concept-card__open,
.concept-page .concept-card__back .dts-btn{ width:248px; max-width:100%; } .concept-page .concept-card .dts-btn{
width:49.6cqw; min-width:0; height:10.8cqw; padding:0 3cqw; gap:1.6cqw;
font-size:4.4cqw; white-space:nowrap;
}
.concept-card__close svg{ width:40%; height:40%; } @media (hover:hover){
.concept-page .concept-box .dts-btn:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
}
.concept-page .concept-box .dts-btn:focus-visible{ background:var(--ink); border-color:var(--ink); color:#fff; outline-offset:4px; } .concept-prozess__right.is-stack .concept-prozess__shot{
height:auto; object-fit:contain; border-radius:4px;
box-shadow:0 24px 48px rgba(0,0,0,.45);
}
.concept-prozess__right.is-stack .concept-prozess__shot[data-shot="4"]{ left:auto; right:0;    top:0;   width:46%; z-index:1; }
.concept-prozess__right.is-stack .concept-prozess__shot[data-shot="3"]{ left:auto; right:6%;   top:16%; width:44%; z-index:2; }
.concept-prozess__right.is-stack .concept-prozess__shot[data-shot="1"]{ left:0;    right:auto; top:8%;  width:62%; z-index:3; }
.concept-prozess__right.is-stack .concept-prozess__shot[data-shot="2"]{ left:30%;  right:auto; top:42%; width:46%; z-index:4; }
@media (max-width:900px){ .concept-page .dts-btn{ height:83px; }
}
@media (max-width:900px){ .concept-page .concept-card .dts-btn{
width:250px; max-width:100%; height:83px; font-size:22px; padding:0 20px; gap:10px;
}
} .concept-page .concept-list__btn,
.concept-page .concept-list__btn:hover,
.concept-page .concept-list__btn:focus,
.concept-page .concept-list__btn:active{ color:#9a9a9a; }
.concept-page .concept-list__btn[aria-expanded="true"],
.concept-page .concept-list__btn[aria-expanded="true"]:hover,
.concept-page .concept-list__btn[aria-expanded="true"]:focus{ color:var(--ink); }
@media (hover:hover){
.concept-page .concept-list__btn:hover{ color:var(--ink); }
} .concept-prozess__progress{ display:none; }
@media (max-width:900px){
.concept-prozess__progress{
display:block; height:3px; margin-top:34px; border-radius:2px;
background:#3a3a3a; overflow:hidden;
}
.concept-prozess__progress span{
display:block; height:100%; width:25%; background:#fff; border-radius:2px;
transition:transform .3s ease;
}
}
@media (max-width:900px){ .concept-faq__btn{ align-items:flex-start; gap:18px; }
.concept-faq__btn > span:first-child{ flex:1 1 auto; min-width:0; }
.concept-faq__chev{ margin-top:2px; }
}