/*
Theme Name: Lippe Verlag Hell
Template: twentythirteen
Description: Helles Child-Theme für Twenty Thirteen. Gleiche Schriften und Gliederung wie www.hans-jacobs.de (Bebas Neue, Source Serif 4, Rot als Akzent), aber auf hellem Grund für das ganze Verlagsprogramm. Inhalte, Menüs und Widgets bleiben unverändert, weil nur das Aussehen überschrieben wird.
Author: Dr. Hans C. Jacobs
Version: 1.4.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lippe-verlag-hell
*/

/* ==========================================================================
   Schriften (lokal, kein Nachladen von Google)
   ========================================================================== */
@font-face {
	font-family: 'Bebas Neue';
	src: url('fonts/bebas-neue-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Source Serif 4';
	src: url('fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Source Serif 4';
	src: url('fonts/source-serif-4-latin-600-normal.woff2') format('woff2');
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--lv-bg: #FAF8F3;
	--lv-bg-alt: #F1EDE4;
	--lv-red: #B53A17;
	--lv-strong: #1A1A1C;
	--lv-text: #3D3D42;
	--lv-grey: #5C5C63;
	--lv-line: #E0DACE;
	--lv-on-red: #FFFFFF;
	--lv-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
	--lv-serif: 'Source Serif 4', Georgia, serif;
}

/* ==========================================================================
   Grundlagen
   ========================================================================== */
html,
body {
	background: var(--lv-bg);
}
body,
button,
input,
select,
textarea {
	color: var(--lv-text);
	font-family: var(--lv-serif);
}
body {
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--lv-strong);
	font-family: var(--lv-display);
	font-weight: 400;
	letter-spacing: 2px;
	line-height: 1.15;
}
strong, b {
	color: var(--lv-strong);
	font-weight: 600;
}
a {
	color: var(--lv-strong);
}
a:hover,
a:focus,
a:active {
	color: var(--lv-red);
}
::selection {
	background: var(--lv-red);
	color: var(--lv-on-red);
}
hr {
	background-color: var(--lv-line);
}
blockquote {
	border-left: 3px solid var(--lv-red);
	color: var(--lv-strong);
	font-style: normal;
	margin-left: 0;
	padding-left: 24px;
}
code, kbd, pre, samp {
	background: var(--lv-bg-alt);
	color: var(--lv-strong);
}
pre {
	border: 1px solid var(--lv-line);
}

.site {
	background-color: var(--lv-bg);
	border-left: 0;
	border-right: 0;
}

/* ==========================================================================
   Kopfbereich: großer Titel wie auf hans-jacobs.de, darunter feste Menüleiste
   ========================================================================== */
.site-header {
	background: none !important;
	display: contents;
}
.site-header .home-link {
	align-items: center;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(181, 58, 23, 0.08), transparent 60%),
		var(--lv-bg);
	border-bottom: 1px solid var(--lv-line);
	color: var(--lv-strong);
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: none;
	min-height: 0;
	padding: 90px 40px 80px;
	text-align: center;
}
.site-header .site-title::before {
	background: url('images/lippische-rose.webp') center / contain no-repeat;
	content: "";
	display: inline-block;
	height: 0.82em;
	margin-right: 0.22em;
	vertical-align: -0.06em;
	width: 0.82em;
}
.site-header .home-link:hover {
	color: var(--lv-strong);
}
.site-header .site-title:hover {
	text-decoration: none;
}
.site-header .site-title {
	color: var(--lv-strong);
	font-family: var(--lv-display);
	font-size: 120px;
	font-weight: 400;
	letter-spacing: 2px;
	line-height: 1.05;
	padding: 0 0 22px;
}
.site-description {
	color: var(--lv-grey);
	font: 400 normal 21px/1.6 var(--lv-serif);
}
.site-description::before {
	background: var(--lv-red);
	content: "";
	display: block;
	height: 2px;
	margin: 0 auto 16px;
	width: 44px;
}

