body {
      margin: 0;
      background: #222;
      color: #fff;
      font-family: system-ui, sans-serif;
      overflow-x: hidden;
    }

  header {
    display: flex;
    flex-wrap: wrap; /* erlaubt Umbruch bei Platzmangel */
    align-items: center;
    gap: 12px; /* Abstand zwischen Toggle und Nav */
    padding: 8px 32px; /* 32px Abstand links/rechts */
    box-sizing: border-box;
    
    /* background: rgb(244 246 248); */
    background:  linear-gradient(35deg, rgb(16 15 16) 0%, rgb(32 31 32) 100%);
    position: sticky;
    top: 0px;
    z-index: 100;
  }
	
  .footer{
    position: fixed;
    display: flex;
    justify-content: center;
    bottom: 0;
    right: 0;
    left:0;
    font-family: monospace;
    color: #888;
    padding: 10px;
    font-size: 10px;
    background:  linear-gradient(35deg, rgb(16 15 16) 0%, rgb(32 31 32) 100%);
  }

  .sortToggleContainer {
    flex: 0 0 auto;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
  }

	.menuBar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* padding: 2rem; */
    /* position: absolute; */
    top: 0px;
    z-index: 100;

    gap: 8px;
    flex: 1 1 auto;

  }

  button {
    background: #333;
    border: none;
    color: #fff;
    padding: 0.5rem 1rem;
    margin: 0.3rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
  }

  button.active {
    background: #0078ff;
  }

	.errorDisplay {
	  display: flex;
      flex-wrap: wrap;
	  justify-content: center;
	  padding: 2rem;
	  font-size: 22px;
	  font-weight: bold;
	}
	
	.errorDisplay.off {
	  display: none;
	}

	#gallery {
	  display: flex;
	  align-items: flex-start;
	  padding: 1rem;
	}

	.column {
	  flex: 1 1 0;
	  min-width: 0;
	}

  .screenshot {
    display: inline-block;
    width: 98%;
    margin: 0;
    padding: 0;
    transform: translateY(var(--offset, 0));
    transition: transform 0.2s;
  z-index: 2;
  }

  /* Ohne reservierte Hoehe sind alle Kacheln vor dem Laden 0px hoch,
     landen alle im Viewport und der Browser zieht sofort saemtliche
     Thumbnails - genau das macht loading="lazy" wirkungslos. */
  .screenshot:not(.loaded) {
    min-height: 48px;
  }

  #sentinel {
    height: 1px;
  }

  #sentinel.off {
    display: none;
  }

  .screenshot:hover {
    transform: scale(1.05);
    z-index: 4;
  }

  .nameDisplay {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 2px;
    background: #222;
  }

  .loading {
    text-align: center;
    color: #888;
    padding: 2rem;
  }

  /* Floating upload button */
  #uploadBtnFloating {
    position: fixed;
    right: 20px;
    bottom: 40px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    background: #0078ff;
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  }

  #uploadBtnFloating:hover {
    background: #005fcc;
  }
	
	/* LOADER*/
	.loader1 {
	  font-size: 24px;
	  font-weight: bold;
	}

	.loader1 .dot {
	  opacity: 0;
	  animation: loader1-animation 1.2s infinite;
	}

	.loader1 .dot1 {
	  animation-delay: 0.5s;
	}

	.loader1 .dot2 {
	  animation-delay: 0.6s;
	}

	.loader1 .dot3 {
	  animation-delay: 0.7s;
	}

	@keyframes loader1-animation {
	  0%,
	  100% {
		opacity: 0;
	  }
	  50% {
		opacity: 1;
	  }
	}

	/* ribbons */
	.ribbon {
	  --f: 6px; /* control the folded part*/
	  --r: 6px; /* control the ribbon shape */
	  --t: -2px; /* the top offset */
	  
	  position: absolute;
	  inset: var(--t) calc(-1*var(--f)) auto auto;
	  padding: 0 10px var(--f) calc(4px + var(--r));
	  clip-path: 
		polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
		  calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
		  var(--r) calc(50% - var(--f)/2));
	  background: #BD1550;
	  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
	  font-size: 10px;
	}