/* pixelify-sans-regular - cyrillic_latin_latin-ext */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/pixelify-sans-v1-cyrillic_latin_latin-ext-regular.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pixelify-sans-500 - cyrillic_latin_latin-ext */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/pixelify-sans-v1-cyrillic_latin_latin-ext-500.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pixelify-sans-600 - cyrillic_latin_latin-ext */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/pixelify-sans-v1-cyrillic_latin_latin-ext-600.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pixelify-sans-700 - cyrillic_latin_latin-ext */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/pixelify-sans-v1-cyrillic_latin_latin-ext-700.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-family: 'ka1';
  /* Name der Schriftart, den Sie später verwenden */
  src: url('fonts/Pixellari.ttf') format('truetype');
  /* Pfad zur .ttf-Datei */
  font-weight: normal;
  /* Gewicht der Schriftart, z.B. normal, bold */
  font-style: normal;
  /* Stil der Schriftart, z.B. normal, italic */
}

/* 
* {
  border: solid red;
} */

html {
  scroll-behavior: smooth;
  /* Manche mobilen Browser respektieren overflow-x:hidden auf body allein
     nicht zuverlässig für Touch-Scrolling/-Panning — deshalb zusätzlich hier. */
  overflow-x: hidden;
}

/* Mauszeiger als Pixel-Tattoomaschine, im selben Stil wie der Überschriften-
   Schreibeffekt. Klickbare Elemente behalten den normalen Zeigefinger-Cursor,
   damit weiterhin klar erkennbar bleibt, was interaktiv ist. */
body {
  cursor: url('images/cursor-tattoo-machine.svg') 16 50, auto;
}

a,
button,
[role="button"],
input,
textarea,
select,
.artistHotspot,
.driveInDot,
.langButton,
.navToggle,
.mapLoadButton {
  cursor: pointer;
}

input[type="text"],
input[type="name"],
input[type="email"],
input[type="phone"],
input[type="date"],
textarea {
  cursor: text;
}

:root {
  --neon-cyan: #00E6F6;
  --neon-pink: #fd16b0;
  --neon-magenta: #FF013C;
  --neon-yellow: #F8F005;
  --neon-purple: #3304a1;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background: #050014 url('images/background.jpg') top center / cover no-repeat fixed;
  color: aliceblue;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100vw;
  position: relative;

}

/* CRT-Scanlines über der ganzen Seite */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom,
      rgba(0, 0, 0, 0.12) 0px,
      rgba(0, 0, 0, 0.12) 1px,
      transparent 1px,
      transparent 3px);
  z-index: 9999;
}

/* Pixelige Notch-Ecken statt runder Ecken, für den Retro-Gaming-Look */
.pixelCorners {
  clip-path: polygon(0 8px,
      8px 8px,
      8px 0,
      calc(100% - 8px) 0,
      calc(100% - 8px) 8px,
      100% 8px,
      100% calc(100% - 8px),
      calc(100% - 8px) calc(100% - 8px),
      calc(100% - 8px) 100%,
      8px 100%,
      8px calc(100% - 8px),
      0 calc(100% - 8px));
}

.hidden {
  display: none !important;
}

