/*
Theme Name: Hrafn Wikinger
Theme URI: https://hrafn-wikinger.com
Author: Paul Windolf
Description: Custom-Theme für Hrafn Wikinger im Skandi-Stil – nordische Mythologie, dunkle Farbpalette, klassisches WordPress-Theme (kein Block-Theme).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hrafn
*/

/* ==========================================================================
   1. Farbvariablen (Nordische Farbpalette laut Phase-6-Guide)
   ========================================================================== */

:root {
	--hrafn-raven-black: #0D0D0F;
	--hrafn-weathered-gold: #C9A227;
	--hrafn-fjord-navy: #1B2A3C;
	--hrafn-parchment-white: #F5F0E6;
	--hrafn-border: rgba(245, 240, 230, 0.12);
	--hrafn-border-soft: rgba(245, 240, 230, 0.08);
	--hrafn-muted: rgba(245, 240, 230, 0.65);

	--hrafn-font-heading: 'Cinzel', Georgia, 'Times New Roman', serif;
	--hrafn-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--hrafn-max-width: 1200px;
	--hrafn-radius: 10px;
}

/* ==========================================================================
   2. Grundlagen
   ========================================================================== */

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
  overflow-x: hidden;

	margin: 0;
	background-color: var(--hrafn-raven-black);
	color: var(--hrafn-parchment-white);
	font-family: var(--hrafn-font-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hrafn-font-heading);
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 0.6em;
	color: var(--hrafn-parchment-white);
}

h1 { font-weight: 700; }

h1, h2, h3 {
	color: var(--hrafn-weathered-gold);
}

a {
	color: var(--hrafn-weathered-gold);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

p {
	margin: 0 0 1.2em;
}

.hrafn-container {
	max-width: var(--hrafn-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

.hrafn-btn {
	display: inline-block;
	padding: 0.75em 1.6em;
	background-color: transparent;
	color: var(--hrafn-weathered-gold);
	font-family: var(--hrafn-font-heading);
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 999px;
	border: 1px solid var(--hrafn-weathered-gold);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hrafn-btn:hover {
	background-color: var(--hrafn-weathered-gold);
	color: var(--hrafn-raven-black);
	text-decoration: none;
	transform: translateY(-1px);
}

.hrafn-btn--ghost {
	background: transparent;
	color: var(--hrafn-parchment-white);
	border: 1px solid var(--hrafn-border);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   3. Header
   ========================================================================== */

.hrafn-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(13, 13, 15, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--hrafn-border-soft);
}

.hrafn-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 24px;
}

.hrafn-header__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.hrafn-header__logo img {
	height: 46px;
	width: auto;
	object-fit: contain;
}

.hrafn-header__logo-text {
	font-family: var(--hrafn-font-heading);
	font-size: 1.1rem;
	letter-spacing: 0.05em;
	color: var(--hrafn-parchment-white);
}

.hrafn-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.hrafn-nav ul {
	display: flex;
	align-items: center;
	gap: 24px; /* Punkt 11a (09.09.2026): 32px → 24px, Menü einzeilig */
	list-style: none;
	margin: 0;
	padding: 0;
}

.hrafn-nav a {
	color: var(--hrafn-parchment-white);
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}

.hrafn-nav a:hover {
	color: var(--hrafn-weathered-gold);
	text-decoration: none;
}

/* Dropdown-Submenues (Phase 3: Zeitleiste unter Die Wikinger) */
.hrafn-nav li {
	position: relative;
}

.hrafn-nav .sub-menu {
	display: none;
	position: absolute;
	/* 12.09.2026: top statt margin, damit zwischen Menüpunkt und Klappe kein
	   hover-freier Spalt entsteht (siehe ::before weiter unten). */
	top: calc(100% + 8px);
	left: 0;
	min-width: 180px;
	background: var(--hrafn-raven-black);
	border: 1px solid var(--hrafn-border);
	border-radius: var(--hrafn-radius);
	padding: 0.5rem 0;
	margin: 0;
	gap: 0;
	flex-direction: column;
	z-index: 100;
}

/* 12.09.2026: unsichtbare Brücke über die 8 px zwischen Menüpunkt und Klappe.
   Vorher lag dort die Haupt-UL, nicht das li – die Maus verlor auf dem Weg nach
   unten den Hover, die Klappe schloss sich, bevor man sie erreichen konnte. */
.hrafn-nav .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -9px;
	height: 9px;
}

.hrafn-nav li:hover > .sub-menu,
.hrafn-nav li:focus-within > .sub-menu {
	display: flex;
}

.hrafn-nav .sub-menu li {
	width: 100%;
}

.hrafn-nav .sub-menu a {
	display: block;
	padding: 0.5rem 1.1rem;
	white-space: nowrap;
}

.hrafn-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.hrafn-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--hrafn-border);
	color: var(--hrafn-parchment-white);
	cursor: pointer;
}

.hrafn-icon-btn:hover {
	border-color: var(--hrafn-weathered-gold);
	color: var(--hrafn-weathered-gold);
}

.hrafn-lang-switcher {
	display: flex;
	gap: 6px;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.hrafn-lang-switcher a {
	color: var(--hrafn-muted);
}

.hrafn-lang-switcher a.is-active {
	color: var(--hrafn-weathered-gold);
}

.hrafn-mobile-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--hrafn-parchment-white);
	font-size: 1.5rem;
	cursor: pointer;
}

/* ==========================================================================
   4. Hero
   ========================================================================== */

.hrafn-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

	position: relative;
	min-height: 36vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.hrafn-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13,13,15,0.25) 0%, rgba(13,13,15,0.45) 55%, rgba(13,13,15,0.98) 100%);
}

.hrafn-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	padding: 0 24px;
}

.hrafn-hero__eyebrow {
	font-family: var(--hrafn-font-heading);
	color: var(--hrafn-weathered-gold);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-size: 0.85rem;
	margin-bottom: 1em;
}

.hrafn-hero h1 {
	font-size: clamp(2.4rem, 5vw, 4rem);
	margin-bottom: 0.4em;
}

.hrafn-hero__tagline {
	font-style: italic;
	font-size: 1.25rem;
	color: var(--hrafn-parchment-white);
	opacity: 0.9;
	margin-bottom: 1.2em;

  text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 1px 2px rgba(0,0,0,0.6);
  opacity: 1;
}

