/*!
 * Generation X Podcast — Design (80er-Look)
 * Teil der Website https://www.genxpodcast.de
 *
 * Copyright (c) 2026 Markus Lach. Alle Rechte vorbehalten.
 *
 * Dieser Quelltext ist urheberrechtlich geschuetzt. Vervielfaeltigung,
 * Verbreitung, Bearbeitung oder oeffentliche Zugaenglichmachung — ganz
 * oder in Teilen — nur mit ausdruecklicher schriftlicher Zustimmung des
 * Urhebers. Das Auslesen im Browser ist technisch bedingt und stellt
 * keine Freigabe zur Weiterverwendung dar.
 */
/* ============================================================
   Generation X Podcast — Child-Theme Design (80er-Look)
   Alles unter .genx-page gekapselt, damit der restliche
   Joomla-/YOOtheme-Bereich unberuehrt bleibt.
   ============================================================ */

/* ---------- Schriften ---------- */
@font-face {
  font-family: 'Luckiest Guy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/luckiest-guy.woff2') format('woff2');
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton.woff2') format('woff2');
}
@font-face {
  font-family: 'Mr Dafoe';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/mr-dafoe.woff2') format('woff2');
}
@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/share-tech-mono.woff2') format('woff2');
}

/* ---------- Design-Tokens ---------- */
.genx-page {
  --genx-wall: #1d1626;
  --genx-ink: #17101f;
  --genx-panel: #241c30;
  --genx-panel-2: #0c0330;
  --genx-yellow: #ffd23f;
  --genx-orange: #ff8c1a;
  --genx-orange-deep: #f4550c;
  --genx-cyan: #29c5f6;
  --genx-blue: #1a6ff0;
  --genx-magenta: #e246a2;
  --genx-purple: #8b3fd9;
  --genx-pink: #ff2975;
  --genx-pink-soft: rgba(255, 41, 117, .5);
  --genx-matrix: #00ff41;
  --genx-matrix-soft: rgba(0, 255, 65, .55);
  --genx-paper: #f4ead8;
  --genx-text: #ddd6ea;
  --genx-dim: #9a90b6;
  --genx-grad-warm: linear-gradient(180deg, #ffe066 6%, #ffb62e 42%, #ff7a1a 76%, #f4550c 100%);
  --genx-grad-cool: linear-gradient(180deg, #7fe3ff 6%, #29c5f6 45%, #1a6ff0 90%);
  --genx-display: 'Luckiest Guy', 'Arial Black', sans-serif;
  --genx-script: 'Mr Dafoe', cursive;
  --genx-condensed: 'Anton', 'Arial Narrow', sans-serif;
  --genx-mono: 'Share Tech Mono', ui-monospace, 'Consolas', monospace;
  --genx-body: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;

  position: relative;
  color: var(--genx-text);
  font-family: var(--genx-body);
  line-height: 1.7;
  overflow-x: clip;
}

.genx-page ::selection { background: var(--genx-matrix); color: var(--genx-ink); }
.genx-page *,
.genx-page *::before,
.genx-page *::after { box-sizing: border-box; }

/* ---------- Hintergrund-Wand + CRT ---------- */
.genx-page .genx-bgwall {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--genx-wall);
  background-image:
    radial-gradient(640px 420px at 10% 8%, rgba(139, 63, 217, .22), transparent 70%),
    radial-gradient(560px 400px at 92% 4%, rgba(226, 70, 162, .16), transparent 70%),
    radial-gradient(700px 520px at 84% 94%, rgba(41, 197, 246, .13), transparent 70%),
    radial-gradient(560px 440px at 6% 96%, rgba(255, 122, 26, .13), transparent 70%);
}
.genx-page .genx-bgwall::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
.genx-page .genx-crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .35;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
}

/* ---------- Buttons ---------- */
.genx-page .genx-btn {
  display: inline-block;
  font-family: var(--genx-display);
  font-size: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--genx-ink);
  padding: 13px 26px 10px;
  border: 3px solid var(--genx-ink);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--genx-ink);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .2s;
}
.genx-page .genx-btn-primary { background: linear-gradient(180deg, #ffe066, #ffb62e 45%, #ff7a1a); }
.genx-page .genx-btn-ghost {
  color: var(--genx-cyan);
  background: transparent;
  box-shadow: 5px 5px 0 var(--genx-ink), inset 0 0 0 0 rgba(41, 197, 246, .1);
}
.genx-page .genx-btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--genx-ink); }
.genx-page .genx-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--genx-ink); }