.hpField {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.maxWidth {
  max-width: 1920px;
}

* {
  font-family: 'Pixelify Sans', sans-serif;
}

header {
  width: 100vw;
  height: 100vh;
  background-image: url(images/studio3.jpg);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: aliceblue;
  text-align: left;
  position: relative;
  overflow: hidden;
  padding-left: 6vw;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  header {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Abdunkelung von links, damit der Text über dem Studiofoto lesbar bleibt */
header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(5, 0, 20, 0.88) 0%, rgba(5, 0, 20, 0.6) 38%, rgba(5, 0, 20, 0.15) 65%, transparent 85%);
  z-index: 0;
}

/* Schwebende Neon-Pixel-Funken im Header */
/* Fixiertes Feld über der ganzen Seite, in dem die Pixel-Funken schweben */
.pixelSparkField {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.pixelSpark {
  position: absolute;
  bottom: -10px;
  pointer-events: none;
  opacity: 0;
  animation: sparkFloat linear infinite;
}

@keyframes sparkFloat {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  10% {
    opacity: 0.85;
  }

  90% {
    opacity: 0.5;
  }

  100% {
    transform: translateY(-100vh);
    opacity: 0;
  }
}

/* Dezentes Neonschild-Flackern für den Hero-Schriftzug */
.heroFlicker {
  animation: neonFlicker 7s infinite;
}

@keyframes neonFlicker {

  0%,
  19%,
  21%,
  23%,
  54%,
  56%,
  100% {
    opacity: 1;
  }

  20%,
  22%,
  55% {
    opacity: 0.65;
  }
}

@media (prefers-reduced-motion: reduce) {

  .pixelSpark,
  .heroFlicker {
    animation: none;
  }
}

header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22vh;
  /* Sanfter, breiterer Übergang zum nächsten Abschnitt statt einer harten Kante */
  background: linear-gradient(to bottom, rgba(5, 0, 20, 0) 0%, rgba(5, 0, 20, 0.35) 55%, rgba(5, 0, 20, 0.75) 100%);
  z-index: 1;
  pointer-events: none;
}

header .heroLogo,
header .textContainer,
header .button {
  position: relative;
  z-index: 2;
}

header .heroLogo {
  width: clamp(210px, 22vw, 340px);
  margin-bottom: 16px;
  filter: drop-shadow(0 0 20px rgba(0, 230, 246, 0.5));
}

header .textContainer {
  text-align: left;
  max-width: 640px;
  /* Platz für den vollständigen Text von Anfang an reservieren, damit der
     Schreibeffekt das Logo darüber nicht nach oben schiebt. */
  min-height: 200px;
}

@media (max-width: 600px) {
  header .textContainer {
    min-height: 130px;
  }
}

header .button {
  margin-left: 0;
}

header .navbar {
  z-index: 5;
}

.heroText {
  font-family: 'ka1', 'sans-serif';
  color: #00E6F6(0, 1, 2);
  font-size: 50px;
  text-align: center;
  text-shadow:
    -4px -4px 0 #fd16b0,
    4px -4px 0 #fd16b0,
    -4px 4px 0 #fd16b0,
    4px 4px 0 #fd16b0
}

/* Tattoo-Maschinen-Schreibeffekt für Überschriften */
.tattooMachineIcon {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  vertical-align: middle;
  margin-left: 6px;
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}

.tattooMachineIcon svg {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

.isWriting .tattooMachineIcon svg {
  animation: machineBuzz 0.12s steps(2, end) infinite;
}

@keyframes machineBuzz {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(1px, -1px) rotate(-3deg);
  }

  100% {
    transform: translate(-1px, 1px) rotate(3deg);
  }
}

.doneWriting .tattooMachineIcon {
  opacity: 0;
  transition: opacity 0.4s ease 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .isWriting .tattooMachineIcon {
    animation: none;
  }
}

.textContainer {

  border-radius: 30px;
  margin-bottom: 72px;
}

.navbar {
  display: flex;
  gap: 24px;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.45);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  justify-content: center;
  border-bottom: 3px solid var(--neon-cyan);
  box-shadow: 0 0 20px rgba(0, 230, 246, 0.5);
  padding: 14px 0;
}

.navBarContainer {
  display: flex;
  width: 100%;
  align-items: center;
  max-width: 1920px;
  gap: 20px;
}

.logoBig {
  height: 40%;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 20%;

}

.navbar img {
  width: 80px;
  margin-left: 12px;
}

.heroImg {
  width: auto;
  height: 100vh;
}

.links {
  display: flex;
  gap: 36px;
  margin-right: 12px;
}

.links a,
a {
  text-decoration: none;
  color: white;
  font-size: 24px;
}

.links a {
  font-size: 28px;
  font-family: 'ka1', 'Pixelify Sans', sans-serif;
}

.links a:hover {
  filter: drop-shadow(0 0 10px rgba(255, 5, 151, 0.966));
  scale: 1.5;
}

/* Sprachumschalter PL/DE/EN */
.langSwitcher {
  display: flex;
  gap: 6px;
  margin-right: 12px;
}

.langButton {
  background: transparent;
  border: 2px solid var(--neon-cyan);
  color: #fff;
  font-family: 'ka1', 'Pixelify Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.langButton:hover {
  background: rgba(0, 230, 246, 0.2);
}

.langButton.active {
  background: var(--neon-cyan);
  color: #05001a;
}

/* Hamburger-Menü-Button, nur auf schmalen Bildschirmen sichtbar */
.navToggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 34px;
  margin-left: auto;
  margin-right: 12px;
  background: transparent;
  border: 2px solid var(--neon-cyan);
  cursor: pointer;
  padding: 6px;
}

.navToggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--neon-cyan);
  box-shadow: 0 0 6px rgba(0, 230, 246, 0.8);
}

.navToggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.navToggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.navToggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 768px) {
  .navToggle {
    display: flex;
  }

  #mainNav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(5, 0, 20, 0.96);
    border-bottom: 3px solid var(--neon-cyan);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  #mainNav.navOpen {
    max-height: 380px;
    z-index: 10;
  }

  .links {
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-right: 0;
    padding: 12px 0;
  }

  .links a {
    width: 100%;
    padding: 14px 0;
  }

  .links a:hover {
    scale: 1.05;
  }

  .langSwitcher {
    justify-content: center;
    margin: 8px 0 12px;
  }
}



