/* ==========================================================================
   darthmax78/contao-retro – Anekdoten-Box – RPG-Dialogfenster
   Klasse: anecdote am Text-Element
   Farben ausschließlich über die --rg-* Variablen der custom.css (rg-05).
   Geladen nach der custom.css (RetroCssListener), Herkunft: custom.css, rg-06.
   ========================================================================== */

/* ==========================================================
   Anekdoten-Box (RPG-Dialogfenster-Optik)
   Aktivierung: CSS-Klasse "anecdote" am Inhaltselement
   Überschrift des Elements wird zum Namensschild auf dem Rahmen;
   ohne Überschrift erscheint automatisch "Anekdote".
   ========================================================== */

.anecdote {
  position: relative;
  margin: 2.6em 0 2em;
  padding: 2em 1.6em 1.9em;
  background: var(--rg-papier);
  color: var(--rg-tinte);
  border: 3px solid var(--rg-tinte);
  border-radius: 6px;
  /* innere Zierlinie wie bei klassischen RPG-Textfenstern */
  box-shadow:
    inset 0 0 0 3px var(--rg-papier),
    inset 0 0 0 4px var(--rg-tinte);
}

.anecdote p {
  margin: 0 0 .9em;
  line-height: 1.6;
}

.anecdote > :last-child {
  margin-bottom: 0;
}

/* Namensschild: Contao-Überschrift ODER automatischer Fallback */
.anecdote > :is(h1, h2, h3, h4, h5, h6):first-child,
.anecdote:not(:has(> :is(h1, h2, h3, h4, h5, h6):first-child))::before {
  position: absolute;
  top: 0;
  left: 1.2em;
  transform: translateY(-50%);
  max-width: calc(100% - 2.4em);
  margin: 0;
  padding: .15em .7em .2em;
  background: var(--rg-papier);
  border: 3px solid var(--rg-tinte);
  border-radius: 4px;
  font-family: "VT323", monospace;
  font-size: 1.45rem;
  font-weight: normal;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--rg-gruen);
}

.anecdote:not(:has(> :is(h1, h2, h3, h4, h5, h6):first-child))::before {
  content: "Anekdote";
}

/* Blinkender Weiter-Pfeil unten rechts */
.anecdote::after {
  content: "\25BC"; /* ▼ */
  position: absolute;
  right: .9em;
  bottom: .45em;
  font-size: .8rem;
  line-height: 1;
  color: var(--rg-gruen);
  animation: anecdote-blink 1s steps(1) infinite;
}

@keyframes anecdote-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .anecdote::after { animation: none; }
}

@media (max-width: 600px) {
  .anecdote {
    padding: 1.9em 1.1em 1.8em;
  }
  .anecdote > :is(h1, h2, h3, h4, h5, h6):first-child,
  .anecdote:not(:has(> :is(h1, h2, h3, h4, h5, h6):first-child))::before {
    left: .8em;
    font-size: 1.3rem;
  }
}