/*
 * Cozy Creator Towns – Anpassungen fuer Quark 2
 * Wird nach theme.css geladen und ueberschreibt Farben und Schrift.
 * Vor Theme-Updates sichern!
 */

/* Schrift fuer Ueberschriften (Monocraft, OFL 1.1) */
@font-face {
  font-family: "Monocraft";
  src: url("../fonts/monocraft/Monocraft.ttf") format("truetype");
  font-display: swap;
}

/* Hell */
:root,
:root[data-theme="light"] {
  --pico-font-family-display: "Monocraft", "Inter", sans-serif;

  --q2-accent: #2F7A4B;            /* Waldgruen, Buttons und Akzente */
  --q2-accent-contrast: #ffffff;
  --q2-link: #2F7A4B;
  --q2-focus-ring: color-mix(in oklab, #2F7A4B 45%, transparent);

  --q2-bg: #f6faf6;                /* Seitenhintergrund, leicht gruenlich */
  --q2-bg-elev: #ffffff;
  --q2-bg-muted: #eaf2ec;
  --q2-nav-bg: rgba(246, 250, 246, 0.82);
}

/* Dunkel */
:root[data-theme="dark"] {
  --q2-accent: #2F7A4B;
  --q2-accent-contrast: #ffffff;
  --q2-link: #6fcf97;              /* helleres Gruen fuer Links auf dunkel */
  --q2-focus-ring: color-mix(in oklab, #6fcf97 45%, transparent);

  --q2-bg: #0b100d;
  --q2-bg-elev: #18211b;
  --q2-bg-muted: #233027;
  --q2-nav-bg: rgba(11, 16, 13, 0.82);
}
/* Streamer-Kacheln (Teilnehmer) */
.streamer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.streamer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  background: var(--q2-bg-elev);
  border-radius: var(--q2-radius-md);
  box-shadow: var(--q2-shadow-card);
  color: var(--q2-text);
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.streamer-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--q2-shadow-raised);
  color: var(--q2-text);
  text-decoration: none;
}
.streamer-card img {
  width: 112px;
  height: 112px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--q2-accent);
}
.streamer-card strong {
  font-size: 1.1rem;
}
.streamer-card .fa-twitch {
  color: #9146FF;
}
.streamer-card .team {
  font-size: 0.85rem;
  color: var(--q2-text-muted);
}

/* Streamer-Kacheln (Teilnehmer) */
.streamer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.streamer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  background: var(--q2-bg-elev);
  border-radius: var(--q2-radius-md);
  box-shadow: var(--q2-shadow-card);
  color: var(--q2-text);
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.streamer-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--q2-shadow-raised);
  color: var(--q2-text);
  text-decoration: none;
}
.streamer-card img {
  width: 112px;
  height: 112px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--q2-accent);
}
.streamer-card strong {
  font-size: 1.1rem;
}
.streamer-card .fa-twitch {
  color: #9146FF;
}
.streamer-card .team {
  font-size: 0.85rem;
  color: var(--q2-text-muted);
}


/* Hero: weich ueberblendende Hintergruende (bg1-bg5, je 8 s, 1,6 s Ueberblendung) */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: -2;            /* unter der dunklen Bildabdeckung, ueber dem Grundbild */
  pointer-events: none;
}
.hero-slides div {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity;
  animation: cct-fade 40s infinite;
}
.hero-slides div:nth-child(1) { background-image: url("/user/pages/01.home/01._hero/bg1.jpg"); animation-delay: 0s; }
.hero-slides div:nth-child(2) { background-image: url("/user/pages/01.home/01._hero/bg2.jpg"); animation-delay: 8s; }
.hero-slides div:nth-child(3) { background-image: url("/user/pages/01.home/01._hero/bg3.jpg"); animation-delay: 16s; }
.hero-slides div:nth-child(4) { background-image: url("/user/pages/01.home/01._hero/bg4.jpg"); animation-delay: 24s; }
.hero-slides div:nth-child(5) { background-image: url("/user/pages/01.home/01._hero/bg5.jpg"); animation-delay: 32s; }

@keyframes cct-fade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  20%  { opacity: 1; }
  24%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Wer Animationen im System abgeschaltet hat, sieht nur bg1 */
@media (prefers-reduced-motion: reduce) {
  .hero-slides { display: none; }
}

/* Bildebenen sollen den ganzen Hero fuellen, nicht nur den Textbereich */
#hero > .container {
  position: static;
}

/* Hero: Schlagschatten fuer bessere Lesbarkeit auf dem Hintergrundbild */
#hero h1,
#hero h2 {
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.6),
    0 4px 16px rgba(0, 0, 0, 0.45);
}
#hero p {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.7),
    0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Hero: Countdown bis zum Start */
.cct-countdown {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 1.75rem auto 2rem;
  padding: 1.1rem 2.25rem 1.25rem;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--q2-radius-md);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.cct-countdown .cd-zahl {
  font-family: var(--pico-font-family-display);
  font-size: clamp(2.75rem, 8vw, 4.5rem);
  line-height: 1;
  color: #ffffff;
}
.cct-countdown .cd-text {
  font-size: 1.1rem;
  font-weight: 600;
}
.cct-countdown .cd-datum {
  font-size: 0.9rem;
  opacity: 0.85;
}
#hero .btn {
  text-shadow: none;
}

/* FAQ: Fragen als Karten, groesser und mit Abstand */
.modular-text details {
  margin: 0 0 1rem;
  padding: 0;
  background: var(--q2-bg-elev);
  border: 1px solid var(--q2-border-ring);
  border-left: 4px solid transparent;
  border-radius: var(--q2-radius-md);
  box-shadow: var(--q2-shadow-card);
  transition: border-color 0.15s ease;
}
.modular-text details[open] {
  border-left-color: var(--q2-accent);
}
.modular-text details summary {
  padding: 1.1rem 1.25rem;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.modular-text details summary:hover {
  color: var(--q2-link);
}
.modular-text details p {
  margin: 0;
  padding: 0 1.25rem 1.2rem;
  line-height: 1.65;
}

/* Teilnehmer: Platzhalter-Kachel "Weitere folgen" */
.streamer-card .platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border: 3px dashed var(--q2-accent);
  border-radius: 50%;
  font-size: 2.75rem;
  color: var(--q2-accent);
}
.streamer-card--offen {
  background: transparent;
  box-shadow: none;
  border: 2px dashed var(--q2-border-strong);
}
.streamer-card--offen:hover {
  border-color: var(--q2-accent);
}

/* Sprungziele nicht unter dem fixierten Header verstecken */
.module-anchor {
  scroll-margin-top: var(--q2-header-height);
}

/* Hinweis-Kasten "in Planung" */
.cct-hinweis {
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--q2-accent);
  border-radius: var(--q2-radius);
  background: color-mix(in oklab, var(--q2-accent) 10%, var(--q2-bg-elev));
  font-size: 0.95rem;
}