/* RIKAHOE – Großansicht nach Genre (Punkt 63) bzw. Serie (Punkt 66), eingebaut 2026-10-08 (Punkt 65), Schrift A.
   Greift nur, wenn die Großansicht ein data-stil trägt; ohne Stil bleibt alles wie in stil.css.
   data-stil ist bei Grenzbereiche das Hauptgenre der Folge, bei Domination und Tal die Serie.
   Je Stil: Akzentfarbe, Schrift für Titel, Tagline und Marke, Hintergrundstimmung und ein
   kurzer Auftritt beim Blättern. Die Kurzbeschreibung bleibt überall in EB Garamond. */

/* ---------- Gemeinsamer Aufbau ---------- */

.ansicht__genre { display: none; }

.ansicht[data-stil] .ansicht__genre {
  display: inline-block;
  margin: 4px 0; /* steht rechts neben dem Titel (basis.css, .ansicht__kopf) */
  padding: 4px 13px 3px;
  border: 1px solid color-mix(in srgb, var(--akzent) 65%, transparent);
  border-radius: 999px;
  color: var(--akzent);
  font-family: var(--g-marke, var(--g-titel));
  font-size: .74rem;
  letter-spacing: .1em;
  line-height: 1.4;
}

.ansicht[data-stil]:not(.ansicht--vollbild) { background: var(--g-grund, var(--ansicht-grund)); }

.ansicht[data-stil]:not(.ansicht--vollbild)::before,
.ansicht[data-stil]:not(.ansicht--vollbild)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.ansicht[data-stil]:not(.ansicht--vollbild)::before { background: var(--g-stimmung, none); }

.ansicht[data-stil] .ansicht__serie { color: color-mix(in srgb, var(--akzent) 80%, var(--text)); }
.ansicht[data-stil] .ansicht__text { border-left-color: color-mix(in srgb, var(--akzent) 30%, transparent); }

.ansicht[data-stil] .ansicht__titel {
  color: var(--g-titelfarbe, var(--akzent));
  font-family: var(--g-titel);
  font-size: calc(clamp(1.6rem, 3vw, 2.3rem) * var(--g-groesse, 1));
  font-weight: var(--g-gewicht, 400);
  letter-spacing: var(--g-sperrung, normal);
  line-height: var(--g-zeile, 1.15);
  text-transform: var(--g-versal, none);
  text-shadow: var(--g-schatten, none);
}

.ansicht[data-stil] .ansicht__tagline {
  color: var(--g-taglinefarbe, var(--text));
  font-family: var(--g-tagline, var(--schrift-text));
  font-size: calc(1.15rem * var(--g-tagline-groesse, 1));
  font-style: var(--g-tagline-stil, italic);
  letter-spacing: var(--g-tagline-sperrung, normal);
  line-height: 1.35;
}

/* Statt des goldenen Ornaments eine feine Linie in der Genrefarbe */
.ansicht[data-stil] .ansicht__beschreibung::before {
  height: 1px;
  margin: 5px 0 24px;
  background: linear-gradient(90deg, var(--akzent), transparent);
  opacity: .75;
}

.ansicht[data-stil] .ansicht__figur img {
  box-shadow: 0 30px 80px rgb(0 0 0 / .8), 0 0 70px color-mix(in srgb, var(--akzent) 16%, transparent);
}

/* ---------- Grusel: kaltes Nebelblau, alter Buchdruck, ziehender Nebel ---------- */

.ansicht[data-stil="grusel"] {
  --akzent: #9db7c9;
  --g-grund: #080a0d;
  --g-titel: "IM Fell English", Georgia, serif;
  --g-titelfarbe: #d3dee6;
  --g-groesse: 1.14;
  --g-schatten: 0 0 24px rgb(157 183 201 / .4);
  --g-tagline: "IM Fell English", Georgia, serif;
  --g-tagline-groesse: 1.05;
  --g-stimmung:
    radial-gradient(ellipse 70% 55% at 8% 0%, rgb(120 150 175 / .2), transparent 70%),
    radial-gradient(ellipse 60% 45% at 96% 100%, rgb(80 100 125 / .24), transparent 70%);
}

.ansicht[data-stil="grusel"]:not(.ansicht--vollbild)::after {
  inset: -15%;
  background:
    radial-gradient(ellipse 38% 22% at 28% 72%, rgb(190 205 220 / .11), transparent 70%),
    radial-gradient(ellipse 32% 18% at 72% 38%, rgb(190 205 220 / .09), transparent 70%),
    radial-gradient(ellipse 45% 20% at 55% 95%, rgb(190 205 220 / .11), transparent 70%);
  filter: blur(18px);
  animation: g-nebel 40s ease-in-out infinite alternate;
}