section {
  margin-bottom: 120px;
}

.services {
  width: 100vw;
  color: aliceblue;
}

.containerServiceText {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 48px auto;
  padding: 0 24px;
  max-width: 1100px;
  box-sizing: border-box;
  text-align: center;
}

.containerServiceText h3 {
  max-width: 780px;
  line-height: 1.7;
  font-weight: normal;
}

.containerArtist {
  display: flex;
  flex-direction: column;
  margin: 48px 24px;
}

.servicesList {
  display: flex;
  gap: 80px;
  justify-content: center;
  flex-wrap: wrap;
  text-align: left;
}

/* Autokino: Bilder laufen wie ein Film auf der Leinwand eines echten Drive-in-Fotos */
.driveIn {
  position: relative;
  width: 100%;
  max-width: 1900px;
  margin: 0 auto 60px;
  aspect-ratio: 1915 / 821;
  background-image: url(images/cinema.jpg);
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0, 230, 246, 0.3);
}

.driveInScreen {
  /* Exakt an die weiße Leinwandfläche im cinema.png-Foto angepasst (per
     Pixel-Analyse gemessen), damit Säulen und Autos darunter sichtbar bleiben. */
  position: absolute;
  left: 28.3%;
  right: 28.25%;
  top: 16.2%;
  bottom: 43.7%;
  overflow: hidden;
  background: #000;
  border: 3px solid rgba(0, 230, 246, 0.8);
  box-shadow: inset 0 0 40px rgba(0, 230, 246, 0.3), 0 0 25px rgba(0, 230, 246, 0.5);
}

/* Ein Video läuft auf der Leinwand, komplett sichtbar (kein Zuschneiden).
   Unter der Leinwand kann per Punkt zwischen den 3 Videos gewechselt werden. */
.driveInVideo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

.driveInDots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 35%;
  display: flex;
  justify-content: center;
  gap: 14px;
  z-index: 2;
}

.driveInDot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--neon-cyan);
  background: rgba(5, 0, 20, 0.6);
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.driveInDot:hover {
  box-shadow: 0 0 8px rgba(0, 230, 246, 0.8);
}

.driveInDot.active {
  background: var(--neon-pink);
  border-color: var(--neon-pink);
  box-shadow: 0 0 10px var(--neon-pink);
}

@media (max-width: 600px) {
  /* Auf kleinen Screens fällt das Autokino-Foto komplett weg — es bleibt nur
     das Video (in voller Bildschirmbreite) mit den Punkten drunter, sonst ist
     auf dem kleinen Foto kaum noch etwas vom Video zu erkennen. */
  .driveIn {
    background-image: none;
    aspect-ratio: auto;
    max-width: 100%;
    margin: 0 0 40px;
    box-shadow: none;
    border-radius: 0;
  }

  .driveInScreen {
    /* left/right/top/bottom der Desktop-Regel (in %) wirken bei position:relative
       plötzlich als Verschiebung, statt wie bei position:static ignoriert zu
       werden — deshalb hier explizit zurücksetzen (das hat das Video zuletzt
       nach rechts aus dem Bild geschoben). */
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-left: none;
    border-right: none;
  }

  /* Auf Mobile als Overlay unten auf dem Video statt drunter — zeigt direkt,
     dass man wischen kann, ohne zusätzliche Höhe zu brauchen. */
  .driveInDots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 2;
    margin-top: 0;
  }

  .driveInDot {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  }
}

.artistsSection {
  display: flex;
  flex-direction: column;
  width: 100vw;

}


.artistContainer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 24px;
}

/* Künstler-Karten im "Charakter-Auswahl"-Stil: großes Porträt, Name/Rolle
   immer sichtbar, Bio + Social-Links erst bei Hover/Tap — sonst wirkt die
   Sektion mit 4x Wandtext auf einmal schnell erschlagend. */
.artistCard {
  position: relative;
  width: 340px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #05001a;
  border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 16px rgba(0, 230, 246, 0.35);
  clip-path: polygon(0 10px, 10px 10px, 10px 0, calc(100% - 10px) 0, calc(100% - 10px) 10px, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 10px calc(100% - 10px), 0 calc(100% - 10px));
  transition: box-shadow 0.25s ease, transform 0.3s ease;
  z-index: 1;
}

