:root { 
  --bg: #070a13;          
  --text: #e6e9ef;

  --nebula-a: 120,160,255; /* bläulich */
  --nebula-b: 180,90,255;  /* magenta/violett */
  --nebula-c: 60,220,200;  /* türkis */

  /* Intensitäten */
  --nebula-alpha: .22;
  --nebula-alpha-2: .16;
  --stars-alpha: .10;      /* Sterne (0–.2) */

  --card:#15171c; 
  --text:#e9eef7; 
  --muted:#9aa3b2; 
  --accent:#7aa2ff; 
  --ok:#7bffb0; 
  --warn:#ffb86b; 
}
*{box-sizing:border-box}
html,body{
  margin:0;
  color:var(--text);
  font:16px/1.5 system-ui, Segoe UI, Roboto, Inter, sans-serif;
  min-height:100%;
  background: radial-gradient(1200px 800px at 20% 10%, rgba(255,255,255,.06), transparent 60%),
              radial-gradient(900px 600px at 80% 90%, rgba(255,255,255,.04), transparent 60%),
              radial-gradient(1400px 1000px at 50% -10%, rgba(255,255,255,.05), transparent 55%),
              #070a13; /* fallback */
  background-attachment: fixed, fixed, fixed, fixed; /* ruhiger beim Scrollen */
}

/* Vignette für Tiefe */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 800px at 50% 120%, rgba(0,0,0,.65), transparent 60%),
    radial-gradient(1600px 1200px at -20% -20%, rgba(0,0,0,.55), transparent 60%),
    radial-gradient(1600px 1200px at 120% -20%, rgba(0,0,0,.55), transparent 60%);
  z-index:0;
}

/* Sterne: extrem leichtgewichtiges Punkteraster */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:0;
  opacity:var(--stars-alpha);
  background-image:
    radial-gradient(#ffffff 0.6px, transparent 0.7px);
  background-size: 4px 4px;  /* größer = weniger Punkte */
  background-position: 0 0;
  mix-blend-mode: screen; /* nur aufhellen, bleibt dezent */
}

/* Nebel-Layer */
.space-nebula,
.space-nebula-2{
  position:fixed; inset:-10%;
  z-index:0;
  pointer-events:none;
  filter: blur(40px) saturate(120%);
  opacity:.9;
  will-change: transform, opacity;
}

/* Farbfelder: sanft, transparent, ohne harte Kanten */
.space-nebula{
  background:
    radial-gradient(600px 600px at 20% 35%, rgba(var(--nebula-a), var(--nebula-alpha)), transparent 60%),
    radial-gradient(800px 700px at 75% 65%, rgba(var(--nebula-b), var(--nebula-alpha-2)), transparent 65%),
    radial-gradient(500px 500px at 60% 20%, rgba(var(--nebula-c), .12), transparent 70%);
  animation: nebulaDrift 22s ease-in-out infinite alternate,
             nebulaPulse 9s ease-in-out infinite;
  transform: translateZ(0) scale(1.05) rotate(0.001deg);
}
.space-nebula-2{
  background:
    radial-gradient(700px 700px at 35% 70%, rgba(var(--nebula-b), var(--nebula-alpha)), transparent 65%),
    radial-gradient(600px 600px at 80% 25%, rgba(var(--nebula-a), var(--nebula-alpha-2)), transparent 65%),
    radial-gradient(500px 500px at 10% 15%, rgba(var(--nebula-c), .10), transparent 70%);
  animation: nebulaDrift2 28s ease-in-out infinite alternate,
             nebulaPulse 12s ease-in-out infinite;
  transform: translateZ(0) scale(1.08) rotate(0.001deg);
  opacity:.85;
  mix-blend-mode: screen;
}