.hrafn-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}

.hrafn-btn--lg {
	padding: 1em 2.6em;
	font-size: 1rem;
}

/* ==========================================================================
   5. Sektionen / Startseite
   ========================================================================== */

.hrafn-section {
	padding: 4rem 0;
}

.hrafn-section__heading {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-bottom: 2.5rem;
}

.hrafn-section__heading h2 {
	font-size: 1.9rem;
}

.hrafn-section__underline {
	width: 64px;
	height: 3px;
	background-color: var(--hrafn-weathered-gold);
}

.hrafn-featured-single {
	max-width: 480px;
}

.hrafn-featured-single > a {
	color: inherit;
	text-decoration: none;
}

.hrafn-featured-single h3 {
	font-size: 1.6rem;
	line-height: 1.3;
	margin: 0 0 1.5rem;
}

.hrafn-featured-single__image {
	display: block;
	margin-bottom: 1.5rem;
}

.hrafn-featured-single__image img {
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: var(--hrafn-radius);
	border: none;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.hrafn-featured-single p {
	color: var(--hrafn-muted);
	font-size: 1.05rem;
	line-height: 1.7;
	margin-bottom: 1.5rem;
}

.hrafn-empty {
	color: var(--hrafn-muted);
	font-style: italic;
}

/* ==========================================================================
   6. Single Post
   ========================================================================== */

.hrafn-single-hero {
	position: relative;
	height: 34vh;
	max-height: 380px;
	min-height: 220px;
	background-size: cover;
	background-position: center;
}

.hrafn-single-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13,13,15,0.1) 0%, rgba(13,13,15,0.9) 100%);
}

.hrafn-single-figure {
	float: right;
	width: 42%;
	max-width: 360px;
	margin: 0.5rem 0 1.5rem 2.5rem;
}

.hrafn-single-figure img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
	border: none;
	box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}

@media (max-width: 720px) {
	.hrafn-single-figure {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 1.5rem 0;
	}
}

.hrafn-single-header {
	max-width: 780px;
	margin: 0 auto;
	padding: 2.5rem 24px 0;
	text-align: center;
}

.hrafn-single-header h1 {
	font-size: clamp(2rem, 4vw, 2.8rem);
}

.hrafn-post-meta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	color: var(--hrafn-muted);
	font-size: 0.9rem;
	margin: 1rem 0 2rem;
}

.hrafn-single-content {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 24px 4rem;
	font-size: 1.08rem;
}

.hrafn-single-content h2 {
	margin-top: 2em;
	font-size: 1.6rem;
}

.hrafn-single-content h3 {
	margin-top: 1.6em;
	font-size: 1.3rem;
}

.hrafn-single-content blockquote {
	border-left: 3px solid var(--hrafn-weathered-gold);
	margin: 2em 0;
	padding: 0.2em 0 0.2em 1.4em;
	font-style: italic;
	color: var(--hrafn-muted);
}

/* Verwandte Beiträge unter dem Artikel */
.hrafn-related-section {
	text-align: center;
	padding-top: 3rem;
	margin-top: 1rem;
	border-top: 1px solid var(--hrafn-border-soft);
}

.hrafn-related-heading {
	margin-top: 3rem;
	margin-bottom: 1.5rem;
	font-family: var(--hrafn-font-heading);
	color: var(--hrafn-weathered-gold);
	font-size: 1.1rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hrafn-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	text-align: left;
}

.hrafn-related-item {
	display: block;
	color: inherit;
	text-decoration: none;
}

.hrafn-related-item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--hrafn-radius);
	border: 1px solid var(--hrafn-border-soft);
	margin-bottom: 0.6rem;
}

.hrafn-related-item span {
	display: block;
	font-size: 0.92rem;
	line-height: 1.4;
	color: var(--hrafn-parchment-white);
}

.hrafn-related-item small {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.78rem;
	color: var(--hrafn-muted);
}

@media (max-width: 720px) {
	.hrafn-related-grid {
		grid-template-columns: 1fr;
	}
}

/* Reading time badge */
.hrafn-reading-time {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

/* Table of Contents */
.hrafn-toc-wrap {
	margin: 2rem 0;
	border: 1px solid var(--hrafn-border);
	border-radius: var(--hrafn-radius);
	overflow: hidden;
	background: rgba(245, 240, 230, 0.03);
	text-align: left;
}

.hrafn-toc-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.9rem 1.2rem;
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: var(--hrafn-font-heading);
	font-weight: 600;
	font-size: 1rem;
	color: var(--hrafn-parchment-white);
	text-align: left;
}

.hrafn-toc-toggle::after {
	content: "\25BE";
	color: var(--hrafn-weathered-gold);
	transition: transform 0.2s ease;
}

.hrafn-toc-wrap.is-open .hrafn-toc-toggle::after {
	transform: rotate(180deg);
}

.hrafn-toc-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	padding: 0 1.2rem;
}

.hrafn-toc-wrap.is-open .hrafn-toc-panel {
	max-height: 600px;
	padding: 0.2rem 1.2rem 1.2rem;
}

.hrafn-toc-panel ul {
	margin: 0;
	padding-left: 1.2rem;
}

.hrafn-toc-panel li {
	margin-bottom: 0.5rem;
}

.hrafn-toc-panel a {
	color: var(--hrafn-parchment-white);
}

.hrafn-toc-panel a:hover {
	color: var(--hrafn-weathered-gold);
}

/* Callout box */
.hrafn-callout {
	margin: 2rem 0;
	padding: 1.3rem 1.5rem;
	border-left: 4px solid var(--hrafn-weathered-gold);
	background: rgba(201, 162, 39, 0.08);
	border-radius: 0 var(--hrafn-radius) var(--hrafn-radius) 0;
}

.hrafn-callout-title {
	display: block;
	font-family: var(--hrafn-font-heading);
	font-weight: 600;
	color: var(--hrafn-weathered-gold);
	margin-bottom: 0.4rem;
}

