/* WoW Forever - Zierschicht ("episches" Thema).
   Wird NACH base/layout/components geladen und legt Rahmen, Gold, Textur,
   Zierformen und Bildrahmen ueber das nuechterne Grundlayout. Struktur und
   Abstaende bleiben in den drei Grunddateien - hier steht nur Schmuck.

   Regeln, die hier gelten:
   - Keine Bilddateien. Alles Zierwerk sind CSS-Verlaeufe oder SVG als
     data:-URI; die CSP erlaubt img-src 'self' data:.
  - Keine Kachel-Texturen: ein Verlauf mit falscher background-size wurde
     frueher in 140px-Streifen gekachelt und zeigte Nahtkanten quer ueber
     Karten und Kopfzeile. Flaechen sind einfarbig mit einem einzigen,
     ungekachelten Verlauf.
   - Farbe traegt nie allein eine Information (Rahmen ergaenzen Badges,
     ersetzen sie nicht).
   - Jede Bewegung ist unter prefers-reduced-motion abgeschaltet (ganz
     unten, ein Block fuer alles).
*/

/* ============================================================
   1. Zierformen als wiederverwendbare Hintergruende
   ============================================================ */

:root {
  /* Filigrane Ecke, oben links ausgerichtet (28x28). */
  --wf-orn-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23e3c37a' stroke-linecap='round'%3E%3Cpath d='M1.5 13V4.5a3 3 0 0 1 3-3H13' stroke-width='1.4'/%3E%3Cpath d='M6 6l5.5 5.5' stroke-width='0.9' opacity='0.75'/%3E%3Cpath d='M4.6 4.6l-.1-.1' stroke-width='0.9'/%3E%3Ccircle cx='13.6' cy='1.6' r='1.5' fill='%23e3c37a' stroke='none'/%3E%3Ccircle cx='1.6' cy='13.6' r='1.5' fill='%23e3c37a' stroke='none'/%3E%3C/svg%3E");

  /* Raute mit Fluegeln - Trenner unter Abschnittsueberschriften (120x9). */
  --wf-orn-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 9'%3E%3Cpath d='M0 4.5h44' stroke='%23e3c37a' stroke-width='1' opacity='0.55'/%3E%3Cpath d='M76 4.5h44' stroke='%23e3c37a' stroke-width='1' opacity='0.55'/%3E%3Cpath d='M60 0.5l4 4-4 4-4-4z' fill='%23f0b429'/%3E%3Cpath d='M50 4.5l3-2.5v5zM70 4.5l-3-2.5v5z' fill='%23e3c37a' opacity='0.8'/%3E%3C/svg%3E");

  /* Kleine Raute als Aufzaehlungs- und Ueberschriftenmarke (9x9). */
  --wf-orn-pip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M4.5 0l4.5 4.5-4.5 4.5L0 4.5z' fill='%23f0b429'/%3E%3C/svg%3E");
}

/* ============================================================
   2. Kopfbereich: Stein, Goldkante, leuchtender Schriftzug
   ============================================================ */

