:root {
  --stone: #6f6f6f;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
  margin: 0;
  color: #fff;
  background: #192616;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

.minecraft-nav {
  position: absolute;
  z-index: 10;
  top: 22px;
  left: 50%;
  width: min(390px, calc(100% - 40px));
  transform: translateX(-50%);
}

.nav-aufhaengung {
  position: absolute;
  inset: -22px 46px auto;
  height: 28px;
  pointer-events: none;
}

.nav-aufhaengung::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: #28231c;
  border: 3px solid;
  border-color: #5d5140 #17130f #17130f #5d5140;
  box-shadow: 3px 3px 0 rgba(0,0,0,.55);
}

.nav-aufhaengung span {
  position: absolute;
  top: 6px;
  width: 8px;
  height: 22px;
  background: #171717;
  border-inline: 2px solid #4a4a4a;
}

.nav-aufhaengung span:first-child { left: 34px; }
.nav-aufhaengung span:last-child { right: 34px; }

.nav-rahmen {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 66px;
  padding: 6px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
    #5c4a31;
  background-size: 18px 18px;
  border: 4px solid;
  border-color: #9b7d51 #271d12 #271d12 #9b7d51;
  box-shadow: 8px 9px 0 rgba(0,0,0,.62);
}

.nav-rahmen::before,
.nav-rahmen::after {
  content: "";
  position: absolute;
  top: 13px;
  width: 8px;
  height: calc(100% - 26px);
  background: #c5a25f;
  box-shadow: inset -3px -3px 0 #6e5127;
}

.nav-rahmen::before { left: -12px; }
.nav-rahmen::after { right: -12px; }

.nav-wappen {
  display: grid;
  width: 52px;
  flex: 0 0 52px;
  place-items: center;
  margin-right: 6px;
  color: #e7e7e7;
  background:
    linear-gradient(135deg, rgba(255,255,255,.1) 25%, transparent 25% 75%, rgba(0,0,0,.12) 75%),
    #4e4e4e;
  background-size: 12px 12px;
  border: 3px solid;
  border-color: #aaa #272727 #272727 #aaa;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 2rem;
  text-decoration: none;
  text-shadow: 3px 3px 0 #202020;
}

.nav-links {
  display: grid;
  min-width: 0;
  flex: 1;
  grid-template-columns: 1fr;
  gap: 5px;
}

.nav-links a,
.nav-schalter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 14px;
  color: #efefef;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 50%, transparent 50%),
    #4d4d4d;
  background-size: 10px 10px;
  border: 3px solid;
  border-color: #919191 #252525 #252525 #919191;
  font: inherit;
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .025em;
  text-align: center;
  text-decoration: none;
  text-shadow: 2px 2px 0 #151515;
  transition: filter .12s ease, transform .12s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 3px;
  background: transparent;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  z-index: 1;
  color: #fff;
  filter: brightness(1.22);
  transform: translateY(-2px);
  outline: none;
}

.nav-links a.aktiv {
  color: #f7ffcf;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 50%, transparent 50%),
    #4d7139;
  background-size: 10px 10px;
  border-color: #8fbd6c #26391c #26391c #8fbd6c;
}

.nav-links a.aktiv::after {
  background: #b8ec7e;
  box-shadow: 0 0 8px rgba(184,236,126,.65);
}

.nav-schalter { display: none; }

.profil-zugang {
  position: fixed;
  z-index: 8;
  top: 24px;
  right: 28px;
  width: 76px;
  height: 76px;
  padding: 0;
  background: transparent;
}

.profil-zugang::before,
.profil-zugang::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(100% - 15px);
  width: 12px;
  height: 41px;
  background: url("chain.png") center top / 12px 30px repeat-y;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,.5));
}

.profil-zugang::before { left: -1px; }
.profil-zugang::after { right: -1px; }

.profil-bild {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  color: #e5e5e5;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07) 25%, transparent 25% 75%, rgba(0,0,0,.12) 75%),
    #4a4d4f;
  background-size: 10px 10px;
  border: 2px solid #8f6d3e;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px #2b2015,
    0 0 0 5px #735733,
    0 0 0 7px #291e13,
    inset 0 0 0 2px rgba(207,167,95,.26),
    inset 0 -4px 0 rgba(0,0,0,.16),
    3px 5px 0 rgba(0,0,0,.28);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 2.2rem;
  line-height: 1;
  text-shadow: 2px 2px 0 #1b1b1b;
}

.profil-bild::before,
.profil-bild::after {
  content: "";
  position: absolute;
  z-index: 4;
  bottom: 5px;
  width: 4px;
  height: 3px;
  background: #0d0a07;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.55);
}

.profil-bild::before { left: 3px; }
.profil-bild::after { right: 3px; }

.profil-text {
  position: absolute;
  z-index: 2;
  top: calc(100% + 18px);
  left: 50%;
  width: 104px;
  padding: 7px 12px 8px;
  transform: translateX(-50%);
  color: #f6f0df;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.08) 0 2px, transparent 2px 100%),
    linear-gradient(90deg,
      #6b4d2b 0 20%,
      #5c4023 20% 40%,
      #684927 40% 60%,
      #5a3e22 60% 80%,
      #654728 80% 100%);
  border: 2px solid;
  border-color: #9b7441 #2b1d10 #24170d #8a6436;
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.14),
    3px 4px 0 rgba(0,0,0,.42);
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .035em;
  text-align: center;
  text-shadow: 2px 2px 0 #20160d;
}

.profil-text::before,
.profil-text::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 4px;
  height: 3px;
  background: #24170d;
  box-shadow: inset 0 -1px 0 #120c07;
}

.profil-text::before { left: 17px; }
.profil-text::after { right: 17px; }