/* Infobox-Komponenten (Wissensartikel, 6 Typen) */
.hrafn-infobox {
	margin: 2rem 0;
	padding: 1.3rem 1.5rem;
	border-left: 4px solid var(--hrafn-weathered-gold);
	background: rgba(201, 162, 39, 0.08);
	border-radius: 0 var(--hrafn-radius) var(--hrafn-radius) 0;
}

.hrafn-infobox__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--hrafn-font-heading);
	font-weight: 600;
	color: var(--hrafn-weathered-gold);
	margin-bottom: 0.5rem;
}

.hrafn-infobox__icon {
	font-size: 1.1em;
	line-height: 1;
}

.hrafn-infobox__body p:last-child {
	margin-bottom: 0;
}

.hrafn-infobox--umstritten {
	border-left-color: var(--hrafn-muted);
	background: rgba(245, 240, 230, 0.05);
}

.hrafn-infobox--umstritten .hrafn-infobox__head {
	color: var(--hrafn-parchment-white);
}

.hrafn-infobox--quellenlage,
.hrafn-infobox--mythoscheck {
	border-left-color: var(--hrafn-fjord-navy);
	background: rgba(27, 42, 60, 0.35);
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

.hrafn-footer {
	border-top: 1px solid var(--hrafn-border-soft);
	padding-top: 3rem;
}

.hrafn-footer__logo {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.hrafn-footer__logo img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
}

.hrafn-footer__nav ul {
	display: flex;
	justify-content: center;
	gap: 28px;
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
	flex-wrap: wrap;
}

.hrafn-footer__nav a {
	color: var(--hrafn-parchment-white);
	font-size: 0.9rem;
}

.hrafn-footer__nav a:hover {
	color: var(--hrafn-weathered-gold);
}

.hrafn-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1.5rem 0 2.5rem;
	border-top: 1px solid var(--hrafn-border-soft);
	color: var(--hrafn-muted);
	font-size: 0.85rem;
}

/* Newsletter widget */
.hrafn-newsletter {
	max-width: 480px;
	margin: 0 auto 3rem;
	text-align: center;
}

.hrafn-newsletter form {
	display: flex;
	gap: 0.6rem;
	margin-top: 1rem;
}

.hrafn-newsletter input[type="email"] {
	flex: 1;
	padding: 0.75em 1em;
	border-radius: 999px;
	border: 1px solid var(--hrafn-border);
	background: transparent;
	color: var(--hrafn-parchment-white);
	font-family: var(--hrafn-font-body);
}

/* ==========================================================================
   8. Responsive
   ========================================================================== */

@media (max-width: 880px) {
	.hrafn-featured-single {
		max-width: 100%;
		margin-left: 0 !important;
	}

	.hrafn-featured-single h3 {
		font-size: 1.3rem;
	}

	.hrafn-nav {
		display: none;
	}

	.hrafn-mobile-toggle {
		display: inline-flex;
	}
}


/* Gott-Profil: schmale Titelleiste statt grossem Hero-Bild */
.hrafn-gott-titlebar {
	max-width: var(--hrafn-max-width);
	margin: 0 auto;
	padding: 2.5rem 1.5rem 0;
	text-align: center;
}
.hrafn-gott-titlebar .hrafn-gott-badge {
	margin-bottom: 0.75rem;
}
.hrafn-gott-sidebar-image {
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: var(--hrafn-radius);
	background-size: cover;
	background-position: center center;
	margin-bottom: 1.25rem;
}
.hrafn-gott-sidebar-placeholder {
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: var(--hrafn-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(70, 66, 59, 0.55) 0%, rgba(13, 13, 15, 0.85) 100%);
	margin-bottom: 1.25rem;
}
.hrafn-gott-sidebar-placeholder-text {
	font-family: var(--hrafn-font-heading);
	font-style: italic;
	letter-spacing: 0.05em;
	color: var(--hrafn-muted);
	font-size: 0.85rem;
	border: 1px solid var(--hrafn-border);
	padding: 0.4rem 1rem;
	border-radius: var(--hrafn-radius);
}

.hrafn-gott-titlebar .hrafn-gott-title {
	color: var(--hrafn-weathered-gold);
}


/* Wikingerzeit-Zeitleiste (Phase 3) */
.hrafn-timeline {
	position: relative;
	margin: 2.5rem 0;
	padding-left: 2rem;
	border-left: 2px solid var(--hrafn-border);
}

.hrafn-timeline-item {
	position: relative;
	margin-bottom: 2rem;
}

.hrafn-timeline-item::before {
	content: '';
	position: absolute;
	left: -2.45rem;
	top: 0.3rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--hrafn-weathered-gold);
	border: 2px solid var(--hrafn-raven-black);
}

.hrafn-timeline-year {
	font-family: var(--hrafn-font-heading);
	color: var(--hrafn-weathered-gold);
	font-weight: 600;
	font-size: 1.15rem;
	display: block;
	margin-bottom: 0.3rem;
}

.hrafn-timeline-text {
	color: var(--hrafn-parchment-white);
	opacity: 0.9;
	line-height: 1.6;
}

/* Goetterstaemme Bild-Karten-Layout */
.hrafn-gott-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 1.25rem;
	margin-top: 1rem;
}

.hrafn-gott-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	border-radius: var(--hrafn-radius);
	overflow: hidden;
	background: transparent;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hrafn-gott-card:hover {
	transform: translateY(-4px);
}

.hrafn-gott-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--hrafn-fjord-navy);
}

.hrafn-gott-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hrafn-gott-card__body {
	padding: 0.75rem 0.85rem 1rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex-grow: 1;
}

.hrafn-gott-card__name {
	font-family: var(--hrafn-font-heading);
	color: var(--hrafn-weathered-gold);
	font-size: 1.05rem;
	line-height: 1.3;
}

.hrafn-gott-card__cta {
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--hrafn-weathered-gold);
	border: 1px solid var(--hrafn-weathered-gold);
	border-radius: var(--hrafn-radius);
	padding: 0.35rem 0.6rem;
	margin-top: auto;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hrafn-gott-card:hover .hrafn-gott-card__cta {
	background: var(--hrafn-weathered-gold);
	color: var(--hrafn-raven-black);
	border-color: var(--hrafn-weathered-gold);
}

.hrafn-gott-card--pending {
	cursor: default;
	opacity: 0.55;
}