/* Karte wächst bei Hover/Tap deutlich, damit die Bio ohne Scrollen reinpasst
   — nur auf breiteren Screens, auf Mobile (Karte schon volle Breite) würde
   das Skalieren wieder seitliches Overflow verursachen. */
@media (min-width: 601px) {
  .artistCard:hover,
  .artistCard.isOpen {
    transform: scale(1.28);
    z-index: 5;
  }
}

.artistCard:hover,
.artistCard.isOpen {
  box-shadow: 0 0 26px rgba(0, 230, 246, 0.6);
}

.artistCardToggle {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: radial-gradient(circle at 50% 25%, rgba(0, 230, 246, 0.12), transparent 70%);
  display: block;
  text-align: left;
}

.artistCardImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}

.artistCardBadge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92), transparent);
}

.artistCardName {
  font-family: 'ka1', 'Pixelify Sans', sans-serif;
  font-size: 1.3rem;
  color: var(--neon-cyan);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}

.artistCardRole {
  font-size: 0.8rem;
  color: var(--neon-pink);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.artistCardReveal {
  position: absolute;
  inset: 0;
  background: rgba(5, 0, 20, 0.95);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  overflow-y: auto;
}

.artistCard:hover .artistCardReveal,
.artistCard.isOpen .artistCardReveal {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.artistCardReveal p {
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0;
  color: aliceblue;
}

.linksSocial {

  display: flex;
  width: 40px;
  height: 40px;
  margin: 12px 0;
}

.linksSocial a img {
  margin-right: 12px;
  cursor: pointer;
  width: 40px;
  height: 40px;
}

.linksSocial img:hover {
  filter: drop-shadow(0 0 10px rgba(255, 5, 151, 0.966));
  scale: 1.5;
}

.hidden:nth-child(1) {
  animation: slideLeft 1s ease-in-out;
}

.hidden:nth-child(2) {
  animation: slideRight 1s ease-in-out;
}

.hidden:nth-child(3) {
  animation: slideLeft 2s ease-in-out;
}

.hidden:nth-child(4) {
  animation: slideRight 2s ease-in-out;
}

@keyframes slideLeft {
  from {
    transform: translateX(60px);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-60px);
  }

  to {
    transform: translateX(0);
  }
}

/* translateX war vorher ±100% (= volle Elementbreite) — bei breiten Elementen
   wie den Künstler-Karten hat das die scrollbare Seitenbreite unnötig
   aufgebläht (Grund für horizontales Scrollen auf Mobile). Ein fester,
   kleinerer Versatz sieht optisch fast identisch aus, ohne dieses Problem. */
.hiddenRight {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(60px);
  transition: all 1s;
}

.hiddenLeft {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-60px);
  transition: all 1s;
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}



@media (prefers-reduced-motion: reduce) {
  .hidden {
    transition: none;
  }
}

.gallery {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 60px 0;
}

/* Expanding Cards: schmale Streifen nebeneinander, beim Hover wird eine breiter
   und der Titel dreht sich von vertikal auf horizontal. */
.galleryGrid {
  display: flex;
  gap: 4px;
  height: min(680px, 62vh);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.galleryTile {
  position: relative;
  flex: 1;
  min-width: 50px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: #000;
  border: 2px solid var(--neon-cyan);
  clip-path: polygon(0 12px, 12px 12px, 12px 0, calc(100% - 12px) 0, calc(100% - 12px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 12px), 0 calc(100% - 12px));
  transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: galleryTileIn 0.4s ease both;
}

@keyframes galleryTileIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.galleryTile:hover,
.galleryTile:focus-visible {
  flex: 5;
}

/* Der 3D-Kipp-Effekt wird per JS auf diesen inneren Wrapper angewendet,
   getrennt von der Flex-Aufklapp-Transition der äußeren Karte. */
.galleryTileInner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.15s ease-out;
  will-change: transform;
}

.galleryTile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.65) saturate(0.75);
  transition: filter 0.4s ease;
  pointer-events: none;
}

.galleryTile:hover img,
.galleryTile:focus-visible img {
  filter: brightness(1) saturate(1.1);
}

.galleryTile::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: 0 0 0 rgba(0, 230, 246, 0);
  transition: box-shadow 0.35s ease;
  pointer-events: none;
  z-index: 2;
}

.galleryTile:hover::after,
.galleryTile:focus-visible::after {
  box-shadow: inset 0 0 25px rgba(0, 230, 246, 0.55), 0 0 20px rgba(0, 230, 246, 0.45);
}

.galleryTileLabel {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 14px 10px;
  color: var(--neon-cyan);
  font-family: 'ka1', 'Pixelify Sans', sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-shadow: 0 0 8px rgba(0, 230, 246, 0.8);
  z-index: 3;
  pointer-events: none;
  transition: transform 0.35s ease;
}

