/* CAT-Doku Feinschliff (DaemonX-Feedback 2026-07-10):
   Marken-Farbe = Holo-Cyan aus dem Dashboard-Logo (#0e7490 Hex, #67e8f9 Visor) —
   Akzent/Links exakt auf die Brand-Töne ziehen (Material-"cyan" nur als Fallback). */

[data-md-color-scheme="slate"] {
  --md-accent-fg-color: #67e8f9;
  --md-typeset-a-color: #22d3ee;
}
[data-md-color-scheme="default"] {
  --md-accent-fg-color: #0e7490;
  --md-typeset-a-color: #0e7490;
}

/* Kategorie-Überschriften in der Sidebar farblich hervorheben — sonst gehen sie
   zwischen den Seitenlinks unter. Farbe = Brand-Akzent (oben). */

.md-nav--primary .md-nav__item--section > .md-nav__link {
  color: var(--md-accent-fg-color);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  margin-top: 0.9em;
  opacity: 1;
}

/* Nicht-klickbare Sektions-Labels nicht "ausgegraut" wirken lassen */
.md-nav--primary .md-nav__item--section > .md-nav__link[for] {
  color: var(--md-accent-fg-color);
}

/* Preise-Seite: Mystery-Karten (Coming soon) — bewusst verschleiert. */
.grid.cards.mystery > ul > li,
.grid.cards.mystery > :first-child > li {
  text-align: center;
  border-style: dashed;
  border-color: var(--md-accent-fg-color);
  opacity: 0.75;
  filter: saturate(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.grid.cards.mystery > ul > li:hover {
  opacity: 1;
  transform: translateY(-2px) rotate(-0.5deg);
}
/* Beta-Banner (block announce in overrides/main.html): Hinweis-Orange wie der
   Vorabversions-Banner im Dashboard — auf JEDER Seite, bewusst NICHT wegklickbar. */
.md-banner {
  background: linear-gradient(90deg, #c2410c, #9a3412);
  color: #fff7ed;
  font-size: 0.72rem;
  font-weight: 500;
}
.md-banner .md-banner__inner {
  text-align: center;
}
.md-banner a {
  color: #fed7aa;
  font-weight: 700;
  text-decoration: underline;
}
.md-banner a:hover {
  color: #ffedd5;
}

/* Startseiten-Hero: Vollbild-CAT-Nachtszene (overrides/home.html, nur index.md).
   Artwork = assets/hero.svg (dunkel in BEIDEN Farbschemata, Text liegt auf dem Bild). */
.cat-hero {
  position: relative;
  min-height: calc(100vh - 4.4rem); /* Beta-Banner + Header abgezogen */
  overflow: hidden;
  background: #070d1a;
}
.cat-hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.cat-hero__copy {
  position: absolute;
  left: clamp(1rem, 6vw, 4.5rem);
  bottom: 4.2rem;
  max-width: 30rem;
  z-index: 2;
}
.cat-hero__copy h1 {
  color: #f8fafc;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.6rem;
  text-shadow: 0 2px 24px rgba(4, 9, 15, 0.9);
}
.cat-hero__copy p {
  color: #c3d0de;
  font-size: 0.82rem;
  line-height: 1.55;
  max-width: 24rem;
  margin: 0 0 1.2rem;
  text-shadow: 0 1px 12px rgba(4, 9, 15, 0.9);
}
.cat-hero__actions .md-button {
  margin: 0.15rem 0.35rem 0.15rem 0;
  border-color: rgba(103, 232, 249, 0.45);
  color: #a5f3fc;
}
.cat-hero__actions .md-button--primary {
  background: linear-gradient(135deg, #0e7490, #155e75);
  border-color: #0e7490;
  color: #ecfeff;
}
.cat-hero__actions .md-button:hover {
  border-color: #67e8f9;
  color: #ecfeff;
  background-color: rgba(14, 116, 144, 0.25);
}
.cat-hero__actions .md-button--primary:hover {
  background: linear-gradient(135deg, #0891b2, #0e7490);
}
.cat-hero__scroll {
  position: absolute;
  bottom: 0.7rem;
  left: 50%;
  z-index: 2;
  color: #67e8f9;
  font-size: 1.25rem;
  text-decoration: none;
  animation: cat-bounce 2s infinite;
}
.cat-hero__scroll:hover,
.cat-hero__scroll:focus {
  color: #ecfeff;
}
@keyframes cat-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 0.4rem); }
}

/* Mobil: Banner wird mehrzeilig, Buttons untereinander; Bildausschnitt nach rechts
   verschieben, damit Hex-Mond + Katze im sichtbaren Bereich bleiben */
@media screen and (max-width: 44em) {
  .cat-hero { min-height: calc(100vh - 8.6rem); }
  .cat-hero__art { object-position: 66% bottom; }
  .cat-hero__copy { bottom: 3.2rem; right: 1rem; }
  .cat-hero__actions .md-button { display: block; text-align: center; margin: 0.4rem 0; }
}

.mystery-q {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  margin: 0.2em 0;
  color: var(--md-accent-fg-color);
}