:root{
  --header-h: 56px;
  --footer-h: 56px;
  --brand: #4fc3f7;
  --glass-bg: rgba(0,0,0,.45);
  --glass-blur: 12px;
  --glass-border: rgba(255,255,255,.14);
  --glass-inset: rgba(255,255,255,.08);
}

*{margin:0;padding:0;box-sizing:border-box}

.loading-screen{
  position:fixed;
  inset:0;
  z-index:10000;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: opacity .8s ease, visibility .8s ease;
}

.loading-screen.loaded{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.loading-content{
  position:relative;
  width:200px;
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.loading-logo{
  width:80px;
  height:auto;
  position:relative;
  z-index:2;
  filter: 
    drop-shadow(0 0 20px rgba(79,195,247,0.8))
    drop-shadow(0 0 40px rgba(79,195,247,0.6));
  animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat{
  0%, 100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-10px) scale(1.05); }
}

.loading-ring{
  position:absolute;
  inset:0;
  animation: ringRotate 3s linear infinite;
}

@keyframes ringRotate{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.loading-dot{
  position:absolute;
  width:12px;
  height:12px;
  background: radial-gradient(circle, rgba(79,195,247,1) 0%, rgba(79,195,247,0.6) 100%);
  border-radius:50%;
  box-shadow: 
    0 0 10px rgba(79,195,247,0.8),
    0 0 20px rgba(79,195,247,0.5),
    0 0 30px rgba(0,188,212,0.3);
  top:50%;
  left:50%;
}

.loading-dot:nth-child(1){ transform: translate(-50%, -50%) translateY(-100px); animation: dotPulse 1.5s ease-in-out 0s infinite; }
.loading-dot:nth-child(2){ transform: translate(-50%, -50%) rotate(45deg) translateY(-100px); animation: dotPulse 1.5s ease-in-out 0.1875s infinite; }
.loading-dot:nth-child(3){ transform: translate(-50%, -50%) rotate(90deg) translateY(-100px); animation: dotPulse 1.5s ease-in-out 0.375s infinite; }
.loading-dot:nth-child(4){ transform: translate(-50%, -50%) rotate(135deg) translateY(-100px); animation: dotPulse 1.5s ease-in-out 0.5625s infinite; }
.loading-dot:nth-child(5){ transform: translate(-50%, -50%) rotate(180deg) translateY(-100px); animation: dotPulse 1.5s ease-in-out 0.75s infinite; }
.loading-dot:nth-child(6){ transform: translate(-50%, -50%) rotate(225deg) translateY(-100px); animation: dotPulse 1.5s ease-in-out 0.9375s infinite; }
.loading-dot:nth-child(7){ transform: translate(-50%, -50%) rotate(270deg) translateY(-100px); animation: dotPulse 1.5s ease-in-out 1.125s infinite; }
.loading-dot:nth-child(8){ transform: translate(-50%, -50%) rotate(315deg) translateY(-100px); animation: dotPulse 1.5s ease-in-out 1.3125s infinite; }

@keyframes dotPulse{
  0%, 100%{ 
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateY(-100px) scale(1);
    opacity: 1;
  }
  50%{ 
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateY(-100px) scale(1.3);
    opacity: 0.7;
  }
}

.loading-dot:nth-child(1){ --rot: 0deg; }
.loading-dot:nth-child(2){ --rot: 45deg; }
.loading-dot:nth-child(3){ --rot: 90deg; }
.loading-dot:nth-child(4){ --rot: 135deg; }
.loading-dot:nth-child(5){ --rot: 180deg; }
.loading-dot:nth-child(6){ --rot: 225deg; }
.loading-dot:nth-child(7){ --rot: 270deg; }
.loading-dot:nth-child(8){ --rot: 315deg; }

html,body{height:100%}
body{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height:100vh;
  color:#fff;
  display:flex; flex-direction:column;
  background:#000;
  overflow-x:hidden;
}

.bg-parallax{
  position:fixed; inset:0;
  z-index:-2;
  background-image:url('https://www.ruthner.at/BG3.png');
  background-size:cover; background-position:center;
  will-change:transform;
  transform:translateZ(0);
}
.bg-overlay{
  position:fixed; inset:0;
  z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.55));
}

#stars{
  position:fixed; inset:0;
  z-index:-1; pointer-events:none;
  opacity:.75;
}

