:root {
  --wood-dark: #1b100a;
  --wood-edge: #2b190f;
  --wood-mid: #5d351d;
  --wood-light: #9a5f32;
  --bronze: #b87639;
  --bronze-light: #df9c52;
  --metal-black: #141719;
  --metal-dark: #25292c;
  --metal-mid: #3b4043;
  --metal-light: #74797b;
  --text: #fff8ee;
  --muted: #ddd7ce;
  --green: #a9f06f;
  --shadow: rgba(0,0,0,.48);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background: #071321; }
body {
  margin: 0;
  color: var(--text);
  background: #071321;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}
button, input, a { font: inherit; }

.startseite {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  isolation: isolate;
  background: #071321 url("../images/Background.png") center center / cover no-repeat;
}
.startseite::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(0,0,0,0) 0 34%, rgba(0,0,0,.03) 65%, rgba(0,4,9,.17) 100%),
    linear-gradient(to bottom, rgba(3,11,20,.01), rgba(2,8,14,.04) 66%, rgba(0,5,10,.13) 100%);
}
.startbox,
.profil-inhalt,
footer { position: relative; z-index: 5; }

/* ============================================================
   Navigation – Holz/Metall wie in der Designvorlage
   ============================================================ */
.minecraft-nav {
  position: absolute;
  z-index: 60;
  top: 30px;
  left: 50%;
  width: min(500px, calc(100% - 38px));
  transform: translateX(-50%);
}
.nav-aufhaengung {
  position: absolute;
  z-index: -1;
  top: -30px;
  left: 0;
  right: 0;
  height: 37px;
  pointer-events: none;
}
.nav-aufhaengung::before { display: none; }
.nav-aufhaengung span {
  position: absolute;
  top: 0;
  width: 12px;
  height: 39px;
  background:
    linear-gradient(90deg, transparent 0 2px, #111416 2px 4px, #858a8d 4px 8px, #262a2d 8px 10px, transparent 10px),
    repeating-linear-gradient(to bottom, #202326 0 6px, #808587 6px 9px, #111416 9px 15px);
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.45));
}
.nav-aufhaengung span:first-child { left: 56px; }
.nav-aufhaengung span:last-child { right: 56px; }

.nav-rahmen {
  position: relative;
  min-height: 72px;
  padding: 11px 14px 11px 72px;
  background:
    radial-gradient(circle at 14px 14px, #e3a25b 0 2px, #3a2113 3px 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 14px) 14px, #e3a25b 0 2px, #3a2113 3px 5px, transparent 6px),
    radial-gradient(circle at 14px calc(100% - 14px), #e3a25b 0 2px, #3a2113 3px 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #e3a25b 0 2px, #3a2113 3px 5px, transparent 6px),
    linear-gradient(to bottom, rgba(255,255,255,.08), transparent 23%),
    repeating-linear-gradient(90deg, #734323 0 46px, #5d351d 46px 92px);
  border: 4px solid var(--wood-dark);
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 2px #a46334,
    inset 0 -5px 0 rgba(0,0,0,.24),
    0 5px 0 rgba(0,0,0,.46),
    0 11px 22px rgba(0,0,0,.28);
}
/* dekorativer Minecraft-artiger Block links, kein Switcher */
.nav-rahmen::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 14px;
  top: 13px;
  width: 43px;
  height: 43px;
  background:
    linear-gradient(to bottom, #79a647 0 29%, #5f8936 30% 38%, #75472d 39% 100%);
  border: 3px solid #17110d;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.09),
    0 0 0 2px #9b6033,
    2px 3px 0 rgba(0,0,0,.38);
  transform: rotate(45deg) scale(.70);
}
.nav-rahmen::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 62px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: #2b1a11;
  box-shadow: 1px 0 0 #9e6337;
}
.nav-links { display: grid; min-width: 0; }
.nav-links a,
.nav-schalter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 9px 18px;
  color: #fffaf2;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 42%),
    linear-gradient(#4c5052, #303437);
  border: 3px solid;
  border-color: #8a8e90 #1b1e20 #171a1c #85898b;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 2px #24282a,
    inset 0 -4px 0 rgba(0,0,0,.18);
  cursor: pointer;
  font-weight: 900;
  font-size: .98rem;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  text-shadow: 2px 2px 0 #121416;
  transition: filter .12s ease, transform .12s ease;
}
.nav-links a::before,
.nav-schalter::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(207,139,76,.48);
  pointer-events: none;
}
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-schalter:hover,
.nav-schalter:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-1px);
  outline: none;
}
.nav-links a.aktiv {
  background:
    linear-gradient(135deg, rgba(113,154,70,.10), transparent 48%),
    linear-gradient(#505557, #34383a);
}
.nav-schalter { display: none; }

/* ============================================================
   Login / Registrierung
   ============================================================ */
.auth-zugang {
  position: fixed;
  z-index: 65;
  top: 34px;
  right: 25px;
  display: grid;
  width: 236px;
  gap: 10px;
}
.auth-button,
.account-switcher-button,
.logout-text,
.account-hinzufuegen {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  color: #fff8ed;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.05), transparent 20%),
    linear-gradient(#4a4e50, #2f3335);
  border: 3px solid;
  border-color: #868a8c #191c1e #15181a #818587;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 0 0 2px #85512b,
    0 0 0 4px #21140d,
    3px 4px 0 rgba(0,0,0,.40);
  cursor: pointer;
  font-weight: 900;
  text-decoration: none;
  text-shadow: 2px 2px 0 #151718;
  transition: filter .12s ease, transform .12s ease;
}
.auth-button:hover,
.auth-button:focus-visible,
.account-switcher-button:hover,
.account-switcher-button:focus-visible,
.logout-text:hover,
.logout-text:focus-visible,
.account-hinzufuegen:hover,
.account-hinzufuegen:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-1px);
  outline: none;
}

/* ============================================================
   Mini-Profil
   ============================================================ */