/* Menüleiste */
.navbar {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background-color: rgba(250, 248, 243, 0.94);
	border-bottom: 1px solid var(--lv-line);
	max-width: none;
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .navbar {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar .navbar {
		top: 46px;
	}
}
.main-navigation {
	min-height: 60px;
	text-align: center;
}
ul.nav-menu,
div.nav-menu > ul {
	padding: 0 40px;
}
.nav-menu li a {
	color: var(--lv-grey);
	font-family: var(--lv-serif);
	font-size: 16px;
	letter-spacing: 1px;
	line-height: 1;
	padding: 22px 13px;
	text-transform: uppercase;
}
.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
	background-color: transparent;
	color: var(--lv-red);
}
.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
	color: var(--lv-strong);
	font-style: normal;
}
.nav-menu .sub-menu,
.nav-menu .children {
	background-color: var(--lv-bg-alt);
	border: 1px solid var(--lv-line);
	text-align: left;
}
ul.nav-menu ul a,
.nav-menu ul ul a {
	color: var(--lv-grey);
	padding: 14px 18px;
}
ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover,
ul.nav-menu ul a:focus,
.nav-menu ul ul a:focus {
	background-color: var(--lv-bg);
	color: var(--lv-red);
}

/* Suche in der Menüleiste */
.site-header .search-form {
	top: 10px;
}
.site-header .search-field {
	background-color: transparent;
	color: var(--lv-strong);
}
.site-header .search-field:focus {
	background-color: var(--lv-bg-alt);
	border: 1px solid var(--lv-line);
	filter: none;
	width: 230px;
}
.site-header .search-field:focus {
	background-image: none;
	padding-left: 12px;
}

/* ==========================================================================
   Inhalte
   ========================================================================== */
