/* ============================================================
   MALER SEYFFERLE GMBH ★ "ULTRA HIGH QUALITY" STYLESHEET ★
   1998 design meets 2026 GPU
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #0a0820;
  color: #fff;
  font-family: "Comic Sans MS", "Chalkboard SE", "Bradley Hand", cursive;
  overflow-x: hidden;
  scroll-behavior: smooth;
  cursor: none;
}

body {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 58, 140, .10), transparent 55%),
    radial-gradient(circle at 80% 40%, rgba(0, 224, 200, .10), transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(255, 212, 0, .08), transparent 55%),
    #07061a;
  background-attachment: fixed;
}

/* ---------- WebGL canvas background ---------- */
#paint-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: .28;
  mix-blend-mode: screen;
  filter: blur(2px) saturate(.9);
}

/* ---------- Custom paint cursor ---------- */
#cursor-tip {
  position: fixed;
  top: 0; left: 0;
  width: 38px; height: 38px;
  transform: translate(-50%, -10%) rotate(-25deg);
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.4));
}
#trail-canvas {
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .55;
}

/* ---------- "UNTER KONSTRUKTION" banner ---------- */
#under-construction-banner {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  background:
    repeating-linear-gradient(
      45deg,
      #000 0 24px,
      #ffd400 24px 48px
    );
  padding: 8px 16px;
  font-family: Impact, "Arial Black", sans-serif;
  color: #000;
  font-size: 18px;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #fff;
  border-bottom: 4px solid #000;
}

.uc-marquee-wrap {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  background: #fff;
  border: 3px ridge #c0c0c0;
  padding: 4px 0;
  color: #c00;
}
.uc-marquee {
  display: inline-block;
  animation: marquee 32s linear infinite;
  padding-left: 100%;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.uc-blink {
  display: inline-block;
  animation: blink 0.45s steps(2) infinite;
  font-size: 28px;
  color: #c00;
  text-shadow: 0 0 8px #ff0;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- NAV ---------- */
#topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background:
    linear-gradient(180deg, #1a0a3a, #0a0820),
    repeating-linear-gradient(90deg, #ff0, #f0f 20px);
  border-bottom: 4px double #ffd400;
  backdrop-filter: blur(12px);
}
#topnav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 8px 12px;
}
#topnav a {
  display: inline-block;
  padding: 6px 14px;
  color: #fff;
  text-decoration: none;
  font-family: Impact, sans-serif;
  font-size: 17px;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #2a1a5a, #0a0820);
  border: 2px outset #ffd400;
  border-radius: 3px;
  text-shadow: 2px 2px 0 #000;
  transition: transform .15s, filter .15s;
}
#topnav a:hover {
  filter: hue-rotate(45deg) brightness(1.4);
  transform: translateY(-2px) scale(1.06);
}

/* ---------- Section base ---------- */
main { position: relative; z-index: 2; }

section {
  position: relative;
  padding: 80px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(48px, 7vw, 96px);
  text-align: center;
  margin: 0 0 24px;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #ff3a8c, #ffd400, #00e0c8, #9b5cff, #ff3a8c);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px #000;
  animation: rainbow-flow 6s linear infinite;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.6));
}
@keyframes rainbow-flow {
  to { background-position: 300% 0; }
}

.section-intro {
  text-align: center;
  font-size: 22px;
  color: #ffd400;
  text-shadow: 2px 2px 0 #000, 0 0 12px #ff3a8c;
  margin: 0 0 48px;
}

/* ============================================================
   HERO
   ============================================================ */
#hero {
  min-height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