.galleryTile:hover .galleryTileLabel,
.galleryTile:focus-visible .galleryTileLabel {
  writing-mode: horizontal-tb;
  transform: rotate(0deg);
}

@media (max-width: 700px) {
  .galleryGrid {
    flex-direction: column;
    height: 72vh;
    padding: 0 16px;
  }

  .galleryTile {
    flex: 1;
    min-width: 0;
    min-height: 0;
    transition: flex 0.4s ease;
  }

  .galleryTile:hover,
  .galleryTile:focus-visible {
    flex: 4;
  }

  .galleryTileLabel {
    writing-mode: horizontal-tb;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .galleryTileInner {
    transition: none;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(2, 0, 10, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

.lightboxImage {
  max-width: 88vw;
  max-height: 82vh;
  border: 3px solid var(--neon-cyan);
  box-shadow: 0 0 50px rgba(0, 230, 246, 0.5);
}

.lightboxClose,
.lightboxPrev,
.lightboxNext {
  position: absolute;
  background: rgba(5, 0, 20, 0.75);
  border: 2px solid var(--neon-cyan);
  color: #fff;
  cursor: pointer;
  font-family: 'ka1', 'Pixelify Sans', sans-serif;
  line-height: 1;
}

.lightboxClose {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 22px;
}

.lightboxPrev,
.lightboxNext {
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  font-size: 30px;
}

.lightboxPrev {
  left: 12px;
}

.lightboxNext {
  right: 12px;
}

.lightboxClose:hover,
.lightboxPrev:hover,
.lightboxNext:hover {
  background: rgba(0, 230, 246, 0.25);
}

@media (max-width: 600px) {

  .lightboxPrev,
  .lightboxNext {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
}

.artistButtons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 50px;
}

/* Gallery-Filter nutzen exakt den Hero-Button-Look (.button), hier nur kompakter */
.artistButton {
  margin: 5px;
  min-width: 90px;
  height: 40px;
  padding: 0 16px;
  font-size: 15px;
}

.artistButton.active {
  background: var(--neon-pink);
  border-color: var(--neon-pink);
}

.bookings {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bookingForm {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  gap: 4px;
}

.formContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 8px 0;
  gap: 4px;
}

.bookingForm input {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid rgba(255, 91, 222, 0.237);
  width: 100%;
}

.bookingForm textarea {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid rgba(255, 91, 222, 0.237);
  width: 100%;
  resize: none;
}

.bookingForm label {
  font-weight: bold;
  font-size: 1.2rem;
  align-self: auto;
  width: 70%;
  margin-bottom: 5px;
}

.artistSelector {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid rgba(255, 91, 222, 0.237);
  width: 50%;
}

/* Bild-Auswahl für den Tätowierer im Buchungsformular */
.artistPicker {
  width: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.artistPickerTitle {
  font-family: 'ka1', 'Pixelify Sans', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 2px;
  text-align: center;
  color: var(--neon-yellow);
  text-shadow: -2px -2px 0 var(--neon-pink), 2px 2px 0 var(--neon-cyan);
}

.artistPickerFrame {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 892 / 1024;
  overflow: hidden;
  border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 16px rgba(0, 230, 246, 0.4);
}

.artistPickerImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.85) saturate(0.9);
  pointer-events: none;
  user-select: none;
}

.artistHotspot {
  position: absolute;
  top: 0;
  height: 100%;
  width: 33.3333%;
  border: none;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.artistHotspot[data-index="0"] { left: 0; }
.artistHotspot[data-index="1"] { left: 33.3333%; }
.artistHotspot[data-index="2"] { left: 66.6667%; }

.artistHotspot::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('images/artistSelectNoKama.jpg');
  background-repeat: no-repeat;
  background-size: 300% 100%;
  filter: brightness(1.35) saturate(1.5) drop-shadow(0 0 10px var(--neon-cyan));
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.artistHotspot[data-index="0"]::before { background-position-x: 0%; }
.artistHotspot[data-index="1"]::before { background-position-x: 50%; }
.artistHotspot[data-index="2"]::before { background-position-x: 100%; }

.artistHotspot::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  pointer-events: none;
}

.artistHotspot:hover::before,
.artistHotspot:focus-visible::before,
.artistHotspot.isSelected::before {
  opacity: 1;
}

.artistHotspot:hover::after,
.artistHotspot:focus-visible::after {
  border-color: var(--neon-cyan);
}

.artistHotspot.isSelected::after {
  border-color: var(--neon-pink);
  box-shadow: 0 0 14px var(--neon-pink);
}

/* Quest-Formular: erscheint erst, wenn ein buchbarer Künstler ausgewählt wurde */
.questFormWrapper {
  width: 96%;
  max-width: 1400px;
  margin: 40px auto 0;
  display: flex;
  justify-content: center;
}

.questOpenState {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 28px;
}

@keyframes questReveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.questFormWrapper:not(.hidden) {
  animation: questReveal 0.5s ease;
}

.questFrame {
  flex: 1 1 600px;
  min-width: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 52px;
  border-image-source: url('images/quest.png');
  border-image-slice: 320;
  border-image-width: 52px;
  border-image-repeat: stretch;
  background: rgba(5, 0, 18, 0.9);
  padding: 12px 28px 30px;
}

.questLabel {
  display: table;
  margin: 0 auto 14px;
  font-family: 'ka1', 'Pixelify Sans', sans-serif;
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: 4px;
  color: #05001a;
  background: var(--neon-yellow);
  padding: 4px 20px;
  text-transform: uppercase;
}

.questTitle {
  text-align: center;
  font-family: 'ka1', 'Pixelify Sans', sans-serif;
  font-size: 1.4rem;
  color: var(--neon-cyan);
  text-shadow: -2px -2px 0 var(--neon-pink), 2px 2px 0 rgba(0, 0, 0, 0.6);
  max-width: 100%;
  margin: 0 0 20px;
  line-height: 1.5;
}

.questAgeNotice {
  align-self: center;
  text-align: center;
  max-width: 90%;
  color: var(--neon-magenta);
  font-size: 0.9rem;
  font-weight: bold;
  border: 1px solid var(--neon-magenta);
  padding: 8px 16px;
  margin: 0 0 20px;
  background: rgba(255, 1, 60, 0.08);
}

.questReward {
  align-self: center;
  text-align: center;
  max-width: 90%;
  color: var(--neon-yellow);
  font-size: 0.95rem;
  border: 1px dashed var(--neon-yellow);
  padding: 10px 16px;
  margin: 14px 0 6px;
  background: rgba(0, 0, 0, 0.35);
}

.questGiver {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Zeigt den ausgewählten Künstler aus dem freigestellten Gruppenbild
   (artistSelect_cutout.webp, Hintergrund per rembg entfernt), per CSS-Slicing
   (gleiche Technik wie .artistHotspot::before). Kris schaut im Quellbild nach
   links und wird deshalb gespiegelt, damit er wie die anderen zur rechts
   danebenstehenden Quest-Box blickt. */
.questGiverPortrait {
  height: clamp(380px, 40vw, 700px);
  aspect-ratio: 1189 / 4096;
  background-image: url('images/artistSelect_cutout.webp');
  background-repeat: no-repeat;
  background-size: 400% 100%;
  filter: drop-shadow(0 6px 20px rgba(0, 230, 246, 0.55));
}

.questGiverPortrait[data-artist="artur"] { background-position-x: 33.3333%; }

/* Dominikas volles Bildviertel würde rechts noch ein Deko-Münz-Icon und
   Kris' Schulter/Schuhe zeigen — deshalb hier ein engerer, eigens
   berechneter Ausschnitt statt des Standard-Viertels. */
.questGiverPortrait[data-artist="dominika"] {
  aspect-ratio: 225.5 / 1024;
  background-size: 527.27% 100%;
  background-position-x: 61.71%;
}

.questGiverPortrait[data-artist="kris"] {
  background-position-x: 100%;
  transform: scaleX(-1);
}

/* Kama erscheint nur noch in der "Buchung geschlossen"-Ansicht und braucht
   einen engeren Ausschnitt als die anderen: Arturs Schulter ragt ab
   Bildpixel ~275 in ihr volles Bildviertel hinein. */
.questGiverPortrait.questGiverPortraitLarge[data-artist="kama"] {
  aspect-ratio: 268 / 1024;
  background-size: 443.66% 100%;
  background-position-x: 0%;
}

.questGiverName {
  font-family: 'ka1', 'Pixelify Sans', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 2px;
  color: var(--neon-cyan);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
}

.questGiverBubble {
  position: relative;
  background: rgba(5, 0, 20, 0.9);
  border: 2px solid var(--neon-cyan);
  padding: 12px 16px;
  max-width: 280px;
  font-size: 0.85rem;
  text-align: center;
  box-shadow: 0 0 14px rgba(0, 230, 246, 0.3);
  margin-bottom: 4px;
}

.questGiverBubble::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--neon-cyan);
}

.questGiverBubble p {
  margin: 0;
}

/* Ersetzt das Quest-Formular komplett, wenn der ausgewählte Künstler
   aktuell keine Buchungen annimmt: statt der Felder nur ein Hinweistext
   und Kama mittig darunter. */
.questClosedNotice {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.questClosedText {
  font-family: 'ka1', 'Pixelify Sans', sans-serif;
  font-size: 1.3rem;
  color: var(--neon-cyan);
  text-shadow: -2px -2px 0 var(--neon-pink), 2px 2px 0 rgba(0, 0, 0, 0.6);
  line-height: 1.6;
  margin: 0;
}

.questGiverPortraitLarge {
  height: clamp(280px, 40vw, 480px);
}

@media (max-width: 900px) {
  .questOpenState {
    flex-direction: column;
    align-items: center;
  }

  .questGiverPortrait {
    height: clamp(300px, 68vw, 480px);
  }
}

@media (max-width: 768px) {
  .questFrame {
    border-width: 26px;
    border-image-width: 26px;
    padding: 8px 14px 20px;
  }
}

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Google Maps wird erst nach Klick geladen (kein Kontakt zu Google-Servern
   und keine Cookies vorher) — statt eines Cookie-Banners reicht deshalb ein
   einfacher Platzhalter mit Hinweistext. */
.mapConsent {
  position: relative;
  width: 96%;
  max-width: 1500px;
  aspect-ratio: 16 / 11;
  margin: 30px auto 0;
  overflow: hidden;
  border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 16px rgba(0, 230, 246, 0.4);
  background: #05001a;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
}

.mapPlaceholderGrid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 230, 246, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 230, 246, 0.15) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.6;
}

.mapPlaceholderPin {
  position: relative;
  font-size: 3rem;
  margin: 0;
  filter: drop-shadow(0 0 10px var(--neon-pink));
}

.mapLoadButton {
  position: relative;
}

.mapConsentNote {
  position: relative;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  max-width: 80%;
  margin: 0;
}

.mapConsent.mapLoaded {
  padding: 0;
  display: block;
}

.mapConsent iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

footer[role="contentinfo"] {
  /* 100% statt 100vw: body zentriert seine Kinder (display:flex; align-items:center),
     100vw ist aber breiter als body's tatsächliche Breite, sobald eine Scrollbar
     da ist (vw zählt die Scrollbar mit) — dadurch wurde der Footer beidseitig
     leicht abgeschnitten und wirkte rechts schmaler.
     Die Hintergrundfarbe sitzt bewusst hier (statt auf .footer), damit der
     Balken auch auf sehr breiten Bildschirmen über die volle Länge geht —
     .footer selbst deckelt nur den INHALT auf eine lesbare Breite. */
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.footer {
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 4vw;
  height: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20%;
}

footer img {
  height: 100%;
}

.footerSocial {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 50%;
}


.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  width: auto;
  padding: 0 26px;
  height: 60px;
  font-size: 20px;
  background: #3304a1;
  border: 2px solid var(--neon-cyan);
  color: #fff;
  letter-spacing: 3px;
  white-space: nowrap;
  box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.6);
  outline: transparent;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: 0;
  clip-path: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px));
}

