/* ==========================================================================
   DESIGNBOTE – Single-Beitrag (Nachbau des Original-Layouts)
   Nur auf Einzelbeiträgen geladen (inc/designbote-single.php).
   ========================================================================== */

/* Schriften (liegen bereits unter /fonts/ auf dem Server) ------------------ */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/open-sans-v16-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/open-sans-v16-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/oswald-v17-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/oswald-v17-latin-700.woff2") format("woff2"); }

:root {
	--db-text: #000;
	--db-muted: #6b6b6b; /* 5.3:1 auf Weiß (WCAG AA) */
	--db-link: #6f5337;
	--db-link-hover: #a67c52;
	--db-line: #eee;
	--db-font-head: "Oswald", Helvetica, Arial, sans-serif;
	--db-font-body: "Open Sans", Helvetica, Arial, sans-serif;
	--db-font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--db-width: 990px; /* Seiten-/Inhaltsbreite (Original: 990px) */
}

html { scroll-padding-top: 140px; }

/* Weißer Hintergrund + 1200-px-Inhaltsbreite statt Astra-Karte ------------ */
body.single-post,
body.single-post.ast-separate-container,
body.single-post .site-content {
	background-color: #fff;
}

body.single-post #content > .ast-container,
body.single-post.ast-narrow-container #content > .ast-container {
	max-width: calc(var(--db-width) + 40px);
	padding-left: 20px;
	padding-right: 20px;
	display: block;
}

body.single-post #primary.db-single-primary {
	width: 100%;
	margin: 0;
	padding: 0 0 3em;
	border: 0;
}

.db-single {
	max-width: var(--db-width);
	margin: 0 auto;
	color: var(--db-text);
}