.hentry {
	border-bottom: 1px solid var(--lv-line);
	padding: 50px 0;
}
.entry-title {
	color: var(--lv-strong);
	font-family: var(--lv-display);
	font-size: 46px;
	font-weight: 400;
	letter-spacing: 2px;
	line-height: 1.15;
}
.entry-title a {
	color: var(--lv-strong);
}
.entry-title a:hover {
	color: var(--lv-red);
	text-decoration: none;
}
.entry-meta {
	color: var(--lv-grey);
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.entry-meta a,
.entry-meta a:hover {
	color: var(--lv-grey);
}
.entry-meta a:hover {
	color: var(--lv-red);
}
.entry-content,
.entry-summary,
.page-content {
	color: var(--lv-text);
	font-size: 18px;
	line-height: 1.7;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.comment-content h1,
.comment-content h2,
.comment-content h3 {
	color: var(--lv-strong);
	font-family: var(--lv-display);
	font-weight: 400;
	letter-spacing: 1px;
}
.entry-content h3 {
	color: var(--lv-red);
	font-size: 30px;
	line-height: 1.3;
}
.entry-content a,
.entry-summary a,
.page-content a,
.comment-content a {
	color: var(--lv-strong);
	text-decoration: none;
	border-bottom: 1px solid var(--lv-red);
}
.entry-content a:hover,
.entry-summary a:hover,
.page-content a:hover,
.comment-content a:hover {
	color: var(--lv-red);
}
.entry-content a:has(> img),
.entry-summary a:has(> img) {
	border-bottom: 0;
}
.entry-content img,
.entry-summary img,
.wp-caption img {
	box-shadow: 0 12px 28px rgba(26, 26, 28, 0.18);
}
.wp-caption .wp-caption-text,
.entry-caption,
.gallery-caption {
	color: var(--lv-grey);
}
.more-link {
	font-family: var(--lv-display);
	font-size: 18px;
	letter-spacing: 1.5px;
}

/* Tabellen, auch TablePress */
table,
.entry-content table,
.tablepress {
	border-bottom: 1px solid var(--lv-line);
	color: var(--lv-grey);
}
th,
td,
.tablepress th,
.tablepress td {
	border-top: 1px solid var(--lv-line);
}
th,
.tablepress thead th,
.tablepress tfoot th {
	background-color: var(--lv-bg-alt);
	color: var(--lv-strong);
	font-family: var(--lv-display);
	font-weight: 400;
	letter-spacing: 1px;
}
.tablepress tbody td,
.tablepress .odd td,
.tablepress .even td,
.tablepress .row-hover tr:hover td {
	background-color: transparent;
	color: var(--lv-grey);
}
.tablepress .odd td {
	background-color: rgba(26, 26, 28, 0.025);
}
.tablepress .row-hover tr:hover td {
	background-color: var(--lv-bg-alt);
}

/* Beitragsformate ohne helle Hintergründe */
.format-aside,
.format-audio,
.format-chat,
.format-gallery,
.format-image,
.format-link,
.format-quote,
.format-status,
.format-video {
	background-color: transparent;
	color: var(--lv-grey);
}
.format-audio .entry-title,
.format-chat .entry-title,
.format-gallery .entry-title,
.format-link .entry-title,
.format-quote .entry-content blockquote,
.format-status .entry-content,
.format-video .entry-title,
.format-aside blockquote,
.format-gallery .entry-content a,
.format-status .entry-content a,
.format-chat .entry-content a {
	color: var(--lv-strong);
}

/* Archiv- und Seitenköpfe */
.archive-header,
.page-header {
	background-color: var(--lv-bg-alt);
	border-bottom: 1px solid var(--lv-line);
}
.archive-title,
.page-title {
	color: var(--lv-strong);
	font: 400 normal 52px/1.1 var(--lv-display);
	letter-spacing: 2px;
	padding: 40px 0 34px;
}
.archive-title::before,
.page-title::before {
	background: var(--lv-red);
	content: "";
	display: block;
	height: 2px;
	margin: 0 0 16px;
	width: 44px;
}
.archive-meta {
	color: var(--lv-grey);
	font-family: var(--lv-serif);
}
@media (min-width: 1000px) {
	.sidebar .archive-title,
	.sidebar .archive-meta {
		box-sizing: border-box;
		padding-right: 340px;
	}
}

/* Blättern */
.navigation a {
	color: var(--lv-strong);
}
.navigation a:hover {
	color: var(--lv-red);
}
.paging-navigation {
	background-color: var(--lv-bg-alt);
	border-top: 1px solid var(--lv-line);
	border-bottom: 1px solid var(--lv-line);
}
.paging-navigation a {
	font-family: var(--lv-display);
	font-size: 24px;
	font-style: normal;
	letter-spacing: 1.5px;
}
.paging-navigation .meta-nav,
.paging-navigation .nav-previous .meta-nav,
.paging-navigation .nav-next .meta-nav {
	background-color: transparent;
	border: 1px solid var(--lv-strong);
	border-radius: 0;
	color: var(--lv-strong);
	font-size: 22px;
	padding: 6px 0;
	width: 54px;
}
.paging-navigation a:hover .meta-nav {
	background-color: var(--lv-red);
	border-color: var(--lv-red);
	color: var(--lv-on-red);
}
.post-navigation {
	background-color: var(--lv-bg-alt);
	border-top: 1px solid var(--lv-line);
	color: var(--lv-strong);
}
.post-navigation a {
	font-family: var(--lv-display);
	letter-spacing: 1px;
}

/* Kommentare, Autorenbox, Suche, 404 */
.comments-area,
.author-info,
.page-content,
.no-results,
.error404 .page-wrapper {
	background-color: transparent;
	color: var(--lv-grey);
}
.comments-title,
.comment-reply-title {
	color: var(--lv-strong);
	font: 400 normal 36px var(--lv-display);
	letter-spacing: 2px;
}
.comment-author .fn,
.comment-author .url {
	color: var(--lv-strong);
}
.comment-meta,
.comment-meta a {
	color: var(--lv-grey);
}
.error404 .page-title {
	color: var(--lv-strong);
}

/* Weitere helle Flächen von Twenty Thirteen abdunkeln */
mark,
ins {
	background: var(--lv-red);
	color: var(--lv-on-red);
}
.comment-respond,
.no-comments,
.error404 .page-header,
.error404 .page-wrapper,
.attachment .hentry,
.attachment .entry-content {
	background-color: var(--lv-bg-alt);
	color: var(--lv-grey);
}
.attachment .entry-content {
	background-color: var(--lv-bg);
}
.comment-respond {
	border-top: 1px solid var(--lv-line);
}
.comment-form label,
.comment-notes,
.logged-in-as {
	color: var(--lv-grey);
}
.required {
	color: var(--lv-red);
}
.page-links a,
.page-links > span,
.format-status .entry-content .page-links a,
.format-gallery .entry-content .page-links a,
.format-chat .entry-content .page-links a,
.format-quote .entry-content .page-links a,
.format-gallery .entry-content .page-links a:hover,
.format-audio .entry-content .page-links a:hover,
.format-status .entry-content .page-links > span,
.format-quote .entry-content .page-links > span {
	background-color: transparent;
	border: 1px solid var(--lv-line);
	color: var(--lv-strong);
}
.page-links a:hover {
	background-color: var(--lv-red);
	border-color: var(--lv-red);
	color: var(--lv-on-red);
}
.widget_calendar tbody td,
.site-footer .widget_calendar tbody td {
	background-color: var(--lv-bg);
}
.post-navigation a,
.post-navigation .meta-nav {
	color: var(--lv-strong);
	font-style: normal;
}
.post-navigation a:hover {
	color: var(--lv-red);
}

/* ==========================================================================
   Formulare und Schaltflächen wie auf hans-jacobs.de
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	background-color: #FFFFFF;
	border: 1px solid #CFC8BA;
	border-radius: 0;
	color: var(--lv-strong);
}
input:focus,
textarea:focus,
select:focus {
	border-color: var(--lv-red);
	outline: 0;
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
.post-password-required input[type="submit"] {
	background: transparent;
	border: 1px solid var(--lv-strong);
	border-radius: 0;
	box-shadow: none;
	color: var(--lv-strong);
	font-family: var(--lv-display);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 2px;
	padding: 12px 32px;
	transition: background 0.2s, border-color 0.2s;
}
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="reset"]:hover,
.wp-block-button__link:hover,
.post-password-required input[type="submit"]:hover {
	background: var(--lv-red);
	border-color: var(--lv-red);
	color: var(--lv-on-red);
}
button:active,
input[type="submit"]:active,
.post-password-required input[type="submit"]:active {
	color: var(--lv-on-red);
	background: var(--lv-red);
	border: 1px solid var(--lv-red);
	padding: 12px 32px;
}

/* ==========================================================================
   Seitenleiste rechts (Bücher-Menü)
   ========================================================================== */
.widget {
	background-color: var(--lv-bg-alt);
	border: 1px solid var(--lv-line);
	color: var(--lv-grey);
	font-size: 16px;
	padding: 26px 24px;
}
.widget .widget-title,
.site-footer .widget-title {
	color: var(--lv-red);
	font: 400 normal 17px/1.4 var(--lv-serif);
	letter-spacing: 4px;
	margin: 0 0 14px;
	text-transform: uppercase;
}
.widget li {
	border-bottom: 1px solid var(--lv-line);
	padding: 8px 0;
}
.widget li:last-child {
	border-bottom: 0;
}
.widget a {
	color: var(--lv-grey);
}
.widget a:hover {
	color: var(--lv-red);
}
.widget .current-menu-item > a,
.widget .current-cat > a {
	color: var(--lv-strong);
}

/* ==========================================================================
   Fußbereich
   ========================================================================== */
.site-footer {
	background-color: var(--lv-bg);
	border-top: 1px solid var(--lv-line);
	color: var(--lv-grey);
	font-size: 16px;
	letter-spacing: 0.5px;
}
.site-footer a {
	color: var(--lv-grey);
}
.site-footer a:hover {
	color: var(--lv-red);
}
.site-footer .sidebar-container {
	background-color: var(--lv-bg-alt);
	border-bottom: 1px solid var(--lv-line);
	padding: 50px 0 30px;
}
.site-footer .widget {
	-webkit-hyphens: manual;
	hyphens: manual;
	background: transparent;
	border: 0;
	color: var(--lv-grey);
	line-height: 1.7;
	padding: 0 20px 20px 0;
}
.site-footer .widget a {
	color: var(--lv-strong);
	text-decoration: underline;
}
.site-footer .widget a:hover {
	color: var(--lv-red);
}
.site-footer .widget li {
	border-bottom: 0;
}

.site-info,
.sidebar .site-info {
	padding: 44px 20px;
	text-align: center;
}
.site-info::before {
	background: url('images/lippische-rose.webp') center / contain no-repeat;
	content: "";
	display: block;
	height: 30px;
	margin: 0 auto;
	width: 30px;
}

/* Cookie-Hinweis von Jetpack */
#eu-cookie-law {
	background-color: var(--lv-bg-alt) !important;
	border: 1px solid var(--lv-line) !important;
	color: var(--lv-grey) !important;
	font-family: var(--lv-serif) !important;
}
#eu-cookie-law a {
	color: var(--lv-strong) !important;
}
#eu-cookie-law input.accept {
	background: transparent !important;
	border: 1px solid var(--lv-strong) !important;
	border-radius: 0 !important;
	color: var(--lv-strong) !important;
	font-family: var(--lv-display) !important;
	letter-spacing: 1.5px !important;
}
#eu-cookie-law input.accept:hover {
	background: var(--lv-red) !important;
	border-color: var(--lv-red) !important;
	color: var(--lv-on-red) !important;
}

