@layer publitec-solutions-showcase {
.solutions-showcase {
--pss-radius-small: .3125rem;
--pss-radius-medium: 0.5rem;
--pss-transition: 180ms ease;
--pss-content-gap: clamp(1.5rem, 3vw, 3rem);
--pss-section-gap: clamp(2rem, 5vw, 5rem);
container-type: inline-size;
inline-size: 100%;
margin-block: var(--pss-section-gap);
&,
& *,
& *::before,
& *::after {
box-sizing: border-box;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
img {
display: block;
max-inline-size: 100%;
}
[hidden] {
display: none !important;
}
.solutions-showcase__categories {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));  }
.solutions-showcase__category {
position: relative;
display: grid;
background-color: #FFF;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(0.75rem, 1.5vw, 1.25rem);
min-block-size: clamp(5.25rem, 8vw, 7.5rem);
padding: clamp(1rem, 2vw, 1.75rem);
border: 1px solid var(--wp--preset--color--trennlinie);
border-bottom-width: 3px; text-align: start;
inset: 0 0 auto;
cursor: pointer;
transition:
background-color var(--pss-transition),
color var(--pss-transition),
transform var(--pss-transition);
&::after {
content: "";
position: absolute;
top: 100% !important;
inset: 0 0 auto;
block-size: 0.0rem;
background: transparent;
transform: translateY(-100%);
transition: 
background-color var(--pss-transition),
block-size var(--pss-transition);
}
&:hover {
background: var(--wp--preset--color--background);
}
&:focus-visible {
z-index: 1;
outline: 0.2rem solid var(--wp--preset--color--accent);
outline-offset: -0.2rem;
}
&.is-active {
background: #FFF;
&::after {
block-size: 0.25rem;
background: var(--wp--preset--color--accent);
}
.solutions-showcase__category-icon {
border-color: var(--wp--preset--color--accent);
background-color: var(--wp--preset--color--accent-pale);
}
.solutions-showcase__category-label {
color: var(--wp--preset--color--accent) !important;	
}
}
&:first-of-type {
border-left: none;
}
&:last-of-type {
border-right: none;
}
&:hover > span:last-child,
&.is-active > span:last-child { color: var(--wp--preset--color--accent);
&::after {
transform: translateX(0.25rem);
filter:
brightness(0)
saturate(100%)
invert(55%)
sepia(36%)
saturate(2687%)
hue-rotate(332deg)
brightness(100%)
contrast(100%) !important;
}
}
}
.solutions-showcase__category-icon {
border: 1px solid var(--wp--preset--color--border);
border-radius: 9px;
padding: 6px;
background-color: var(--wp--preset--color--background); width: 80px;
height: 80px;
object-fit: contain;
}
.solutions-showcase__category-label { font-weight: 700;
&::after {
display:inline-block;
vertical-align:center;
margin-left:10px;
height:23px;
width:13px;
transition: 0.2s transform ease;
filter:
brightness(1) saturate(24%) brightness(85%);
}
}
.solutions-showcase__category-panel {
padding-block-start: clamp(2.5rem, 6vw, 6rem);
}
.solutions-showcase__category-header {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr);
align-items: end;
gap: var(--pss-content-gap);
margin-block-end: clamp(2rem, 5vw, 4.5rem);
}
.solutions-showcase__category-heading {
h2 {
max-inline-size: 18ch;
margin: 0;
color: var(--wp--preset--color--headline);
text-wrap: balance;
}
}
.solutions-showcase__eyebrow,
.solutions-showcase__sidebar-kicker {
font-family: var(--wp--preset--font-family--syne);
margin: 0 0 1rem;
color: var(--wp--preset--color--accent) !important;
letter-spacing: 0.1em;
font-weight: 600;
font-size: var(--wp--preset--font-size--body);
}
.solutions-showcase__category-intro { color: var(--wp--preset--color-muted);
font-weight: 300;
> :first-child {
margin-block-start: 0;
}
> :last-child {
margin-block-end: 0;
}
}
.solutions-showcase__content {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(18rem, 0.82fr);
align-items: stretch;
gap: 0;
}
.solutions-showcase__projects {
min-inline-size: 0;
}
.solutions-showcase__project-navigation {
overflow-x: auto;
border-block: 1px solid var(--wp--preset--color--border);
border-inline-start: 1px solid var(--wp--preset--color--border);
scrollbar-width: thin;
scroll-snap-type: x proximity;
background-color: var(--wp--preset--color--background);
padding: 1rem clamp(1.25rem, 2.8vw, 2rem);
display: flex;
gap: 16px;
}
.solutions-showcase__project-button {
position: relative;
padding: 0.9rem 1.25rem;
border: 1px solid var(--wp--preset--color--trennlinie);
background: #FFF;
color: var(--wp--preset--color--navigation);
border-radius: 4px;
white-space: nowrap;
font-family: var(--wp--preset--font-family--inter);
font-weight: 600;
font-size: var(--wp--preset--font-size--body);
cursor: pointer;
scroll-snap-align: start;
transition:
background-color var(--pss-transition),
color var(--pss-transition); &:focus-visible {
z-index: 1;
outline: 0.18rem solid var(--wp--preset--color--accent);
outline-offset: -0.18rem;
}
&.is-active, &:hover {
border-color: var(--wp--preset--color--accent);
background: var(--wp--preset--color--accent-pale);
color: var(--wp--preset--color--accent);
}
}
.solutions-showcase__project-panels {
background: var(--wp--preset--color-muted);
}
.solutions-showcase__project-panel {
figure {
display: grid;
margin: 0;
}
}
.solutions-showcase__main-image {  max-height: 750px;
width: 100%; background: var(--wp--preset--color-muted);
@media (max-width: 1400px) {
max-height: 520px;
}
@media (max-width: 750px) {
max-height: 350px;
}
&.image_fit__cover {
object-fit: cover;
height: auto;
}
&.image_fit__contain {
object-fit: contain;
}
}
.solutions-showcase__project-description {
padding: clamp(1.25rem, 2.8vw, 2rem);   font-weight: 300;
> :first-child {
margin-block-start: 0;
}
> :last-child {
margin-block-end: 0;
}
}
.solutions-showcase__thumbnails {  gap: 0.75rem;
overflow-x: auto;
background: var(--wp--preset--color--background);
padding: 1rem clamp(1.25rem, 2.8vw, 2rem);
border-block-start: 0; scroll-snap-type: x proximity;
counter-reset: thumbnail-counter;
}
.solutions-showcase__thumbnail {
position: relative;
overflow: hidden;
padding: 0;
border: 1px solid var(--wp--preset--color--trennlinie);
border-radius: var(--pss-radius-small);
background: #FFF;
cursor: pointer;
scroll-snap-align: start;
transition:
border-color var(--pss-transition),
transform var(--pss-transition),
opacity var(--pss-transition);
counter-increment: thumbnail-counter;
img {
max-width: 5.8125rem;
height: 4.8125rem;
inline-size: 100%;
aspect-ratio: 4 / 3;
&.image_fit__cover {
object-fit: cover;
}
&.image_fit__contain {
object-fit: contain;
}
}
&::after {
content: counter(thumbnail-counter, decimal-leading-zero);
position: absolute;
font-family: var(--wp--preset--font-family--syne);
font-weight: 700;
color: var(--wp--preset--font-size--paragraph);
inset-block-end: 0.3rem;
inset-inline-end: 0.3rem;
font-size: .75rem; }
&:hover {
transform: translateY(-0.15rem);
&::after {
color: var(--wp--preset--color--accent);
}
}
&:focus-visible {
outline: 0.18rem solid var(--wp--preset--color--accent);
outline-offset: 0.15rem;
}
&.is-active {
border-color: var(--wp--preset--color--accent);
&::after {
color: var(--wp--preset--color--accent);
}
}
}
.solutions-showcase__sidebar {
display: flex;
flex-direction: column;
min-inline-size: 0;
background: var(--wp--preset--color--background);
border-left: 2px solid var(--wp--preset--color--border);
}
.solutions-showcase__possibilities,
.solutions-showcase__industries-section {
padding: clamp(1.5rem, 3vw, 1.75rem);
h3 {
margin: 0 0 1.5rem;
text-wrap: balance;
}
}
.solutions-showcase__sidebar,
.solutions-showcase__industries-section {
h3 {
font-weight: 600 !important;
}
}
.solutions-showcase__industries-section {
background: #FFF;
padding-top: 1rem;
padding-bottom: 1rem;
}
.solutions-showcase__sidebar-header {
padding: 1rem clamp(1.5rem, 3vw, 1.75rem);
background-color: #FFF;
border: 1px solid var(--wp--preset--color--trennlinie);
border-left: none;
border-right: none;
p, h3 {
margin-bottom: 0;
margin-top: 0;
}
}
.solutions-showcase__possibilities {
border-block-end: 1px solid var(--wp--preset--color--trennlinie);
ul {
display: grid; margin: 0;
padding: 0;
list-style: none;
}
li {
position: relative;
padding-inline-start: 1.35rem;
color: var(--wp--preset--color-muted);
padding: 9px;
padding-left: 30px;
&:hover {
background-color: var(--wp--preset--color--accent-pale);
}
&::before {
content: "";
position: absolute;
inset-block-start: 1.3em;
inset-inline-start: 10px;
inline-size: 0.45rem;
block-size: 0.45rem;
border-radius: 50%;
background: var(--wp--preset--color--accent);
}
}
}
.solutions-showcase__industries {
display: flex;
flex-wrap: wrap;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .5rem .875rem;
margin: 0;
padding: 0;
list-style: none;
li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.7rem;
color: var(--wp--preset--color--headline);
border: 1px solid var(--wp--preset--color--trennlinie);
border-radius: 4px;
background-color: var(--wp--preset--color--background);
padding: 5px 12px;
font-family: var(--wp--preset--font-family--syne);
font-weight: 600;
&:hover {
background-color: var(--wp--preset--color--accent-pale);
color: var(--wp--preset--color--accent);
border-color: var(--wp--preset--color--accent);
img {
filter:
brightness(0)
saturate(100%)
invert(55%)
sepia(36%)
saturate(2687%)
hue-rotate(332deg)
brightness(100%)
contrast(100%) !important;
}
}
}
img {
inline-size: 2.25rem;
block-size: 2.25rem;
object-fit: contain;
width: 1rem;
height: 1rem;
filter:
brightness(1) saturate(24%) brightness(85%);
}
}
.cta-area {
padding: clamp(1.5rem, 3vw, 2.75rem);
}
.solutions-showcase__cta {
margin-block-start: auto;
padding: 1.25rem clamp(1.5rem, 3vw, 2.75rem);
text-decoration: none;
height: auto !important;
transition:
background-color var(--pss-transition),
padding-inline-end var(--pss-transition);
span {
line-height: 1;
transition: transform var(--pss-transition);
}
&:hover { span {
transform: translateX(0.3rem);
}
}
&:focus-visible {
outline: 0.2rem solid var(--wp--preset--color--accent);
outline-offset: -0.35rem;
}
}
@container (width < 100rem) {
.solutions-showcase__content {
grid-template-columns: minmax(0, 2fr) minmax(18rem, 1.2fr);
}
}
@container (width < 81.25rem) {
.solutions-showcase__content {
grid-template-columns: minmax(0, 2fr) minmax(18rem, 1.6fr);
}
.solutions-showcase__category-icon {
width: 70px;
height: 70px;
}
}
@container (width < 62rem) {
.solutions-showcase__category {
&::after {
block-size: 0.15rem !important;
}
}
}
@container (width < 50rem) {
.solutions-showcase__categories {
grid-template-columns: 1fr;
}
.solutions-showcase__content {
grid-template-columns: 1fr;
}			
.solutions-showcase__category-header {
grid-template-columns: 1fr;
align-items: start;
}
.solutions-showcase__sidebar {
border-right: 2px solid var(--wp--preset--color--border);
}
.solutions-showcase__project-navigation {
border-inline-end: 1px solid var(--wp--preset--color--border);
}
.solutions-showcase__category-panel {
margin-bottom: 30px;
border-bottom: 2px solid var(--wp--preset--color--border);
}
.solutions-showcase__category {
&:first-of-type {
border-left: 1px solid var(--wp--preset--color--border);
}
&:last-of-type {
border-right: 1px solid var(--wp--preset--color--border);
}
} }
@container (width < 40rem) {
.solutions-showcase__category {
min-block-size: 4.75rem;
}
.solutions-showcase__main-image {
aspect-ratio: 4 / 3;
}
.solutions-showcase__thumbnails {
grid-auto-columns: 5.5rem;
}
.solutions-showcase__sidebar {
display: flex;
}
.solutions-showcase__possibilities {
border-inline-end: 0;
border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
}
.solutions-showcase__industries {
grid-template-columns: 1fr;
li {
font-size: 12px;
}
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
}
}