@keyframes g-nebel { from { transform: translateX(-7%); } to { transform: translateX(7%); } }

.ansicht--auftritt[data-stil="grusel"] .ansicht__titel { animation: g-auftauchen 1.8s ease-out; }
@keyframes g-auftauchen { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }

/* ---------- Horror: Blutrot, tropfende Schrift, dunkler Rand, kurzes Flackern ---------- */

.ansicht[data-stil="horror"] {
  --akzent: #c8191e;
  --g-grund: #0a0505;
  --g-titel: "Creepster", Impact, sans-serif;
  --g-titelfarbe: #d9252a;
  --g-groesse: 1.2;
  --g-sperrung: .03em;
  --g-zeile: 1.1;
  --g-schatten: 0 3px 0 #2a0000, 0 0 28px rgb(217 37 42 / .35);
  --g-tagline: "Creepster", Impact, sans-serif;
  --g-tagline-stil: normal;
  --g-tagline-groesse: .95;
  --g-tagline-sperrung: .04em;
  --g-taglinefarbe: #e6c9c4;
  --g-stimmung:
    radial-gradient(ellipse 75% 65% at 50% 45%, transparent 38%, rgb(75 0 0 / .55) 100%),
    radial-gradient(ellipse 50% 30% at 50% -5%, rgb(200 25 30 / .14), transparent 70%);
}

.ansicht--auftritt[data-stil="horror"] .ansicht__titel { animation: g-flackern 1.6s linear; }
@keyframes g-flackern {
  0%, 6% { opacity: 0; }
  7%, 11% { opacity: 1; }
  12%, 15% { opacity: .15; }
  16%, 41% { opacity: 1; }
  42%, 44% { opacity: .35; }
  45%, 100% { opacity: 1; }
}

/* ---------- Science-Fiction: Cyan, technische Versalien, Bildschirmzeilen ---------- */

.ansicht[data-stil="scifi"] {
  --akzent: #3cc8f5;
  --g-grund: #04080c;
  --g-titel: "Orbitron", "Helvetica Neue", sans-serif;
  --g-gewicht: 700;
  --g-titelfarbe: #93e7ff;
  --g-groesse: .82;
  --g-sperrung: .06em;
  --g-zeile: 1.35;
  --g-versal: uppercase;
  --g-schatten: 0 0 14px rgb(60 200 245 / .55);
  --g-tagline: "Orbitron", "Helvetica Neue", sans-serif;
  --g-tagline-stil: normal;
  --g-tagline-groesse: .7;
  --g-tagline-sperrung: .05em;
  --g-taglinefarbe: #cfeef8;
  --g-stimmung:
    repeating-linear-gradient(0deg, rgb(60 200 245 / .045) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse 80% 50% at 50% -10%, rgb(60 200 245 / .16), transparent 70%);
}

.ansicht[data-stil="scifi"]:not(.ansicht--vollbild)::after {
  background: linear-gradient(180deg, transparent, rgb(60 200 245 / .07), transparent) 0 0 / 100% 180px no-repeat;
  animation: g-abtasten 9s linear infinite;
}

@keyframes g-abtasten { from { background-position: 0 -180px; } to { background-position: 0 calc(100vh + 180px); } }