.button:after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);

  content: 'ALTERNATE TEXT';
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
  clip-path: var(--slice-0);
}

.button:hover:after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}

.button:hover {
  transform: scale(1.1);
}

.btn-disabled {
  pointer-events: none;
  background-color: #555;
}

.btn-disabled:hover {
  transform: none;
}

.bookingInfo {
  text-align: center;
}
.fileUpload {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid rgba(255, 91, 222, 0.237);
  width: 100%;
}

/* Liste der bereits ausgewählten Anhänge (sammelt sich über mehrere
   Dateiauswahl-Durchgänge, statt sie wie das native Input zu ersetzen) */
.fileUploadList {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fileUploadList li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(0, 230, 246, 0.08);
  border: 1px solid rgba(0, 230, 246, 0.4);
  padding: 6px 10px;
  font-size: 0.85rem;
}

.fileUploadRemove {
  background: transparent;
  border: 1px solid var(--neon-pink);
  color: var(--neon-pink);
  width: 22px;
  height: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1rem;
}

.fileUploadRemove:hover {
  background: var(--neon-pink);
  color: #05001a;
}

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }

  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }

  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }

  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }

  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }

  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }

  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }

  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }

  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }

  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }

  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}

@media (min-width: 768px) {
  .button {
    min-width: 200px;
    height: 66px;
    padding: 0 32px;
  }
}