.wf-header {
  background-color: var(--wf-bg-header);
  background-image:
    linear-gradient(180deg, #16202e 0%, var(--wf-bg-header) 100%);
  border-bottom: 1px solid var(--wf-gold-line);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 10px 26px rgba(0, 0, 0, 0.45);
}

/* Goldene Zierkante mit Raute in der Mitte, direkt unter der Kopfleiste. */
.wf-header::after {
  content: "";
  display: block;
  height: 9px;
  background-image: var(--wf-orn-diamond);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 260px 9px;
  opacity: 0.9;
  margin-top: -1px;
}

.wf-logo__word {
  font-size: var(--wf-fs-600);
  text-shadow: 0 0 18px var(--wf-gold-glow);
}

.wf-logo__word span {
  background-image: linear-gradient(135deg, var(--wf-accent) 0%, var(--wf-gold-bright) 55%, var(--wf-accent-gold) 100%);
}

.wf-logo__sub {
  color: var(--wf-gold);
  opacity: 0.85;
  letter-spacing: 0.14em;
}

.wf-nav {
  background-image: linear-gradient(180deg, rgba(227, 195, 122, 0.05) 0%, transparent 100%);
  border-bottom-color: var(--wf-gold-line);
}

.wf-nav__link {
  font-family: var(--wf-font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--wf-fs-200);
  display: flex;
  align-items: center;
}

.wf-nav__link:hover { border-bottom-color: var(--wf-gold-line); }

.wf-nav__link--active {
  color: var(--wf-gold-bright);
  border-bottom-color: var(--wf-accent-gold);
  background-image: linear-gradient(180deg, transparent 40%, var(--wf-gold-glow) 100%);
}

@media (max-width: 999px) {
  /* Burger-Menue: aktiver Eintrag als Balken links mit sanftem Schein nach
     rechts statt des Kachel-Glimmens von unten (das wirkte wie ein Fleck). */
  .wf-nav__link--active { background-image: linear-gradient(90deg, rgba(240, 180, 41, 0.16) 0%, transparent 75%); }
  .wf-nav { box-shadow: 0 16px 28px -12px rgba(0, 0, 0, 0.6); }
}

/* ============================================================
   3. Hero: Nachthimmel mit Nordlicht, Bergkamm und Vignette
   ============================================================ */

.wf-hero {
  border-bottom: 1px solid var(--wf-gold-line);
  padding-bottom: var(--wf-sp-7);
}

/* Nordlicht-Schleier. Liegt UNTER dem Inhalt (z-index 0 gegen 1). */
.wf-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(60% 40% at 22% 12%, rgba(77, 171, 247, 0.20) 0%, transparent 70%),
    radial-gradient(50% 36% at 78% 8%, rgba(240, 180, 41, 0.13) 0%, transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgba(0, 0, 0, 0.55) 0%, transparent 70%);
  pointer-events: none;
  /* WCAG 2.2.2: Bewegung, die von selbst startet und neben dem Inhalt
     laeuft, darf hoechstens 5 Sekunden dauern - der Himmel driftet beim
     Laden kurz und bleibt dann stehen. */
  animation: wf-aurora 4.5s ease-in-out 1 forwards;
}

/* Bergkamm als Silhouette am unteren Rand. */
.wf-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0 96V62l84-26 62 30 74-46 96 44 78-22 112 40 88-58 104 62 92-34 78 28 96-42 90 50 70-20 76 34v34z' fill='%230c111a'/%3E%3Cpath d='M0 96V78l120-22 96 26 108-32 120 34 96-20 128 30 104-24 116 28 96-18 112 26 88-16 156 26v-2 62z' fill='%23121a26' opacity='0.85'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.wf-hero > * { position: relative; z-index: 1; }

.wf-hero__title {
  /* Verlauf endet bei Akzent-Gold statt Tiefgold: das dunkle Ende kam gegen
     das Artwork nur auf ~2,3:1 (WCAG 1.4.3 / 1.4.11). */
  background-image: linear-gradient(180deg, var(--wf-gold-bright) 0%, var(--wf-accent-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px var(--wf-gold-glow));
}

/* Zierlinie unter dem Hero-Titel. */
.wf-hero__title::after {
  content: "";
  display: block;
  height: 9px;
  margin-top: var(--wf-sp-3);
  background-image: var(--wf-orn-diamond);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 300px 9px;
}

.wf-hero__lead {
  color: var(--wf-text);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
  line-height: 1.55;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   4. Abschnittskoepfe
   ============================================================ */

.wf-section__head {
  border-bottom: 1px solid var(--wf-gold-line);
  padding-bottom: var(--wf-sp-3);
  position: relative;
}

.wf-section__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 120px;
  height: 9px;
  background-image: var(--wf-orn-diamond);
  background-repeat: no-repeat;
  background-size: 120px 9px;
}

.wf-section__head h2 {
  color: var(--wf-gold-bright);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--wf-fs-500);
  display: flex;
  align-items: center;
  gap: var(--wf-sp-3);
}

.wf-start h2 {
  color: var(--wf-gold-bright);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--wf-fs-500);
}

.wf-section__head h2::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  background-image: var(--wf-orn-pip);
  background-size: 9px 9px;
}

.wf-section--alt {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
  border-top: 1px solid var(--wf-border);
  border-bottom: 1px solid var(--wf-border);
}

/* ============================================================
   5. Gerahmte Tafeln (Karten, Kaesten, Countdown)
   ============================================================ */

.wf-card,
.wf-guidecard,
.wf-countdown,
.wf-toc,
.wf-filterbar,
.wf-icontile,
.wf-start__card,
.wf-tooltip {
  position: relative;
  border-color: var(--wf-gold-line);
  background-image: linear-gradient(165deg, rgba(227, 195, 122, 0.06) 0%, transparent 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--wf-shadow-card);
}

