/* -------------------------------------------- */
/* OUTLINE-KÜRZEL – SERIÖSER INGENIEUR-STIL */
/* -------------------------------------------- */


p {
font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-weight: 400;
margin: 0;
}

/* -------------------------------------------- */
/* MATRIX CARD KOMPAKT */
/* -------------------------------------------- */

.matrix-card{
position: relative;
height: auto;
padding: 16px 16px;
border-radius: 1px;
background-color:rgb(237, 237, 237);
}

.matrix-card:hover{
background-color:rgb(166, 166, 166);
}

.matrix-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: 1fr;
}

/* 2 Spalten */
@media (min-width: 576px) {
.matrix-grid {
grid-template-columns: repeat(2, 1fr);
}
}

/* 3 Spalten (max!) */
@media (min-width: 992px) {
.matrix-grid {
grid-template-columns: repeat(3, 1fr);
}
}


h1{font-family: "Roboto Condensed", sans-serif;}

.matrix-title{
font-family: "Roboto Condensed", sans-serif;
font-weight: 600;
font-size: 2em !important; 
line-height: 1.3;
color: #2A2A2A;
letter-spacing: -0.2px;
text-wrap: balance;
text-align: left;
}

@media (min-width: 600px){
.matrix-title{
font-size: clamp(18px, 2vw, 26px);
}
}

.matrix-description {
  font-family: "Open Sans", sans-serif;
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.5;
  color: #444;
  letter-spacing: -0.1px;
  margin-top: 1rem;
  margin-bottom: 0.3rem;
  padding-left: 2px;
  text-align: left;
}