.wrapper {
	gap:10px;
    padding:55px 10px;
}
.beitrag-media {
    overflow:scroll;
	 scroll-snap-type: x mandatory;
	 scroll-padding-left:15px;
     cursor:grab;
     user-select: none;
     display:flex;
     gap:10px;
}
#menu-bg {
    display:none;
    width:100%;
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    background-color:rgba(0,0,0,0.8);
    /*backdrop-filter: blur(1px) grayscale(100%);*/
}
#mbx.page-loading {
    background-color:rgba(0,0,0,0.8);
    /*backdrop-filter: blur(1px) grayscale(100%);*/
	
}
#login-button::before, #login-button-modal::before {
    content: "Login";
}
#forgot-button-modal::before {
    content:"Reset";
}
#register-button-modal::before {
    content: "Registrieren";
}
#feedback-button-modal::before {
    content:"Senden";
}
#login-button.button-loading::before, #login-button-modal.button-loading::before, #register-button-modal.button-loading::before, #feedback-button-modal.button-loading::before, #forgot-button-modal.button-loading::before, .antwort-plus-loading::before {
    content: url("../images/loading.svg");
    display:block;
    width: 40px;
    margin: 0px auto;
}
#menu-container.show-menu #menu-bg {
    display:block
}
#menu-container.show-menu #menu-links {
    transform:none
}
#mbx {
    background-color:rgba(0,0,0,0.8);
    /*backdrop-filter: blur(1px) grayscale(100%);*/
}
.beitrag-media::-webkit-scrollbar, #mbx::-webkit-scrollbar {
  display: none;
}
.dummyimage {
    background:rgba(36,36,36,1);
}
.seitenleiste .related-box.dummyimage {
height:350px
}
.related-post-image {
    background:#333333;
}
.related-box.dummyimage {
    height:200px;
}
.related-item {
    padding:15px;
}
.related-item:hover {
    background:rgba(255,255,255,0.05);
    cursor:pointer
}
.related-item a {
    text-decoration:none;
}
.main-post .kommentar-antwort {
    display:none;
}
.new-post .post-options {
    display:none;
}
.aktuelle-trends {
    position:relative;
    gap:10px;
    margin:0px;
}
.aktuelle-trends .related-box {
    width:calc(50% - 5px);
    margin:0px;
}
.superscroll {
    position:absolute;
    bottom:0px;
}

.posts_container {
    max-width:1000px;
    width:100%;
}

.posts * {
    font-family: sans-serif;
}

.keine-antworten .kommentar-antwort {
    display:none;
}

input, textarea {
    background:transparent;
    color:#ececec
}
.beitrag .new-post-input {
    width: 100%;
display: block;
background: rgba(255, 255, 255, 0.03);
border-radius: 15px;
margin: 0px -1px 10px 0px;
padding: 10px;
box-sizing: border-box;
height: 80px;
}


  .pulsating-circle-up:before {
    content: '';
    position: absolute;
    top:0px;
    right:0px;
    display: block;
    width: 35px;
    height: 35px;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: rgb(43, 149, 43);
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1);
	  opacity:0;
  }


  .pulsating-circle-down:after {
    content: '';
    position: absolute;
    left:0px;
    top:0px;
    display: block;
    width: 35px;
    height: 35px;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: rgb(182, 16, 16);
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1);
	  opacity:0;
  }

  .content-text[contenteditable="true"] {
    background:white;
    color:#444444;
    border-radius:5px;
}

@keyframes pulse-ring {
  0% {
	  opacity:1;
    transform: scale(.5);
  }
	80% {
	    transform: scale(1.5);	
	} 
	100% {
    opacity: 0;
  }
}

@media screen and (max-width: 800px) {
    .wrapper {
        padding:55px 0px
    }
    .aktuelle-trends .related-box, .antwort-preview-section .related-box {
        width: 100%;
    }
}

#tiktok {
    position:absolute;
    background:#333333;
    top:60px;
    width: 350px;
    height:1000px;
    border:0px;
    border-radius:10px
}
.beitrag #tiktok {
    position:relative;
    top:0px;
}