@media (max-width: 900px) {
  .bookingForm {
    width: 95%;
  }
}

@media (max-width: 600px) {
  .heroText {
    font-size: 32px;
  }

  .artistCard {
    width: 100%;
    max-width: 340px;
  }

  /* Kein horizontaler Versatz mehr beim Einblenden auf Mobile — jede
     Verschiebung, egal wie klein, kann bei voller Kartenbreite zu seitlichem
     Overflow führen. Fade/Blur allein reicht als Effekt völlig aus. */
  .hiddenRight,
  .hiddenLeft {
    transform: none;
  }

  .galleryControls button {
    font-size: 20px;
  }

  .footer {
    gap: 0;
    flex-direction: column;
    height: auto;
    padding: 20px 4vw;
    text-align: center;
  }

  .footer img {
    height: 70px;
  }

  .footerSocial {
    width: 100%;
    align-items: center;
    gap: 10px;
  }
}

@media (max-width: 450px) {
  .footerLegal {
    font-size: 12px;
  }

  .servicesList {
    display: block;
    gap: 20%;
  }

  .galleryControls button {
    font-size: 16px;
  }

  .footerCopyright {
    font-size: 12px;
  }
}

/* Rechtstext-Seite (Datenschutz/Impressum) - bewusst ruhiger und gut lesbar */
.legalPage {
  display: block;
  background: #0a0420;
  color: #e6e6f0;
  min-height: 100vh;
  padding: 80px 24px 60px;
  box-sizing: border-box;
}

