:root {
	 --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);
	 --discord-primary: #ffffff;
	 --discord-accent: #000000;
	 --discord-background: #36393f;
	 --discord-surface: #2f3136;
	 --discord-card: #18191c;
	 --discord-text-primary: #ffffff;
	 --discord-text-secondary: #b9bbbe;
	 --discord-text-muted: #72767d;
}

 a, button, div, input, label, select, span, strong, textarea {
	 outline: 0;
}
 a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
	 margin: 0;
	 padding: 0;
	 border: 0;
	 font-weight: inherit;
	 font-style: inherit;
	 font-family: inherit;
	 font-size: 100%;
	 vertical-align: baseline;
}
 div {
	 display: block;
}
 body {
	 margin: 0;
	 background: #2f3136;
	 min-height: 100vh;
	 display: grid;
	 place-items: center;
	 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	 text-rendering: optimizeLegibility;
}
 .profile {
	 width: 350px;
	 border-radius: 8px;
	 overflow: hidden;
	 max-height: calc(100vh - 20px);
	 box-shadow: var(--elevation-high);
	 background: #18191c;
	 padding-bottom: 1rem;
	 position: relative;
	 display: flex;
	 flex-direction: column;
}
 .banner {
	 background: url("images/banner.gif");
	 width: inherit;
	 height: 120px;
	 position: absolute;
	 cursor: pointer;
	 background-repeat: no-repeat;
	 background-size: cover;
}
 .banner .change-banner {
	 pointer-events: none;
	 visibility: hidden;
	 color: white;
	 font-family: inherit;
	 text-align: center;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 vertical-align: middle;
	 position: absolute;
	 inset: 0;
}
 .banner:hover {
	 box-shadow: inset 0 0 120px #000;
}
 .banner:hover .change-banner {
	 visibility: visible;
}
 .avatar {
	 pointer-events: all;
	 z-index: 101;
	 border-radius: 50%;
	 width: 80px;
	 height: 80px;
	 background: url("images/profile.gif");
	 background-size: cover;
	 background-position: center;
	 border: 6px solid #18191c;
	 cursor: pointer;
}
 .avatar__wrapper {
	 z-index: 102;
	 position: absolute;
	 position: relative;
	 top: 75px;
	 left: 16px;
	 overflow: hidden;
	 pointer-events: none;
}
 .avatar .change-avatar {
	 visibility: hidden;
	 max-width: 90px;
	 font-family: inherit;
	 font-size: 10px;
	 box-sizing: border-box;
	 font-weight: 700;
	 text-transform: uppercase;
	 line-height: 12px;
	 text-align: center;
	 white-space: pre;
	 position: absolute;
	 inset: 0;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 pointer-events: none;
	 color: white;
}
 .avatar:hover {
	 box-shadow: inset 0 0 120px #000;
}
 .avatar:hover .change-avatar {
	 visibility: visible;
}
 .status-icon {
	 position: relative;
	 width: 16px;
	 height: 16px;
	 float: right;
	 top: 55px;
	 border-radius: 50%;
	 border: 6px solid #18191c;
	 background: #18191c;
	 cursor: pointer;
	 pointer-events: none;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}
 
 .status-icon img {
	 width: 16px;
	 height: 16px;
	 border-radius: 50%;
}
 .headerTop {
	 padding-bottom: 12px;
	 flex-shrink: 0;
	 padding: 90px 16px 16px;
	 overflow: hidden;
	 position: relative;
	 pointer-events: none;
}
 .tag-row {
	 display: flex;
	 align-items: center;
	 gap: 8px;
	 position: relative;
}
 
 .badges {
	 display: flex;
	 align-items: center;
	 gap: 2px;
	 margin-left: 8px;
}
 .headerTop .badges .badge {
	 cursor: pointer;
	 pointer-events: all;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}
 .headerTop .badges .badge img {
	 width: 18px;
	 height: 18px;
	 object-fit: contain;
	 border-radius: 2px;
}
 .headerTop .headerText {
	 pointer-events: all;
	 margin-top: 8px;
}
 
 .username-section {
	 display: flex;
	 flex-direction: column;
	 align-items: flex-start;
	 gap: 4px;
	 margin-bottom: 12px;
	 position: relative;
}
 
 .nickname {
	 font-size: 20px;
	 font-weight: 700;
	 color: var(--discord-text-primary);
}
 
 .username-tag {
	 font-size: 14px;
	 color: var(--discord-text-secondary);
}
 
 .server-tag-icon {
	 width: 16px;
	 height: 16px;
	 vertical-align: middle;
	 margin: 0 2px;
}
 
 .server-tag {
	 font-size: 14px;
	 color: #b9bbbe;
	 margin-left: auto;
}
 
 .playing-section {
	 margin-bottom: 12px;
}
 
 .playing-card {
	 background: #2f3136;
	 border-radius: 4px;
	 padding: 8px;
	 display: flex;
	 align-items: center;
	 gap: 8px;
}
 
 .playing-icon {
	 background: #1db954;
	 color: white;
	 width: 32px;
	 height: 32px;
	 border-radius: 4px;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 font-size: 16px;
}
 
 .playing-content {
	 flex: 1;
}
 
 .playing-title {
	 font-size: 14px;
	 font-weight: 600;
	 color: #ffffff;
	 margin-bottom: 2px;
}
 
 .playing-description {
	 font-size: 12px;
	 color: #b9bbbe;
	 margin-bottom: 2px;
}
 
 .playing-artist {
	 font-size: 12px;
	 color: #b9bbbe;
	 margin-bottom: 2px;
}
 