#instagram {
    position:absolute;
    background:#333333; 
    height:1000px; 
    border-radius: 10px;
    display: block;  
    width:100%;
    max-width: 500px;
    top: 60px;
    border:0px
}
.beitrag #instagram {
    position:relative;
    top:0px
}
#youtube {
    max-width:1000px;
    background:#333333
}
.beitrag #youtube {
    aspect-ratio: 2/1;
    margin:0px;
    width:100%;
    max-width:none;
    animation:none
}

.modal-new .beitrag {
    padding:0px;
    background:transparent;
    box-shadow: none;
    margin-bottom:20px;
}

.modal-new .beitrag #post-bilder {
    border:2px dashed #555;
    border-radius:20px;
}
.modal-new .beitrag .save-new-post {
    margin-bottom:15px;
}

.modal-new .beitrag input, .modal-new .beitrag textarea {
    margin:0px;
    border-radius:20px;
    font: 15px/18px Arial;
    letter-spacing: 0px;
    field-sizing:content;
    
}
.profil-kopf {
    margin:30px 0px;
}
.profil-modal {
    padding:15px;
}
#myMediaImage {
margin:0px;
border-radius:15px;
}

.communityBanner {
   padding:0px;
   width:auto;
}
.communityBanner a {
    display: block; 
    backdrop-filter: blur(50px); 
    padding: 15px;
    border-radius: 20px 20px 0px 0px;
}
pre {
    white-space: pre-wrap;
}
.modal-new button.thumbs {
    width:auto;
    padding:0px;
}
.trending-text .snippet {
    color:rgb(201, 201, 201);
}
.trending-text .title {
    font-size:17px;
}
.aktuelle-trends .related-box {
    padding:15px;
}
.community-link a {
    color:white;
    border-radius:10px;
    padding:3px 8px;
    font-size:12px;
}
.community-link {
    margin-bottom:5px;
}
.thumbs.up:hover:after {
    background:rgb(80, 142, 63);
    color:rgba(255,255,255,0.7);
}
.thumbs.down:hover:before {
    background:rgb(170, 66, 66);
    color:rgba(255,255,255,0.7);
}
.kommentar-antwort:hover:before {
    background:rgb(66, 101, 170);
    color:rgba(255,255,255,0.7);
}
.thumbs.up.pulsating-circle-up:after {
    background:rgb(80, 142, 63);
    color:rgba(255,255,255,0.7);
}
.thumbs.down.pulsating-circle-down:before {
    background:rgb(170, 66, 66);
    color:rgba(255,255,255,0.7);
}
:root {
    --pos-color: rgb(80, 142, 63);
    --neg-color: rgb(170, 66, 66);
	--action-color:rgb(160,160,160);
	--box-background:white;
	--box-shadow:0px 1.6px 3.6px rgba(0,0,0,0.08), 0px 0px 2.9px rgba(0,0,0,0.05);
	--box-radius:20px;
	--box-margin:10px;
	--box-padding:15px;
}
.aktuelle-trends .related-box:hover {
    transform: scale(1.02);
    filter: brightness(120%);
}


.shimmer-button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  z-index: 1;
}


.shimmer-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  transform: skewX(-5deg);
  transition: left 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
}
.shimmer-button::after {
    display:inline-block;
      transition: transform 0.5s ease;
}
.shimmer-button:hover:after {
    transform:rotate(360deg);
}

.shimmer-button:hover,
.shimmer-button:focus-visible {
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  outline: none;
  transform: scale(1.05);
  filter:brightness(1.2);
  /*box-shadow: 0 0 20px rgb(136, 175, 69);*/
}

.shimmer-button:hover::before,
.shimmer-button:focus-visible::before {
  left: 125%;
}

.button-antwort-plus-glow {
  animation: pulse-ap 2s linear infinite;
}

@keyframes pulse-ap {
  0% {
  }
	50% {
        filter:brightness(1.2);
        box-shadow: 0 0 20px rgb(136, 175, 69);  
        transform:scale(1.02);

	} 
	100% {
  }
}

#kommentar:hover, #kommentar:focus {
 filter:brightness(1.2);   
}
.browse {
    max-width:1100px;
}
.browse .content_main {

    width:auto;

}
.browse .seitenleiste {
    display:none;
}
#info {
    width:0px;
    height:0px;
}