.shooting-star{
  position:fixed;
  width:2px;
  height:2px;
  background:#fff;
  border-radius:50%;
  box-shadow: 0 0 6px 2px rgba(255,255,255,.8);
  z-index:-1;
  pointer-events:none;
  opacity:0;
}

header{
  position:fixed; inset:0 0 auto 0;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:center;
  padding:0 .75rem;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(8px);
  box-shadow:0 2px 14px rgba(0,0,0,.28);
  z-index:1000;
  overflow:hidden;
}

header .logo-monogram{
  position:relative; z-index:2;
  height: calc(var(--header-h) - 16px);
  max-height: calc(var(--header-h) - 16px);
  width: auto;
  filter: 
    drop-shadow(0 0 10px rgba(79,195,247,0.8))
    drop-shadow(0 0 20px rgba(79,195,247,0.6))
    drop-shadow(0 0 30px rgba(0,188,212,0.4));
  animation: neonGlowPulse 4.5s ease-in-out infinite;
  cursor:pointer;
  transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center center;
}
header .logo-monogram:hover{
  transform: scale(1.25) rotate(720deg);
  filter: 
    drop-shadow(0 0 15px rgba(255,215,0,1))
    drop-shadow(0 0 30px rgba(255,215,0,0.9))
    drop-shadow(0 0 45px rgba(218,165,32,0.8))
    drop-shadow(0 0 60px rgba(218,165,32,0.6))
    brightness(1.4);
  animation: logoHeartbeat 1.4s ease-in-out infinite;
}

@keyframes logoHeartbeat{
  0%, 100%{ transform: scale(1.25) rotate(720deg); }
  14%{ transform: scale(1.3) rotate(720deg); }
  28%{ transform: scale(1.25) rotate(720deg); }
  42%{ transform: scale(1.3) rotate(720deg); }
  56%{ transform: scale(1.25) rotate(720deg); }
}

.sound-toggle{
  position: absolute;
  right: 1rem;
  background: rgba(0,0,0,.5);
  border: 2px solid rgba(255,215,0,.4);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all .3s ease;
  z-index: 3;
  backdrop-filter: blur(8px);
  box-shadow: 
    0 0 10px rgba(255,215,0,.3),
    0 0 20px rgba(218,165,32,.2),
    inset 0 1px 0 rgba(255,215,0,.2);
  filter: drop-shadow(0 0 5px rgba(255,215,0,.4));
  color: #FFD700;
  text-shadow: 0 0 8px rgba(255,215,0,.6);
}

.sound-toggle:hover{
  background: rgba(0,0,0,.7);
  border-color: rgba(255,215,0,.7);
  transform: scale(1.1);
  box-shadow: 
    0 0 15px rgba(255,215,0,.5),
    0 0 30px rgba(218,165,32,.3),
    inset 0 1px 0 rgba(255,215,0,.3);
  filter: drop-shadow(0 0 10px rgba(255,215,0,.6));
  text-shadow: 0 0 12px rgba(255,215,0,.8);
}

.sound-toggle.muted{
  opacity: 0.4;
  border-color: rgba(128,128,128,.4);
  box-shadow: 
    0 0 5px rgba(128,128,128,.2),
    inset 0 1px 0 rgba(128,128,128,.2);
  filter: drop-shadow(0 0 3px rgba(128,128,128,.3));
  color: #888;
  text-shadow: none;
}

@keyframes neonGlowPulse{
  0%,100%{ 
    filter:
      drop-shadow(0 0 10px rgba(79,195,247,0.8))
      drop-shadow(0 0 20px rgba(79,195,247,0.6))
      drop-shadow(0 0 30px rgba(0,188,212,0.4));
  }
  50%{ 
    filter:
      drop-shadow(0 0 12px rgba(79,195,247,1))
      drop-shadow(0 0 24px rgba(79,195,247,0.8))
      drop-shadow(0 0 36px rgba(0,188,212,0.6));
  }
}

header .aurora{
  position:absolute; inset:0;
  z-index:1; pointer-events:none;
  mix-blend-mode:screen;
  opacity:.40;
}

header .aurora::before,
header .aurora::after{
  content:"";
  position:absolute;
  inset:-60% -40%;
  opacity:.5;
  background: repeating-linear-gradient(
    90deg,
    rgba(80,255,200,0) 0%,
    rgba(80,255,200,.18) 10%,
    rgba(120,180,255,.26) 22%,
    rgba(190,120,255,.22) 34%,
    rgba(80,255,200,.18) 46%,
    rgba(80,255,200,0) 56%
  );
  background-size: 220% 100%;
  filter: blur(30px);
  animation: auroraWave 24s ease-in-out infinite alternate,
             auroraHue 60s linear infinite;
  transform: translateZ(0);
}
header .aurora::after{
  animation-duration: 32s, 70s;
  animation-delay: -10s, -8s;
  opacity:.75;
}

