:root {
  --bg: #e8f4ef;
  --ink: #14322c;
  --leise: #4a6d66;
  --gelb: #f1e41c;
  --kern: #2f8f63;
  --gelb2: #f0c94a;
  --rand: #d4b8b0;
  --plus: #5aa87a;
  --minus: #d36a63;
  --karte: #7eb6ea;
  --sans: var(--mcg-sans), "Poppins", sans-serif;
  --mono: var(--mcg-mono), "IBM Plex Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "top top"
    "filter buehne"
    "zeit zeit";
}
.top {
  grid-area: top;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 18px 24px 10px;
  border-bottom: 2px solid #b7d4c8;
}
.marke {
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--gelb);
  padding: 6px 12px;
  text-decoration: none;
}
.claim { margin: 0; color: var(--leise); font-size: 14px; }
.filter {
  grid-area: filter;
  padding: 18px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filter h2 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leise);
}
.filt {
  text-align: left;
  border: 1px solid #b7d4c8;
  background: #d7ece4;
  color: #1d4a42;
  border-radius: 4px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.filt.an { background: #fff; border-color: #1d4a42; font-weight: 600; }
.buehne {
  grid-area: buehne;
  position: relative;
  min-height: 560px;
  overflow: hidden;
}
.randlabel {
  position: absolute;
  left: 8%;
  top: 12%;
  color: #9aa8a4;
  font-size: 18px;
  margin: 0;
  z-index: 2;
}
.blume {
  position: absolute;
  left: 18%;
  top: 50%;
  transform: translate(-20%, -50%);
  border-radius: 46% 54% 48% 52%;
}
.blume.aussen {
  width: min(58vw, 640px);
  height: min(58vw, 640px);
  background: #e3d5cf;
}
.blume.mitte {
  width: min(36vw, 390px);
  height: min(36vw, 390px);
  background: var(--gelb2);
  left: 22%;
}
.kern {
  position: absolute;
  left: 24%;
  top: 50%;
  transform: translate(-10%, -50%);
  width: min(20vw, 210px);
  height: min(20vw, 210px);
  border-radius: 46% 54% 50% 50%;
  background: var(--kern);
  color: #fff;
  display: grid;
  place-content: center;
  text-align: center;
  z-index: 3;
  gap: 6px;
}
.kern strong { font-size: 22px; line-height: 1.15; font-weight: 600; }
.kern span { font-size: 12px; opacity: .9; }
.stapel {
  position: absolute;
  left: 48%;
  top: 28%;
  width: min(34vw, 360px);
  z-index: 4;
}
.theorie {
  background: var(--karte);
  color: #0c2740;
  border: 1px solid rgba(12,39,64,.18);
  padding: 18px 22px;
  margin: -10px 0 0 18px;
  transform: rotate(-18deg);
  font-weight: 600;
  box-shadow: 0 8px 0 rgba(12,39,64,.06);
}
.theorie:nth-child(1) { margin-left: 48px; }
.theorie:nth-child(2) { margin-left: 28px; }
.theorie:nth-child(3) { margin-left: 14px; }
.theorie:nth-child(4) { margin-left: 0; }
.plus, .minus {
  position: absolute;
  z-index: 4;
  display: grid;
  gap: 6px;
}
.plus { left: 42%; top: 14%; }
.minus { left: 72%; top: 38%; }
.blatt {
  width: 54px;
  height: 70px;
  border: 1px solid rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  transform: rotate(-12deg);
}
.blatt.p { background: #8fceaa; color: #14322c; }
.blatt.m { background: #e39a94; color: #4a1614; }
.zeit {
  grid-area: zeit;
  padding: 10px 24px 18px;
}
.zeit label {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--leise);
}
.zeit input { width: 100%; accent-color: #7eb6ea; }
.jahre {
  display: flex;
  justify-content: space-between;
  color: var(--leise);
  font-size: 13px;
  font-family: var(--mono);
}
@media (max-width: 860px) {
  body {
    grid-template-columns: 1fr;
    grid-template-areas: "top" "buehne" "filter" "zeit";
  }
  .filter { flex-direction: row; flex-wrap: wrap; }
  .buehne { min-height: 520px; }
  .stapel { left: 36%; width: 56vw; }
}