/* ---------- Gradient-Schrift (Ueberschriften/Logo) ---------- */
.genx-page .genx-gt {
  display: inline-block;
  font-family: var(--genx-display);
  font-weight: 400;
  letter-spacing: .02em;
  /* Kopffreiheit fuer Umlaut-Punkte: sonst schneidet -webkit-background-clip:text
     auf dem Handy die Punkte ueber „ö/ä/ü" ab. */
  padding: .14em .05em .02em;
  line-height: 1.12;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px var(--genx-ink);
  paint-order: stroke fill;
  filter: drop-shadow(0 3px 0 rgba(10, 5, 18, .5));
}
.genx-page .genx-gt-warm { background-image: var(--genx-grad-warm); }
.genx-page .genx-gt-cool { background-image: var(--genx-grad-cool); }

/* ---------- Hero ---------- */
.genx-page .genx-hero {
  position: relative;
  overflow: hidden;
  /* Oben deutlich knapper -> das Logo rueckt naeher an die Kopfzeile (alle Groessen). */
  padding: clamp(34px, 5vw, 56px) clamp(18px, 4vw, 40px) clamp(70px, 10vw, 120px);
  text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(255, 140, 26, .13), transparent 58%);
}
.genx-page .genx-eyebrow {
  font-family: var(--genx-script);
  font-size: clamp(31px, 6vw, 58px);
  color: #8dffab;
  transform: rotate(-3deg);
  /* Lesbarer: klare dunkle Schattenkante + zurueckgenommener Neon-Halo. */
  text-shadow: 0 2px 4px rgba(0, 0, 0, .55), 0 0 12px rgba(0, 255, 65, .45), 0 0 26px rgba(0, 255, 65, .22);
  margin-bottom: 10px;
}
/* Ab 960px steckt der Spruch in der Kopfzeile -> im Hero ausblenden (kein Doppel). */
@media (min-width: 960px) {
  .genx-page .genx-eyebrow { display: none; }
}
.genx-page .genx-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .82;
}
.genx-page .genx-lockup-row { display: flex; align-items: center; justify-content: center; }
.genx-page .genx-lt {
  display: inline-block;
  font-family: var(--genx-display);
  font-weight: 400;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 4px var(--genx-ink);
  paint-order: stroke fill;
  filter: drop-shadow(0 4px 0 rgba(10, 5, 18, .5));
}
.genx-page .genx-lt-word { background-image: var(--genx-grad-warm); font-size: clamp(40px, 9.5vw, 128px); }
.genx-page .genx-lt-x {
  background-image: linear-gradient(180deg, #ffb62e, #ff7a1a 55%, #f4550c);
  font-size: clamp(72px, 17vw, 210px);
  margin-left: .04em;
}
.genx-page .genx-lt-podcast { background-image: var(--genx-grad-cool); font-size: clamp(38px, 8.6vw, 118px); margin-top: -.14em; }

.genx-page .genx-tagline {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(14px, 2.4vw, 26px);
}
.genx-page .genx-tagline span {
  font-family: var(--genx-condensed);
  font-size: clamp(13px, 1.7vw, 17px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--genx-ink);
  border: 2px solid rgba(255, 255, 255, .12);
  border-radius: 7px;
  padding: 5px 12px;
}
.genx-page .genx-sub {
  max-width: 560px;
  margin: clamp(18px, 3vw, 30px) auto 0;
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--genx-text);
}
.genx-page .genx-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
}

/* Deko-Sticker (schweben leicht) */
.genx-page .genx-sticker {
  position: absolute;
  z-index: 1;
  width: clamp(58px, 8vw, 108px);
  opacity: .92;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
  animation: genx-float 6s ease-in-out infinite;
}
.genx-page .genx-sticker svg { width: 100%; height: auto; display: block; }
@keyframes genx-float { 50% { transform: translateY(-14px) rotate(var(--genx-r, 0deg)); } }