header .aurora .band{
  position:absolute;
  inset:-55% -35%;
  opacity:.45;
  background: repeating-linear-gradient(
    90deg,
    rgba(90,255,210,0) 0%,
    rgba(90,255,210,.18) 12%,
    rgba(100,200,255,.28) 26%,
    rgba(170,120,255,.22) 40%,
    rgba(90,255,210,.18) 52%,
    rgba(90,255,210,0) 62%
  );
  background-size: 240% 100%;
  filter: blur(26px);
  opacity:.7;
  animation: auroraWaveAlt 28s ease-in-out infinite alternate,
             auroraHue 58s linear infinite;
  transform: translateZ(0);
}

@keyframes auroraWave{
  0%   { transform: translateY(0) scaleX(1); background-position: 0% 0%; }
  50%  { transform: translateY(-18px) scaleX(1.18) skewX(1deg); background-position: 100% 0%; }
  100% { transform: translateY(-36px) scaleX(1); background-position: 200% 0%; }
}
@keyframes auroraWaveAlt{
  0%   { transform: translateY(-8px) scaleX(1.05); background-position: 20% 0%; }
  50%  { transform: translateY(-30px) scaleX(1.22) skewX(-1deg); background-position: 120% 0%; }
  100% { transform: translateY(-52px) scaleX(1.08); background-position: 220% 0%; }
}
@keyframes auroraHue{
  0%   { filter: blur(28px) hue-rotate(0deg)    saturate(115%); }
  50%  { filter: blur(28px) hue-rotate(25deg)   saturate(130%); }
  100% { filter: blur(28px) hue-rotate(50deg)   saturate(115%); }
}

main{
  flex:1;
  max-width:1200px; width:90%;
  margin: calc(var(--header-h) + 1rem) auto calc(var(--footer-h) + 1rem);
  padding: 2rem;
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  color:#fff;
}

.service-card{
  background: linear-gradient(135deg, rgba(102,126,234,.46) 0%, rgba(118,75,162,.46) 100%);
  background-size: 200% 200%;
  animation: gradientShift 18s ease-in-out infinite, cardFadeIn .7s ease-out forwards;
  padding:1.5rem;
  margin-bottom:1.1rem;
  border-radius:14px;
  box-shadow:
    inset 0 1px 0 var(--glass-inset),
    0 6px 20px rgba(0,0,0,.22);
  border:1px solid var(--glass-border);
  transition: transform .7s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow .7s cubic-bezier(0.4, 0, 0.2, 1),
              border-color .7s ease;
  color:#fff;
  backdrop-filter: blur(var(--glass-blur));
  will-change: transform, box-shadow;
  position:relative;
  overflow:hidden;
  opacity:1;
}

@media (prefers-reduced-motion: no-preference) {
  .service-card{
    opacity:0;
  }
}

.service-card:nth-child(1){ animation-delay: 0s, 0s; }
.service-card:nth-child(2){ animation-delay: 0s, .1s; }
.service-card:nth-child(3){ animation-delay: 0s, .2s; }
.service-card:nth-child(4){ animation-delay: 0s, .3s; }
.service-card:nth-child(5){ animation-delay: 0s, .4s; }
.service-card:nth-child(6){ animation-delay: 0s, .5s; }
.service-card:nth-child(7){ animation-delay: 0s, .6s; }

@keyframes cardFadeIn{
  from{ opacity:0; transform: scale(.98); }
  to{ opacity:1; transform: scale(1); }
}

.service-card::before{
  content:'';
  position:absolute;
  top:-50%; left:-50%;
  width:200%; height:200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,.1) 50%,
    transparent 70%
  );
  transform: translateX(-100%) translateY(-100%) rotate(45deg);
  transition: transform 1.2s ease;
}

.service-card:hover::before{
  transform: translateX(100%) translateY(100%) rotate(45deg);
}