.legalLangSwitcher {
  position: fixed;
  top: 16px;
  right: 16px;
  margin: 0;
  z-index: 10;
}

.legalBackLink {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--neon-cyan);
  font-family: 'Pixelify Sans', sans-serif;
}

.legalContent {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

.legalContent h1 {
  font-family: 'ka1', 'Pixelify Sans', sans-serif;
  color: var(--neon-cyan);
  text-shadow: -2px -2px 0 var(--neon-pink), 2px -2px 0 var(--neon-pink), -2px 2px 0 var(--neon-pink), 2px 2px 0 var(--neon-pink);
  margin-top: 48px;
}

.legalContent h2 {
  color: var(--neon-pink);
  margin-top: 36px;
}

.legalContent h3 {
  color: var(--neon-cyan);
  margin-top: 28px;
}

.legalContent h4 {
  margin-top: 20px;
}

.legalContent a {
  color: var(--neon-cyan);
}

@media (max-width: 600px) {
  .legalPage {
    padding: 70px 16px 40px;
  }
}

/* ---------- Admin-Bereich ---------- */

.adminPage {
  min-height: 100vh;
  width: 100%;
  align-items: stretch;
  padding: 40px 24px 80px;
  box-sizing: border-box;
}

.adminLoginWrap {
  max-width: 380px;
  margin: 15vh auto 0;
  text-align: center;
}

.adminLoginForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.adminLoginForm input {
  padding: 12px;
  border-radius: 5px;
  border: 1px solid rgba(0, 230, 246, 0.4);
  background: rgba(5, 0, 20, 0.6);
  color: #fff;
}

.adminLoginError {
  color: var(--neon-magenta);
  min-height: 1.2em;
  margin-top: 12px;
}

.adminDashboard {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.adminTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 12px;
}

.adminSection {
  margin-bottom: 48px;
  padding: 20px;
  border: 1px solid rgba(0, 230, 246, 0.3);
  background: rgba(5, 0, 20, 0.5);
}

.adminSection h2 {
  color: var(--neon-cyan);
  margin-top: 0;
}

.adminHint {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  margin-top: -8px;
}

.adminStatusRow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.adminStatusRow .button {
  height: 40px;
  min-width: auto;
  font-size: 14px;
  padding: 0 16px;
}

.adminGalleryGroup {
  margin-bottom: 28px;
}

.adminGalleryGroup h3 {
  color: var(--neon-pink);
  margin-bottom: 10px;
}

.adminMediaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.adminMediaTile {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid rgba(0, 230, 246, 0.4);
  background: #000;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}

.adminMediaThumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.adminMediaVideoPlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 230, 246, 0.08);
  color: var(--neon-cyan);
  font-size: 2rem;
}

.adminMediaLabel {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 6px;
  pointer-events: none;
}

.adminMediaOverlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: var(--neon-cyan);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.adminMediaTile:hover .adminMediaOverlay,
.adminMediaTile:focus-visible .adminMediaOverlay {
  opacity: 1;
}

.adminMediaTileBusy {
  opacity: 0.5;
  pointer-events: none;
}

.adminUploadToast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(5, 0, 20, 0.95);
  border: 1px solid var(--neon-cyan);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
}

.adminUploadToastError {
  border-color: var(--neon-magenta);
  color: var(--neon-magenta);
}