/*
 * TIZÓN-Logo (SVG) und Hero-Effekte nach der Logo-Vorlage:
 * Raster an den Rändern, rote/blaue Lichtpunkte, Rauch und Glutfunken.
 * Bewusst als eigene, reine CSS-Datei neben app.css (kein Tailwind-Build nötig).
 */

/* ---------- Wortmarke ---------- */
svg.wordmark { display: inline-block; width: 3.9em; height: auto; aspect-ratio: 1715 / 313; overflow: visible; vertical-align: bottom; font-size: inherit; line-height: 1; }
svg.wordmark.wordmark-lockup { aspect-ratio: 1715 / 904; }
/* alte Regeln der Text-Wortmarke neutralisieren */
svg.wordmark .ltr { display: inline; background: none; filter: none; }
svg.wordmark .flame { position: static; width: auto; height: auto; filter: none; }
svg.wordmark .flame-flicker { transform-box: view-box; transform-origin: 1127px 150px; animation: tz-flame 2.8s ease-in-out infinite; }
svg.wordmark.is-js .flame-flicker { animation: none; }
@keyframes tz-flame {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  18% { transform: scale(1.02, .97) skewX(-1.6deg); }
  41% { transform: scale(.98, 1.04) skewX(1.2deg); }
  63% { transform: scale(1.01, .98) skewX(-.8deg); }
  82% { transform: scale(.99, 1.03) skewX(.9deg); }
}
.wordmark.sm { font-size: 28px; }
.hero svg.wordmark { font-size: clamp(64px, 15.5vw, 220px); }
.hero svg.wordmark.wordmark-lockup { font-size: clamp(64px, 14vw, 200px); }
.logo-link svg.wordmark { display: block; }
.logo-link:hover .flame-glow { opacity: 1; }
@media (max-width: 767px) {
  .hero svg.wordmark { font-size: clamp(72px, 21vw, 120px); }
  .hero svg.wordmark.wordmark-lockup { font-size: clamp(72px, 22vw, 120px); }
}
@media (prefers-reduced-motion: reduce) { svg.wordmark .flame-flicker { animation: none; } }

/* ---------- Hero-Ebenen (werden von logo.js eingefügt) ---------- */
.tz-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(150,165,190,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(150,165,190,.16) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 46% 70% at 50% 46%, transparent 0%, transparent 55%, #000 100%);
          mask-image: radial-gradient(ellipse 46% 70% at 50% 46%, transparent 0%, transparent 55%, #000 100%); }
.tz-bokeh { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tz-bokeh i { position: absolute; border-radius: 50%; filter: blur(28px); mix-blend-mode: screen; opacity: .75; }
.tz-bokeh i:nth-child(1) { left: -4%; top: 14%; width: 16vw; height: 16vw; background: radial-gradient(closest-side, rgba(220,30,40,.65), transparent); }
.tz-bokeh i:nth-child(2) { left: 2%; top: 46%; width: 12vw; height: 12vw; background: radial-gradient(closest-side, rgba(30,110,230,.55), transparent); }
.tz-bokeh i:nth-child(3) { left: 10%; top: 70%; width: 14vw; height: 10vw; background: radial-gradient(closest-side, rgba(40,90,210,.45), transparent); }
.tz-bokeh i:nth-child(4) { right: 4%; top: -6%; width: 18vw; height: 12vw; background: radial-gradient(closest-side, rgba(40,90,230,.5), transparent); }
.tz-bokeh i:nth-child(5) { right: -3%; top: 34%; width: 12vw; height: 14vw; background: radial-gradient(closest-side, rgba(220,30,40,.55), transparent); }
.tz-bokeh i:nth-child(6) { right: 12%; top: -4%; width: 10vw; height: 8vw; background: radial-gradient(closest-side, rgba(255,60,50,.5), transparent); }
.tz-fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tz-smoke { z-index: 0; opacity: .9; }
.tz-embers { z-index: 0; }
/* die alten runden Funken weichen den Glutstreifen */
.hero.tz-fx canvas[data-sparks] { display: none; }
@media (max-width: 767px) { .tz-bokeh i { filter: blur(18px); } .tz-grid { opacity: .55; } }