.service-card:hover{
  transform: translateY(-5px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 16px 40px rgba(0,0,0,.35),
    0 0 0 1px rgba(79,195,247,.3);
  border-color: rgba(79,195,247,.4);
}

.service-card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:14px;
  padding:1px;
  background: linear-gradient(135deg, 
    rgba(79,195,247,0) 0%,
    rgba(79,195,247,.3) 50%,
    rgba(79,195,247,0) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0;
  transition: opacity .3s ease;
  pointer-events:none;
}

.service-card:hover::after{
  opacity:1;
}

.service-card:nth-child(2){
  background: linear-gradient(135deg, rgba(240,147,251,.46) 0%, rgba(245,87,108,.46) 100%);
  background-size: 220% 220%;
  animation-duration: 20s, .7s;
}
.service-card:nth-child(3){
  background: linear-gradient(135deg, rgba(79,172,254,.46) 0%, rgba(0,242,254,.46) 100%);
  animation-duration: 18s, .7s;
}
.service-card:nth-child(4){
  background: linear-gradient(135deg, rgba(67,233,123,.46) 0%, rgba(56,249,215,.46) 100%);
  background-size: 240% 240%;
  animation-duration: 22s, .7s;
}
.service-card:nth-child(5){
  background: linear-gradient(135deg, rgba(255,159,64,.46) 0%, rgba(255,99,132,.46) 100%);
  background-size: 210% 210%;
  animation-duration: 19s, .7s;
}
.service-card:nth-child(6){
  background: linear-gradient(135deg, rgba(138,43,226,.46) 0%, rgba(0,191,255,.46) 100%);
  background-size: 230% 230%;
  animation-duration: 21s, .7s;
}
.service-card:nth-child(7){
  background: linear-gradient(135deg, rgba(75,192,192,.46) 0%, rgba(54,162,235,.46) 100%);
  background-size: 215% 215%;
  animation-duration: 20s, .7s;
}

@keyframes gradientShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.service-card h2{
  font-size:1.35rem; margin-bottom:.55rem;
  display:flex; align-items:center; gap:.5rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  position:relative;
  z-index:1;
}
.service-card h2::before{
  content:"→"; font-size:1.4rem; font-weight:700;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.2));
  display:inline-block;
  transition: transform .7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.service-card:hover h2::before{
  transform: translateX(5px);
}

.service-card p{ 
  font-size:1rem; 
  line-height:1.55; 
  opacity:.96;
  position:relative;
  z-index:1;
}

.service-card a{
  color:#fff; text-decoration:none; font-weight:600; font-size:1rem;
  padding:.6rem 1rem; margin-top:.8rem; display:inline-block;
  background: rgba(255,255,255,.14); border-radius:8px;
  transition: all .7s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 0 rgba(79,195,247,0);
  position:relative;
  z-index:1;
  overflow:hidden;
}

.service-card a::before{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(circle, rgba(255,255,255,.3) 0%, transparent 70%);
  opacity:0;
  transform: scale(0);
  transition: transform .5s ease, opacity .5s ease;
}

.service-card a:active::before{
  transform: scale(2);
  opacity:1;
  transition: transform 0s, opacity 0s;
}

.service-card a:hover{
  background: rgba(255,255,255,.22);
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(79,195,247,.35), 0 0 22px rgba(0,188,212,.25), 0 4px 8px rgba(0,0,0,.2);
}

footer{
  position:fixed; inset:auto 0 0 0;
  height:var(--footer-h);
  display:flex; align-items:center; justify-content:center;
  padding:0 .75rem; text-align:center;
  background:rgba(0,0,0,.68);
  backdrop-filter: blur(8px);
  box-shadow:0 -2px 14px rgba(0,0,0,.28);
  z-index:1000;
  overflow:hidden;
}

footer::before{
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:100%; height:1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(79,195,247,0) 20%,
    rgba(79,195,247,0.8) 50%,
    rgba(79,195,247,0) 80%,
    transparent 100%
  );
  animation: scanLine 8s linear infinite;
  box-shadow: 0 0 6px rgba(79,195,247,0.5);
}

@keyframes scanLine{
  0%{ left:-100%; }
  100%{ left:100%; }
}

footer p{
  font-size:.95rem; line-height:1.2; color:#ccc; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:95%;
  position:relative;
  z-index:1;
}

footer p::before{
  content:'';
  position:absolute;
  top:-50%; left:-100%;
  width:50%; height:200%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.1) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: shimmer 6s ease-in-out infinite;
}

@keyframes shimmer{
  0%{ left:-100%; }
  50%{ left:150%; }
  100%{ left:150%; }
}