.startseite {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  isolation: isolate;
  background-image:
    linear-gradient(to bottom, rgba(7,12,8,.08), rgba(7,12,8,.12) 42%, rgba(4,7,4,.73) 100%),
    url("background.png");
  background-position: center;
  background-size: cover;
}

.startseite::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at center, transparent 20%, rgba(0,0,0,.28) 100%);
}

.startbox {
  width: min(920px, calc(100% - 32px));
  margin: auto;
  padding: 142px 20px 32px;
  text-align: center;
}

h1 {
  margin: 0;
  color: #e9e9e9;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(4.2rem, 13vw, 9.5rem);
  line-height: .86;
  letter-spacing: .025em;
  -webkit-text-stroke: 3px #292929;
  text-shadow: 0 5px 0 #787878, 0 10px 0 #404040, 7px 14px 0 rgba(0,0,0,.65);
}

.untertitel {
  display: inline-block;
  margin: 30px 0 42px;
  padding: 7px 13px;
  color: #fff36d;
  background: rgba(0,0,0,.56);
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: 900;
  letter-spacing: .04em;
  text-shadow: 2px 2px 0 #3d3500;
  transform: rotate(-2deg);
}

.minecraft-fenster {
  width: min(610px, 100%);
  margin: 0 auto;
  padding: 6px;
  color: #fff;
  background: var(--stone);
  border: 4px solid;
  border-color: #d0d0d0 #303030 #303030 #d0d0d0;
  box-shadow: 8px 8px 0 rgba(0,0,0,.72);
  image-rendering: pixelated;
}

.fenster-kopf {
  padding: 10px 14px;
  color: #f6f6f6;
  background: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%), #4e4e4e;
  background-size: 12px 12px;
  border: 2px solid;
  border-color: #8f8f8f #292929 #292929 #8f8f8f;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-shadow: 2px 2px 0 #111;
}

.status-zeile {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 5px;
  padding: 20px;
  background: rgba(15,15,15,.93);
  border: 3px solid;
  border-color: #242424 #909090 #909090 #242424;
  text-align: left;
}

.status-zeile strong, .status-zeile span { display: block; }
.status-zeile strong {
  color: #78d64b;
  font-size: 1.08rem;
  text-shadow: 2px 2px 0 #173d12;
}
.status-zeile div > span {
  margin-top: 4px;
  color: #bcbcbc;
  font-size: .92rem;
}

.fackel {
  width: 22px;
  height: 44px;
  flex: 0 0 auto;
  background: linear-gradient(to bottom, #fff27b 0 18%, #ff9d26 18% 42%, #864f20 42% 100%);
  border: 4px solid #342515;
  box-shadow: 0 0 18px #ffae38;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  color: #d5d5d5;
  background: rgba(5,7,5,.72);
  border-top: 3px solid rgba(91,125,73,.7);
  font-size: .8rem;
  font-weight: 700;
  text-shadow: 2px 2px 0 #000;
}

@media (max-width: 620px) {
  .startseite { background-position: 58% center; }
  .minecraft-nav {
    top: 14px;
    width: calc(100% - 28px);
  }

  .nav-aufhaengung { display: none; }

  .nav-rahmen {
    min-height: 58px;
    padding: 5px;
  }

  .nav-wappen {
    width: 46px;
    flex-basis: 46px;
    font-size: 1.7rem;
  }

  .nav-schalter {
    display: flex;
    flex: 1;
    gap: 10px;
    cursor: pointer;
  }

  .nav-schalter-icon {
    display: grid;
    gap: 3px;
    width: 20px;
  }

  .nav-schalter-icon i {
    display: block;
    height: 3px;
    background: #e8e8e8;
    box-shadow: 2px 2px 0 #1d1d1d;
  }

  .nav-links {
    position: absolute;
    top: calc(100% + 7px);
    left: 5px;
    right: 5px;
    display: none;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 6px;
    background: #5c4a31;
    border: 4px solid;
    border-color: #9b7d51 #271d12 #271d12 #9b7d51;
    box-shadow: 7px 8px 0 rgba(0,0,0,.65);
  }

  .nav-links.geoeffnet { display: grid; }

  .nav-links a {
    min-height: 46px;
    justify-content: flex-start;
    padding-inline: 18px;
  }

  .profil-zugang {
    top: auto;
    right: 20px;
    bottom: 76px;
    width: 68px;
    height: 68px;
  }

  .profil-zugang::before,
  .profil-zugang::after {
    top: calc(100% - 14px);
    width: 12px;
    height: 38px;
    background-size: 12px 30px;
  }

  .profil-zugang::before { left: -1px; }
  .profil-zugang::after { right: -1px; }

  .profil-bild::before { left: 3px; }
  .profil-bild::after { right: 3px; }

  .profil-text {
    top: calc(100% + 17px);
    width: 94px;
    padding: 6px 10px 7px;
    font-size: .74rem;
  }

  .profil-text::before { left: 16px; }
  .profil-text::after { right: 16px; }

  .startbox { padding-top: 110px; }
  h1 {
    font-size: clamp(3.5rem, 20vw, 6rem);
    -webkit-text-stroke-width: 2px;
    text-shadow: 0 4px 0 #787878, 0 8px 0 #404040, 5px 11px 0 rgba(0,0,0,.65);
  }
  .untertitel { margin: 25px 0 32px; }
  .minecraft-fenster { padding: 4px; }
  .status-zeile { gap: 13px; padding: 15px 13px; }
  .status-zeile strong { font-size: .95rem; }
  footer {
    align-items: center;
    flex-direction: column;
    gap: 4px;
    padding: 13px;
    text-align: center;
  }
}