.hrafn-gott-card--pending:hover {
	transform: none;
	box-shadow: none;
}

.hrafn-gott-card__cta--muted {
	color: var(--hrafn-muted);
	border-color: var(--hrafn-muted);
	opacity: 0.6;
}


/* Unterkategorie-Artikelraster: gleiches Karten-Layout wie Beruehmte-Persoenlichkeiten-Karten, ohne Rahmen/Hintergrund */
.hrafn-topic-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	border-radius: var(--hrafn-radius);
	overflow: hidden;
	background: transparent;
	text-align: center;
	transition: transform 0.2s ease;
}

.hrafn-topic-card:hover {
	transform: translateY(-4px);
}

.hrafn-topic-card__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--hrafn-fjord-navy);
	border-radius: var(--hrafn-radius);
}

.hrafn-topic-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hrafn-topic-card__title {
	font-family: var(--hrafn-font-heading);
	color: var(--hrafn-weathered-gold);
	font-size: 1.05rem;
	line-height: 1.3;
	padding: 0.75rem 0.85rem 0.25rem;
}

.hrafn-topic-card__excerpt {
	color: var(--hrafn-muted);
	font-size: 0.85rem;
	line-height: 1.5;
	padding: 0 0.85rem 0.5rem;
	margin: 0;
}

.hrafn-topic-card__cta {
	display: inline-block;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--hrafn-weathered-gold);
	border: 1px solid var(--hrafn-weathered-gold);
	border-radius: var(--hrafn-radius);
	padding: 0.35rem 0.6rem;
	margin: 0.25rem auto 1rem;
	transition: background 0.2s ease, color 0.2s ease;
}

.hrafn-topic-card:hover .hrafn-topic-card__cta {
	background: var(--hrafn-weathered-gold);
	color: var(--hrafn-raven-black);
}


.hrafn-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hrafn-border-soft);
}

.hrafn-post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	text-decoration: none;
	max-width: 45%;
	transition: opacity 0.2s ease;
}

.hrafn-post-nav__link:hover {
	opacity: 0.75;
}

.hrafn-post-nav__link--next {
	text-align: right;
	margin-left: auto;
}

.hrafn-post-nav__label {
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--hrafn-muted);
}

.hrafn-post-nav__title {
	font-family: var(--hrafn-font-heading);
	color: var(--hrafn-weathered-gold);
	font-size: 1rem;
	line-height: 1.35;
}

@media (max-width: 600px) {
	.hrafn-post-nav {
		flex-direction: column;
		gap: 1rem;
	}
	.hrafn-post-nav__link,
	.hrafn-post-nav__link--next {
		max-width: 100%;
		text-align: left;
		margin-left: 0;
	}
}

/* Fix: Footer-Nav (Datenschutz/Impressum) sitzt jetzt in der Bottom-Leiste, 
   der urspruengliche Abstand darunter darf dort nicht mehr wirken. */
.hrafn-footer__bottom .hrafn-footer__nav ul {
	margin: 0;
}

/* Fix: Footer-Bottom-Leiste zentrieren, alle 4 Elemente (Copyright, Impressum, 
   Datenschutz, Tagline) mit gleichem Abstand zueinander anordnen. */
.hrafn-footer__bottom {
	justify-content: center;
}
.hrafn-footer__bottom .hrafn-footer__nav ul {
	gap: 1rem;
}


/* ============================================
   Reisen & Entdecken (Travel & Explore) - Entwurf
   ============================================ */
