/* ========================================================================== */
/* Externe Seiten-Styles fuer sortimente/index.html. */
/* Diese Datei ersetzt fruehere Inline-Style-Bloecke in der HTML-Datei. */
/* Jede Regel bleibt seitenbezogen, weil diese Datei nur auf dieser Seite geladen wird. */
/* ========================================================================== */

/* Inline-Style-Block 1: urspruengliche Attribute: keine. */
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-page{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
--sort-dark: #171717;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
--sort-muted: #5d626b;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
--sort-line: rgba(23, 23, 23, 0.1);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
--sort-soft: #f4f5f7;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
--sort-accent: #e10613;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
background: linear-gradient(180deg, #ffffff 0%, #f4f5f7 42%, #ffffff 100%);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
padding-bottom: clamp(3rem, 7vw, 5rem);
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-hero{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
display: grid;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
min-height: clamp(430px, 45vw, 610px);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
background: #fff;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
border-bottom: 1px solid var(--sort-line);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
overflow: hidden;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-hero-copy{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
display: flex;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
flex-direction: column;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
justify-content: center;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
padding: clamp(2.4rem, 6vw, 5.4rem);
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-hero-copy h1{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin: 0 0 1.2rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: var(--sort-dark);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
font-size: clamp(2.2rem, 4.4vw, 4.45rem);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
line-height: 1.04;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
letter-spacing: 0;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-hero-copy p{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
max-width: 48rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin: 0 0 1.4rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: var(--sort-muted);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
font-size: 1.05rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
line-height: 1.82;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-hero-media{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
min-height: inherit;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
background: #dadde1;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-hero-media img{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
width: 100%;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
height: 100%;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
object-fit: cover;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-nav{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
display: flex;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
flex-wrap: wrap;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
gap: 0.7rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin-top: 0.4rem;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-nav a{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
display: inline-flex;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
align-items: center;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
justify-content: center;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
min-height: 42px;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
padding: 0.72rem 1rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
border-radius: 999px;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
background: #fff;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
border: 1px solid var(--sort-line);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: var(--sort-dark);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
font-size: 0.9rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
font-weight: 800;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
line-height: 1.2;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
box-shadow: 0 10px 24px rgba(17, 17, 17, 0.06);
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-section{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
padding: clamp(3rem, 7vw, 5.2rem) 0 0;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
scroll-margin-top: 130px;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-heading{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
max-width: 860px;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin: 0 0 1.4rem;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-heading h2{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin: 0 0 0.6rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: var(--sort-dark);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
font-size: clamp(1.85rem, 3vw, 2.8rem);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
line-height: 1.12;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-heading p{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin: 0;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: var(--sort-muted);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
line-height: 1.8;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-grid{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
display: grid;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
grid-template-columns: repeat(2, minmax(0, 1fr));
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
gap: 1rem;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-feature-image{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin: 0 0 1.2rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
overflow: hidden;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
border-radius: 8px;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
background: #d9dde2;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
border: 1px solid var(--sort-line);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
box-shadow: 0 18px 44px rgba(17, 17, 17, 0.08);
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-feature-image img{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
width: 100%;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
aspect-ratio: 16 / 7;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
object-fit: cover;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
object-position: center;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-feature-stack{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
display: grid;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
gap: 1rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin: 0 0 1.2rem;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-feature{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
display: grid;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
overflow: hidden;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
background: #fff;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
border: 1px solid var(--sort-line);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
border-radius: 8px;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
box-shadow: 0 18px 44px rgba(17, 17, 17, 0.07);
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-feature.is-reverse{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-feature.is-reverse .assortment-feature-media{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
order: 2;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-feature-media img{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
width: 100%;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
height: 100%;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
min-height: 265px;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
object-fit: cover;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-feature-copy{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
display: flex;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
flex-direction: column;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
justify-content: center;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
padding: clamp(1.25rem, 2.5vw, 2rem);
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-feature-copy h3{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin: 0 0 0.75rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: var(--sort-dark);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
font-size: clamp(1.3rem, 2.4vw, 2rem);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
line-height: 1.16;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-feature-copy p{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin: 0.55rem 0;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: var(--sort-muted);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
font-size: 0.98rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
line-height: 1.75;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-card{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
background: #fff;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
border: 1px solid var(--sort-line);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
border-radius: 8px;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
padding: clamp(1.25rem, 2vw, 1.65rem);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
box-shadow: 0 18px 44px rgba(17, 17, 17, 0.07);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
scroll-margin-top: 135px;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-card h3{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin: 0 0 0.75rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: var(--sort-dark);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
font-size: 1.2rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
line-height: 1.24;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-card p{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin: 0;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: var(--sort-muted);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
font-size: 0.98rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
line-height: 1.75;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-card strong{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: var(--sort-dark);
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-card.wide{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
grid-column: 1 / -1;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.materials-panel{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
background: #171717;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: #fff;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
border-radius: 8px;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
padding: clamp(1.5rem, 3vw, 2.2rem);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
box-shadow: 0 22px 54px rgba(17, 17, 17, 0.15);
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.materials-panel h2, .materials-panel p{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: #fff;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.materials-grid{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
display: grid;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
grid-template-columns: repeat(3, minmax(0, 1fr));
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
gap: 0.9rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin-top: 1.4rem;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.material-logo{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
display: flex;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
flex-direction: column;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
justify-content: space-between;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
min-height: 148px;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
border-radius: 8px;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
background: #fff;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: #171717;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
padding: 1rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
border: 1px solid rgba(255, 255, 255, 0.16);
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.material-logo strong{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
display: block;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin-bottom: 0.45rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: #171717;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
font-size: 1.18rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
line-height: 1.2;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.material-logo span{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: #666b73;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
font-size: 0.9rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
line-height: 1.5;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.material-logo mark{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
align-self: flex-start;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin-top: 1rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
background: var(--accent-soft);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: var(--sort-accent);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
border-radius: 999px;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
padding: 0.28rem 0.58rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
font-size: 0.74rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
font-weight: 800;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-contact{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin-top: clamp(3rem, 7vw, 5rem);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
background: #171717;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: #fff;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
padding: clamp(2.6rem, 6vw, 4.4rem) 0;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-contact-grid{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
display: grid;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
grid-template-columns: minmax(0, 1fr) auto;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
gap: 1.8rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
align-items: center;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-contact h2{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin: 0 0 0.7rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: #fff;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
font-size: clamp(1.8rem, 3vw, 2.7rem);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
line-height: 1.12;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-contact p{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
max-width: 50rem;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
margin: 0;
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
color: rgba(255, 255, 255, 0.78);
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
line-height: 1.78;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-contact .btn{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
white-space: nowrap;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start einer responsiven Regel fuer bestimmte Bildschirmbreiten oder Nutzer-Einstellungen. */
@media (max-width: 980px){
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-hero, .assortment-grid, .assortment-feature, .assortment-feature.is-reverse, .materials-grid, .assortment-contact-grid{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
grid-template-columns: 1fr;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-hero-media{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
min-height: 300px;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-feature.is-reverse .assortment-feature-media{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
order: initial;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Start eines Selektors, der die folgenden Eigenschaften auf passende Elemente anwendet. */
.assortment-feature-image img{
/* CSS: Eigenschaft fuer Layout, Farbe, Abstand, Typografie oder Verhalten. */
aspect-ratio: 4 / 3;
/* CSS: Ende des aktuellen Regelblocks. */
}
/* CSS: Ende des aktuellen Regelblocks. */
}