/* ---------- Sektionen ---------- */
.genx-page .genx-section {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 110px) clamp(18px, 4vw, 40px);
}
.genx-page .genx-section-head { text-align: center; margin-bottom: clamp(34px, 5vw, 54px); }
.genx-page .genx-section-eyebrow {
  font-family: var(--genx-mono);
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #4dff77;
  text-shadow: 0 0 10px var(--genx-matrix-soft);
  margin-bottom: 14px;
}
.genx-page .genx-section-title {
  font-size: clamp(34px, 5.5vw, 58px);
  line-height: 1.06;
  text-wrap: balance;
}
.genx-page .genx-ep-note {
  margin-top: 26px;
  text-align: center;
  font-family: var(--genx-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--genx-dim);
}

/* ---------- "Das sind wir" (Polaroid) ---------- */
.genx-page .genx-wir {
  display: grid;
  grid-template-columns: minmax(240px, 380px) 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}
.genx-page .genx-polaroid {
  position: relative;
  background: var(--genx-paper);
  padding: 14px 14px 54px;
  border-radius: 3px;
  box-shadow: 8px 10px 0 rgba(10, 5, 18, .5), 0 20px 40px rgba(0, 0, 0, .45);
  transform: rotate(-3deg);
}
.genx-page .genx-polaroid img { width: 100%; height: auto; display: block; border-radius: 2px; }
.genx-page .genx-polaroid figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  text-align: center;
  font-family: var(--genx-script);
  font-size: clamp(20px, 2.6vw, 28px);
  color: #2a2233;
}
.genx-page .genx-wir-text p { margin: 0 0 14px; }
.genx-page .genx-wir-script {
  font-family: var(--genx-script);
  font-size: clamp(26px, 4vw, 44px);
  color: #7dffa0;
  transform: rotate(-3deg);
  margin-top: 10px;
  text-shadow: 0 0 8px var(--genx-matrix-soft), 0 0 24px rgba(0, 255, 65, .4);
}

/* ---------- Plattform-Chips ---------- */
.genx-page .genx-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.genx-page .genx-chip {
  --c: var(--genx-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 16px 14px;
  border: 3px solid var(--genx-ink);
  border-radius: 11px;
  background: var(--genx-panel);
  color: #f2edf8;
  text-decoration: none;
  font-family: var(--genx-mono);
  font-size: 13px;
  letter-spacing: .08em;
  box-shadow: 4px 4px 0 rgba(10, 5, 18, .6);
  transition: transform .15s, box-shadow .18s;
}
.genx-page .genx-chip svg { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 0 6px var(--c)); }
.genx-page .genx-chip:hover {
  transform: translate(-2px, -3px);
  box-shadow: 6px 7px 0 color-mix(in srgb, var(--c) 60%, #000);
}

/* ---------- Footer ---------- */
.genx-page .genx-footer {
  position: relative;
  border-top: 3px solid var(--genx-ink);
  padding: 44px clamp(18px, 4vw, 40px) 54px;
  text-align: center;
  background: rgba(20, 13, 28, .55);
}
.genx-page .genx-footer::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--genx-matrix), var(--genx-cyan) 25%, var(--genx-purple) 50%, var(--genx-magenta) 75%, var(--genx-orange));
}
.genx-page .genx-footer-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(16px, 4vw, 40px);
  font-family: var(--genx-mono); font-size: 12px; letter-spacing: .22em;
  margin-bottom: 18px;
}
.genx-page .genx-footer-links a { color: var(--genx-text); text-decoration: none; }
.genx-page .genx-footer-links a:hover { color: var(--genx-matrix); text-shadow: 0 0 10px var(--genx-matrix-soft); }
.genx-page .genx-footer-stop { font-family: var(--genx-mono); font-size: 11px; letter-spacing: .3em; color: var(--genx-dim); }

/* ---------- Reveal-on-Scroll ---------- */
.genx-page .genx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.genx-page .genx-reveal.genx-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .genx-page .genx-wir { grid-template-columns: 1fr; }
  .genx-page .genx-polaroid { max-width: 340px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .genx-page .genx-sticker { animation: none; }
  .genx-page .genx-reveal { opacity: 1; transform: none; transition: none; }
}