.profil-bereich {
  position: fixed;
  z-index: 70;
  top: 24px;
  right: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 138px;
}
.profil-account-name {
  position: relative;
  z-index: 12;
  max-width: 126px;
  margin-bottom: 9px;
  padding: 6px 11px 7px;
  overflow: hidden;
  color: #fff0db;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.07), transparent 24%),
    linear-gradient(#6f4123, #422516);
  border: 3px solid;
  border-color: #b1723c #27170e #20120c #965d32;
  border-radius: 6px 6px 4px 4px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.13), 2px 3px 0 rgba(0,0,0,.40);
  font-size: .79rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 1px 2px 0 #21150e;
  white-space: nowrap;
}
.profil-zugang {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}
.profil-bild {
  position: relative;
  z-index: 7;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  background: #192328;
  border: 4px solid #171a1c;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px #b27339,
    0 0 0 6px #2a190f,
    inset 0 0 0 2px rgba(255,255,255,.15),
    4px 6px 0 rgba(0,0,0,.34);
}
.profil-bild::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 20px rgba(0,0,0,.25), inset 0 3px rgba(255,255,255,.07);
  pointer-events: none;
}
.profil-kopf {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.profil-zugang::before,
.profil-zugang::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: calc(100% - 4px);
  width: 10px;
  height: 42px;
  background: repeating-linear-gradient(to bottom, #15181a 0 6px, #858a8d 6px 9px, #25292c 9px 15px);
  border-left: 2px solid #0a0c0e;
  border-right: 2px solid #0a0c0e;
  pointer-events: none;
}
/* Die Ketten sitzen an den äußeren Löchern des Schildes */
.profil-zugang::before { left: 3px; }
.profil-zugang::after { right: 3px; }

.profil-text {
  position: absolute;
  z-index: 8;
  top: calc(100% + 26px);
  left: 50%;
  width: 122px;
  min-height: 38px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  color: #fff9ef;
  background:
    radial-gradient(circle at 10px 10px, #d89a52 0 2px, #342015 3px 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 10px) 10px, #d89a52 0 2px, #342015 3px 5px, transparent 6px),
    linear-gradient(to bottom, rgba(255,255,255,.055), transparent 20%),
    linear-gradient(#4b4f51, #303436);
  border: 3px solid;
  border-color: #878b8d #181b1d #151719 #828688;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 0 0 2px #87512c,
    0 0 0 4px #22140d,
    3px 4px 0 rgba(0,0,0,.40);
  font-size: .91rem;
  font-weight: 900;
  text-shadow: 2px 2px 0 #151718;
}

.account-switcher-zugang,
.logout-zugang {
  position: relative;
  z-index: 8;
  width: 122px;
}
.account-switcher-zugang { margin-top: 72px; }
.logout-zugang { margin-top: 43px; }
.account-switcher-zugang::before,
.account-switcher-zugang::after,
.logout-zugang::before,
.logout-zugang::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: calc(100% - 2px);
  width: 10px;
  height: 29px;
  background: repeating-linear-gradient(to bottom, #15181a 0 6px, #858a8d 6px 9px, #25292c 9px 15px);
  border-left: 2px solid #0a0c0e;
  border-right: 2px solid #0a0c0e;
  pointer-events: none;
}
.account-switcher-zugang::before,
.logout-zugang::before { left: 9px; }
.account-switcher-zugang::after,
.logout-zugang::after { right: 9px; }
.account-switcher-button,
.logout-text {
  width: 100%;
  min-height: 38px;
  font-size: .86rem;
}

.account-switcher-panel {
  position: absolute;
  z-index: 100;
  top: calc(100% + 13px);
  right: 0;
  width: min(340px, calc(100vw - 28px));
  padding: 10px;
  color: #f4efe7;
  background:
    radial-gradient(circle at 12px 12px, #c78342 0 2px, #362014 3px 5px, transparent 6px),
    linear-gradient(#292d30, #181d20);
  border: 4px solid #16191c;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px #7f502e, 7px 9px 0 rgba(0,0,0,.46), 0 16px 34px rgba(0,0,0,.34);
}
.account-switcher-panel[hidden] { display: none; }
.account-switcher-kopf {
  padding: 9px 12px;
  color: #fff9ef;
  background: linear-gradient(#5c6164, #373c3f);
  border: 2px solid #17191b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #161819;
}
.account-switcher-aktiv {
  margin: 7px 0;
  padding: 8px 10px;
  color: #dad5cd;
  background: #181d21;
  border: 2px solid #4c5459;
  font-size: .82rem;
}
.account-switcher-aktiv strong { color: var(--green); }
.account-switcher-liste { display: grid; gap: 6px; max-height: 290px; overflow: auto; }
.account-switcher-eintrag,
.account-switcher-eintrag button { width: 100%; min-width: 0; }
.account-switcher-eintrag {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  color: #f4f4f4;
  background: linear-gradient(#3d4245, #303539);
  border: 2px solid #15181b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.account-switcher-eintrag button {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 9px;
  margin: -6px -8px;
  padding: 6px 8px;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.account-switcher-eintrag img { width: 34px; height: 34px; image-rendering: pixelated; }
.account-switcher-eintrag span { overflow: hidden; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.account-switcher-eintrag small { color: #cbc7bf; font-size: .72rem; }
.account-switcher-eintrag.aktiv { background: linear-gradient(#3c4734,#303a2b); border-color: #789756; }
.account-switcher-eintrag.aktiv small { color: #c8ef9d; }
.account-hinzufuegen { margin-top: 9px; font-size: .82rem; }

/* ============================================================
   Startseite
   ============================================================ */
.startbox {
  align-self: start;
  width: min(850px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(300px, 34vh, 350px) 20px 44px;
  text-align: center;
}
h1 {
  display: block;
  width: min(690px, 88vw);
  margin: 0 auto;
  padding: 0;
  line-height: 0;
}
.brand-logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.36)) drop-shadow(0 14px 18px rgba(0,0,0,.20));
}

.untertitel {
  position: relative;
  z-index: 6;
  display: table;
  margin: -5px auto 31px;
  padding: 9px 20px 10px;
  color: #fff5e7;
  background:
    radial-gradient(circle at 10px 10px, #dda05a 0 2px, #342014 3px 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 10px) 10px, #dda05a 0 2px, #342014 3px 5px, transparent 6px),
    radial-gradient(circle at 10px calc(100% - 10px), #dda05a 0 2px, #342014 3px 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #dda05a 0 2px, #342014 3px 5px, transparent 6px),
    linear-gradient(to bottom, rgba(255,255,255,.06), transparent 24%),
    linear-gradient(#3b3f41, #24282a);
  border: 3px solid #17110d;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 2px #86512c,
    inset 0 -4px 0 rgba(0,0,0,.17),
    4px 6px 0 rgba(0,0,0,.38);
  font-size: clamp(.98rem, 2vw, 1.16rem);
  font-weight: 900;
  letter-spacing: .015em;
  text-shadow: 2px 2px 0 #151718;
}
.untertitel::before,
.untertitel::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 4px;
  background: #a86635;
  border: 1px solid #29170e;
}
.untertitel::before { left: -5px; }
.untertitel::after { right: -5px; }

.minecraft-fenster {
  position: relative;
  width: min(650px, 100%);
  margin: 0 auto;
  padding: 9px;
  color: #fff;
  background:
    radial-gradient(circle at 14px 14px, #dda05a 0 2px, #342014 3px 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 14px) 14px, #dda05a 0 2px, #342014 3px 5px, transparent 6px),
    radial-gradient(circle at 14px calc(100% - 14px), #dda05a 0 2px, #342014 3px 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #dda05a 0 2px, #342014 3px 5px, transparent 6px),
    linear-gradient(to bottom, rgba(255,255,255,.055), transparent 22%),
    repeating-linear-gradient(90deg, #6e4124 0 72px, #59331d 72px 144px);
  border: 4px solid #17100b;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px #9c6034,
    inset 0 -5px 0 rgba(0,0,0,.18),
    7px 9px 0 rgba(0,0,0,.44),
    0 16px 30px rgba(0,0,0,.24);
}
.minecraft-fenster::before,
.minecraft-fenster::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -5px;
  width: 23px;
  height: 23px;
  background: linear-gradient(145deg, #8e9395, #383c3f);
  border: 3px solid #141719;
  clip-path: polygon(0 0,100% 0,100% 62%,62% 100%,0 100%);
}
.minecraft-fenster::before { left: -5px; }
.minecraft-fenster::after { right: -5px; transform: scaleX(-1); }

.fenster-kopf {
  padding: 10px 14px;
  color: #fffaf2;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.07), transparent 24%),
    linear-gradient(#5b6062, #393e40);
  border: 3px solid;
  border-color: #898d8f #1d2022 #191c1e #85898b;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #282c2e, inset 0 -4px 0 rgba(0,0,0,.14);
  font-size: .86rem;
  font-weight: 900;
  letter-spacing: .10em;
  text-shadow: 2px 2px 0 #151719;
}
.status-zeile {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 7px;
  padding: 20px 21px;
  background:
    radial-gradient(circle at 100% 0, rgba(255,255,255,.035), transparent 34%),
    linear-gradient(120deg, #181d20, #272d30);
  border: 3px solid #131719;
  box-shadow: inset 0 0 0 1px #51585c;
  text-align: left;
}
.status-zeile strong,
.status-zeile span { display: block; }
.status-zeile strong {
  color: var(--green);
  font-size: 1.05rem;
  text-shadow: 2px 2px 0 #1b2d12;
}
.status-zeile div > span { margin-top: 4px; color: #eee9e1; font-size: .90rem; }
.fackel {
  position: relative;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  background:
    linear-gradient(to bottom, #86b94f 0 27%, #678e3e 28% 37%, #74503a 38% 100%);
  border: 3px solid #171a18;
  box-shadow: inset 0 -9px 0 #513727, 3px 4px 0 rgba(0,0,0,.27);
  transform: rotate(45deg) scale(.76);
}
.fackel::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,.08);
}

/* ============================================================
   Profilseite
   ============================================================ */
.profilseite::before {
  background:
    linear-gradient(rgba(2,9,16,.24), rgba(2,9,16,.36)),
    radial-gradient(circle at 50% 44%, transparent 0 24%, rgba(0,0,0,.13) 72%, rgba(0,0,0,.32) 100%);
}
.profil-inhalt {
  align-self: start;
  width: min(900px, calc(100% - 32px));
  margin: 0 auto;
  padding: 190px 18px 48px;
}
.profil-fenster { width: 100%; }
.profil-grunddaten {
  margin-top: 7px;
  padding: 27px 23px;
  background: linear-gradient(120deg, #181e22, #292f33);
  border: 3px solid #15191c;
  box-shadow: inset 0 0 0 1px #555d62;
}
.profil-layout {
  display: grid;
  grid-template-columns: 215px minmax(0,1fr);
  gap: 34px;
  align-items: center;
}
.profil-skin-rahmen {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 3 / 5;
  place-items: end center;
  overflow: hidden;
  padding: 15px 12px 18px;
  background:
    linear-gradient(rgba(255,255,255,.03), rgba(0,0,0,.12)),
    repeating-linear-gradient(135deg, #3b4145 0 24px, #33383c 24px 48px);
  border: 5px solid #171a1d;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #8a5b35, inset 0 0 0 5px #292f33, 5px 6px 0 rgba(0,0,0,.39);
}
.profil-skin-rahmen::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px solid rgba(182,126,69,.48);
  box-shadow: inset 0 0 28px rgba(0,0,0,.30);
}
.profil-skin-rahmen::after {
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 12px;
  height: 15px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.42), transparent 72%);
}
.profil-skin {
  position: relative;
  z-index: 1;
  display: block;
  width: 90%;
  max-height: calc(100% - 10px);
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(5px 7px 0 rgba(0,0,0,.30));
}
.profil-daten { min-width: 0; }
.profil-grunddaten strong { color: #fff3df; font-size: 1.45rem; text-shadow: 2px 2px 0 #111; }
.profil-raenge { display: grid; gap: 10px; width: min(470px,100%); margin: 20px auto 0; }
.profil-rang-zeile {
  display: grid;
  grid-template-columns: 135px 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  background: linear-gradient(#494e51,#34383b);
  border: 3px solid #171a1d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  text-align: left;
}
.profil-rang-label { color: #d5d3ce; font-size: .78rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; text-shadow: 1px 1px 0 #111; }
.profil-rang-wert { color: #ffe2a0; font-size: .95rem; font-weight: 900; text-shadow: 2px 2px 0 #17120b; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 24px;
  color: #f0ece5;
  background: rgba(7,10,13,.90);
  border-top: 2px solid #674229;
  box-shadow: 0 -2px 0 rgba(0,0,0,.50);
  font-size: .79rem;
  font-weight: 700;
  text-shadow: 2px 2px 0 #000;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .profil-bereich { right: 12px; }
  .auth-zugang { right: 13px; }
  .startbox { padding-top: 285px; }
}

@media (max-width: 680px) {
  .startseite { background-position: 42% center; overflow-x: hidden; }

  .minecraft-nav {
    top: 14px;
    width: calc(100% - 24px);
  }
  .nav-aufhaengung { display: none; }
  .nav-rahmen {
    min-height: 60px;
    padding: 6px;
  }
  .nav-rahmen::before,
  .nav-rahmen::after { display: none; }
  .nav-schalter { display: flex; width: 100%; gap: 10px; }
  .nav-schalter-icon { display: grid; width: 21px; gap: 3px; }
  .nav-schalter-icon i { display: block; height: 3px; background: #ededed; box-shadow: 2px 2px 0 #222; }
  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 3px;
    right: 3px;
    display: none;
    gap: 5px;
    padding: 8px;
    background: linear-gradient(#684026, #45291a);
    border: 4px solid #171311;
    border-radius: 5px;
    box-shadow: inset 0 0 0 2px #925f36, 7px 8px 0 rgba(0,0,0,.55);
  }
  .nav-links.geoeffnet { display: grid; }
  .nav-links a { min-height: 46px; }

  .auth-zugang { top: 82px; right: 13px; width: min(215px, calc(100% - 26px)); }

  .profil-bereich {
    top: auto;
    right: 15px;
    bottom: 18px;
    width: 118px;
    transform: scale(.90);
    transform-origin: right bottom;
  }
  .profil-account-name { max-width: 110px; font-size: .75rem; }
  .profil-zugang { width: 86px; height: 86px; }
  .profil-zugang::before,
  .profil-zugang::after { top: calc(100% - 3px); height: 37px; }
  .profil-zugang::before { left: 2px; }
  .profil-zugang::after { right: 2px; }
  .profil-text { top: calc(100% + 23px); width: 108px; min-height: 34px; font-size: .81rem; }
  .account-switcher-zugang { width: 108px; margin-top: 65px; }
  .logout-zugang { width: 108px; margin-top: 39px; }
  .account-switcher-button,
  .logout-text { min-height: 34px; font-size: .78rem; }
  .account-switcher-panel {
    position: fixed;
    right: 10px;
    bottom: 225px;
    top: auto;
    width: calc(100vw - 20px);
    max-height: min(66vh, 520px);
    overflow: auto;
  }

  .startbox { width: calc(100% - 16px); padding: 180px 8px 135px; }
  h1 { width: min(94vw, 690px); }
  .untertitel { margin: -2px auto 24px; padding: 8px 12px 9px; font-size: .88rem; }
  .minecraft-fenster { padding: 6px; }
  .fenster-kopf { padding: 9px 10px; font-size: .74rem; }
  .status-zeile { gap: 12px; padding: 15px 12px; }
  .status-zeile strong { font-size: .90rem; }
  .status-zeile div > span { font-size: .79rem; }
  .fackel { width: 38px; height: 38px; }

  .profil-inhalt { width: calc(100% - 18px); padding: 110px 0 145px; }
  .profil-grunddaten { padding: 18px 13px; }
  .profil-layout { grid-template-columns: 1fr; gap: 19px; }
  .profil-skin-rahmen { width: min(180px,58vw); margin: 0 auto; }
  .profil-rang-zeile { grid-template-columns: 1fr; gap: 4px; }

  footer { align-items: center; flex-direction: column; gap: 4px; padding: 12px 13px; text-align: center; }
}

/* ============================================================
   Indlvarn – mittelalterliche UI nach Referenzbild
   Nur UI-Overrides. Background/Logo/Funktionen bleiben erhalten.
   ============================================================ */
:root {
  --ind-wood-0: #160d08;
  --ind-wood-1: #2a160d;
  --ind-wood-2: #4a2816;
  --ind-wood-3: #744524;
  --ind-wood-4: #a76b36;
  --ind-copper: #c57a38;
  --ind-copper-light: #efa65b;
  --ind-iron-0: #111416;
  --ind-iron-1: #22272a;
  --ind-iron-2: #353b3e;
  --ind-iron-3: #5f6669;
  --ind-iron-4: #93999b;
  --ind-cream: #fff5e7;
}

/* Navigation ------------------------------------------------ */
.minecraft-nav {
  top: 36px;
  width: min(500px, calc(100% - 42px));
}
.nav-aufhaengung {
  top: -36px;
  left: 0;
  right: 0;
  height: 40px;
  overflow: visible;
}
.nav-aufhaengung span {
  top: 0;
  width: 14px;
  height: 42px;
  border: 0;
  background:
    radial-gradient(ellipse at 50% 6px, transparent 0 3px, #0c0e0f 3px 5px, #83898c 5px 6px, transparent 6px) 50% 0 / 14px 14px repeat-y;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.58));
}
.nav-aufhaengung span:first-child { left: 70px; }
.nav-aufhaengung span:last-child { right: 70px; }

.nav-rahmen {
  min-height: 70px;
  padding: 9px 13px 9px 74px;
  border: 3px solid #100a06;
  border-radius: 9px;
  background:
    radial-gradient(circle at 12px 12px, #e39a4c 0 2px, #3a1d0d 2.5px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 12px) 12px, #e39a4c 0 2px, #3a1d0d 2.5px 5px, transparent 5.5px),
    radial-gradient(circle at 12px calc(100% - 12px), #e39a4c 0 2px, #3a1d0d 2.5px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #e39a4c 0 2px, #3a1d0d 2.5px 5px, transparent 5.5px),
    linear-gradient(to bottom, rgba(255,255,255,.10), transparent 17%),
    repeating-linear-gradient(90deg, #6b3d20 0 54px, #5b321b 54px 108px);
  box-shadow:
    inset 0 0 0 2px #aa6733,
    inset 0 0 0 5px #2d180d,
    inset 0 -7px 0 rgba(0,0,0,.24),
    0 5px 0 #120b07,
    0 11px 18px rgba(0,0,0,.44);
}
.nav-rahmen::before {
  left: 15px;
  top: 12px;
  width: 43px;
  height: 43px;
  border: 3px solid #12100c;
  border-radius: 9px;
  background:
    linear-gradient(135deg, transparent 0 17%, rgba(255,255,255,.12) 18% 29%, transparent 30%),
    linear-gradient(to bottom, #86b64f 0 31%, #638c3a 31% 40%, #755035 40% 100%);
  box-shadow:
    0 0 0 3px #b46d35,
    0 0 0 6px #25150c,
    inset 0 -7px 0 rgba(0,0,0,.18),
    2px 3px 0 rgba(0,0,0,.45);
  transform: rotate(45deg) scale(.72);
}
.nav-rahmen::after {
  left: 65px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  background: linear-gradient(to right, #130b07, #b06a36, #130b07);
  box-shadow: none;
}
.nav-links a,
.nav-schalter {
  min-height: 50px;
  padding: 9px 18px;
  color: #fff8ed;
  border: 3px solid #111416;
  border-radius: 5px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.10), transparent 18%),
    linear-gradient(#555b5e, #33383b 52%, #292e31 53%);
  box-shadow:
    inset 0 0 0 2px #747b7e,
    inset 0 0 0 4px #24282b,
    inset 0 -5px 0 rgba(0,0,0,.18),
    2px 3px 0 rgba(0,0,0,.44);
  font-size: 1rem;
  text-shadow: 2px 2px 0 #111416;
}
.nav-links a::before,
.nav-schalter::before {
  inset: 5px;
  border: 1px solid rgba(226,154,80,.36);
  border-radius: 2px;
}
.nav-links a.aktiv {
  background:
    linear-gradient(135deg, rgba(116,164,79,.12), transparent 45%),
    linear-gradient(#585e60, #343a3d 52%, #292f32 53%);
}

/* Login / allgemeine Buttons ------------------------------- */
.auth-button,
.account-hinzufuegen {
  min-height: 42px;
  color: var(--ind-cream);
  border: 3px solid #120b07;
  border-radius: 5px;
  background:
    radial-gradient(circle at 9px 9px, #d88c43 0 1.5px, #3a1e10 2px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 9px) 9px, #d88c43 0 1.5px, #3a1e10 2px 4px, transparent 4.5px),
    linear-gradient(to bottom, rgba(255,255,255,.06), transparent 22%),
    linear-gradient(#5f371f, #3e2416);
  box-shadow:
    inset 0 0 0 2px #9a5d31,
    inset 0 -4px 0 rgba(0,0,0,.18),
    3px 4px 0 rgba(0,0,0,.42);
}

/* Mini-Profil ------------------------------------------------ */
.profil-bereich {
  top: 24px;
  right: 24px;
  width: 148px;
  overflow: visible;
}
.profil-account-name {
  max-width: 132px;
  margin-bottom: 10px;
  padding: 7px 13px 8px;
  color: #fff4df;
  border: 3px solid #130b07;
  border-radius: 7px 7px 5px 5px;
  background:
    radial-gradient(circle at 8px 8px, #d99349 0 1.5px, #3a1d0e 2px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 8px) 8px, #d99349 0 1.5px, #3a1d0e 2px 4px, transparent 4.5px),
    linear-gradient(#704224, #472818);
  box-shadow: inset 0 0 0 2px #a96534, 2px 3px 0 rgba(0,0,0,.46);
}
.profil-zugang { width: 104px; height: 104px; }
.profil-bild {
  border: 4px solid #101315;
  background: #182125;
  box-shadow:
    0 0 0 3px #c07a3c,
    0 0 0 7px #6a3c20,
    0 0 0 10px #1c1009,
    inset 0 0 0 2px rgba(255,255,255,.12),
    inset 0 -8px 18px rgba(0,0,0,.26),
    4px 6px 0 rgba(0,0,0,.38);
}
.profil-bild::before {
  box-shadow: inset 0 0 25px rgba(0,0,0,.28), inset 0 4px rgba(255,255,255,.06);
}
.profil-zugang::before,
.profil-zugang::after,
.account-switcher-zugang::before,
.account-switcher-zugang::after,
.logout-zugang::before,
.logout-zugang::after {
  width: 13px;
  border: 0;
  background:
    radial-gradient(ellipse at 50% 6px, transparent 0 3px, #090b0c 3px 5px, #878d90 5px 6px, transparent 6px) 50% 0 / 13px 14px repeat-y;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.55));
}
.profil-zugang::before,
.profil-zugang::after { top: calc(100% - 3px); height: 47px; }
.profil-zugang::before { left: 7px; }
.profil-zugang::after { right: 7px; }

.profil-text,
.account-switcher-button,
.logout-text {
  color: #fff7ea;
  border: 3px solid #120b07;
  border-radius: 5px;
  background:
    radial-gradient(circle at 10px 10px, #d98b42 0 1.6px, #331a0d 2px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 10px) 10px, #d98b42 0 1.6px, #331a0d 2px 4px, transparent 4.5px),
    radial-gradient(circle at 10px calc(100% - 10px), #d98b42 0 1.6px, #331a0d 2px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #d98b42 0 1.6px, #331a0d 2px 4px, transparent 4.5px),
    linear-gradient(to bottom, rgba(255,255,255,.06), transparent 18%),
    linear-gradient(#5d351e, #3a2114);
  box-shadow:
    inset 0 0 0 2px #9f6132,
    inset 0 0 0 5px #28170d,
    inset 0 -4px 0 rgba(0,0,0,.17),
    3px 4px 0 rgba(0,0,0,.42);
  text-shadow: 2px 2px 0 #1a0f09;
}
.profil-text {
  top: calc(100% + 29px);
  width: 130px;
  min-height: 39px;
}
.account-switcher-zugang,
.logout-zugang { width: 130px; }
.account-switcher-zugang { margin-top: 78px; }
.logout-zugang { margin-top: 46px; }
.account-switcher-zugang::before,
.account-switcher-zugang::after,
.logout-zugang::before,
.logout-zugang::after { height: 31px; bottom: calc(100% - 1px); }
.account-switcher-zugang::before,
.logout-zugang::before { left: 12px; }
.account-switcher-zugang::after,
.logout-zugang::after { right: 12px; }
.account-switcher-button,
.logout-text { min-height: 39px; font-size: .9rem; }

.account-switcher-panel {
  top: calc(100% + 14px);
  right: 0;
  padding: 11px;
  border: 4px solid #120b07;
  border-radius: 7px;
  background:
    radial-gradient(circle at 12px 12px, #d88d44 0 2px, #351b0e 2.5px 5px, transparent 5.5px),
    linear-gradient(to bottom, rgba(255,255,255,.05), transparent 17%),
    repeating-linear-gradient(90deg, #5b341d 0 58px, #492817 58px 116px);
  box-shadow:
    inset 0 0 0 2px #a46334,
    inset 0 0 0 5px #25140b,
    7px 9px 0 rgba(0,0,0,.48),
    0 16px 34px rgba(0,0,0,.35);
}
.account-switcher-kopf {
  color: #fff7e8;
  border: 3px solid #111416;
  background: linear-gradient(#5b6164, #343a3d);
  box-shadow: inset 0 0 0 2px #7b8285, inset 0 -4px 0 rgba(0,0,0,.16);
}
.account-switcher-aktiv,
.account-switcher-eintrag {
  border-color: #15191b;
  background: linear-gradient(#2d3336, #202528);
  box-shadow: inset 0 0 0 1px #555d61;
}
.account-switcher-eintrag.aktiv {
  background: linear-gradient(#35452d, #293723);
  border-color: #789d54;
}

/* Untertitel ------------------------------------------------- */
.untertitel {
  margin: -3px auto 31px;
  padding: 9px 22px 10px;
  color: #fff5e7;
  border: 3px solid #120a06;
  border-radius: 5px;
  background:
    radial-gradient(circle at 9px 9px, #e1a35b 0 1.6px, #3a1e0f 2px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 9px) 9px, #e1a35b 0 1.6px, #3a1e0f 2px 4px, transparent 4.5px),
    radial-gradient(circle at 9px calc(100% - 9px), #e1a35b 0 1.6px, #3a1e0f 2px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #e1a35b 0 1.6px, #3a1e0f 2px 4px, transparent 4.5px),
    linear-gradient(to bottom, rgba(255,255,255,.07), transparent 22%),
    linear-gradient(#6a3d21, #412416);
  box-shadow:
    inset 0 0 0 2px #a96938,
    inset 0 0 0 5px #2a180d,
    inset 0 -4px 0 rgba(0,0,0,.15),
    4px 6px 0 rgba(0,0,0,.36);
  text-shadow: 2px 2px 0 #1e120b;
}
.untertitel::before,
.untertitel::after {
  top: 5px;
  bottom: 5px;
  width: 7px;
  border: 2px solid #151719;
  background: linear-gradient(#7a8083, #3b4043);
  box-shadow: inset 0 0 0 1px #9da2a4;
}
.untertitel::before { left: -9px; }
.untertitel::after { right: -9px; }

/* Serverstatus ---------------------------------------------- */
.minecraft-fenster {
  padding: 10px;
  border: 4px solid #100a06;
  border-radius: 8px;
  background:
    radial-gradient(circle at 13px 13px, #e09a4d 0 2px, #371c0f 2.5px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 13px) 13px, #e09a4d 0 2px, #371c0f 2.5px 5px, transparent 5.5px),
    radial-gradient(circle at 13px calc(100% - 13px), #e09a4d 0 2px, #371c0f 2.5px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #e09a4d 0 2px, #371c0f 2.5px 5px, transparent 5.5px),
    linear-gradient(to bottom, rgba(255,255,255,.07), transparent 18%),
    repeating-linear-gradient(90deg, #664020 0 74px, #523019 74px 148px);
  box-shadow:
    inset 0 0 0 2px #a86535,
    inset 0 0 0 5px #28160c,
    inset 0 -6px 0 rgba(0,0,0,.18),
    7px 9px 0 rgba(0,0,0,.43),
    0 15px 28px rgba(0,0,0,.24);
}
.minecraft-fenster::before,
.minecraft-fenster::after {
  top: -6px;
  width: 27px;
  height: 27px;
  border: 3px solid #111416;
  background:
    linear-gradient(145deg, #979da0 0 18%, #646b6e 19% 48%, #34393c 49% 100%);
  box-shadow: inset 0 0 0 2px #202426, 2px 3px 0 rgba(0,0,0,.34);
}
.minecraft-fenster::before { left: -6px; }
.minecraft-fenster::after { right: -6px; }
.fenster-kopf {
  padding: 11px 14px;
  color: #fff9ef;
  border: 3px solid #111416;
  border-radius: 5px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.12), transparent 20%),
    linear-gradient(#676d70, #41474a 55%, #363b3e 56%);
  box-shadow:
    inset 0 0 0 2px #858b8e,
    inset 0 0 0 4px #2a2f31,
    inset 0 -4px 0 rgba(0,0,0,.18);
  text-shadow: 2px 2px 0 #111416;
}
.status-zeile {
  gap: 18px;
  margin-top: 8px;
  padding: 20px 22px;
  border: 3px solid #111416;
  border-radius: 4px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.035), transparent 35%),
    linear-gradient(#252b2e, #171c1f);
  box-shadow:
    inset 0 0 0 2px #4e565a,
    inset 0 0 26px rgba(0,0,0,.18);
}
.fackel {
  width: 46px;
  height: 46px;
  border: 3px solid #141719;
  border-radius: 4px;
  background:
    linear-gradient(to bottom, #91bd55 0 29%, #6d963f 29% 38%, #785039 38% 100%);
  box-shadow: inset 0 -9px 0 #523624, inset 0 0 0 2px rgba(255,255,255,.06), 3px 4px 0 rgba(0,0,0,.28);
  transform: rotate(45deg) scale(.74);
}

/* Profilseite im selben Stil -------------------------------- */
.profil-grunddaten {
  border: 3px solid #111416;
  border-radius: 4px;
  background: linear-gradient(120deg, #252b2e, #171d20);
  box-shadow: inset 0 0 0 2px #4f575b;
}
.profil-skin-rahmen {
  border: 4px solid #100a06;
  border-radius: 6px;
  background:
    linear-gradient(rgba(255,255,255,.03), rgba(0,0,0,.12)),
    repeating-linear-gradient(90deg, #5d361f 0 48px, #482718 48px 96px);
  box-shadow:
    inset 0 0 0 2px #a76737,
    inset 0 0 0 5px #27160d,
    5px 6px 0 rgba(0,0,0,.39);
}
.profil-rang-zeile {
  border: 3px solid #111416;
  border-radius: 4px;
  background: linear-gradient(#444b4e, #2e3437);
  box-shadow: inset 0 0 0 2px #626a6d;
}

@media (max-width: 680px) {
  .minecraft-nav { top: 14px; }
  .nav-aufhaengung { display: none; }
  .nav-rahmen { padding: 6px; }
  .nav-rahmen::before,
  .nav-rahmen::after { display: none; }
  .profil-bereich { right: 14px; width: 126px; }
  .profil-zugang { width: 88px; height: 88px; }
  .profil-text,
  .account-switcher-zugang,
  .logout-zugang { width: 112px; }
  .profil-text { top: calc(100% + 25px); }
  .account-switcher-zugang { margin-top: 70px; }
  .logout-zugang { margin-top: 42px; }
  .profil-zugang::before { left: 5px; }
  .profil-zugang::after { right: 5px; }
  .account-switcher-zugang::before,
  .logout-zugang::before { left: 10px; }
  .account-switcher-zugang::after,
  .logout-zugang::after { right: 10px; }
}

/* Temporärer UI-Reset: Background und Logo bleiben; die alten Screenshot-UI-Elemente sind entfernt. */
.startseite:not(.profilseite) .startbox {
  padding-bottom: 44px;
}

/* ============================================================
   Indlvarn – mittelalterliche Minecraft-Navigation
   Reine responsive Web-UI ohne eingebettetes Bild.
   ============================================================ */
.indlvarn-nav {
  position: absolute;
  z-index: 80;
  top: 52px;
  left: 50%;
  width: min(1120px, calc(100% - 54px));
  transform: translateX(-50%);
  overflow: visible;
  --nav-wood-dark: #160c07;
  --nav-wood: #5c321a;
  --nav-wood-light: #a76634;
}

.indlvarn-nav-chain {
  position: absolute;
  z-index: 1;
  top: -58px;
  width: 16px;
  height: 62px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 7px 10px at 50% 7px,
      transparent 0 3px,
      #0c0f11 3.5px 5px,
      #858b8e 5.5px 6.5px,
      #24292c 7px 8px,
      transparent 8.5px) 50% 0 / 16px 18px repeat-y;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.56));
}
.indlvarn-nav-chain-left { left: 72px; }
.indlvarn-nav-chain-right { right: 72px; }

.indlvarn-nav-frame {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: stretch;
  min-height: 76px;
  padding: 10px 14px 10px 12px;
  border: 4px solid var(--nav-wood-dark);
  border-radius: 9px;
  background:
    radial-gradient(circle at 13px 13px, #e69a4d 0 2px, #351a0d 2.5px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 13px) 13px, #e69a4d 0 2px, #351a0d 2.5px 5px, transparent 5.5px),
    radial-gradient(circle at 13px calc(100% - 13px), #e69a4d 0 2px, #351a0d 2.5px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #e69a4d 0 2px, #351a0d 2.5px 5px, transparent 5.5px),
    linear-gradient(to bottom, rgba(255,255,255,.10), transparent 18%),
    repeating-linear-gradient(90deg, #6d3d20 0 64px, #583018 64px 128px);
  box-shadow:
    inset 0 0 0 2px #a66333,
    inset 0 0 0 5px #2c180d,
    inset 0 -7px 0 rgba(0,0,0,.22),
    0 5px 0 #0f0906,
    0 12px 22px rgba(0,0,0,.43);
}

.indlvarn-nav-frame::before,
.indlvarn-nav-frame::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -7px;
  bottom: -7px;
  width: 18px;
  pointer-events: none;
  border: 3px solid #0c0f11;
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), transparent 28%),
    linear-gradient(90deg, #202427, #686f72 42%, #33383b 70%, #171a1c);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    2px 3px 0 rgba(0,0,0,.38);
}
.indlvarn-nav-frame::before { left: -11px; border-radius: 7px 2px 2px 7px; }
.indlvarn-nav-frame::after { right: -11px; border-radius: 2px 7px 7px 2px; }

.indlvarn-nav-emblem {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  margin-right: 10px;
  border-right: 3px solid #25130a;
  box-shadow: 2px 0 0 #9a5d31;
}
.indlvarn-nav-emblem-metal {
  display: grid;
  width: 51px;
  height: 51px;
  place-items: center;
  border: 3px solid #101315;
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.20), transparent 26%),
    linear-gradient(145deg, #7f878a, #3b4144 56%, #1f2427);
  box-shadow:
    inset 0 0 0 2px #22272a,
    0 0 0 2px #a56533,
    2px 3px 0 rgba(0,0,0,.42);
  transform: rotate(45deg) scale(.82);
}
.indlvarn-nav-block {
  width: 30px;
  height: 30px;
  border: 2px solid #17110d;
  border-radius: 3px;
  background:
    linear-gradient(135deg, transparent 0 17%, rgba(255,255,255,.14) 18% 30%, transparent 31%),
    linear-gradient(to bottom, #8fc458 0 29%, #68953e 30% 41%, #795039 42% 100%);
  box-shadow:
    inset 0 -5px 0 rgba(0,0,0,.17),
    inset 0 0 0 1px rgba(255,255,255,.08);
  transform: rotate(-45deg);
}

.indlvarn-nav-links {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  border: 4px solid #101315;
  border-radius: 6px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.13), transparent 18%),
    linear-gradient(#575d60, #3c4245 52%, #303538 53%);
  box-shadow:
    inset 0 0 0 2px #858b8e,
    inset 0 0 0 5px #282d30,
    inset 0 -6px 0 rgba(0,0,0,.18),
    2px 3px 0 rgba(0,0,0,.38);
}
.indlvarn-nav-links::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7px;
  border: 1px solid rgba(217,142,69,.48);
  border-radius: 2px;
  pointer-events: none;
}

.indlvarn-nav-links a {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  min-height: 48px;
  padding: 9px 15px;
  color: #fff8ed;
  background: transparent;
  border: 0;
  border-right: 2px solid #202427;
  box-shadow: inset -1px 0 0 rgba(207,139,72,.28);
  font-size: .95rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  text-shadow: 2px 2px 0 #111416;
  transition: background .12s ease, filter .12s ease;
}
.indlvarn-nav-links a:last-child { border-right: 0; box-shadow: none; }
.indlvarn-nav-links a:hover,
.indlvarn-nav-links a:focus-visible {
  background: rgba(255,255,255,.07);
  filter: brightness(1.10);
  outline: none;
}
.indlvarn-nav-links a.aktiv {
  color: #fffdf6;
  background:
    linear-gradient(135deg, rgba(131,177,83,.16), transparent 55%),
    rgba(255,255,255,.035);
}

.indlvarn-nav-toggle {
  position: relative;
  z-index: 2;
  display: none;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff8ed;
  border: 4px solid #101315;
  border-radius: 6px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.13), transparent 18%),
    linear-gradient(#575d60, #3c4245 52%, #303538 53%);
  box-shadow:
    inset 0 0 0 2px #858b8e,
    inset 0 0 0 5px #282d30,
    inset 0 -6px 0 rgba(0,0,0,.18),
    2px 3px 0 rgba(0,0,0,.38);
  font-weight: 900;
  text-shadow: 2px 2px 0 #111416;
  cursor: pointer;
}
.indlvarn-nav-toggle-icon { display: grid; width: 22px; gap: 4px; }
.indlvarn-nav-toggle-icon i {
  display: block;
  height: 3px;
  background: #f4efe8;
  box-shadow: 1px 1px 0 #171a1c;
}

@media (max-width: 980px) {
  .indlvarn-nav { width: min(900px, calc(100% - 34px)); }
  .indlvarn-nav-links a {
    min-width: 72px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: .86rem;
  }
}

@media (max-width: 760px) {
  .indlvarn-nav {
    top: 16px;
    width: calc(100% - 24px);
  }
  .indlvarn-nav-chain { display: none; }
  .indlvarn-nav-frame {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 66px;
    padding: 8px 10px;
  }
  .indlvarn-nav-emblem-metal { width: 43px; height: 43px; }
  .indlvarn-nav-block { width: 25px; height: 25px; }
  .indlvarn-nav-toggle { display: flex; }
  .indlvarn-nav-links {
    position: absolute;
    z-index: 20;
    top: calc(100% + 10px);
    left: 7px;
    right: 7px;
    display: none;
    flex-direction: column;
    padding: 7px;
    overflow: visible;
    border: 4px solid #120b07;
    border-radius: 7px;
    background:
      linear-gradient(to bottom, rgba(255,255,255,.07), transparent 18%),
      repeating-linear-gradient(90deg, #60361d 0 58px, #4c2916 58px 116px);
    box-shadow:
      inset 0 0 0 2px #9f6131,
      inset 0 0 0 5px #29160c,
      6px 8px 0 rgba(0,0,0,.48);
  }
  .indlvarn-nav-links::before { display: none; }
  .indlvarn-nav-links.geoeffnet { display: flex; }
  .indlvarn-nav-links a {
    flex: none;
    min-height: 46px;
    border: 3px solid #101315;
    border-radius: 5px;
    background:
      linear-gradient(to bottom, rgba(255,255,255,.10), transparent 18%),
      linear-gradient(#555b5e, #373d40 54%, #2c3134 55%);
    box-shadow:
      inset 0 0 0 2px #777e81,
      inset 0 0 0 4px #252a2d;
    font-size: .95rem;
  }
}