/* logos.css — zehn Schriftzuege, einer je Besuch.
   Vorbild: pouet.net, wo das Logo seit Jahrzehnten wechselt.
   Alles in CSS auf einzeln verpackten Buchstaben, nichts nachzuladen. */

.lg{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:.4em; line-height:1; margin:0;
  font-size:clamp(2rem, 6vw, 3.6rem); font-weight:900; letter-spacing:.02em;
}
.lg-wort{ display:inline-flex }
.lg-b{ display:inline-block }

/* 1 Neonroehre */
.lg-neon .lg-eins{ color:#fff }
.lg-neon .lg-zwei{ color:#ff5fd2 }
.lg-neon .lg-b{
  text-shadow:0 0 4px #fff, 0 0 12px #5ff7ff, 0 0 30px #5ff7ff, 0 0 60px #2b7bff;
}
.lg-neon .lg-zwei .lg-b{ text-shadow:0 0 4px #fff, 0 0 14px #ff5fd2, 0 0 34px #ff2fa0 }
.lg-neon .lg-b:nth-child(2){ animation:lgFlacker 3.7s steps(1) infinite }
.lg-neon .lg-b:nth-child(5){ animation:lgFlacker 5.1s steps(1) .7s infinite }
@keyframes lgFlacker{ 0%,96%,100%{opacity:1} 97%{opacity:.25} 98%{opacity:1} 99%{opacity:.4} }

/* 2 Copper Bars */
.lg-copper .lg-b{
  background:repeating-linear-gradient(180deg,
    #ff2f6d 0 8%, #ff9d3d 8% 18%, #ffd83d 18% 30%, #79e34c 30% 42%,
    #5ff7ff 42% 56%, #7b6bff 56% 70%, #ff5fd2 70% 84%, #ff2f6d 84% 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1px rgba(0,0,0,.35);
  animation:lgCopper 3.2s linear infinite;
}
@keyframes lgCopper{ from{background-position:0 0} to{background-position:0 -220px} }

/* 3 Pixelblock */
.lg-pixel{ font-family:ui-monospace,Menlo,monospace; letter-spacing:.06em }
.lg-pixel .lg-eins{ color:#ffd83d }
.lg-pixel .lg-zwei{ color:#5ff7ff }
.lg-pixel .lg-b{
  text-shadow:3px 0 0 #0b1420, 0 3px 0 #0b1420, 3px 3px 0 #0b1420, 6px 6px 0 rgba(0,0,0,.35);
}

/* 4 Sinus-Scroller */
.lg-sinus .lg-eins{ color:#ffd83d } .lg-sinus .lg-zwei{ color:#ff8ad2 }
.lg-sinus .lg-b{
  animation:lgWelle 1.5s ease-in-out infinite; animation-delay:calc(var(--i) * .09s);
  text-shadow:0 3px 0 rgba(0,0,0,.3);
}
@keyframes lgWelle{ 0%,100%{transform:translateY(-.14em)} 50%{transform:translateY(.14em)} }

/* 5 Chrom */
.lg-chrom .lg-b{
  background:linear-gradient(180deg,#fff 0 18%, #b9c8e0 19% 45%, #43537a 46% 52%,
    #cfd9ec 53% 78%, #7c8aa8 79% 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1px #2a3550;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.5));
}

/* 6 Gummi */
.lg-gummi{ font-size:clamp(1.9rem, 5.6vw, 3.3rem) }
.lg-gummi .lg-eins{ color:#ffd83d } .lg-gummi .lg-zwei{ color:#79e34c }
.lg-gummi .lg-b{
  -webkit-text-stroke:5px #2a1d0c; paint-order:stroke fill;
  text-shadow:0 5px 0 rgba(0,0,0,.28);
  animation:lgHuepf 1.9s cubic-bezier(.5,-0.4,.5,1.4) infinite;
  animation-delay:calc(var(--i) * .07s);
}
@keyframes lgHuepf{ 0%,72%,100%{transform:translateY(0)} 80%{transform:translateY(-.16em)} }

/* 7 Terminal */
.lg-terminal{ font-family:ui-monospace,Menlo,monospace; font-weight:700; letter-spacing:.04em }
.lg-terminal .lg-b{ color:#79e34c; text-shadow:0 0 9px rgba(121,227,76,.75) }
.lg-terminal .lg-zwei .lg-b{ color:#b6ff8c }
.lg-cursor{ color:#79e34c; animation:lgBlink 1s steps(1) infinite }
@keyframes lgBlink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* 8 Stempel */
.lg-stempel{ transform:rotate(-3.5deg) }
.lg-stempel .lg-wort{
  border:5px solid #c0392b; border-radius:8px; padding:.06em .18em;
  color:#c0392b; box-shadow:0 0 0 2px rgba(192,57,43,.25);
}
.lg-stempel .lg-zwei{ border-color:#8a6a24; color:#8a6a24; box-shadow:0 0 0 2px rgba(138,106,36,.25) }

/* 9 Regenbogen */
.lg-regen .lg-b:nth-child(6n+1){ color:#ff5f6d } .lg-regen .lg-b:nth-child(6n+2){ color:#ff9d3d }
.lg-regen .lg-b:nth-child(6n+3){ color:#ffd83d } .lg-regen .lg-b:nth-child(6n+4){ color:#79e34c }
.lg-regen .lg-b:nth-child(6n+5){ color:#5ff7ff } .lg-regen .lg-b:nth-child(6n+6){ color:#b465ff }
.lg-regen .lg-b{
  -webkit-text-stroke:2px rgba(0,0,0,.35); paint-order:stroke fill;
  transform:rotate(calc((var(--i) - 2) * 2.5deg));
}

/* 10 Tiefenschatten */
.lg-schatten .lg-eins{ color:#fff } .lg-schatten .lg-zwei{ color:#ffd83d }
.lg-schatten .lg-b{
  text-shadow:2px 2px 0 #5ff7ff, 4px 4px 0 #2b7bff, 6px 6px 0 #7b3bff,
    8px 8px 0 #b42fa0, 10px 10px 0 rgba(0,0,0,.4);
}

/* Hier stand die Regel fuer den Namen des Logos, der klein darunter
   angezeigt wurde. John, 2026-08-10: "Das Bild muss fuer sich selber
   sprechen. Punkt." Die Zeile beschrieb, was direkt darueber zu sehen
   war ("Schriftzug Regenbogen, jeder Buchstabe eine andere Farbe"), und
   nahm dem Bild damit die Arbeit ab. Der Wechsel faellt von allein auf,
   dafuer braucht er keine Ansage. */

@media (prefers-reduced-motion: reduce){
  .lg-b, .lg-cursor{ animation:none !important }
}