.hero-floating {
  position: absolute;
  top: 80px;
  text-align: center;
  pointer-events: none;
}
.hero-floating.left { left: 5%; animation: float 4s ease-in-out infinite; }
.hero-floating.right { right: 5%; animation: float 5s ease-in-out infinite; }
.hero-floating img,
.hero-floating .dancing-paint-can {
  width: 120px;
  filter: drop-shadow(0 0 20px #ffd400);
}
.hero-floating .dancing-paint-can {
  display: inline-block;
  animation: wiggle 1.2s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(12deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-22px); }
}
.hero-floating .badge {
  font-family: Impact;
  background: red;
  color: #fff;
  padding: 6px 12px;
  border: 3px solid #ffd400;
  transform: rotate(-12deg);
  text-shadow: 2px 2px 0 #000;
  margin-top: 6px;
}
.hero-floating .badge.alt { background: #00e0c8; color: #000; text-shadow: none; }

#mega-title {
  font-family: Impact, "Arial Black", sans-serif;
  margin: 0;
  line-height: .9;
  text-transform: uppercase;
  position: relative;
}
.mega-line {
  display: block;
  font-size: clamp(72px, 13vw, 200px);
  letter-spacing: 4px;
  background: linear-gradient(180deg, #ffd400 0%, #ff6a00 45%, #c00 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px #000;
  text-shadow:
    6px 6px 0 #000,
    9px 9px 0 #ff3a8c,
    12px 12px 0 rgba(0,0,0,.5);
  position: relative;
}
.mega-line.accent {
  background: linear-gradient(180deg, #00e0c8, #9b5cff, #ff3a8c);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.mega-line.small {
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: 6px;
  background: linear-gradient(90deg, #ffd400, #fff, #ffd400);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px #000;
  margin-top: 12px;
  text-shadow: 3px 3px 0 #000;
}

.hero-tagline { margin-top: 28px; font-size: 28px; font-weight: bold; }
.rainbow-text {
  background: linear-gradient(90deg, #ff0040, #ff8000, #ffd400, #00ff80, #00b3ff, #9b5cff, #ff0040);
  background-size: 400% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: rainbow-flow 4s linear infinite;
  text-shadow: 0 0 20px rgba(255, 212, 0, .5);
}

.hero-stars { font-size: 32px; color: #ffd400; margin: 12px 0; letter-spacing: 8px;
  text-shadow: 0 0 14px #ffd400, 2px 2px 0 #c00;
}

.hero-sub {
  font-size: 18px;
  color: #fff;
  background: rgba(0,0,0,.35);
  padding: 12px 20px;
  border: 2px ridge #ffd400;
  max-width: 720px;
  text-shadow: 1px 1px 0 #000;
}
.blink { color: #ff3a8c; font-weight: bold; animation: blink 0.6s steps(2) infinite; }

.cta-button {
  display: inline-block;
  margin-top: 32px;
  padding: 18px 36px;
  font-family: Impact;
  font-size: 28px;
  letter-spacing: 2px;
  color: #000;
  background: linear-gradient(180deg, #fff700 0%, #ffd400 45%, #ff6a00 100%);
  border: 4px outset #ffd400;
  text-decoration: none;
  text-shadow: 2px 2px 0 #fff;
  box-shadow:
    0 0 0 4px #000,
    0 0 30px 8px rgba(255, 212, 0, .55),
    inset 0 0 16px rgba(255,255,255,.6);
  transform-origin: center;
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1) rotate(-1deg); }
  50%      { transform: scale(1.06) rotate(1deg); }
}
.cta-button:hover { filter: brightness(1.15) saturate(1.5); }

.scroll-hint {
  margin-top: 56px;
  font-size: 18px;
  color: #00e0c8;
  text-shadow: 0 0 12px #00e0c8;
  animation: bob 1.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* ============================================================
   LEISTUNGEN — services grid
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}
.service-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(10, 8, 32, .65);
  border: 3px solid var(--c, #fff);
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
  backdrop-filter: blur(8px);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
  isolation: isolate;
}
.service-card[data-color] { --c: attr(data-color); }
.service-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: conic-gradient(from var(--ang, 0deg), transparent, var(--glow, #ff3a8c), transparent);
  z-index: -1;
  opacity: 0;
  transition: opacity .35s;
  filter: blur(14px);
}
.service-card:hover::before { opacity: .9; }
.service-card:hover {
  transform: translateY(-10px) rotateX(6deg) rotateY(-4deg) scale(1.04);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 40px var(--glow, #ff3a8c);
}
.service-card .emoji {
  font-size: 64px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
  animation: bob 2.4s ease-in-out infinite;
}
.service-card h3 {
  font-family: Impact, sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  margin: 12px 0 10px;
  color: #ffd400;
  text-shadow: 2px 2px 0 #000;
}
.service-card p {
  font-size: 15px;
  line-height: 1.45;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
.new-flag {
  position: absolute;
  top: 12px; right: -34px;
  background: red;
  color: #ffd400;
  font-family: Impact;
  font-size: 14px;
  padding: 4px 36px;
  transform: rotate(35deg);
  text-shadow: 1px 1px 0 #000;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}

/* ============================================================
   ÜBER UNS
   ============================================================ */
.ueber-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 36px;
  align-items: stretch;
}
.ueber-card {
  background: rgba(10,8,32,.7);
  border: 3px ridge #ffd400;
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.ueber-card.glow {
  box-shadow: 0 0 40px rgba(255, 212, 0, .35), inset 0 0 30px rgba(255,58,140,.18);
}
.ralf-portrait {
  width: 200px;
  height: 200px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
  border: 6px ridge #ff3a8c;
  box-shadow: 0 0 40px #ffd400, inset 0 0 20px rgba(0,0,0,.4);
}
.ueber-card h3 {
  font-family: Impact, sans-serif;
  font-size: 30px;
  letter-spacing: 2px;
  margin: 0 0 6px;
  color: #00e0c8;
  text-shadow: 2px 2px 0 #000;
}
.ueber-card .role { color: #ffd400; font-weight: bold; margin-bottom: 16px; }

.stats-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
  text-align: center;
}
.stats-list li {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(255,58,140,.18), rgba(0,224,200,.12));
  border: 2px solid #ffd400;
  border-radius: 10px;
  padding: 12px 16px;
}
.counter {
  font-family: "Courier New", monospace;
  font-size: 44px;
  font-weight: bold;
  background: linear-gradient(180deg, #ffd400, #ff6a00);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(255,212,0,.6);
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 14px; color: #fff; letter-spacing: 1px; }

/* ============================================================
   GALERIE
   ============================================================ */
.gallery-strip {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 18px 4px 24px;
  scrollbar-color: #ffd400 #1a0a3a;
}
.gallery-item {
  flex: 0 0 280px;
  height: 260px;
  scroll-snap-align: center;
  background:
    radial-gradient(circle at 30% 30%, var(--c1) 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, var(--c2) 0%, transparent 55%),
    #000;
  border: 4px ridge #ffd400;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: Impact, sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 2px 2px 0 #000, 0 0 12px var(--c2);
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.gallery-item:hover {
  transform: scale(1.07) rotate(-1.5deg);
  z-index: 2;
}
.gallery-item:hover::after { transform: translateX(100%); }
.gallery-hint { text-align: center; color: #00e0c8; font-style: italic; }

/* ============================================================
   STIMMEN
   ============================================================ */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.testimonials blockquote {
  margin: 0;
  background: rgba(255,255,255,.06);
  border-left: 6px solid #ff3a8c;
  border-radius: 0 14px 14px 0;
  padding: 22px;
  position: relative;
  backdrop-filter: blur(6px);
  transform: rotate(-.5deg);
}
.testimonials blockquote:nth-child(2n) { transform: rotate(.7deg); border-left-color: #00e0c8; }
.testimonials blockquote:nth-child(3n) { transform: rotate(-1deg); border-left-color: #ffd400; }
.testimonials blockquote p {
  font-size: 18px;
  margin: 0 0 12px;
  color: #fff;
  font-style: italic;
}
.testimonials footer {
  font-size: 14px;
  color: #ffd400;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000;
}

/* ============================================================
   GÄSTEBUCH
   ============================================================ */
.guestbook {
  background: #fff;
  color: #000;
  border: 4px ridge #c0c0c0;
  padding: 16px;
  font-family: "Courier New", monospace;
  margin-bottom: 32px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px #ffd400, 0 10px 40px rgba(0,0,0,.4);
}
.guestbook .entry {
  border-bottom: 1px dashed #c0c0c0;
  padding: 10px 4px;
}
.guestbook .entry:last-child { border-bottom: none; }
.guestbook strong { color: #00c; font-size: 16px; }
.guestbook .date { color: #888; font-size: 12px; }
.guestbook p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; }

.guestbook-form {
  background: linear-gradient(135deg, #1a0a3a, #0a0820);
  border: 3px solid #ffd400;
  border-radius: 14px;
  padding: 22px;
  display: grid;
  gap: 12px;
}
.guestbook-form h3 {
  margin: 0;
  text-align: center;
  font-family: Impact;
  font-size: 26px;
  color: #ffd400;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000;
}
.guestbook-form label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: #00e0c8;
  font-weight: bold;
}
.guestbook-form input, .guestbook-form textarea {
  font-family: "Courier New", monospace;
  font-size: 16px;
  padding: 10px;
  border: 2px inset #c0c0c0;
  background: #fff;
  color: #000;
  border-radius: 4px;
  resize: vertical;
}
.guestbook-form button {
  cursor: none;
  font-family: Impact;
  font-size: 22px;
  letter-spacing: 1px;
  padding: 12px 18px;
  border: 3px outset #ffd400;
  background: linear-gradient(180deg, #ff3a8c, #c0006a);
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  border-radius: 6px;
}
.guestbook-form button:hover { filter: brightness(1.15); }
.form-hint { font-size: 12px; color: #999; text-align: center; margin: 0; }

/* ============================================================
   KONTAKT
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.contact-card {
  background: rgba(10,8,32,.75);
  border: 3px ridge #ffd400;
  border-radius: 14px;
  padding: 28px;
  text-align: center;
  backdrop-filter: blur(8px);
}
.contact-card h3 {
  font-family: Impact;
  font-size: 26px;
  margin: 0 0 16px;
  color: #ffd400;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000;
}
.contact-card address {
  font-style: normal;
  font-size: 18px;
  line-height: 1.6;
  color: #fff;
  margin-bottom: 16px;
}
.contact-line { font-size: 17px; line-height: 1.9; }
.contact-card a { color: #00e0c8; text-decoration: none; border-bottom: 1px dotted #00e0c8; }
.contact-card a:hover { color: #ff3a8c; border-color: #ff3a8c; }
.contact-hours {
  margin-top: 16px;
  padding: 12px;
  background: rgba(255,212,0,.1);
  border: 2px dashed #ffd400;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.6;
}
.contact-card.flashy {
  background: linear-gradient(135deg, #ff3a8c, #9b5cff);
  animation: hue-roll 6s linear infinite;
}
@keyframes hue-roll { to { filter: hue-rotate(360deg); } }
.kostenlos {
  font-family: Impact;
  font-size: 28px;
  line-height: 1.3;
  color: #fff;
  text-shadow: 3px 3px 0 #000;
  letter-spacing: 1px;
  margin: 12px 0 22px;
}
.cta-button.big { font-size: 24px; padding: 14px 28px; }
.contact-stars { font-size: 28px; letter-spacing: 6px; color: #ffd400; text-shadow: 0 0 12px #ffd400; }

/* ============================================================
   FOOTER
   ============================================================ */
#bottom {
  position: relative;
  z-index: 2;
  background:
    linear-gradient(180deg, #0a0820 0%, #050310 100%),
    repeating-linear-gradient(45deg, #000 0 10px, #1a0a3a 10px 20px);
  padding: 40px 24px;
  text-align: center;
  border-top: 4px ridge #ffd400;
  margin-top: 60px;
}
.webring {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: #000;
  border: 3px outset #c0c0c0;
  padding: 8px 18px;
  font-family: "Courier New", monospace;
  color: #ffd400;
  margin-bottom: 22px;
}
.ring-arrow { font-size: 22px; cursor: none; }
.ring-text { letter-spacing: 1px; font-weight: bold; }

.hit-counter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #000;
  border: 4px inset #ffd400;
  padding: 8px 14px;
  margin-bottom: 22px;
}
.hc-label { color: #fff; font-family: Impact; letter-spacing: 1px; }
.hc-digits {
  font-family: "Courier New", monospace;
  font-size: 32px;
  color: #00ff66;
  background: #001a00;
  padding: 4px 12px;
  border: 2px inset #c0c0c0;
  letter-spacing: 3px;
  text-shadow: 0 0 8px #00ff66;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}
.badge90s {
  font-family: Impact;
  font-size: 14px;
  padding: 6px 12px;
  background: linear-gradient(180deg, #c0c0c0, #808080);
  color: #000;
  border: 2px outset #fff;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #fff;
}

.footer-text {
  font-size: 15px;
  color: #fff;
  line-height: 1.7;
}
.footer-text a { color: #00e0c8; }
.footer-disclaimer { font-size: 12px; color: #888; margin-top: 12px; }

/* ============================================================
   ENTRY ANIMATIONS (GSAP toggles add `is-revealed`)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Reduced motion / responsive
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 720px) {
  body { cursor: auto; }
  #cursor-tip, #trail-canvas { display: none; }
  .hero-floating { display: none; }
  .mega-line { letter-spacing: 2px; }
  .ralf-portrait { width: 140px; height: 140px; }
  .ralf-portrait svg { width: 100%; height: 100%; }
  section { padding: 56px 16px; }
}

/* ============================================================
   Selection
   ============================================================ */
::selection {
  background: #ff3a8c;
  color: #ffd400;
}