footer strong{ 
  color:var(--brand);
  transition: text-shadow .5s ease;
  text-shadow:
    0 0 5px rgba(79,195,247,0.3),
    0 0 10px rgba(79,195,247,0.2);
  animation: footerGlow 4s ease-in-out infinite;
}

@keyframes footerGlow{
  0%,100%{
    text-shadow:
      0 0 5px rgba(79,195,247,0.3),
      0 0 10px rgba(79,195,247,0.2),
      0 0 15px rgba(0,188,212,0.1);
  }
  50%{
    text-shadow:
      0 0 8px rgba(79,195,247,0.5),
      0 0 16px rgba(79,195,247,0.35),
      0 0 24px rgba(0,188,212,0.2);
  }
}

footer:hover strong{
  text-shadow: 
    0 0 10px rgba(79,195,247,0.6),
    0 0 20px rgba(79,195,247,0.4),
    0 0 30px rgba(0,188,212,0.3);
}

.scroll-indicator{
  position:fixed;
  bottom:calc(var(--footer-h) + 20px);
  left:50%;
  transform:translateX(-50%);
  width:30px;
  height:50px;
  border:2px solid rgba(79,195,247,.6);
  border-radius:20px;
  z-index:999;
  opacity:.7;
  transition: opacity .3s ease;
  animation: fadeOut 1s ease 3s forwards;
}

.scroll-indicator::before{
  content:'';
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:6px;
  height:6px;
  background:rgba(79,195,247,.8);
  border-radius:50%;
  animation: scrollDot 2s ease-in-out infinite;
}

@keyframes scrollDot{
  0%, 100%{ transform: translate(-50%, 0); opacity:1; }
  50%{ transform: translate(-50%, 20px); opacity:.3; }
}

@keyframes fadeOut{
  to{ opacity:0; pointer-events:none; }
}

.particle{
  position:fixed;
  pointer-events:none;
  z-index:0;
  opacity:.6;
  will-change:transform;
}

#constellation{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.15;
}

.nebula{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.08;
  mix-blend-mode:screen;
  background: 
    radial-gradient(ellipse 800px 400px at 20% 30%, rgba(138,43,226,.4) 0%, transparent 50%),
    radial-gradient(ellipse 600px 600px at 80% 70%, rgba(0,191,255,.3) 0%, transparent 50%),
    radial-gradient(ellipse 700px 500px at 50% 50%, rgba(255,105,180,.25) 0%, transparent 50%);
  animation: nebulaFloat 40s ease-in-out infinite alternate;
}

@keyframes nebulaFloat{
  0%{ transform: translate(0, 0) scale(1); opacity:.08; }
  50%{ transform: translate(-30px, -20px) scale(1.1); opacity:.12; }
  100%{ transform: translate(20px, 30px) scale(.95); opacity:.08; }
}

.starfield-canvas{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition: opacity .4s ease;
  z-index:0;
  border-radius:14px;
  mix-blend-mode: screen;
}

.service-card:hover .starfield-canvas{
  opacity:.5;
}

.service-card > *:not(.starfield-canvas){
  position:relative;
  z-index:1;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ 
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .service-card{ 
    opacity: 1 !important;
    transform: none !important;
  }
  
  .scroll-indicator{ display:none; }
  .loading-screen{ animation: none; }
  .loading-logo, .loading-ring, .loading-dot{ animation: none; }
}

@media (max-width: 768px){
  :root{ --header-h: 48px; --footer-h: 48px; }
  header .logo-monogram{ height: calc(var(--header-h) - 12px); max-height: calc(var(--header-h) - 12px); }
  main{ width:95%; padding:1.25rem; }
  .service-card{ padding:1.1rem; }
  .service-card h2{ font-size:1.15rem; }
  .service-card h2::before{ font-size:1.2rem; }
  .service-card p{ font-size:.95rem; }
  .service-card a{ font-size:.95rem; padding:.55rem .9rem; }
  footer p{ font-size:.85rem; }
  .scroll-indicator{ display:none; }
}
@media (max-width: 768px) and (orientation: landscape){
  :root{ --header-h: 44px; --footer-h: 44px; }
  header .logo-monogram{ height: calc(var(--header-h) - 10px); max-height: calc(var(--header-h) - 10px); }
  main{ margin: calc(var(--header-h) + .6rem) auto calc(var(--footer-h) + .6rem); }
  footer p{ font-size:.78rem; }
}