/* ======================================================================
   Reisezoom — neuer Look (Make-over 09.10.2026)
   Grundlage: Design-Übergabe „reisezoom-design-uebergabe" (Mockups Startseite +
   Artikel). Wird NACH style.css geladen und überschreibt nur Optik:
   IBM Plex Sans statt Serif-Überschriften, ruhigere Karten, rote Akzente.
   Logo, Navigation, Reihenfolge und Inhalte bleiben unverändert.
   Abweichungen vom Mockup (bewusst):
   - Buchstabenabstand der großen Überschriften weniger eng (Mockup −.065em)
   - Rot für Knöpfe und kleine Schrift dunkler (#c8442f), damit der Kontrast
     reicht (weiß auf Mockup-Rot nur 4,1:1)
   - Schrift lokal gehostet (rz-plex.css), kein Google Fonts
   ====================================================================== */

:root {
	--font-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-serif: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-logo:  "Instrument Serif", "Cormorant Garamond", Georgia, serif;

	--color-bg:     #f4ede0;
	--color-light:  #fcf8f0;
	--color-ink:    #1c1814;
	--color-muted:  #675e54;
	--color-rule:   #e1d6c6;
	--rz-red:       #c8442f;   /* Knöpfe, kleine rote Schrift (Kontrast ≥ 4,5:1) */
	--rz-red-deco:  #d84e3e;   /* rein dekorativ: Striche über Überschriften */
	--rz-rust:      #9a4632;   /* Eyebrows, Kategorien */
	--rz-link:      #a94c37;   /* Links im Fließtext */
	--rz-orange:    #da8b4c;
}

body {
	font: 400 17px/1.6 var(--font-sans);
	font-feature-settings: normal;
}

/* ---------- Überschriften: Plex Sans fett statt Serif ---------- */
h1, h2, h3 {
	font-family: var(--font-serif);
	font-weight: 700;
	letter-spacing: -.03em;
}
h1 { line-height: 1.08; letter-spacing: -.04em; }
h2 { line-height: 1.15; }
h3 { line-height: 1.22; }
blockquote { font: italic 400 20px/1.5 var(--font-sans); }

/* Eyebrows: weiter Großbuchstaben, aber in Plex statt Mono */
.eyebrow {
	font: 700 11px/1.3 var(--font-sans);
	letter-spacing: .14em;
	color: var(--rz-rust);
}