/* Beschlagecken: oben links und - gedreht - unten rechts. */
.wf-card::before,
.wf-card::after,
.wf-guidecard::before,
.wf-guidecard::after,
.wf-countdown::before,
.wf-countdown::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background-image: var(--wf-orn-corner);
  background-size: 18px 18px;
  background-repeat: no-repeat;
  opacity: 0.75;
  pointer-events: none;
}

.wf-card::before,
.wf-guidecard::before,
.wf-countdown::before { top: 3px; left: 3px; }

.wf-card::after,
.wf-guidecard::after,
.wf-countdown::after { bottom: 3px; right: 3px; transform: rotate(180deg); }

.wf-card,
.wf-guidecard {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.wf-card:hover,
.wf-guidecard:hover,
.wf-card:focus-within,
.wf-guidecard:focus-within {
  transform: translateY(-2px);
  border-color: var(--wf-gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 18px var(--wf-gold-glow);
}

/* Karten-Titel in der Fliesstextschrift, nicht in Cinzel: Cinzel kennt nur
   Grossbuchstaben (Kleinbuchstaben sind Kapitaelchen), und News-Titel sind
   ganze Saetze mit zehn, zwoelf Woertern ueber drei Zeilen - in Versalien
   liest sich das deutlich langsamer, die Wortbilder fehlen. Gold und
   Gewicht halten die Karte trotzdem im Thema; Cinzel bleibt den kurzen
   Ueberschriften (Abschnitte, Seitentitel, Navigation). */
.wf-card__title,
.wf-guidecard__title {
  font-family: var(--wf-font-body);
  font-weight: 700;
  color: var(--wf-gold-bright);
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: 0;
}

.wf-card__title a:hover,
.wf-guidecard__title a:hover { color: var(--wf-gold-bright); }

.wf-countdown {
  border-width: 2px;
  border-radius: var(--wf-radius-lg);
}

.wf-countdown__title { font-family: var(--wf-font-display); color: var(--wf-gold-bright); }
.wf-countdown__unit { border-color: var(--wf-gold-line); background-image: linear-gradient(180deg, rgba(227, 195, 122, 0.06), transparent); }
.wf-countdown__num { background-image: linear-gradient(180deg, var(--wf-gold-bright) 0%, var(--wf-accent-gold) 100%); }

.wf-icontile:hover,
.wf-icontile:focus-visible { border-color: var(--wf-gold); box-shadow: 0 0 18px var(--wf-gold-glow); }

.wf-hero-timeline__item--laeuft { box-shadow: inset 0 0 0 1px var(--wf-gold-line); }
.wf-hero-timeline__item--laeuft .wf-hero-timeline__symbol,
.wf-hero-timeline__item--laeuft .wf-hero-timeline__title { color: var(--wf-gold-bright); }
.wf-hero-timeline__item--laeuft .wf-hero-timeline__symbol { animation: wf-pulse 1.8s ease-in-out 2; /* WCAG 2.2.2: unter 5 Sekunden */ }

.wf-quicknav__link:hover,
.wf-quicknav__link:focus-visible { border-color: var(--wf-gold); box-shadow: 0 0 14px var(--wf-gold-glow); }

.wf-faq__item:hover,
.wf-faq__item:focus-within { border-color: var(--wf-gold-line); }
.wf-faq__question:hover,
.wf-faq__item:focus-within .wf-faq__question { color: var(--wf-gold-bright); }
.wf-faq__marker::after { transition: transform 150ms ease; }

.wf-toc h2,
.wf-sources h2 {
  font-family: var(--wf-font-display);
  color: var(--wf-gold-bright);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--wf-fs-200);
  border-bottom: 1px solid var(--wf-gold-line);
  padding-bottom: var(--wf-sp-2);
}

/* Quellenkasten bekommt dieselbe Tafel wie das Inhaltsverzeichnis. */
.wf-sources {
  background: var(--wf-bg-card);
  border: 1px solid var(--wf-gold-line);
  border-radius: var(--wf-radius-md);
  padding: var(--wf-card-pad);
  margin-bottom: var(--wf-sp-4);
}

.wf-sources ul { list-style: none; padding-left: 0; }
.wf-sources li { padding-left: var(--wf-sp-4); position: relative; margin-bottom: var(--wf-sp-2); }
.wf-sources li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background-image: var(--wf-orn-pip);
  background-size: 7px 7px;
  opacity: 0.8;
}