.hrafn-hero__subheadline {
	font-family: var(--hrafn-font-heading);
	color: var(--hrafn-weathered-gold);
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	margin: 0.4rem 0 1rem;
	text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 1px 2px rgba(0,0,0,0.6);
}
.hrafn-travel-section { margin-top: 8px; margin-bottom: 56px; }
.hrafn-travel-section__label { display:block; font-family: var(--hrafn-font-body); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--hrafn-weathered-gold); margin-bottom:8px; text-align:center; }
.hrafn-travel-section__title { font-family: var(--hrafn-font-heading); color: var(--hrafn-parchment-white); font-size:1.8rem; text-align:center; margin:0 0 12px; }
.hrafn-travel-section__intro { color: var(--hrafn-muted); text-align:center; max-width:640px; margin:0 auto 12px; font-size:0.95rem; }
.hrafn-travel-tiles { display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 8px; }
.hrafn-travel-tile { background: rgba(245,240,230,0.04); border:1px solid var(--hrafn-border); border-radius: var(--hrafn-radius); padding: 28px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; transition: border-color .2s; }
.hrafn-travel-tile:hover { border-color: var(--hrafn-weathered-gold); }
.hrafn-travel-tile__title { font-family: var(--hrafn-font-heading); color: var(--hrafn-parchment-white); font-size:1.15rem; margin: 0 0 10px; }
.hrafn-travel-tile__text { color: var(--hrafn-muted); font-size:0.88rem; margin:0 0 18px; flex:1; }
.hrafn-travel-tile__link { color: var(--hrafn-weathered-gold); font-size:0.8rem; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; }
.hrafn-travel-tile__link:hover { text-decoration:underline; }
.hrafn-travel-card__region { display:block; color: var(--hrafn-weathered-gold); font-size:0.72rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.hrafn-travel-infobox { background: rgba(245,240,230,0.04); border:1px solid var(--hrafn-border); border-radius: var(--hrafn-radius); padding: 24px 28px; }
.hrafn-travel-infobox dl { display:grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin:0; }
.hrafn-travel-infobox dt { color: var(--hrafn-muted); font-size:0.85rem; }
.hrafn-travel-infobox dd { margin:0; color: var(--hrafn-parchment-white); font-size:0.9rem; }
.hrafn-travel-infobox__note { margin: 18px 0 0; font-size:0.8rem; color: var(--hrafn-muted); font-style: italic; }
.hrafn-travel-infobox__note a { color: var(--hrafn-weathered-gold); }
.hrafn-travel-highlights { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.hrafn-travel-highlight { background: rgba(245,240,230,0.04); border:1px solid var(--hrafn-border); border-radius: var(--hrafn-radius); padding: 22px 20px; }
.hrafn-travel-highlight__num { font-family: var(--hrafn-font-heading); color: var(--hrafn-weathered-gold); font-size:1.6rem; margin:0 0 6px; }
.hrafn-travel-highlight__title { font-family: var(--hrafn-font-heading); color: var(--hrafn-parchment-white); font-size:1rem; margin:0 0 6px; }
.hrafn-travel-highlight__text { color: var(--hrafn-muted); font-size:0.88rem; margin:0; }
.hrafn-travel-map { width:100%; min-height:320px; border-radius: var(--hrafn-radius); border:1px solid var(--hrafn-border); overflow:hidden; }
.hrafn-travel-map iframe { width:100%; height:320px; border:0; display:block; }
.hrafn-travel-plan { display:grid; grid-template-columns: repeat(2, 1fr); gap:24px; }
.hrafn-travel-plan__box { background: rgba(245,240,230,0.04); border:1px solid var(--hrafn-border); border-radius: var(--hrafn-radius); padding:24px; }
.hrafn-travel-plan__box h3 { font-family: var(--hrafn-font-heading); color: var(--hrafn-parchment-white); font-size:1.1rem; margin:0 0 10px; }
.hrafn-travel-plan__box p { color: var(--hrafn-muted); font-size:0.88rem; margin:0 0 16px; }
.hrafn-travel-plan__btn { display:inline-block; padding: 0.65em 1.4em; background: transparent; color: var(--hrafn-muted); font-family: var(--hrafn-font-heading); font-weight:600; font-size:0.82rem; letter-spacing:0.03em; text-transform:uppercase; border-radius:999px; border:1px solid var(--hrafn-border); cursor:default; }
.hrafn-travel-plan__soon { display:block; margin-top:8px; font-size:0.72rem; color: var(--hrafn-muted); font-style:italic; }
.hrafn-travel-disclaimer { color: var(--hrafn-muted); font-size: 0.75rem; text-align: center; font-style: italic; margin: 8px 0 8px; max-width: 640px; margin-left:auto; margin-right:auto; }
.hrafn-travel-nearby { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hrafn-travel-nearby a { display:block; background: rgba(245,240,230,0.04); border:1px solid var(--hrafn-border); border-radius: var(--hrafn-radius); padding: 16px 18px; color: var(--hrafn-parchment-white); text-decoration:none; font-family: var(--hrafn-font-heading); font-size:0.95rem; transition: border-color .2s; }
.hrafn-travel-nearby a:hover { border-color: var(--hrafn-weathered-gold); }
.hrafn-travel-more { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hrafn-travel-more a { display:inline-block; padding: 0.6em 1.3em; border:1px solid var(--hrafn-border); border-radius:999px; color: var(--hrafn-weathered-gold); text-decoration:none; font-size:0.85rem; }
.hrafn-travel-more a:hover { border-color: var(--hrafn-weathered-gold); text-decoration:underline; }
.hrafn-travel-route-steps { display:flex; flex-direction:column; gap:20px; }
.hrafn-travel-route-step { display:grid; grid-template-columns: 90px 1fr; gap:20px; background: rgba(245,240,230,0.04); border:1px solid var(--hrafn-border); border-radius: var(--hrafn-radius); padding: 20px 24px; }
.hrafn-travel-route-step__day { font-family: var(--hrafn-font-heading); color: var(--hrafn-weathered-gold); font-size:1.3rem; }
.hrafn-travel-route-step h3 { font-family: var(--hrafn-font-heading); color: var(--hrafn-parchment-white); font-size:1.1rem; margin:0 0 8px; }
.hrafn-travel-route-step p { color: var(--hrafn-muted); font-size:0.9rem; margin: 0 0 8px; }
.hrafn-travel-route-step__meta { font-size:0.78rem; color: var(--hrafn-weathered-gold); }
@media (max-width: 900px){
  .hrafn-travel-tiles { grid-template-columns: repeat(2, 1fr); }
  .hrafn-travel-highlights { grid-template-columns: 1fr; }
  .hrafn-travel-plan { grid-template-columns: 1fr; }
  .hrafn-travel-nearby { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .hrafn-travel-tiles { grid-template-columns: 1fr; }
  .hrafn-travel-route-step { grid-template-columns: 1fr; }
}


.hrafn-travel-intro {
	max-width: 700px;
	margin: 0 auto 40px;
	padding: 0 24px;
	text-align: center;
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--hrafn-muted);
}

.hrafn-travel-banner {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	height: 50vh;
	min-height: 320px;
	max-height: 520px;
	overflow: hidden;
	margin-bottom: 48px;
}

.hrafn-travel-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hrafn-travel-banner__credit {
	position: absolute;
	bottom: 14px;
	right: 20px;
	font-size: 0.75rem;
	color: rgba(245, 240, 230, 0.85);
	background: rgba(13, 13, 15, 0.55);
	padding: 4px 10px;
	border-radius: var(--hrafn-radius);
	text-decoration: none;
}

.hrafn-travel-banner__credit a {
	color: inherit;
	text-decoration: underline;
}


.hrafn-travel-eyebrow {
	max-width: 700px;
	margin: 0 auto 8px;
	padding: 0 24px;
	text-align: center;
	font-family: var(--hrafn-font-heading);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hrafn-weathered-gold);
}


.hrafn-travel-back {
	max-width: var(--hrafn-max-width);
	margin: 0 auto 56px;
	padding: 0 24px;
	text-align: center;
}

.hrafn-btn--outline {
	background-color: transparent;
	color: var(--hrafn-weathered-gold);
	border: 1px solid var(--hrafn-weathered-gold);
}

.hrafn-btn--outline:hover {
	background-color: var(--hrafn-weathered-gold);
	color: var(--hrafn-raven-black);
}


.hrafn-travel-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(13,13,15,0.8) 0%, rgba(13,13,15,0) 24%, rgba(13,13,15,0) 76%, rgba(13,13,15,0.9) 100%),
		linear-gradient(to right, rgba(13,13,15,0.6) 0%, rgba(13,13,15,0) 14%, rgba(13,13,15,0) 86%, rgba(13,13,15,0.6) 100%);
}

.hrafn-travel-banner img {
	position: relative;
	z-index: 0;
}

.hrafn-travel-banner__credit {
	z-index: 2;
}


/* ---- Themen-Hub-Inhalte (Mythologie, Wikinger, Gaming) ---- */
.hrafn-hub {
	max-width: var(--hrafn-max-width);
	margin: 0 auto 2.5rem;
	padding: 0 1.5rem;
}

.hrafn-hub__intro {
	font-family: var(--hrafn-font-body);
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--hrafn-muted);
	max-width: 850px;
	margin: 0 auto 2rem;
	text-align: center;
}