.ansicht--auftritt[data-stil="scifi"] .ansicht__titel { animation: g-einschalten .9s ease-out; }
@keyframes g-einschalten { from { opacity: 0; letter-spacing: .3em; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }

/* ---------- Humor: Comic-Gelb, schräge Plakatschrift, Rasterpunkte ---------- */

.ansicht[data-stil="humor"] {
  --akzent: #ffc83a;
  --g-grund: #110d05;
  --g-titel: "Bangers", Impact, sans-serif;
  --g-titelfarbe: #ffd447;
  --g-groesse: 1.32;
  --g-sperrung: .045em;
  --g-zeile: 1.05;
  --g-schatten: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 30px rgb(255 200 58 / .25);
  --g-tagline: "Bangers", Impact, sans-serif;
  --g-tagline-stil: normal;
  --g-tagline-groesse: 1.05;
  --g-tagline-sperrung: .06em;
  --g-stimmung:
    radial-gradient(rgb(255 200 58 / .08) 1.2px, transparent 1.8px) 0 0 / 16px 16px,
    radial-gradient(ellipse 70% 50% at 85% 0%, rgb(255 170 40 / .16), transparent 70%);
}

.ansicht[data-stil="humor"] .ansicht__titel { transform: rotate(-1.5deg); transform-origin: left center; }
.ansicht--auftritt[data-stil="humor"] .ansicht__titel { animation: g-hopser .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes g-hopser { from { opacity: 0; transform: rotate(-1.5deg) scale(.6); } to { opacity: 1; transform: rotate(-1.5deg) scale(1); } }

/* ---------- Mystery/Thriller: Sepia, Schreibmaschine, Lichtkegel, Aktenstempel ---------- */

.ansicht[data-stil="mystery"] {
  --akzent: #d6c29a;
  --g-grund: #0b0a08;
  --g-titel: "Special Elite", "Courier New", monospace;
  --g-titelfarbe: #ede3cc;
  --g-zeile: 1.25;
  --g-schatten: 0 0 1px rgb(237 227 204 / .6);
  --g-tagline: "Special Elite", "Courier New", monospace;
  --g-tagline-stil: normal;
  --g-tagline-groesse: .84;
  --g-stimmung:
    radial-gradient(circle at 72% 26%, rgb(214 194 154 / .13), transparent 42%),
    radial-gradient(ellipse 90% 75% at 50% 50%, transparent 50%, rgb(0 0 0 / .55) 100%);
}

.ansicht[data-stil="mystery"] .ansicht__genre {
  border: 2px solid #b8402f;
  border-radius: 3px;
  color: #d0533f;
  text-transform: uppercase;
  transform: rotate(var(--w, -4deg));
  white-space: nowrap;
}

/* Stempel-Arten (Punkt 83): Winkel --w und Art data-stempel setzt galerie.js je Folge */
.ansicht[data-stil="domination"] .ansicht__genre[data-stempel="doppel"] { border: 4px double #c8372d; padding: 3px 12px 2px; }
.ansicht[data-stil="domination"] .ansicht__genre[data-stempel="voll"] { background: #c8372d; color: #120807; }
.ansicht[data-stil="domination"] .ansicht__genre[data-stempel="alt"] {
  -webkit-mask-image: var(--stempel-abrieb);
          mask-image: var(--stempel-abrieb);
}
.ansicht[data-stil="domination"] {
  /* Abrieb wie bei einem abgenutzten Gummistempel: Rauschen als Maske */
  --stempel-abrieb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='50'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -3.2 2.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ansicht--auftritt[data-stil="mystery"] .ansicht__titel { animation: g-tippen 1.1s steps(12); }
@keyframes g-tippen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Fantasy: Moosgrün und Gold, keltische Schrift, funkelnde Lichter ---------- */

.ansicht[data-stil="fantasy"] {
  --akzent: #9bd27f;
  --g-grund: #060b07;
  --g-titel: "Uncial Antiqua", Georgia, serif;
  --g-titelfarbe: #dcebb8;
  --g-zeile: 1.25;
  --g-schatten: 0 0 22px rgb(155 210 127 / .35);
  --g-tagline: "Uncial Antiqua", Georgia, serif;
  --g-tagline-stil: normal;
  --g-tagline-groesse: .86;
  --g-stimmung:
    radial-gradient(ellipse 60% 50% at 12% 8%, rgb(155 210 127 / .14), transparent 70%),
    radial-gradient(ellipse 50% 40% at 92% 92%, rgb(215 190 110 / .13), transparent 70%);
}

.ansicht[data-stil="fantasy"]:not(.ansicht--vollbild)::after {
  background:
    radial-gradient(circle, rgb(240 225 160 / .6) 0 1px, transparent 1.6px) 0 0 / 97px 113px,
    radial-gradient(circle, rgb(190 240 170 / .5) 0 1px, transparent 1.6px) 40px 60px / 151px 131px;
  animation: g-funkeln 5s ease-in-out infinite alternate;
}

@keyframes g-funkeln { from { opacity: .2; } to { opacity: .75; } }

.ansicht--auftritt[data-stil="fantasy"] .ansicht__titel { animation: g-auftauchen 1.4s ease-out; }

/* ---------- Western: Rost und Sand, Plakatschrift, Abendsonne ---------- */

.ansicht[data-stil="western"] {
  --akzent: #dc8b4c;
  --g-grund: #120b07;
  --g-titel: "Rye", Georgia, serif;
  --g-titelfarbe: #efc184;
  --g-groesse: .9;
  --g-sperrung: .02em;
  --g-zeile: 1.25;
  --g-schatten: 2px 2px 0 #3a1d0c;
  --g-tagline: "Rye", Georgia, serif;
  --g-tagline-stil: normal;
  --g-tagline-groesse: .72;
  --g-tagline-sperrung: .03em;
  --g-stimmung:
    linear-gradient(180deg, rgb(220 139 76 / .17), transparent 45%),
    radial-gradient(ellipse 80% 40% at 50% 108%, rgb(200 150 90 / .17), transparent 70%);
}

/* ---------- Drama: gedämpftes Blaugrau, Schrift wie bisher ---------- */

.ansicht[data-stil="drama"] {
  --akzent: #a3b1c2;
  --g-grund: #0a0b0d;
  --g-titel: var(--schrift-titel);
  --g-gewicht: 700;
  --g-titelfarbe: #d3dae3;
  --g-stimmung: radial-gradient(ellipse 60% 45% at 50% -5%, rgb(163 177 194 / .14), transparent 70%);
}

/* ---------- Serie Domination: Agentenakte, Rot, schmale fette Versalien, Aktenstempel ---------- */

.ansicht[data-stil="domination"] {
  --akzent: #c8372d;
  --g-grund: #0a0909;
  --g-titel: "Oswald", "Arial Narrow", sans-serif;
  --g-gewicht: 700;
  --g-titelfarbe: #df4337;
  --g-groesse: 1.22;
  --g-sperrung: .03em;
  --g-zeile: 1.1;
  --g-versal: uppercase;
  --g-schatten: 0 2px 0 #2b0806, 0 0 24px rgb(200 55 45 / .3);
  --g-tagline: "Oswald", "Arial Narrow", sans-serif;
  --g-tagline-stil: normal;
  --g-tagline-groesse: .8;
  --g-tagline-sperrung: .02em;
  --g-taglinefarbe: #e7ddd0;
  --g-stimmung:
    linear-gradient(rgb(200 55 45 / .05) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgb(200 55 45 / .05) 1px, transparent 1px) 0 0 / 56px 56px,
    radial-gradient(ellipse 70% 50% at 85% -5%, rgb(200 55 45 / .15), transparent 70%),
    radial-gradient(ellipse 90% 75% at 50% 50%, transparent 55%, rgb(0 0 0 / .55) 100%);
}

.ansicht[data-stil="domination"] .ansicht__genre {
  border: 2px solid #c8372d;
  border-radius: 3px;
  color: #e0473b;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: rotate(var(--w, -4deg));
  white-space: nowrap;
}

/* Stempel-Arten (Punkt 83): Winkel --w und Art data-stempel setzt galerie.js je Folge */
.ansicht[data-stil="domination"] .ansicht__genre[data-stempel="doppel"] { border: 4px double #c8372d; padding: 3px 12px 2px; }
.ansicht[data-stil="domination"] .ansicht__genre[data-stempel="voll"] { background: #c8372d; color: #120807; }
.ansicht[data-stil="domination"] .ansicht__genre[data-stempel="alt"] {
  -webkit-mask-image: var(--stempel-abrieb);
          mask-image: var(--stempel-abrieb);
}
.ansicht[data-stil="domination"] {
  /* Abrieb wie bei einem abgenutzten Gummistempel: Rauschen als Maske */
  --stempel-abrieb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='50'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -3.2 2.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ansicht--auftritt[data-stil="domination"] .ansicht__titel { animation: g-wischen .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes g-wischen { from { clip-path: inset(0 100% 0 0); transform: translateX(-12px); } to { clip-path: inset(0 0 0 0); transform: none; } }

.ansicht--auftritt[data-stil="domination"] .ansicht__genre { animation: g-stempel .45s .4s cubic-bezier(.3, 1.5, .5, 1) backwards; }
@keyframes g-stempel { from { opacity: 0; transform: rotate(var(--w, -4deg)) scale(1.8); } to { opacity: 1; transform: rotate(var(--w, -4deg)) scale(1); } }

/* ---------- Serie Das Tal hinter der Zeit: Türkis und Gold, verzierte Kapitälchen, Nebel ---------- */

.ansicht[data-stil="tal"] {
  --akzent: #3cc6bd;
  --g-grund: #040a0b;
  --g-titel: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --g-gewicht: 700;
  --g-titelfarbe: #a6ece5;
  --g-zeile: 1.2;
  --g-schatten: 0 0 22px rgb(60 198 189 / .45), 0 1px 0 #0b2a28;
  --g-taglinefarbe: #dcc48e;
  --g-stimmung:
    radial-gradient(ellipse 65% 50% at 10% 105%, rgb(60 198 189 / .17), transparent 70%),
    radial-gradient(ellipse 50% 40% at 92% -5%, rgb(201 164 92 / .15), transparent 70%);
}

.ansicht[data-stil="tal"]:not(.ansicht--vollbild)::after {
  inset: -15%;
  background:
    radial-gradient(ellipse 40% 20% at 25% 80%, rgb(120 220 210 / .09), transparent 70%),
    radial-gradient(ellipse 35% 18% at 75% 60%, rgb(120 220 210 / .07), transparent 70%);
  filter: blur(20px);
  animation: g-nebel 46s ease-in-out infinite alternate;
}

.ansicht[data-stil="tal"] .ansicht__beschreibung::before { background: linear-gradient(90deg, #c9a45c, var(--akzent) 40%, transparent); }
.ansicht--auftritt[data-stil="tal"] .ansicht__titel { animation: g-auftauchen 1.6s ease-out; }

/* Marke „Chronik des Tals · Kapitel …“ mit Sanduhr (Punkt 87): Gold und Türkis, Kapitälchen, blendet langsam auf */
.ansicht[data-stil="tal"] .ansicht__genre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 3px 10px;
  border: 1px solid rgb(201 164 92 / .55);
  border-radius: 2px;
  background: linear-gradient(90deg, rgb(201 164 92 / .1), rgb(60 198 189 / .06));
  color: #dcc48e;
  font-family: "Cinzel", Georgia, serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
}
.ansicht[data-stil="tal"] .ansicht__genre::before {
  content: "";
  width: 11px;
  height: 15px;
  flex: none;
  background: #3cc6bd;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 15'%3E%3Cpath d='M0 0h11v1.5H9.6c0 2.6-1.6 4.4-3.3 6 1.7 1.6 3.3 3.4 3.3 6H11V15H0v-1.5h1.4c0-2.6 1.6-4.4 3.3-6-1.7-1.6-3.3-3.4-3.3-6H0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 15'%3E%3Cpath d='M0 0h11v1.5H9.6c0 2.6-1.6 4.4-3.3 6 1.7 1.6 3.3 3.4 3.3 6H11V15H0v-1.5h1.4c0-2.6 1.6-4.4 3.3-6-1.7-1.6-3.3-3.4-3.3-6H0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ansicht--auftritt[data-stil="tal"] .ansicht__genre { animation: g-auftauchen 1.6s .3s ease-out backwards; }

/* ---------- Genre-Filter auf der Serienseite (Punkt 64) ---------- */

.genre-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 28px; }

.genre-filter__knopf {
  --chip: var(--akzent);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 6px 13px;
  border: 1px solid color-mix(in srgb, var(--chip) 45%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: .85rem;
  cursor: pointer;
}

.genre-filter__knopf:hover { border-color: var(--chip); }
.genre-filter__knopf:focus-visible { outline: 2px solid var(--chip); outline-offset: 2px; }
.genre-filter__knopf[aria-pressed="true"] { border-color: var(--chip); background: color-mix(in srgb, var(--chip) 24%, transparent); }
.genre-filter__anzahl { color: var(--leise); font-size: .88em; }

.genre-filter__knopf[data-stil="grusel"] { --chip: #9db7c9; }
.genre-filter__knopf[data-stil="horror"] { --chip: #c8191e; }
.genre-filter__knopf[data-stil="scifi"] { --chip: #3cc8f5; }
.genre-filter__knopf[data-stil="humor"] { --chip: #ffc83a; }
.genre-filter__knopf[data-stil="mystery"] { --chip: #d6c29a; }
.genre-filter__knopf[data-stil="fantasy"] { --chip: #9bd27f; }
.genre-filter__knopf[data-stil="western"] { --chip: #dc8b4c; }
.genre-filter__knopf[data-stil="drama"] { --chip: #a3b1c2; }

/* Marke ohne Text (z. B. beim Tal) ausblenden */
.ansicht[data-stil] .ansicht__genre:empty { display: none; }

/* Wer in den Systemeinstellungen „Bewegung reduzieren“ gewählt hat, bekommt keine Effekte */
@media (prefers-reduced-motion: reduce) {
  .ansicht[data-stil] .ansicht__titel,
  .ansicht[data-stil] .ansicht__genre,
  .ansicht[data-stil]::after { animation: none !important; }
}