.materialwahl {
  --mw-border: #d8d9d3;
  margin-block: clamp(2.5rem, 5vw, 5rem);
  color: var(--ink);
  container-type: inline-size;
}
.materialwahl .mw-kopf {
  background: transparent;
  border: 0;
  z-index: auto;
  max-width: 54rem;
  margin-bottom: 1.6rem;
}
.mw-kopf h2 {margin: 0 0 .4em}
.mw-kopf p {max-width: 66ch; margin: 0; color: var(--muted)}
.mw-werkzeug {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  margin-bottom: 1rem;
}
.mw-auswahl {border: 0; margin: 0; padding: 0; min-width: 0}
.mw-auswahl legend, .mw-vergleich>span {
  display: block;
  padding: 0;
  margin: 0 0 .35rem;
  color: var(--muted);
  font-size: .81rem;
  font-weight: 680;
}
.mw-optionen {display: flex; flex-wrap: wrap; gap: .4rem}
.mw-optionen button {
  display: flex;
  align-items: center;
  gap: .47rem;
  padding: .34rem .68rem .34rem .34rem;
  min-height: 44px;
  border: 1px solid #9fa9aa;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  line-height: 1.15;
  font-size: .9rem;
  font-weight: 650;
  text-align: left;
}
.mw-optionen button[aria-pressed="true"] {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}
.mw-optionen button:hover, .mw-vergleich select:hover {border-color: var(--ink)}
.mw-optionen img {width: 31px; height: 31px; border-radius: 2px; object-fit: cover}
.mw-vergleich select {
  width: min(100%, 18rem);
  margin: 0;
  min-height: 44px;
  padding: .4rem 1.7rem .4rem .65rem;
  font-size: .93rem;
}
.mw-tafeln {display: grid; gap: .9rem}
.materialwahl .mw-tafel {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  max-width: none;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--mw-border);
  border-radius: 7px;
  background: #f7f6f2;
}
.mw-foto {position: relative; min-width: 0; min-height: 18rem}
.mw-foto img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover}
.mw-eigenschaften {align-self: center; padding: clamp(1.1rem, 3.8vw, 3.2rem)}
.mw-eigenschaften h3 {font-size: clamp(1.4rem, 2.5vw, 2.3rem); margin-bottom: 1rem}
.mw-eigenschaften dl {display: grid; grid-template-columns: 1fr; gap: .75rem; margin: 0}
.mw-eigenschaften dl div + div {border-top: 1px solid var(--mw-border); padding-top: .7rem}
.mw-eigenschaften dt {font-size: .84rem; font-weight: 750; margin-bottom: .12rem}
.mw-eigenschaften dd {font-size: .95rem; line-height: 1.48; margin: 0; color: #354654}
.mw-einzeln {display: inline-block; margin-top: 1.2rem; font-weight: 700}
.mw-bereit .mw-einzeln {display: none}
.mw-vergleicht .mw-tafeln {grid-template-columns: repeat(2, minmax(0, 1fr))}
.mw-vergleicht .mw-tafel {grid-template-columns: 1fr; grid-template-rows: auto 1fr}
.mw-vergleicht .mw-foto {min-height: 0; aspect-ratio: 1.95}
.mw-vergleicht .mw-eigenschaften {padding: clamp(1.1rem, 2.2vw, 2.2rem); align-self: start}
.mw-abschluss {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: .56rem 1.1rem;
  margin-top: .9rem;
}
.mw-abschluss>[role=status] {color: var(--muted); font-size: .88rem}
.mw-anfragen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: .67rem .95rem;
  min-height: 44px;
  border-radius: 4px;
  background: var(--accent);
  color: white;
  text-decoration: none;
  font-weight: 700;
}
.mw-anfragen:hover {filter: brightness(.9)}
@container (max-width: 700px) {
  .materialwahl .mw-tafel {grid-template-columns: 1fr}
  .mw-foto {min-height: 0; aspect-ratio: 1.9}
  .mw-vergleicht .mw-foto {aspect-ratio: 1.4}
  .mw-vergleicht .mw-eigenschaften {padding: .9rem}
  .mw-vergleicht .mw-tafeln {gap: .55rem}
}
@container (max-width: 470px) {
  .mw-vergleicht .mw-tafeln {grid-template-columns: 1fr}
  .mw-vergleicht .mw-foto {aspect-ratio: 2.35}
  .mw-vergleicht .mw-eigenschaften {padding: 1.1rem}
  .mw-vergleich {width: 100%}
  .mw-vergleich select {width: 100%}
  .mw-abschluss {align-items: stretch; flex-direction: column}
}