/* Basislayout */
body {
  margin: 0;
  font-family: monospace;
  background: ivory;
  color: black;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: auto;
  opacity: 91%;
  line-height: 1.3;
  padding-top: 2rem;
}

/* Navigation */
nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: #111;
  padding: 0.75rem 1rem;
  gap: 1rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin-bottom: 0;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease;
  font-family: 'jetbrainsmono';
}

.nav-links a:hover,
.nav-links a.active {
  color: #ff69b4;
}

@media only screen and (min-width: 768px) {
  .nav-links a {
    font-size: 1.5rem;
  }
}

/* Matrix-Wrapper */
.matrix-wrapper {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  position: relative;
  overflow: auto;
  opacity: 89%;
}

/* Spotlight Effekt */
.spotlight {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1000;
  overflow: auto;
}

.spotlight::before {
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 105, 180, 0.1),
    rgba(255, 105, 180, 0.1) 4rem,
    transparent 4rem,
    transparent 8rem
  );
  animation: scrollLines 8s linear infinite;
}

@keyframes scrollLines {
  0% { background-position-y: 0; }
  100% { background-position-y: 8rem; }
}

/* Matrix */
.matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: calc(4 * 5rem);
  height: calc(4 * 5rem);
  max-width: 90vmin;
  max-height: 90vmin;
  position: relative;
  z-index: 2;
  border-radius: 8px;
}

.cell {
  background: #111;
  border: 2px solid #444;
  text-align: center;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: 0.3s;
}

/* Matrix Farben */
.matrix div:nth-child(1),
.matrix div:nth-child(2),
.matrix div:nth-child(3),
.matrix div:nth-child(4) {
  color: #ffe600;
  border-color: #ffe600;
  text-shadow: 0 0 8px #ffe600;
}

.matrix div:nth-child(5),
.matrix div:nth-child(6),
.matrix div:nth-child(7),
.matrix div:nth-child(8),
.matrix div:nth-child(9),
.matrix div:nth-child(10) {
  color: white;
  border-color: #999;
  text-shadow: 0 0 8px #ccc;
}

.matrix div:nth-child(11),
.matrix div:nth-child(12) {
  color: #00ffff;
  border-color: #00ffff;
  text-shadow: 0 0 8px #00ffff;
}

.matrix div:nth-child(13),
.matrix div:nth-child(14),
.matrix div:nth-child(15),
.matrix div:nth-child(16) {
  color: #ff69b4;
  border-color: #ff69b4;
  text-shadow: 0 0 8px #ff69b4;
}

/* Content-Wrapper */
#content {
  max-width: 60vw;
  text-align: center;
  word-wrap: break-word;
}

#content img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Sprachumschalter */
.language-toggle {
  margin-bottom: 2rem;
  text-align: center;
}

.language-toggle button {
  font-size: 1rem;
  padding: 0.5rem 1.5rem;
  margin: 0 0.5rem;
  border: 1px solid white;
  opacity: 0.5;
  color: grey;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.language-toggle button.active {
  background-color: #ff69b4;
  color: black;
  border-color: #ff69b4;
}

/* Main */
main {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  margin-bottom: 2rem;
}

/* Listen */
ul, ol {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* Buttons */
button {
  padding: 0.6rem 1.2rem;
  background: none;
  border: 1px solid white;
  color: white;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  border-radius: 4px;
}

button:hover {
  background: white;
  color: black;
}

button:active,
button.active {
  background: #ff69b4;
  color: black;
  border-color: #ff69b4;
}

/* Schriftarten */
@font-face {
  font-family: 'jetbrainsmono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/JetBrainsMono/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'semplicita';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Semplicita/semplicita.light.woff2') format('woff2');
}

/* Galerie */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  padding: 2rem;
}

.gallery figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-height: 320px;
  position: relative;
  border-radius: 12px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.gallery figure:hover {
  transform: scale(1.05) translateY(-4px);
  z-index: 2;
  filter: brightness(1.1) contrast(1.05);
}

.gallery figure::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 2px
  );
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gallery figure:hover::after {
  opacity: 1;
  animation: glitch 0.3s infinite;
}

.gallery img {
  width: 100%;
  height: 300px;
  border: 2px solid white;
  object-fit: contain;
  cursor: pointer;
  background: #fffff8;
  border-radius: 8px;
}

.gallery figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: grey;
  text-align: center;
}

@keyframes glitch {
  0% { transform: translate(0, 0); opacity: 0.1; }
  20% { transform: translate(-1px, 1px); opacity: 0.15; }
  40% { transform: translate(1px, -1px); opacity: 0.2; }
  60% { transform: translate(-2px, 2px); opacity: 0.1; }
  80% { transform: translate(2px, -2px); opacity: 0.15; }
  100% { transform: translate(0, 0); opacity: 0.1; }
}

/* Einzelbild z.B. auf Storyseite */
figure.single-image {
  margin: 2rem auto;
  max-width: 600px;
  text-align: center;
}

figure.single-image img {
  width: 100%;
  height: auto;
  border: 2px solid white;
  border-radius: 8px;
}

/* Lightbox und Filter */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  padding: 1rem;
}

.filters select {
  padding: 0.5rem 1rem;
  background: #000;
  color: white;
  border: 1px solid white;
  font-size: 0.9rem;
}

.download-link,
.anfrage-link {
  transition: opacity 0.3s ease;
}

.download-link {
  opacity: 0.5;
}
.download-link:hover {
  opacity: 1;
}

.anfrage-link {
  opacity: 0.9;
}
.anfrage-link:hover {
  opacity: 1;
}

.lightbox-wrapper {
  position: relative;
  text-align: center;
  padding: 1rem;
  height: 64vh;
}

.lightbox-image {
  max-width: 90vw;
  max-height: 100%;
  object-fit: contain;
  display: none;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 2rem auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

h1 {
  padding-top: 0.5rem;
  text-align: center;
}

.image-caption {
  margin-top: 1rem;
  font-size: 1.5rem;
  color: #ccc;
  text-decoration: none;
  font-family: 'semplicita', sans-serif;
  font-weight: 600;
  transition: color 0.3s;
}

img {
  border-radius: 12px !important;
}