.hrafn-hub__clusters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.hrafn-hub__cluster {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: rgba(245, 240, 230, 0.03);
	border: 1px solid var(--hrafn-border);
	border-radius: var(--hrafn-radius);
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.hrafn-hub__cluster:hover {
	border-color: var(--hrafn-weathered-gold);
	background: rgba(201, 162, 39, 0.06);
	transform: translateY(-2px);
}

.hrafn-hub__cluster-name {
	font-family: var(--hrafn-font-heading);
	color: var(--hrafn-parchment-white);
	font-size: 1rem;
	letter-spacing: 0.02em;
}

.hrafn-hub__cluster-count {
	font-family: var(--hrafn-font-body);
	font-size: 0.8rem;
	color: var(--hrafn-weathered-gold);
	white-space: nowrap;
}

.hrafn-hub__faq {
	margin-bottom: 2.5rem;
}

.hrafn-hub__faq-title {
	font-family: var(--hrafn-font-heading);
	color: var(--hrafn-parchment-white);
	font-size: 1.4rem;
	margin: 0 0 1rem;
}

.hrafn-hub__faq-item {
	border: 1px solid var(--hrafn-border-soft);
	border-radius: var(--hrafn-radius);
	padding: 0.9rem 1.25rem;
	margin-bottom: 0.75rem;
	background: rgba(245, 240, 230, 0.02);
}

.hrafn-hub__faq-item summary {
	font-family: var(--hrafn-font-heading);
	color: var(--hrafn-parchment-white);
	font-size: 1rem;
	cursor: pointer;
	list-style: none;
}

.hrafn-hub__faq-item summary::-webkit-details-marker {
	display: none;
}

.hrafn-hub__faq-item summary::before {
	content: '+';
	display: inline-block;
	width: 1.2em;
	color: var(--hrafn-weathered-gold);
	font-weight: 700;
}

.hrafn-hub__faq-item[open] summary::before {
	content: '\2212';
}

.hrafn-hub__faq-item p {
	font-family: var(--hrafn-font-body);
	color: var(--hrafn-muted);
	line-height: 1.6;
	margin: 0.75rem 0 0 1.2em;
}

/* 12.09.2026: Fjord-Navy durch warmes Dunkel mit Goldrahmen ersetzt.
   Das Blau stand als Fremdkoerper auf der Steintextur. Der Goldrahmen macht den
   Block als Handlungsaufforderung kenntlich und haelt ihn zugleich vom Fakten-Kasten
   unterscheidbar, der nur einen linken Goldstrich und einen helleren Grund hat. */
.hrafn-hub__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1.5rem 1.75rem;
	background: rgba(13, 13, 15, 0.72);
	border: 1px solid rgba(201, 162, 39, 0.45);
	border-radius: var(--hrafn-radius);
}

.hrafn-hub__cta p {
	font-family: var(--hrafn-font-body);
	color: var(--hrafn-parchment-white);
	margin: 0;
	font-size: 1rem;
}

@media (max-width: 600px) {
	.hrafn-hub__clusters {
		grid-template-columns: 1fr;
	}
	.hrafn-hub__cta {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* Valhalla-Historien-Check (Post 2158 DE / 2159 EN): Beitragsbild gross ueber dem Inhaltsverzeichnis */
.postid-2158 .hrafn-single-figure,
.postid-2159 .hrafn-single-figure,
.postid-2171 .hrafn-single-figure,
.postid-2174 .hrafn-single-figure {
	float: none;
	width: 100%;
	max-width: 100%;
	margin: 0 0 2rem;
}

.postid-2158 .hrafn-single-figure img,
.postid-2159 .hrafn-single-figure img,
.postid-2171 .hrafn-single-figure img,
.postid-2174 .hrafn-single-figure img {
	width: 100%;
	height: auto;
	display: block;
}


/* Punkt 7 (09.09.2026): Artikel-Template - Grunddaten-Kopie unter der Einleitung, Fakten-Kasten, Methodik-Kasten */
.hrafn-gott-grunddaten--top { display: none; margin: 1.5rem 0 2rem; }
@media (max-width: 780px) {
	.hrafn-gott-grunddaten--top { display: block; }
	.hrafn-gott-layout > .hrafn-gott-grunddaten { display: none; }
}
.hrafn-fakten { margin: 1.5rem 0 2rem; }
.hrafn-methodik { margin: 2.5rem 0 1rem; padding: 1.1rem 1.4rem; border-left: 4px solid var(--hrafn-weathered-gold); background: rgba(201, 162, 39, 0.08); border-radius: 0 var(--hrafn-radius) var(--hrafn-radius) 0; font-size: 0.92rem; line-height: 1.6; }
.hrafn-methodik__label { display: block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hrafn-weathered-gold); margin-bottom: 0.4rem; }
.hrafn-methodik p { margin: 0; color: var(--hrafn-muted); }
.hrafn-methodik a { color: var(--hrafn-weathered-gold); white-space: nowrap; }

/* ===== Punkt 8 (09.09.2026): Darstellung der Archive vereinheitlichen ===== */
/* 8a – ein Kartendesign, ganze Karte klickbar, keine Buttons/Auszuege. 8c – dunkle Ebene hinter dem Text. */
body .hrafn-gott-card,
body .hrafn-topic-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	text-align: center;
	background: rgba(13, 13, 15, 0.7);
	border: 1px solid rgba(245, 240, 230, 0.1);
	border-radius: var(--hrafn-radius);
	overflow: hidden;
}
body .hrafn-gott-card__image,
body .hrafn-topic-card__thumb {
	aspect-ratio: 4 / 3;
	border-radius: 0;
	background: var(--hrafn-fjord-navy);
}
body .hrafn-gott-card__image img,
body .hrafn-topic-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
body .hrafn-gott-card__body {
	padding: 0.8rem 0.85rem 0.9rem;
	gap: 0;
}
/* 8d – Cinzel nur fuer H1–H3, Kartentitel und Links in Inter */
body .hrafn-gott-card__name,
body .hrafn-topic-card__title {
	font-family: var(--hrafn-font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--hrafn-weathered-gold);
	padding: 0.8rem 0.85rem 0.9rem;
}
body .hrafn-gott-card__body .hrafn-gott-card__name {
	padding: 0;
}
body .hrafn-gott-card__cta,
body .hrafn-topic-card__cta,
body .hrafn-topic-card__excerpt {
	display: none;
}
body .hrafn-gott-card--pending {
	opacity: 0.55;
}
body .hrafn-post-grid {
	gap: 1.5rem;
}
/* 8b – Asen und Vanen auf allen Breiten untereinander */
body .hrafn-goetterstaemme-grid {
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
/* 8c – Links ausserhalb der Karten ebenfalls auf dunkler Ebene, Inter statt Cinzel (8d) */
body .hrafn-topic-block__link,
body .hrafn-jumpnav a {
	display: inline-block;
	font-family: var(--hrafn-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--hrafn-weathered-gold);
	background: rgba(13, 13, 15, 0.7);
	border: 1px solid rgba(245, 240, 230, 0.1);
	border-radius: var(--hrafn-radius);
	padding: 0.45rem 0.9rem;
	text-decoration: none;
	transition: border-color 0.2s ease;
}
body .hrafn-topic-block__link:hover,
body .hrafn-jumpnav a:hover {
	border-color: var(--hrafn-weathered-gold);
}
body .hrafn-topic-block h3 {
	display: inline-block;
	background: rgba(13, 13, 15, 0.7);
	border-radius: var(--hrafn-radius);
	padding: 0.35rem 0.8rem;
}
/* 8f – Hub-Intro direkt unter der H1 */
body .hrafn-hub--intro {
	margin-bottom: 2rem;
}
/* 8g – Sprungnavigation auf Hubs mit drei oder mehr Bloecken */
body .hrafn-jumpnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 0 0 2.5rem;
}
body .hrafn-topic-block {
	scroll-margin-top: 6rem;
}