/* Astra-Karte (ast-article-single) neutralisieren */
body.single-post .db-single .db-post,
body.single-post .db-single .db-post.ast-article-single {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* Astra-Bildschatten (Einzelbeitrag) abschalten */
body.single-post .db-single .ast-article-single figure,
body.single-post .db-single .ast-article-single img {
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* Breadcrumb ---------------------------------------------------------------- */
.db-breadcrumbs {
	margin: 1em 0 32px;
	padding-top: 16px;
	border-top: 1px solid var(--db-line);
	font-family: var(--db-font-ui);
	font-size: 16px;
	line-height: 1.43;
	letter-spacing: 0.7px;
}
.db-breadcrumbs a { color: #333; text-decoration: none; }
.db-breadcrumbs a:hover { color: var(--db-link-hover); }

/* Kopf: H1 Titel, H2 Subtitel, Beitragsbild -------------------------------- */
.db-post__header { text-align: center; }

.db-post__title {
	margin: 20px 0 16px;
	font-family: var(--db-font-head);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.7px;
	color: var(--db-text);
	text-align: center;
}

.db-post__subtitle {
	margin: 20px 0 22px;
	font-family: var(--db-font-head);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.7px;
	color: var(--db-text);
	text-align: center;
}

body.single-post .db-single figure.db-postimg {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.db-postimg .db-picture { display: block; }

/* Originalproportionen, nie breiter als die Seite, kleine Bilder nicht hochskalieren */
.db-postimg img {
	display: block;
	width: 100%; /* Platz sofort reservieren (CLS); Obergrenze = Bildbreite per Inline-Style */
	max-width: min(100%, var(--db-width));
	height: auto;
	margin: 0 auto;
}

.db-postimg__caption,
.db-post .wp-caption-text,
.db-post figcaption {
	margin: 6px 0 0;
	font-family: var(--db-font-ui);
	font-size: 12px;
	line-height: 1.45;
	color: var(--db-text);
}
.db-postimg__caption { text-align: center; }

.leader-con:empty { display: none; }

/* Inhalt -------------------------------------------------------------------- */
.db-post__content {
	margin-top: 25px;
	font-family: var(--db-font-body);
	font-size: 16px;
	line-height: 25px;
	color: var(--db-text);
	text-align: start;
	overflow-wrap: break-word;
}

.db-post__content::after { content: ""; display: table; clear: both; }

.db-post__content p { margin: 0 0 1.65em; }

.db-post__content h2,
.db-post__content h3,
.db-post__content h4,
.db-post__content h5,
.db-post__content h6 {
	margin: 20px 0 1em;
	font-family: var(--db-font-head);
	font-weight: 400;
	letter-spacing: 0.7px;
	color: var(--db-text);
	break-after: avoid-column;
}
.db-post__content h2 { font-size: 24px; line-height: 36px; }
.db-post__content h3 { font-size: 20px; line-height: 30px; }
.db-post__content h4 { font-size: 18px; line-height: 27px; }
.db-post__content h5,
.db-post__content h6 { font-size: 16px; line-height: 24px; }

.db-post__content a { color: var(--db-link); text-decoration: underline; word-break: break-word; }
.db-post__content a:hover { color: var(--db-link-hover); }

.db-post__content ul,
.db-post__content ol { margin: 0 0 1.65em 1.4em; padding: 0; }

.db-post__content blockquote {
	margin: 0 0 1.65em;
	padding: 0 0 0 1em;
	border-left: 3px solid var(--db-line);
	font-style: italic;
}

/* Bilder im Text */
.db-post__content .db-picture,
.db-post__content img {
	max-width: 100%;
	height: auto;
}
.db-post__content .db-picture { display: block; }
.db-post__content img { display: block; margin: 8px auto; }
.db-post__content .db-picture > img { float: none; margin: 8px auto; }
.db-post__content .db-picture.alignleft { float: left; margin: 0 1.5em 1em 0; }
.db-post__content .db-picture.alignright { float: right; margin: 0 0 1em 1.5em; }
.db-post__content .db-picture.alignleft > img,
.db-post__content .db-picture.alignright > img { margin: 0; }
.db-post__content .wp-caption .db-picture > img { margin-bottom: 4px; }

.db-post__content .wp-caption,
.db-post__content figure {
	max-width: 100%;
	margin: 0 0 1.65em;
	break-inside: avoid;
}
.db-post__content .wp-caption .wp-caption-text,
.db-post__content figcaption { margin: 0; line-height: 25px; }

.db-post__content .alignleft { float: left; margin: 0 1.5em 1em 0; }
.db-post__content .alignright { float: right; margin: 0 0 1em 1.5em; }
.db-post__content .aligncenter { margin-left: auto; margin-right: auto; }

.db-post__content iframe,
.db-post__content video { max-width: 100%; }

/* In-Content-Anzeige nur mobil (wie im Original) */
.db-post__content .desig-im-content-mobil { display: none; }
@media (max-width: 768px) {
	.db-post__content .desig-im-content-mobil { display: block; }
}

/* Glossar-Begriffe wie im Original (braun, gestrichelt, mit "?") */
.db-post__content .glossary-tooltip .glossary-link a.glossary-only-link {
	color: var(--db-link);
	font-weight: 700;
	text-decoration: underline dashed;
	text-underline-offset: 3px;
}
.db-post__content .glossary-tooltip .glossary-link::after {
	content: "?";
	display: inline-block;
	vertical-align: super;
	margin-left: 0.15em;
	color: var(--db-link);
	font-size: 0.65em;
	font-weight: 700;
	line-height: 1;
}

/* Zwei Spalten ab 990 px ---------------------------------------------------- */
@media (min-width: 990px) {
	/* Standard: automatisch ausbalancierter Zweispalter mit Trennlinie */
	.db-post__content--flow {
		column-count: 2;
		column-gap: 60px;
		column-rule: 1px solid var(--db-line);
		column-fill: balance;
	}

	.db-post__content--flow > *:first-child { margin-top: 0; }

	/* Weiterlesen-Tag gesetzt: Spalte bricht genau dort um */
	.db-post__content--split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 60px;
		align-items: start;
	}

	.db-col > *:first-child { margin-top: 0; }

	.db-post__content--flow p,
	.db-post__content--flow li { orphans: 2; widows: 2; }
}

/* Seitenumbruch-Links (<!--nextpage-->) ------------------------------------- */
.db-page-links {
	clear: both;
	margin: 1em 0 0;
	font-family: var(--db-font-body);
}
.db-page-links a,
.db-page-links > span:not(:first-child) { display: inline-block; margin: 0 0.3em; }

/* Datum und Tags unter dem Beitrag ------------------------------------------ */
.db-post__meta {
	clear: both;
	padding: 18px 0;
	border-bottom: 1px solid var(--db-line);
	font-family: var(--db-font-body);
	font-size: 16px;
	line-height: 1.43;
	text-align: left;
}

.db-post__date { margin: 10px 0 0; }

.db-post__tags { margin-top: 10px; }
.db-post__tags ul {
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
}
.db-post__tags li {
	display: inline-block;
	padding: 0.5em 0.4em;
}
.db-post__tags li:not(:last-child)::after { content: ","; }
.db-post__tags a { color: #333; text-decoration: none; }
.db-post__tags a:hover { color: var(--db-link-hover); }

/* Kommentare ---------------------------------------------------------------- */
.db-comments {
	margin: 0 0 30px;
	font-family: var(--db-font-ui);
	text-align: left;
}

.db-comments__title {
	margin: 20px 0 22px;
	font-family: var(--db-font-head);
	font-size: 22px;
	font-weight: 400;
	line-height: 33px;
	letter-spacing: 0.7px;
	color: var(--db-text);
}

.db-comments .comments-list {
	margin: 0 0 65px;
	padding: 0 15px 15px;
	list-style: none;
}
.db-comments .comments-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.db-comments .comments-list > li {
	margin: 0 0 35px;
	border-bottom: 1px dotted var(--db-line);
}
.db-comments .comments-list li li {
	margin: 15px 0 15px 3em;
	padding-top: 35px;
	border-top: 1px solid var(--db-line);
}

.db-comments .comment-body {
	display: flex;
	gap: 22px;
	font-family: var(--db-font-body);
	font-size: 12px;
	line-height: 22px;
}
.db-comments .comment-avatar { flex: 0 0 auto; margin: 10px 0 0; }
.db-comments .comment-avatar img { border-radius: 50%; }
.db-comments .comment-content { flex: 1 1 auto; min-width: 0; }

.db-comments .comment-content p.comment-author {
	margin: 10px 0 18px;
	font-family: var(--db-font-head);
	font-size: 18px;
	line-height: 27px;
	color: #333;
}
.db-comments .comment-author a { color: #333; text-decoration: none; }

.db-comments .comment-meta {
	margin: 0 0 6px;
	font-size: 11px;
	line-height: 25px;
	color: var(--db-muted);
}
.db-comments .comment-meta > * { display: inline; float: none; margin: 0 5px 0 0; padding: 0; }
.db-comments .comment-meta time { margin-right: 5px; }
.db-comments .comment-meta time::after { content: "|"; margin-left: 8px; }
.db-comments .comment-meta a { margin-right: 5px; color: var(--db-muted); text-decoration: none; }
.db-comments .comment-meta a:hover { color: #333; }

.db-comments .comment-content p { margin: 0 0 24px; line-height: 25px; }
.db-comments .comment-awaiting-moderation { font-style: italic; color: var(--db-muted); }

.db-comments .no-comments { font-family: var(--db-font-body); color: var(--db-muted); }

/* Ausklappbares, grau hinterlegtes Kommentarformular */
.db-comment-toggle {
	display: block;
	width: 100%;
	margin: 0;
	padding: 18px;
	border: 0;
	border-radius: 0;
	outline: none;
	background-color: #e6e6e6;
	color: #444;
	font-family: var(--db-font-ui);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.43;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: none;
}
.db-comment-toggle:hover,
.db-comment-toggle:focus { background-color: #ccc; color: #444; }
.db-comment-toggle:focus-visible { outline: 2px solid #333; outline-offset: 2px; }
.db-comment-toggle::after {
	content: "\2795";
	float: right;
	margin-left: 5px;
	font-size: 13px;
}
.db-comment-toggle[aria-expanded="true"]::after { content: "\2796"; }

.db-comment-panel {
	padding: 0 18px;
	background-color: #f1f1f1;
	overflow: hidden;
	transition: max-height 0.4s ease-out;
}
.db-comment-panel[hidden] { display: none; }

.db-comments .comment-respond { padding: 20px 0 10px; }

.db-comments .comment-reply-title {
	margin: 0 0 30px;
	font-family: var(--db-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.db-comments .comment-reply-title small { margin-left: 1em; font-size: 12px; text-transform: none; }
.db-comments .comment-reply-title small a { color: var(--db-muted); }

#comments.db-comments .comment-form { font-family: var(--db-font-body); font-size: 16px; }
#comments.db-comments .comment-form p { margin: 0 0 20px; }
#comments.db-comments .comment-form label {
	display: block;
	margin: 0 0 5px;
	font-family: var(--db-font-body);
	font-size: 16px;
	font-weight: 400;
	color: var(--db-text);
}
#comments.db-comments .comment-form .required { color: #a00; }

#comments.db-comments .comment-form input[type="text"],
#comments.db-comments .comment-form input[type="email"],
#comments.db-comments .comment-form input[type="url"],
#comments.db-comments .comment-form textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 5px 10px;
	border: 1px solid #ccc;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	color: var(--db-text);
	font-family: var(--db-font-body);
	font-size: 16px;
	line-height: 1.5;
	transition: border-color 0.3s;
}
#comments.db-comments .comment-form input[type="text"],
#comments.db-comments .comment-form input[type="email"],
#comments.db-comments .comment-form input[type="url"] { height: 35px; }
#comments.db-comments .comment-form textarea { min-height: 220px; padding: 10px; resize: vertical; }
#comments.db-comments .comment-form input:focus,
#comments.db-comments .comment-form textarea:focus { border-color: #333; outline: none; }

.db-comment-hint { display: block; margin-top: 5px; font-size: 13px; color: #555; }

.db-comment-fields { display: grid; grid-template-columns: 1fr; gap: 0 30px; }
@media (min-width: 768px) {
	.db-comment-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

#comments.db-comments .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; }
#comments.db-comments .comment-form-cookies-consent label { display: inline; font-size: 14px; }

.db-comments .form-submit { margin: 10px 0 20px; text-align: center; }
#comments.db-comments .db-comment-submit {
	width: auto;
	height: auto;
	padding: 10px 28px;
	border: 1px solid #969696;
	border-radius: 0;
	background: transparent;
	color: var(--db-text);
	font-family: var(--db-font-ui);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.43;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}
#comments.db-comments .db-comment-submit:hover,
#comments.db-comments .db-comment-submit:focus { background: #333; border-color: #333; color: #ccc; }

/* Wird im Kommentar "Antworten" geklickt, wandert das Formular unter den Kommentar */
.db-comments .comments-list .comment-respond {
	margin: 0 0 20px;
	padding: 20px 18px 10px;
	background: #f1f1f1;
}

/* Auch interessant ---------------------------------------------------------- */
.db-related {
	margin: 0 0 40px;
	padding-top: 10px;
	text-align: center;
	font-family: var(--db-font-ui);
}

.db-related__title {
	margin: 20px 0 22px;
	font-family: var(--db-font-head);
	font-size: 22px;
	font-weight: 400;
	line-height: 33px;
	letter-spacing: 0.7px;
	color: var(--db-text);
}

.db-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 25px 30px;
	padding-bottom: 25px;
	border-bottom: 1px solid var(--db-line);
}
@media (min-width: 768px) {
	.db-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.db-related__link { display: block; color: var(--db-text); text-decoration: none; }
.db-related__link:hover .db-related__headline { color: var(--db-link-hover); }

.db-related__thumb { display: block; }
.db-related__thumb .db-picture,
.db-related__thumb img {
	display: block;
	width: 210px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
.db-related__thumb img { aspect-ratio: 3 / 2; object-fit: cover; }

.db-related__headline {
	margin: 20px 0 10px;
	font-family: var(--db-font-ui);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.7px;
	color: #333;
	text-align: center;
}

/* Mobil --------------------------------------------------------------------- */
@media (max-width: 989px) {
	.db-post__title { font-size: 26px; line-height: 1.35; }
	.db-post__subtitle { font-size: 18px; }
}

@media (max-width: 544px) {
	body.single-post #content > .ast-container { padding-left: 16px; padding-right: 16px; }
	.db-breadcrumbs { font-size: 14px; margin-bottom: 20px; }
	.db-post__title { font-size: 24px; }
	.db-comments .comments-list { padding: 0 0 15px; }
	.db-comments .comments-list li li { margin-left: 1em; }
	.db-comment-panel { padding: 0 12px; }
}

/* ==========================================================================
   Lightbox / Bildergalerie (Skript: functions.php §13)
   ========================================================================== */
.db-lb-link { cursor: zoom-in; }
html.db-lb-open { overflow: hidden; }
.db-lb {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(12, 12, 12, 0.96);
	color: #fff;
	overflow: hidden;
}
.db-lb::backdrop { background: rgba(0, 0, 0, 0.6); }
.db-lb__track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior: contain;
	scrollbar-width: none;
}
.db-lb__track::-webkit-scrollbar { display: none; }
.db-lb__slide {
	flex: 0 0 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 60px 72px 24px;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
.db-lb__slide img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - 150px);
	max-height: calc(100dvh - 150px);
	object-fit: contain;
}
.db-lb__caption {
	max-width: 900px;
	margin: 12px 0 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	text-align: center;
	color: #ddd;
}
.db-lb__count {
	position: absolute;
	top: 18px;
	left: 20px;
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: #ddd;
}
.db-lb__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
}
.db-lb__btn:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.db-lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.db-lb__track:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.db-lb__btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.db-lb__close { top: 6px; right: 8px; }
.db-lb__prev,
.db-lb__next { top: 50%; transform: translateY(-50%); }
.db-lb__prev { left: 10px; }
.db-lb__next { right: 10px; }
.db-lb--single .db-lb__prev,
.db-lb--single .db-lb__next,
.db-lb--single .db-lb__count { display: none; }

@media (max-width: 543px) {
	.db-lb__slide { padding: 60px 8px 76px; }
	.db-lb__slide img { max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); }
	.db-lb__prev,
	.db-lb__next { top: auto; bottom: 14px; transform: none; }
	.db-lb__prev { left: calc(50% - 60px); }
	.db-lb__next { right: calc(50% - 60px); }
}