/* Animations – nur transform/opacity für beste Performance */
@keyframes nebulaDrift{
  from{ transform: translate3d(-2%, -1%, 0) scale(1.05) rotate(-0.2deg); }
  to  { transform: translate3d( 2%,  1%, 0) scale(1.10) rotate( 0.2deg); }
}
@keyframes nebulaDrift2{
  from{ transform: translate3d( 2%, -2%, 0) scale(1.06) rotate( 0.2deg); }
  to  { transform: translate3d(-2%,  2%, 0) scale(1.02) rotate(-0.2deg); }
}
@keyframes nebulaPulse{
  0%,100%{ opacity:.85; }
  50%    { opacity:1; }
}

/* Bewegungen reduzieren – respektiert Systemeinstellung */
@media (prefers-reduced-motion: reduce){
  .space-nebula, .space-nebula-2{
    animation: none;
    opacity:.9;
  }
}

/* Falls du Container über den Nebeln brauchst: hebe sie an */
.container, .header, .grid, .footer, .modal{
  position: relative;
  z-index: 1;
}
.container{width:100%;margin:0 auto;padding:24px;}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.button{appearance:none;border:none;background:var(--accent);color:#0b0d12;padding:10px 14px;border-radius:12px;font-weight:600;cursor:pointer;transition:.2s}
.button:hover{filter:brightness(1.1)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card{background:var(--card);border-radius:14px;overflow:hidden}
.card img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.muted{color:var(--muted)}
.footer{opacity:.7;margin-top:32px;font-size:14px; display: block;position: fixed;padding: 12px;bottom:0px;}
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.85); z-index: 1000; }
.modal.open { display: flex; }
.modal img { max-width: 92vw; max-height: 88vh; box-shadow: 0 10px 40px rgba(0,0,0,.5); border-radius: 10px; }

.modal .nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 42px; line-height: 1;
  background: rgba(0,0,0,.4); color: #fff; border: 0; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; user-select: none; }
.modal .nav:hover { background: rgba(0,0,0,.55); }
.modal .prev { left: 16px; }
.modal .next { right: 16px; }

.modal .toolbar { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; gap: 8px;
  justify-content: center; align-items: center; }
.modal .toolbar button { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2);
  padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.modal .toolbar button:hover { background: rgba(255,255,255,.2); }
.modal .toolbar .close { position: absolute; right: 16px; }
.modal .counter { color: #fff; opacity: .9; padding: 0 8px; }
/* Loader-Overlay */
.modal .loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  pointer-events: none; /* Klicks gehen an Modal weiter */
}
.modal.loading .loader { display: flex; }

/* Spinner */
.modal .spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Bild optisch „busy“ */
.modal.loading img {
  opacity: .25;
  filter: blur(2px);
  transition: opacity .2s ease, filter .2s ease;
}

/* Navigation/Toolbar im Busy-Mode „gedimmt“ */
.modal.loading .nav,
.modal.loading .toolbar button {
  opacity: .6;
  pointer-events: none; /* deaktivieren */
}
@media (max-width: 640px) {
  .modal .nav { width: 44px; height: 44px; font-size: 34px; }
  .modal img { max-width: 96vw; max-height: 80vh; }
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.form{max-width:520px;margin:30px auto;background:var(--card);padding:18px;border-radius:14px}
.input, .file{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #2a2f3a;background:#101218;color:var(--text);margin:8px 0}
label{font-size:14px;color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;justify-content: center;margin-top: 64px;}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#222734;color:#cbd5e1;font-size:12px}
#paypal-button-container {
    width: 100%;
    max-width: 640px;
    margin: 20px auto;
}

.upload-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0077cc;
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;

  transition: all 0.3s ease;
  white-space: nowrap;
  padding: 0 15px;
}

.upload-button .icon {
  flex-shrink: 0;
  left: 4px;
  position: relative;
  top: -1px;
}

.upload-button .text {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.upload-button:hover {
  width: 280px; /* fährt auf */
  border-radius: 30px;
  justify-content: flex-start;
  padding: 0 20px;
}

.upload-button:hover .text {
  opacity: 1;
  max-width: 100%;
}