/* 8c – Freigabe 09.09.2026: H1, Brotkrume und Stamm-Ueberschriften auf derselben dunklen Ebene */
body .hrafn-section__heading h1 {
	display: inline-block;
	background: rgba(13, 13, 15, 0.7);
	border-radius: var(--hrafn-radius);
	padding: 0.4rem 1.2rem;
}
body .hrafn-goetterstaemme-col h3 {
	display: inline-block;
	background: rgba(13, 13, 15, 0.7);
	border-radius: var(--hrafn-radius);
	padding: 0.35rem 0.8rem;
}
/* Brotkrume: zurueckhaltende Ebene, kein Rahmen, keine Rundung – Navigation, kein Bedienelement */
body .hrafn-breadcrumbs .hrafn-container > a,
body .hrafn-breadcrumbs .hrafn-container > span {
	background: rgba(13, 13, 15, 0.7);
	padding: 0.35rem 0;
	line-height: 2.2;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
/* Umbruch bei schmalen Breiten: jede Zeile bekommt eigene Ebene mit Rand */
body .hrafn-breadcrumbs .hrafn-container > a,
body .hrafn-breadcrumbs .hrafn-container > span.hrafn-breadcrumbs__current {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
body .hrafn-breadcrumbs .hrafn-container > span.hrafn-breadcrumbs__sep {
	margin-left: -0.5rem;
	margin-right: -0.5rem;
	position: relative;
}
body .hrafn-breadcrumbs .hrafn-container > :first-child {
	padding-left: 0.7rem;
}
body .hrafn-breadcrumbs .hrafn-container > :last-child {
	padding-right: 0.7rem;
}
body .hrafn-breadcrumbs .hrafn-container > span.hrafn-breadcrumbs__sep {
	margin: 0;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
}

/* ===== Punkt 9 (09.09.2026): Lesespalte auf dunkler Ebene – alle Beitraege und Gott-Profile, DE+EN (Rollout nach Pilot) ===== */
body .hrafn-gott-layout,
body .hrafn-single-content {
	background: rgba(13, 13, 15, 0.4);
	border: 1px solid rgba(245, 240, 230, 0.1);
	border-radius: var(--hrafn-radius);
	padding: 2rem;
}
@media (max-width: 600px) {
	body .hrafn-gott-layout,
	body .hrafn-single-content {
		padding: 1.1rem;
	}
}

/* ===== Punkt 10 (09.09.2026): Kosmologie-Intro (Welten-Archiv) auf dunkler Ebene – Labels und Text wie 8c ===== */
body .hrafn-kosmologie-intro__text {
	background: rgba(13, 13, 15, 0.4);
	border: 1px solid rgba(245, 240, 230, 0.1);
	border-radius: var(--hrafn-radius);
	padding: 1.5rem 1.75rem;
}

/* Punkt 12 (09.09.2026): Karte ohne Beitragsbild = Textkarte, kein leerer Kasten. Greift automatisch nicht mehr, sobald ein Bild gesetzt ist. */
body .hrafn-topic-card__thumb:empty { display: none; }

/* ····· Punkt 6, Nachtrag (10.09.2026): Pfeilerinhalt im Kategoriearchiv ·····
   Lesespalte auf dunkler Ebene, gleiche Werte wie .hrafn-single-content (Punkt 9):
   rgba(13,13,15,.7), gleicher Radius, gleicher Innenabstand. Neun Kapitel direkt
   auf der Steintextur waeren nicht lesbar. .hrafn-lead ist der Einstiegsabsatz. */
body .hrafn-pillar {
	max-width: 720px;
	margin: 0 auto 3rem;
	font-size: 1.08rem;
	background: rgba(13, 13, 15, 0.4);
	border: 1px solid rgba(245, 240, 230, 0.1);
	border-radius: var(--hrafn-radius);
	padding: 2rem;
}
body .hrafn-pillar h2 {
	margin-top: 2em;
	font-size: 1.6rem;
}
body .hrafn-pillar h3 {
	margin-top: 1.6em;
	font-size: 1.3rem;
}
body .hrafn-pillar .hrafn-lead {
	font-size: 1.22rem;
	line-height: 1.6;
}
body .hrafn-pillar .hrafn-topic-grid {
	margin: 1.5rem 0 2.5rem;
}
body .hrafn-pillar__stand {
	margin-top: 2.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--hrafn-border-soft);
	color: var(--hrafn-muted);
	font-size: 0.9rem;
}
@media (max-width: 600px) {
	body .hrafn-pillar {
		padding: 1.1rem;
	}
	body .hrafn-pillar .hrafn-lead {
		font-size: 1.12rem;
	}
}


/* 12.09.2026 (Runenübersetzer, Punkt 3): Untermenüs im Burger-Menü sichtbar machen.
   Die Dropdown-Regel weiter oben arbeitet mit :hover und absoluter Position – auf
   Touchgeräten gibt es kein Hover, das Untermenü bliebe unerreichbar. Unterhalb des
   Burger-Breakpoints (1300 px, gesetzt in "Zusätzliches CSS") laufen Untermenüs
   deshalb dauerhaft aufgeklappt und eingerückt mit. */
@media (max-width: 1089px) {
	.hrafn-nav .sub-menu {
		display: flex !important;
		position: static;
		min-width: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		margin: 0.35rem 0 0;
		padding: 0 0 0 1.1rem;
		gap: 0.35rem;
	}

	.hrafn-nav .sub-menu a {
		font-size: 0.88rem;
		opacity: 0.85;
	}
}


/* 12.09.2026: Lücke im Burger-Bereich geschlossen.
   Der Burger greift laut "Zusätzliches CSS" bis 1300 px, die Panel-Darstellung des
   geöffneten Menüs war dort aber nur bis 880 px definiert. Zwischen 881 und 1300 px
   fiel die geöffnete Navigation auf display:flex / position:static zurück und brach
   zweizeilig in die Kopfzeile hinein. Die folgenden Regeln spiegeln die 880er-Fassung
   für den verbleibenden Bereich. */
@media (min-width: 881px) and (max-width: 1089px) {
	.hrafn-nav.is-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: rgba(13, 13, 15, 0.98);
		border-bottom: 1px solid var(--hrafn-border-soft);
		padding: 16px 24px 24px;
	}

	.hrafn-nav.is-open ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.hrafn-nav.is-open a {
		font-size: 1rem;
	}
}


