/* Startseite */
.intro {
  padding:72px 0 64px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  .container {
    display:grid;
    grid-template-columns:minmax(0,1fr) 400px;
    gap:64px;
    align-items:center;
  }
  h1 {
    margin:0 0 16px;
    font-size:clamp(30px,4vw,40px);
    font-weight:700;
  }
  .intro-text > p {
    margin:0 0 28px;
    max-width:540px;
    color:var(--sub);
    font-size:17px;
  }
}
.intro-actions {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  .primary {
    padding:12px 22px;
    font-size:16px;
  }
}
.intro .intro-text > .intro-note {
  margin:24px 0 0;
  color:var(--faint);
  font-size:14px;
}

/* Echter Villager plus Beispielrezept im Minecraft-GUI */
.showcase {
  margin:0;
  figcaption {
    margin-top:10px;
    color:var(--faint);
    font-size:13px;
  }
}
.showcase-stage {
  display:grid;
  place-items:center;
  height:250px;
  overflow:hidden;
  background:
    linear-gradient(to top,#4e7a25 0 18px,#3a5c1b 18px 22px,transparent 22px),
    linear-gradient(#0d1424,#1f2f4d);
  border:2px solid var(--mc-dark);
  border-bottom:0;
  img {
    width:270px;
    height:270px;
    margin-top:-10px;
  }
}
.mc-craft {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:16px;
  background:var(--mc-gui);
  border:2px solid var(--mc-dark);
  box-shadow:inset 2px 2px var(--mc-gui-light),inset -2px -2px var(--mc-gui-shade);
}
.mc-grid {
  display:grid;
  grid-template-columns:repeat(3,40px);
}
.mc-grid span,.mc-result {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  background:var(--mc-slot);
  box-shadow:inset 2px 2px var(--mc-slot-shadow),inset -2px -2px var(--mc-slot-light);
  img {
    width:32px;
    height:32px;
  }
}
.mc-result {
  width:52px;
  height:52px;
}
/* Pixel-Pfeil wie im Crafting-Table */

background:var(--mc-arrow);
  clip-path:polygon(0 35%,55% 35%,55% 0,100% 50%,55% 100%,55% 65%,0 65%);
}

.section {
  padding:56px 0;
  & + & {
    padding-top:0;
  }
}
.two-col {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:32px;
  h2 {
    margin:0;
    font-size:20px;
  }
}
.downloads {
  margin:0;
  border-top:1px solid var(--line-strong);
  > div {
    display:grid;
    grid-template-columns:160px minmax(0,1fr);
    gap:16px;
    padding:16px 0;
    border-bottom:1px solid var(--line);
  }
  dt {
    font-weight:600;
  }
  dd {
    margin:0;
    color:var(--sub);
  }
}
.install {
  margin:0;
  padding-left:22px;
  li {
    padding:4px 0 4px 6px;
    color:var(--sub);
  }
  li::marker {
    color:var(--ink);
    font-weight:600;
  }
}
code {
  padding:1px 5px;
  background:var(--raised);
  border-radius:var(--radius-sm);
  color:var(--ink);
}
@media(max-width:900px) {
  .intro .container {
    grid-template-columns:1fr;
    gap:40px;
  }
  .showcase {
    max-width:400px;
  }
  .two-col {
    grid-template-columns:1fr;
    gap:16px;
  }
}
@media(max-width:540px) {
  .intro {
    padding:40px 0;
  }
  .container {
    padding:0 16px;
  }
  .downloads > div {
    grid-template-columns:1fr;
    gap:4px;
  }
  .mc-craft {
    gap:14px;
  }
  .mc-grid {
    grid-template-columns:repeat(3,34px);
  }
  .mc-grid span {
    width:34px;
    height:34px;
    img {
      width:26px;
      height:26px;
    }
  }
}

/* Entdecken- und Profil-Seite */
.page-home {
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:36px 24px 64px;
  > .explore-main > h1,> h1 {
    margin:0 0 4px;
    font-size:26px;
  }
  > .explore-main > p,> p {
    margin:0 0 24px;
    color:var(--sub);
  }
  .home-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:28px;
  }
}
#db-status {
  color:var(--sub);
  &:empty {
    display:none;
  }
}
.vgrid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
}
.vcard {
  position:relative;
  display:block;
  padding:8px 8px 12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:inherit;
  text-decoration:none;
  &:hover {
    border-color:var(--line-hover);
  }
  .vscene {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:200px;
    background:var(--sunken);
    border-radius:var(--radius-sm);
    .pv {
      height:100%;
      width:auto;
    }
    .pb {
      width:42%;
      height:auto;
    }
  }
  h3 {
    margin:10px 4px 0;
    font-size:15px;
  }
  small {
    color:var(--sub);
  }
}
.filters {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:20px;
  input {
    flex:1 1 260px;
    max-width:420px;
    padding:9px 12px;
    background:var(--surface);
    color:var(--ink);
    border:1px solid var(--line-strong);
    border-radius:var(--radius);
    &:focus {
      outline:none;
      border-color:var(--accent);
    }
  }
}
.sortbar {
  display:inline-flex;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  overflow:hidden;
  button {
    padding:8px 14px;
    background:var(--surface);
    color:var(--sub);
    border:0;
    & + button {
      border-left:1px solid var(--line-strong);
    }
    &:hover {
      color:var(--ink);
    }
    &.on {
      background:var(--raised);
      color:var(--ink);
      font-weight:600;
    }
  }
}
.vmeta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 4px;
}
.like {
  padding:2px 10px;
  background:var(--surface);
  color:var(--sub);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  font-size:13px;
  &:hover,&.on {
    color:#f28b99;
    border-color:#8a4a54;
  }
}
.explore {
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:28px;
  align-items:start;
}
.pick {
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  width:26px;
  height:26px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  background:var(--surface);
  color:transparent;
  font-size:15px;
  font-weight:700;
  &:hover {
    border-color:var(--accent);
  }
  &[aria-pressed="true"] {
    background:var(--accent);
    border-color:var(--accent);
    color:var(--on-accent);
  }
}
.vcard.picked {
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}
.explore.profile {
  grid-template-columns:minmax(0,1fr);
}
.vactions {
  display:flex;
  gap:8px;
  margin-top:12px;
  padding:0 4px;
  a,button {
    flex:1;
    padding:6px 8px;
    font-size:14px;
  }
  .danger:hover {
    border-color:var(--danger);
    color:var(--danger);
  }
}
.selpanel {
  position:sticky;
  top:20px;
  padding:18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  h2 {
    margin:0 0 12px;
    font-size:16px;
    span {
      color:var(--faint);
      font-weight:500;
    }
  }
  ul {
    list-style:none;
    margin:0 0 12px;
    padding:0;
    max-height:50vh;
    overflow:auto;
  }
  li {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    padding:8px 0;
    border-bottom:1px solid var(--line);
    small {
      display:block;
      color:var(--sub);
    }
    button {
      background:none;
      border:0;
      color:var(--faint);
      &:hover {
        color:var(--danger);
      }
    }
  }
  p {
    color:var(--sub);
    font-size:14px;
    margin:0 0 14px;
  }
  .primary,.outline {
    width:100%;
    margin-bottom:8px;
  }
}
@media(max-width:900px) {
  .explore {
    grid-template-columns:1fr;
  }
  .selpanel {
    position:static;
  }
}