/* Quellenlage (partials/quellenlage.php): Kennzeichen samt Erklaerung ueber
   der Quellenliste. Absaetze ohne den Listen-Zierpunkt, etwas enger. */
.wf-quellenlage p { margin: 0 0 var(--wf-sp-2); }
.wf-quellenlage p:last-child { margin-bottom: 0; }
.wf-quellenlage__stufe { margin-bottom: var(--wf-sp-3); }
.wf-quellenlage__stufe .wf-badge { font-size: var(--wf-fs-200); }

/* Weiterlesen (partials/weiterlesen.php) am Ende von News und Guides.
   Steht im Raster NACH der Seitenleiste: auf dem Handy folgen so erst
   Quellenlage und Quellen dem Text, dann die naechsten Beitraege; auf dem
   Desktop rutscht es in die linke Spalte unter den Text. */
@media (min-width: 960px) {
  .wf-layout-2col > .wf-weiterlesen { grid-column: 1; }
}

.wf-weiterlesen {
  padding-top: var(--wf-sp-5);
  border-top: 1px solid var(--wf-gold-line);
  max-width: 40rem;
}

.wf-weiterlesen h2 {
  font-size: var(--wf-fs-500);
  color: var(--wf-gold-bright);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wf-weiterlesen ul { list-style: none; margin: 0 0 var(--wf-sp-4); padding: 0; }

.wf-weiterlesen li {
  display: flex;
  flex-direction: column;
  gap: var(--wf-sp-1);
  padding: var(--wf-sp-3) 0;
  border-bottom: 1px solid var(--wf-border);
}

.wf-weiterlesen li > a { font-weight: 700; font-size: var(--wf-fs-400); line-height: 1.5; }

.wf-weiterlesen__meta {
  display: flex;
  align-items: center;
  gap: var(--wf-sp-2);
  flex-wrap: wrap;
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
}


/* ============================================================
   6. Knoepfe, Marken, Etiketten
   ============================================================ */

.wf-btn {
  font-family: var(--wf-font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-image: linear-gradient(180deg, var(--wf-gold-bright) 0%, var(--wf-accent-gold) 55%, #b98a24 100%);
  border: 1px solid var(--wf-gold-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 10px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

/* Lichtreflex, der beim Zeigen einmal ueber den Knopf wandert. */
.wf-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}

.wf-btn:hover::after,
.wf-btn:focus-visible::after { animation: wf-sheen 700ms ease-out; }

.wf-btn--ghost {
  background-image: linear-gradient(180deg, rgba(227, 195, 122, 0.10), transparent);
  border-color: var(--wf-gold-edge);
  color: var(--wf-gold-bright);
  box-shadow: none;
}

.wf-btn--ghost:hover { border-color: var(--wf-gold); color: var(--wf-gold-bright); }

.wf-badge {
  /* Rand in der Textfarbe, abgetoent: das Kennzeichen bleibt eine Marke,
     keine Schaltflaeche. Text traegt die Information, Farbe ergaenzt. */
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 55%, transparent);
  font-family: var(--wf-font-display);
  letter-spacing: 0.06em;
}

.wf-tag {
  border-color: var(--wf-gold-line);
  background-image: linear-gradient(180deg, rgba(227, 195, 122, 0.08), transparent);
  color: var(--wf-text);
}

a.wf-tag:hover { border-color: var(--wf-gold); color: var(--wf-gold-bright); }

.wf-classchip { border-color: var(--wf-gold-line); background-image: linear-gradient(180deg, rgba(227, 195, 122, 0.08), transparent); }

.wf-pagination__current { background-image: linear-gradient(180deg, var(--wf-gold-bright), var(--wf-accent-gold)); }
.wf-pagination__link:hover { border-color: var(--wf-gold); color: var(--wf-gold-bright); }

/* ============================================================
   7. Fliesstext: Initiale, Kapitelmarken, Pergament-Zitat
   ============================================================ */

.wf-prose { font-size: var(--wf-fs-400); line-height: 1.7; }

/* Zeilenlaenge: die Textspalte ist auf dem Desktop gut 800px breit (auf
   Ueber/Impressum sogar 1250px), das waren bei 17px rund 95 bzw. 150
   Zeichen je Zeile - das Auge verliert beim Zeilensprung den Anschluss.
   40rem (640px) haelt Absaetze, Listen und Ueberschriften bei rund 75-80
   Zeichen. In rem statt em/ch, damit Ueberschrift (groessere Schrift) und
   Absatz gleich breit enden; "ch" taugt ohnehin nicht, die Ziffer 0 ist in
   Inter deutlich breiter als ein Durchschnittsbuchstabe. Bilder und
   Tabellen duerfen weiter die volle Spaltenbreite nutzen. */
.wf-prose > p,
.wf-prose > ul,
.wf-prose > ol,
.wf-prose > dl,
.wf-prose > blockquote,
.wf-prose > h2,
.wf-prose > h3,
.wf-prose > h4,
p.wf-prose,
ul.wf-prose { max-width: 40rem; }

/* Links im Fliesstext unterstreichen: Linkblau und Textfarbe sind beide
   hell und liegen gegeneinander nur bei ~1,3:1 - allein ueber die Farbe
   waere ein Link im Absatz kaum zu erkennen (WCAG 1.4.1). Gilt fuer jeden
   Link in einem Absatz des Hauptinhalts (Knoepfe, Schlagwoerter und
   "Alle ... ansehen" ausgenommen). Die Linie ist dezent und wird beim
   Zeigen kraeftiger. */
.wf-prose a,
.wf-sources a,
main p a:not([class*="wf-btn"]):not(.wf-tag):not(.wf-section__more),
.wf-tc-hint a,
.wf-hint-box a,
.wf-linkliste a,
.wf-suchgruppe a {
  text-decoration: underline;
  text-decoration-color: rgba(111, 195, 247, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.wf-prose a:hover,
.wf-sources a:hover,
main p a:not([class*="wf-btn"]):not(.wf-tag):not(.wf-section__more):hover,
.wf-tc-hint a:hover,
.wf-hint-box a:hover,
.wf-linkliste a:hover,
.wf-suchgruppe a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* Initiale nur, wenn der Text mit einem Absatz beginnt - Guides fangen mit
   einer Ueberschrift an und bekommen deshalb keine. */
.wf-prose > p:first-child::first-letter {
  float: left;
  font-family: var(--wf-font-display);
  font-size: 3.6rem;
  line-height: 0.82;
  padding: 0.08em 0.12em 0 0;
  margin-right: 0.04em;
  color: var(--wf-accent-gold);
  text-shadow: 0 0 16px var(--wf-gold-glow);
}

/* Kein display: flex mehr fuer den Zierpunkt (Korrekturrunde): ein Flex-Kind
   ohne min-width: 0 verweigert das Schrumpfen unter sein Inhalts-Minimum, und
   das laesst sich bei einem rohen Textknoten (kein Element, also kein
   Selektor fuer min-width: 0) nicht gezielt beheben - selbst mit
   overflow-wrap: break-word auf der Ueberschrift blieb ein langes Wort in
   Klammern breiter als 375px (gemessen: /datenschutz, "Einbindung von Icons
   (render.worldofwarcraft.com)"). Position: absolute fuer den Punkt umgeht
   das Flex-Sizing komplett. */
.wf-prose h2 {
  color: var(--wf-gold-bright);
  border-bottom: 1px solid var(--wf-gold-line);
  padding-bottom: var(--wf-sp-2);
  position: relative;
  padding-left: calc(9px + var(--wf-sp-3));
}

.wf-prose h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  background-image: var(--wf-orn-pip);
  background-size: 9px 9px;
}

.wf-prose h3 { color: var(--wf-gold); }

.wf-prose ul { list-style: none; padding-left: var(--wf-sp-5); }
/* Listenpunkte mit mehreren Zeilen liefen ohne Abstand ineinander. */
.wf-prose li + li { margin-top: var(--wf-sp-2); }
.wf-prose ul > li { position: relative; }
.wf-prose ul > li::before {
  content: "";
  position: absolute;
  left: calc(var(--wf-sp-4) * -1);
  top: 0.62em;
  width: 7px;
  height: 7px;
  background-image: var(--wf-orn-pip);
  background-size: 7px 7px;
  opacity: 0.85;
}

.wf-prose blockquote {
  margin: var(--wf-sp-5) 0;
  padding: var(--wf-sp-4) var(--wf-sp-5);
  background: var(--wf-parchment-bg);
  color: var(--wf-parchment-fg);
  border-left: 3px solid var(--wf-accent-gold);
  border-radius: var(--wf-radius-sm);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
  font-style: italic;
}

.wf-prose blockquote p:last-child { margin-bottom: 0; }

.wf-prose hr {
  border: none;
  height: 9px;
  background-image: var(--wf-orn-diamond);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 260px 9px;
  margin: var(--wf-sp-6) 0;
}

.wf-prose table th {
  background: var(--wf-bg-table-head);
  color: var(--wf-gold-bright);
  font-family: var(--wf-font-display);
  text-transform: uppercase;
  font-size: var(--wf-fs-100);
  letter-spacing: 0.04em;
}

.wf-prose table th,
.wf-prose table td { border-color: var(--wf-gold-line); }

/* ============================================================
   8. Bilder: Rahmen, Bildunterschrift, Rechtehinweis
   ============================================================ */

/* Gemeinsamer Rahmen fuer Beitragsbilder: doppelte Linie mit Steinfuellung
   dazwischen, wie ein gefasstes Gemaelde. */
.wf-figure {
  margin: var(--wf-sp-6) 0;
}

.wf-figure__frame {
  position: relative;
  padding: 6px;
  background-color: var(--wf-stone);
  border: 1px solid var(--wf-gold-line);
  border-radius: var(--wf-radius-md);
  box-shadow: var(--wf-frame-shadow);
}

.wf-figure__frame::before,
.wf-figure__frame::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: var(--wf-orn-corner);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

.wf-figure__frame::before { top: 2px; left: 2px; }
.wf-figure__frame::after { bottom: 2px; right: 2px; transform: rotate(180deg); }

.wf-figure__frame img {
  width: 100%;
  height: auto;
  border-radius: var(--wf-radius-sm);
  display: block;
}

.wf-figure figcaption,
.wf-figure__caption {
  margin-top: var(--wf-sp-2);
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
  line-height: 1.5;
}

.wf-figure__credit {
  display: block;
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
  opacity: 0.85;
}

.wf-figure__credit a { color: var(--wf-text-dim); text-decoration: underline; }
.wf-figure__credit a:hover { color: var(--wf-gold-bright); }

/* Aufmacher ueber Titel und Text einer Einzelseite. */
.wf-article-hero { margin: 0 0 var(--wf-sp-5); }
.wf-article-hero .wf-figure__frame { padding: 8px; }
.wf-article-hero img { aspect-ratio: 16 / 7; object-fit: cover; }

/* Bild in einer Listenkarte. Die Karte ist ein Flex-Stapel; das Bild sitzt
   ganz oben und zieht sich ueber die volle Kartenbreite. */
.wf-card__media,
.wf-guidecard__media {
  display: block;
  margin: calc(var(--wf-card-pad) * -1) calc(var(--wf-card-pad) * -1) 0;
  border-bottom: 1px solid var(--wf-gold-line);
  overflow: hidden;
  border-radius: var(--wf-radius-md) var(--wf-radius-md) 0 0;
  background: var(--wf-stone-dark);
}

.wf-card__media img,
.wf-guidecard__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 300ms ease, filter 300ms ease;
  filter: saturate(0.92);
}

.wf-card:hover .wf-card__media img,
.wf-guidecard:hover .wf-guidecard__media img {
  transform: scale(1.04);
  filter: saturate(1.05);
}

/* Die Guide-Karte ist waagerecht gesetzt - mit Bild wird sie ein Stapel. */
.wf-guidecard:has(.wf-guidecard__media) { flex-direction: column; align-items: stretch; gap: var(--wf-sp-3); }

/* Bilder direkt aus dem Markdown-Text (siehe App\Core\Markdown). */
.wf-prose figure { margin: var(--wf-sp-6) 0; }
.wf-prose figure img { border-radius: var(--wf-radius-sm); }

/* Bildergalerie im Beitrag: zwei Spalten ab Tablet. */
.wf-gallery { display: grid; grid-template-columns: 1fr; gap: var(--wf-sp-4); margin: var(--wf-sp-6) 0; }
@media (min-width: 640px) { .wf-gallery { grid-template-columns: 1fr 1fr; } }
.wf-gallery .wf-figure { margin: 0; }

/* ============================================================
   9. Fusszeile
   ============================================================ */

.wf-footer {
  background-image: linear-gradient(180deg, var(--wf-bg-header) 0%, #0a0f17 100%);
  border-top: 1px solid var(--wf-gold-line);
}

.wf-footer::before {
  content: "";
  display: block;
  height: 9px;
  margin: calc(var(--wf-sp-6) * -1) 0 var(--wf-sp-5);
  background-image: var(--wf-orn-diamond);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 300px 9px;
}

.wf-footer__brand { color: var(--wf-gold-bright); letter-spacing: 0.04em; }
.wf-footer .wf-footer__heading { color: var(--wf-gold); font-family: var(--wf-font-display); }

/* ============================================================
   10. Bewegung
   ============================================================ */

@keyframes wf-aurora {
  from { transform: translate3d(-2%, 0, 0) scale(1); opacity: 0.85; }
  to { transform: translate3d(2%, -1%, 0) scale(1.06); opacity: 1; }
}

@keyframes wf-sheen {
  from { left: -60%; opacity: 0.9; }
  to { left: 120%; opacity: 0; }
}

/* Pulsierender Punkt fuer eine laufende Station im Hero (/, Zeitleiste). */
@keyframes wf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-hero::before { animation: none; }
  .wf-btn::after { animation: none; display: none; }
  .wf-btn { transition: none; }
  .wf-hero-timeline, .wf-quicknav__list { scroll-snap-type: none; }
  .wf-hero-timeline__item--laeuft .wf-hero-timeline__symbol { animation: none; }
  .wf-card,
  .wf-guidecard,
  .wf-card__media img,
  .wf-guidecard__media img { transition: none; }
  .wf-card:hover,
  .wf-guidecard:hover,
  .wf-card:focus-within,
  .wf-guidecard:focus-within { transform: none; }
  .wf-card:hover .wf-card__media img,
  .wf-guidecard:hover .wf-guidecard__media img { transform: none; }
  .wf-faq__marker::after { transition: none; }
}

/* ============================================================
   11. Enge Bildschirme: Zierwerk zuruecknehmen
   ============================================================ */

@media (max-width: 639px) {
  /* Seitentitel (News, Guides) sind lange Saetze; in Cinzel mit 32px
     brauchten sie auf 375px fuenf Zeilen, bevor der erste Satz kommt. */
  .wf-hero__title::after { background-size: 200px 9px; }
  .wf-prose > p:first-child::first-letter { font-size: 2.8rem; }
  .wf-card::before,
  .wf-card::after,
  .wf-guidecard::before,
  .wf-guidecard::after { display: none; }
  .wf-hero::after { height: 56px; }
}

/* ============================================================
   12. Druck: Zierwerk kostet nur Farbe
   ============================================================ */

@media print {
  .wf-header::after,
  .wf-footer::before,
  .wf-hero::before,
  .wf-hero::after,
  .wf-section__head::after,
  .wf-card::before,
  .wf-card::after,
  .wf-guidecard::before,
  .wf-guidecard::after { display: none; }
  .wf-figure__frame { box-shadow: none; }
}

/* ============================================================
   13. Startseiten-Hero mit Key Art
   ============================================================ */

/* Nur die Startseite legt das Ankuendigungs-Artwork hinter den Hero. Der
   dunkle Verlauf darueber ist nicht Deko, sondern Pflicht: ohne ihn faellt
   der Text auf den hellen Himmelspartien unter 4.5:1 Kontrast (gemessen am
   hellsten Pixel hinter jedem Textblock, siehe docs/architektur.md 6.2). Der
   waagrechte Schleier links deckt die Textspalte, rechts bleibt das Bild
   sichtbar. */
.wf-hero--art {
  background-image:
    linear-gradient(90deg, rgba(8, 12, 19, 0.62) 0%, rgba(8, 12, 19, 0.5) 50%, rgba(8, 12, 19, 0) 85%),
    linear-gradient(180deg, rgba(10, 15, 23, 0.74) 0%, rgba(14, 20, 32, 0.86) 58%, var(--wf-bg-body) 94%),
    url("../img/site/keyart-allianz.webp");
  background-size: cover, cover, cover;
  background-position: center, center, center 26%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* Handy: die 720er-Variante reicht auch auf einem 2x-Display und spart rund
   drei Viertel der Bytes. Ein Hintergrundbild kann kein srcset - deshalb
   hier von Hand, mit derselben Grenze wie im sizes der Beitragsbilder. */
@media (max-width: 720px) {
  .wf-hero--art {
    background-image:
      linear-gradient(90deg, rgba(8, 12, 19, 0.62) 0%, rgba(8, 12, 19, 0.5) 50%, rgba(8, 12, 19, 0) 85%),
      linear-gradient(180deg, rgba(10, 15, 23, 0.74) 0%, rgba(14, 20, 32, 0.86) 58%, var(--wf-bg-body) 94%),
      url("../img/site/keyart-allianz-720.webp");
  }
}

.wf-hero__credit {
  margin: var(--wf-sp-4) 0 0;
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
}


/* ============================================================
   14. Kontrast- und Farbvorlieben
   ============================================================ */

/* prefers-contrast: more - Rahmen, Trenner und Nebentext kraeftiger, Glanz
   und Verlaeufe weg. Gemessen wird gegen die dunklen Flaechen: der Rand
   liegt danach bei >= 7:1. */
@media (prefers-contrast: more) {
  :root {
    --wf-border: #8da2c0;
    --wf-gold-line: #c9a85c;
    --wf-gold-edge: #d9bb72;
    --wf-control-border: #a9bbd4;
    --wf-text: #f3f6fa;
    --wf-text-dim: #d3dcea;
    --wf-scrollbar-thumb: #a9bbd4;
  }

  .wf-card,
  .wf-guidecard,
  .wf-countdown,
  .wf-toc,
  .wf-filterbar,
  .wf-icontile,
  .wf-sources,
  .wf-section--alt,
  .wf-header,
  .wf-footer,
  .wf-nav,
  .wf-btn--ghost,
  .wf-tag,
  .wf-classchip { background-image: none; }

  .wf-hero__title { filter: none; }
  .wf-hero__lead,
  .wf-logo__word { text-shadow: none; }
  .wf-card::before,
  .wf-card::after,
  .wf-guidecard::before,
  .wf-guidecard::after,
  .wf-countdown::before,
  .wf-countdown::after { display: none; }
  .wf-prose a { text-decoration-color: currentColor; }
  .wf-badge { border-color: currentColor; }
  :focus-visible { outline-width: 4px; }
}

/* Windows-Kontrastmodus (forced-colors): Systemfarben statt Marken-
   farben. Hintergruende und Verlaeufe entfernt der Browser selbst; was an
   ihnen allein hing (Knopfflaeche, Trenner, Marker, Fokus), bekommt hier
   echte Raender, Linien und Systemfarben. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  .wf-btn,
  .wf-nav__toggle,
  .wf-quicknav__link,
  .wf-pagination__link,
  .wf-pagination__current { border: 1px solid ButtonText; }
  .wf-pagination__current { border-width: 3px; }
  .wf-btn::after,
  .wf-hero::before,
  .wf-hero::after,
  .wf-header::after,
  .wf-footer::before,
  .wf-section__head::after,
  .wf-card::before,
  .wf-card::after,
  .wf-guidecard::before,
  .wf-guidecard::after,
  .wf-countdown::before,
  .wf-countdown::after { display: none; }
  .wf-hero__title,
  .wf-countdown__num,
  .wf-logo__word span { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; filter: none; }
  .wf-nav__link--active { border-bottom-color: Highlight; text-decoration: underline; }
  .wf-nav__link--active,
  .wf-tabs__btn[aria-selected="true"] { border-bottom-width: 4px; }
  .wf-badge,
  .wf-tag,
  .wf-classchip,
  .wf-card,
  .wf-guidecard,
  .wf-countdown,
  .wf-faq__item,
  .wf-table-wrap,
  .wf-filterbar,
  .wf-toc,
  .wf-sources { border: 1px solid CanvasText; }
  .wf-faq__marker::before,
  .wf-faq__marker::after,
  .wf-nav__toggle-icon,
  .wf-nav__toggle-icon::before,
  .wf-nav__toggle-icon::after { background: CanvasText; }
  .wf-section__head { border-bottom-color: CanvasText; }
  .wf-prose h2::before,
  .wf-prose ul > li::before,
  .wf-sources li::before { forced-color-adjust: none; }
  .wf-prose blockquote { border-left: 4px solid CanvasText; }
  .wf-coin::before { forced-color-adjust: none; }
}