/* 12.09.2026: Werkzeugzeile auf der Startseite (Runenübersetzer).
   Bewusst zurückhaltend: kein Panel, keine Überschrift, kein Goldstrich – nur eine
   Zeile zwischen Hero und erster Kategorie-Sektion. Der Link traegt das Gold, der
   Satz bleibt gedaempft. */
.hrafn-toolline {
	margin: 0 auto;
	padding: 1.25rem 24px 0;
	text-align: center;
}

.hrafn-toolline p {
	font-family: var(--hrafn-font-body);
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--hrafn-muted);
	margin: 0;
}

.hrafn-toolline a {
	color: var(--hrafn-weathered-gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(201, 162, 39, 0.35);
	white-space: nowrap;
}

.hrafn-toolline a:hover,
.hrafn-toolline a:focus {
	border-bottom-color: var(--hrafn-weathered-gold);
}

@media (max-width: 600px) {
	.hrafn-toolline p {
		font-size: 0.88rem;
	}
}

/* 12.09.2026: Im Burger-Bereich laeuft die Klappe statisch mit – dort braucht es
   keine Hover-Bruecke. */
@media (max-width: 1089px) {
	.hrafn-nav .sub-menu::before {
		display: none;
	}
}

/* HRAFN-SAEULEN START (18.09.2026) - Content-Saeulen im Footer.
   Zum Entfernen: Block bis HRAFN-SAEULEN ENDE loeschen. */
.hrafn-footer__pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin: 0 auto 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--hrafn-border-soft);
}

.hrafn-footer__pillar h5 {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hrafn-weathered-gold);
}

.hrafn-footer__pillar h5 a {
	color: inherit;
}

.hrafn-footer__pillar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hrafn-footer__pillar li {
	margin-bottom: 0.45rem;
}

.hrafn-footer__pillar a {
	color: var(--hrafn-parchment-white);
	font-size: 0.88rem;
	line-height: 1.4;
}

.hrafn-footer__pillar a:hover {
	color: var(--hrafn-weathered-gold);
}

@media (max-width: 860px) {
	.hrafn-footer__pillars {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (max-width: 520px) {
	.hrafn-footer__pillars {
		grid-template-columns: 1fr;
		text-align: center;
	}
}
/* HRAFN-SAEULEN ENDE */

/* HRAFN-SPIELBOX START (18.09.2026) - Steckbrief in 'Spiel & Wirklichkeit'.
   Zum Entfernen: Block bis HRAFN-SPIELBOX ENDE loeschen. */
.hrafn-spielbox {
	display: block;
	margin: 0 0 2rem;
	padding: 1.5rem 1.75rem;
	border: 1px solid var(--hrafn-border-soft);
	border-left: 3px solid var(--hrafn-weathered-gold);
	background: rgba(0, 0, 0, 0.25);
}

.hrafn-spielbox h2 {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--hrafn-weathered-gold);
}

.hrafn-spielbox__fact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--hrafn-border-soft);
}

.hrafn-spielbox__label {
	flex: 0 0 9.5rem;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hrafn-muted);
}

.hrafn-spielbox__value {
	flex: 1 1 12rem;
	color: var(--hrafn-parchment-white);
}

.hrafn-spielbox__urteil {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-top: 1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--hrafn-border-soft);
}

.hrafn-spielbox__urteil-wert {
	flex: 1 1 12rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.hrafn-spielbox__urteil--nah .hrafn-spielbox__urteil-wert { color: #9ec79a; }
.hrafn-spielbox__urteil--frei .hrafn-spielbox__urteil-wert { color: var(--hrafn-weathered-gold); }
.hrafn-spielbox__urteil--fantasie .hrafn-spielbox__urteil-wert { color: #d09a7a; }

@media (max-width: 520px) {
	.hrafn-spielbox__label { flex: 1 1 100%; }
}
/* HRAFN-SPIELBOX ENDE */