/* ---------- Kopfzeile ---------- */
.top-nav__logo-name { font-family: var(--font-logo); font-weight: 400; } /* Wortmarke bleibt */
.top-nav__logo-tag  { font-family: var(--font-sans); letter-spacing: .2em; font-size: 9px; }
@media (min-width: 768px) { .top-nav__logo-tag { font-size: 9.5px; } }
.top-nav__menu { align-items: center; gap: 26px; }
.top-nav__menu a { font: 700 13.5px/1 var(--font-sans); }
.top-nav__menu a:hover { color: var(--rz-red); }
.top-nav__menu a.top-nav__yt,
.top-nav__menu a[href*="youtube.com"] {
	background: var(--rz-red) !important; color: #fff !important;
	border-radius: 12px !important; padding: 10px 15px !important;
}
.top-nav__menu a[href*="youtube.com"]:hover { color: #fff !important; opacity: .92; }
.top-nav__cta.btn--ghost {
	width: 38px; height: 38px; padding: 0; justify-content: center;
	border-radius: 50%; border-color: var(--color-rule);
}

/* ---------- Knöpfe ---------- */
.btn { border-radius: 12px; font-family: var(--font-sans); }
.btn--accent { background: var(--rz-red); }
.rz-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 12px 18px; border-radius: 12px;
	font: 700 14px/1 var(--font-sans);
	text-decoration: none !important;
	transition: transform .15s ease, opacity .15s ease, border-color .15s ease;
}
.rz-btn:hover { transform: translateY(-1px); }
.rz-btn--red  { background: var(--rz-red); color: #fff; }
.rz-btn--red:hover { color: #fff; opacity: .92; }
.rz-btn--line { background: #fbf7ee; color: var(--color-ink); border: 1px solid #bbab98; }
.rz-btn--line:hover { color: var(--color-ink); border-color: var(--color-ink); }

/* ---------- Startseite: Einstieg ---------- */
.rz-hero { padding: 28px 0 8px; }
.rz-hero__grid {
	display: grid; grid-template-columns: 1fr;
	background: #e8dfd0;
	border: 1px solid var(--color-rule);
	border-radius: 18px; overflow: hidden;
}
.rz-hero__intro {
	padding: 30px 22px 28px;
	display: flex; flex-direction: column; align-items: flex-start;
	background: linear-gradient(135deg, #f4ede0 0%, #e8ddc9 100%);
	min-width: 0;
}
.rz-hero__eyebrow {
	font: 700 11px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
	color: var(--rz-rust); margin: 0;
}
.rz-hero__title {
	font: 700 clamp(34px, 9.6vw, 44px)/1.08 var(--font-sans);
	letter-spacing: -.045em;
	margin: 16px 0 16px;
	overflow-wrap: break-word; hyphens: manual;
}
.rz-hero__title em { font-style: normal; color: var(--rz-red); }
.rz-hero__text { font-size: 16px; line-height: 1.62; color: #5d5148; max-width: 46ch; margin: 0; }
.rz-hero__actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px; }
.rz-hero__stamp {
	margin: 22px 0 0; font: 700 10.5px/1.4 var(--font-sans);
	letter-spacing: .12em; text-transform: uppercase; color: #766c62;
}
.rz-hero__media { position: relative; min-width: 0; background: #25402f; }
.rz-hero__img {
	display: block; width: 100%; height: 300px;
	object-fit: cover; object-position: center 43%;
	margin: 0 !important;
}
.rz-hero__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent 45%, rgba(18,32,23,.55));
}
.rz-hero__label {
	position: absolute; z-index: 1; left: 18px; bottom: 18px;
	background: #fff; color: var(--color-ink);
	border-radius: 7px; padding: 9px 12px;
	font: 700 12px/1 var(--font-sans);
	box-shadow: 0 6px 18px rgba(0,0,0,.2); transform: rotate(-2deg);
}
@media (min-width: 760px) {
	.rz-hero { padding: 42px 0 8px; }
	.rz-hero__grid { grid-template-columns: 1.15fr .85fr; min-height: 520px; }
	.rz-hero__intro { padding: 52px 34px 42px; }
	.rz-hero__title { font-size: clamp(46px, 5.6vw, 80px); letter-spacing: -.05em; margin: 22px 0 20px; }
	.rz-hero__stamp { margin-top: auto; padding-top: 22px; }
	.rz-hero__img { height: 100%; min-height: 520px; }
	.rz-hero__label { left: 24px; bottom: 22px; }
}

/* Aktuelles Video direkt darunter */
.hero-minimal { border-bottom: 0; padding: 48px 0 56px; }
.hero-minimal__eyebrow { color: var(--rz-rust); }
.hero-minimal__title {
	font: 700 clamp(26px, 3.4vw, 44px)/1.14 var(--font-sans);
	letter-spacing: -.04em; max-width: 26ch;
}
.rz-hero-video { border-radius: 14px; box-shadow: 0 22px 45px rgba(76,56,37,.13); }
.rz-hero-video__hint { font-family: var(--font-sans); letter-spacing: .07em; }
.rz-subscribe {
	display: inline-block; padding: 4px;
	border-bottom: 2px solid var(--rz-red);
	font: 700 14px/1.2 var(--font-sans); color: var(--color-ink);
}
.rz-subscribe:hover { color: var(--rz-red); }

/* Beiträge auf der Startseite: eigene helle Fläche */
.rz-posts { background: var(--color-light); border-top: 1px solid var(--color-rule); }
.rz-posts h2 { letter-spacing: -.04em; }

/* ---------- Beitragskarten (Startseite, Kategorien, Suche) ---------- */
.story-grid--cards { align-items: stretch; }
.story--card {
	gap: 0; grid-template-rows: auto 1fr;
	background: #fff; border: 1px solid var(--color-rule);
	border-radius: 12px; overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.story--card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(76,56,37,.1); }
.story--card .story__media { border-radius: 0; }
.story--card .story__body { padding: 18px 20px 22px; }
.story__tag { font: 700 10px/1.2 var(--font-sans); letter-spacing: .15em; color: var(--rz-rust); }
.story__title {
	font: 700 19px/1.27 var(--font-sans);
	letter-spacing: -.03em; margin-top: 4px;
}
.story:hover .story__title { color: var(--rz-red); }
.story__lead { font-size: 13.5px; line-height: 1.55; color: var(--color-muted); }

/* Seitenzahlen */
.page-numbers {
	display: inline-block; padding: 9px 13px; margin: 0 2px;
	border: 1px solid var(--color-rule); background: #fff; border-radius: 6px;
	font: 600 13px/1 var(--font-sans); color: var(--color-ink);
}
.page-numbers.current { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.page-numbers.dots { border: 0; background: transparent; }

/* ---------- Artikel ---------- */
.article-hero { max-width: 860px; }
.article-hero .eyebrow { font: 600 13px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--rz-rust); }
.article-hero h1 {
	font: 700 clamp(32px, 4.3vw, 60px)/1.1 var(--font-sans);
	letter-spacing: -.045em; margin-bottom: 20px;
}
.article-hero__lead { font-size: 18px; line-height: 1.55; color: #61564d; }
.article-hero__meta { font-size: 12.5px; color: #766c62; }
.article-cover img { border-radius: 14px; }

.article-body { max-width: 740px; color: #302922; }
.article-body p, .article-body li { font-size: 17.5px; line-height: 1.75; }
.article-body > :first-child::first-letter { all: unset; }   /* keine Initiale mehr */

.article-body h2 {
	font: 700 clamp(26px, 2.7vw, 34px)/1.2 var(--font-sans);
	letter-spacing: -.035em;
	margin: 3em 0 .6em;
}
.article-body h2::before {
	content: ""; display: block;
	width: 42px; height: 4px; border-radius: 4px;
	background: var(--rz-red-deco); margin-bottom: 16px;
}
.article-body h3 {
	font: 700 clamp(20px, 2vw, 24px)/1.25 var(--font-sans);
	letter-spacing: -.025em; margin: 2em 0 .5em;
}
.article-body h4 { font-family: var(--font-sans); font-weight: 700; }

.article-body a:not([class]) { color: var(--rz-link); text-decoration: underline; text-underline-offset: .18em; }
.article-body a:not([class]):hover { color: var(--color-ink); }

/* Tabellen als Karte mit abgesetzter Kopfzeile */
.article-body table {
	border-collapse: separate; border-spacing: 0;
	background: #fff; border: 1px solid var(--color-rule);
	border-radius: 12px; overflow: hidden;
	font-size: 15px; line-height: 1.45;
}
.article-body th { background: #e9dfd0; padding: 12px 16px; border-bottom: 0; }
.article-body td { padding: 12px 16px; border-bottom: 0; border-top: 1px solid var(--color-rule); vertical-align: top; }
.article-body tbody tr:first-child td { border-top: 0; }

/* Bilder und Bildunterschriften */
.article-body img { border-radius: 12px; }
.wp-caption-text, .article-body figcaption {
	font: 400 13.5px/1.5 var(--font-sans); color: var(--color-muted);
}

/* Inhaltsverzeichnis, Kurzfazit, Verwandte Beiträge an den neuen Look anpassen */
.rz-tldr { border-radius: 10px !important; border-color: var(--color-rule) !important; }
.rz-related { background: var(--color-light) !important; border: 1px solid var(--color-rule); border-radius: 14px !important; }
.rz-related-title { font-family: var(--font-sans) !important; letter-spacing: .1em !important; font-size: .85rem !important; color: var(--rz-rust) !important; }
.rz-related-card { border-radius: 10px !important; border-color: var(--color-rule) !important; }
.rz-related-headline { font-weight: 700; font-size: .86rem !important; letter-spacing: -.01em; }

/* ---------- Sonstige Serif-Stellen ---------- */
.video-hero__title, .video-card__title, .rz-affiliate__title, .rz-product__title {
	font-family: var(--font-sans); font-weight: 700; letter-spacing: -.03em;
}

/* ---------- Fußzeile dunkel wie im Mockup ---------- */
.site-footer { background: #292620; color: #d0c9bc; border-top: 0; }
.site-footer h4 { color: #efad85; letter-spacing: .13em; font-size: 11px; }
.site-footer a { color: #eee8df; }
.site-footer a:hover { color: #efad85; }
.site-footer p, .site-footer li { color: #d0c9bc; }
.site-footer strong { color: #eee8df !important; }
.site-footer__bottom { border-top-color: #4d4941; color: #bdb5a8; }

/* Kopfzeile: .top-nav__inner setzte padding: 16px 0 und hob damit den seitlichen
   Abstand des .container auf — auf dem Handy klebte das Logo am Rand. */
.top-nav__inner { padding-inline: 20px; }
@media (min-width: 1024px) { .top-nav__inner { padding-inline: 36px; } }