.spotify-card {
	background: #2f3136;
	border-radius: 8px;
	padding: 8px;
	width: calc(100% - 40px); /* macht die Box schmaler */
	margin: 8px auto;         /* zentriert mit Abstand */
	color: #fff;
	font-size: 14px;
}
   
 .spotify-header {
	 display: flex;
	 align-items: center;
	 gap: 8px;
	 margin-bottom: 8px;
}
 
 .spotify-title {
	 font-size: 12px;
	 color: #dcddde;
	 font-weight: 500;
}
 
 .spotify-icon {
	 font-size: 16px;
	 color: #1db954;
}
 
 .spotify-menu {
	 margin-left: auto;
	 font-size: 16px;
	 color: #b9bbbe;
}
 
 .spotify-content {
	 display: flex;
	 gap: 12px;
}
 
 .album-cover {
	 width: 45px;
	 height: 45px;
	 border-radius: 6px;
	 overflow: hidden;
	 flex-shrink: 0;
}
 
 .album-cover img {
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
}
 
 .track-info {
	 flex: 1;
	 display: flex;
	 flex-direction: column;
	 justify-content: space-between;
}
 
 .song-title {
	 font-weight: bold;
	 font-size: 13px;
	 color: #fff;
	 white-space: nowrap;
	 overflow: hidden;
	 text-overflow: ellipsis;
	 margin-bottom: 4px;
}
 
 .artist {
	 color: #b9bbbe;
	 font-size: 11px;
	 margin-bottom: 6px;
}
 
 .progress-container {
	 display: flex;
	 align-items: center;
	 gap: 8px;
}
 
 .progress-bar {
	 margin-top: 8px;
	 height: 6px;
	 background: #4f545c;
	 border-radius: 4px;
	 overflow: hidden;
}
 
 .progress {
	 width: 25%;
	 height: 100%;
	 background: #1db954;
}
 
 .time {
	 display: flex;
	 justify-content: space-between;
	 font-size: 11px;
	 color: #b9bbbe;
	 margin-top: 4px;
}
 
 .playing-file {
	 font-size: 12px;
	 color: #b9bbbe;
	 margin-bottom: 2px;
}
 
 .playing-time {
	 font-size: 12px;
	 color: #b9bbbe;
}
 
 .custom-badge {
	 background: linear-gradient(45deg, #5865f2, #f04747);
	 border-radius: 12px;
	 padding: 4px 8px;
	 margin-bottom: 12px;
	 display: inline-block;
}
 
 .badge-text {
	 font-size: 12px;
	 color: #ffffff;
	 font-weight: 500;
}
 
 .additional-info {
	 display: flex;
	 align-items: center;
	 gap: 8px;
	 margin-bottom: 16px;
}
 
 .info-icon {
	 font-size: 16px;
}
 
 .info-text {
	 font-size: 14px;
	 color: #b9bbbe;
}
 
 .add-button {
	 background: #2f3136;
	 border: none;
	 color: #b9bbbe;
	 padding: 4px 8px;
	 border-radius: 4px;
	 font-size: 12px;
	 cursor: pointer;
}
 
 .add-button:hover {
	 background: #40444b;
}
 
 .edit-profile {
	 padding: 16px;
	 display: flex;
	 justify-content: center;
}
 
 .edit-button {
	 background: #2f3136;
	 border: none;
	 color: #ffffff;
	 padding: 12px 24px;
	 border-radius: 4px;
	 font-size: 14px;
	 font-weight: 500;
	 cursor: pointer;
	 display: flex;
	 align-items: center;
	 gap: 8px;
	 width: 100%;
	 justify-content: center;
}
 
 .edit-button:hover {
	 background: #40444b;
}
 
 .edit-icon {
	 font-size: 16px;
}
 
 .spotify-section {
	 margin-bottom: 12px;
}
 
 .playing-card {
	 background: #2f3136;
	 border-radius: 4px;
	 padding: 8px;
	 display: flex;
	 align-items: center;
	 gap: 8px;
}
 
 .spotify-header {
	 display: flex;
	 align-items: center;
	 gap: 8px;
	 margin-bottom: 8px;
}
 
 .spotify-title {
	 font-size: 12px;
	 color: #4f545c;
	 font-weight: 500;
}
 
 .spotify-logo {
	 font-size: 16px;
}
 
 .spotify-menu {
	 margin-left: auto;
	 font-size: 16px;
	 color: #4f545c;
}
 
 .spotify-content {
	 display: flex;
	 gap: 12px;
}
 
 .album-art {
	 width: 60px;
	 height: 60px;
	 border-radius: 4px;
	 overflow: hidden;
	 flex-shrink: 0;
}
 
 .album-art img {
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
}
 
 .track-info {
	 flex: 1;
	 display: flex;
	 flex-direction: column;
	 justify-content: space-between;
}
 
 .track-title {
	 font-size: 14px;
	 font-weight: 600;
	 color: #000000;
	 line-height: 1.2;
}
 
 .track-artist {
	 font-size: 12px;
	 color: #4f545c;
	 margin-bottom: 8px;
}
 
 .progress-bar {
	 position: relative;
	 height: 4px;
	 background: #e3e5e8;
	 border-radius: 2px;
	 margin-top: 4px;
}
 
 .progress-fill {
	 position: absolute;
	 left: 0;
	 top: 0;
	 height: 100%;
	 width: 30%;
	 background: #1db954;
	 border-radius: 2px;
}
 
 .time-current {
	 position: absolute;
	 left: 0;
	 top: 8px;
	 font-size: 10px;
	 color: #747f8d;
}
 
 .time-total {
	 position: absolute;
	 right: 0;
	 top: 8px;
	 font-size: 10px;
	 color: #747f8d;
}
 

 .headerTop .headerText .nickname {
	 background: none;
	 border: none;
	 font-family: inherit;
	 margin: 0;
	 padding: 0;
	 word-break: break-all;
	 font-weight: 600;
	 color: white;
	 font-size: 20px;
	 line-height: 24px;
}
 .headerTop .headerText .headerTag {
	 margin-top: 0.3em;
	 line-height: 18px;
	 font-size: 14px;
	 font-weight: 500;
	 display: block;
	 justify-content: flex-start;
	 align-items: center;
	 overflow: hidden;
}
 .headerTop .headerText .headerTag .username {
	 background: none;
	 border: none;
	 margin: 0;
	 padding: 0;
	 font-family: inherit;
	 width: auto;
	 overflow: auto;
	 word-break: break-all;
	 text-overflow: unset;
	 white-space: normal;
	 color: #b9bbbe;
	 vertical-align: top;
	 display: inline;
	 -webkit-box-flex: 0;
	 flex: 0 1 auto;
}
 .headerTop .headerText .headerTag .discrim {
	 color: #b9bbbe;
	 vertical-align: top;
}
 .test {
	 background: red;
	 width: 200px;
	 height: 150px;
}
 [contenteditable] {
	 outline: 0px solid transparent;
}
/* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	 -webkit-appearance: none;
	 margin: 0;
}
/* Firefox */
 input[type=number] {
	 -moz-appearance: textfield;
}
 .discrim-input {
	 color: #b9bbbe;
	 background: none;
	 border: none;
	 margin: 0;
	 padding: 0;
	 font-family: inherit;
}
 p::text2 {
	 color: white;
	 text-shadow: 1px 1px #fff;
}