/* ==========================================================================
   Kleinere Bildschirme
   ========================================================================== */
@media (max-width: 767px) {
	.site-header .home-link {
		padding: 60px 20px 50px;
	}
	.site-header .site-title {
		font-size: 76px;
	}
	.entry-title {
		font-size: 36px;
	}
	.archive-title,
	.page-title {
		font-size: 40px;
	}
}
@media (max-width: 643px) {
	.site-header .site-title {
		font-size: 48px;
	}
	.site-description {
		font-size: 18px;
	}
	.main-navigation {
		min-height: 52px;
		text-align: left;
	}
	ul.nav-menu,
	div.nav-menu > ul {
		padding: 0;
	}
	.menu-toggle,
	.menu-toggle:hover,
	.menu-toggle:focus,
	.menu-toggle:active {
		background: none;
		border: 0;
		color: var(--lv-strong);
		font-family: var(--lv-display);
		font-size: 20px;
		letter-spacing: 2px;
		padding: 16px 20px;
	}
	.menu-toggle:hover {
		color: var(--lv-red);
	}
	.toggled-on .nav-menu li > ul a,
	.toggled-on .nav-menu li:hover > a,
	.toggled-on .nav-menu .children a {
		color: var(--lv-grey);
	}
	.toggled-on .nav-menu > li a:hover,
	.toggled-on .nav-menu > ul a:hover,
	.toggled-on .nav-menu > li a:focus,
	.toggled-on .nav-menu > ul a:focus {
		background-color: var(--lv-bg-alt);
		color: var(--lv-red);
	}
	.nav-menu li a {
		padding: 14px 20px;
	}
	.entry-content h3 {
		font-size: 24px;
	}
}
@media (max-width: 359px) {
	.site-header .site-title {
		font-size: 40px;
	}
}

.site-footer .widget .widget-title {
	font-size: 15px;
	letter-spacing: 2px;
}

/* Kopfzeile der Archivseiten („Kategoriearchiv: …“) ausblenden.
   Für Screenreader und Suchmaschinen bleibt die Überschrift erhalten. */
.archive-header {
	border: 0 !important;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Zeile „Stolz präsentiert von WordPress“ ausblenden, Rose bleibt */
.site-info .imprint,
.site-info span[role="separator"] {
	display: none;
}

/* Angaben unter der Beitragsüberschrift (Datum, Kategorien, Autor, Bearbeiten) ausblenden */
.entry-header .entry-meta {
	display: none;
}
.entry-header .entry-title {
	margin-bottom: 20px;
}