/*
Theme Name: die harburger
Theme URI: https://die-harburger.de
Author: Mirko Haas
Description: Block-Theme für das Stadtteilmagazin die harburger. Farben und Schriften stehen in theme.json, Karten und Bereichsfarben in dieser Datei.
Version: 0.5.13
Requires at least: 6.5
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: die-harburger
*/

/* ------------------------------------------------------------------
   Grundlagen
------------------------------------------------------------------ */
:root {
	--hb-lesespalte: 48rem;
	--hb-radius: 24px;
	--hb-radius-small: 16px;
}

body {
	-webkit-font-smoothing: antialiased;
}

a {
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------
   Kopfzeile
------------------------------------------------------------------ */
.hb-header {
	background: var(--wp--preset--color--weiss);
	border-bottom: 1px solid rgba(18, 63, 54, 0.12);
	padding: 1rem 1.5rem;
}

.hb-logo,
.hb-logo a {
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-weight: 700;
	font-size: 1.75rem;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ueberschrift);
	text-decoration: none;
	margin: 0;
}

.hb-nav .wp-block-navigation-item__content {
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--dunkelgruen);
}

.hb-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--mittelgruen);
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------------
   Fußzeile
------------------------------------------------------------------ */
.hb-footer {
	background: var(--wp--preset--color--dunkelgruen);
	color: var(--wp--preset--color--creme);
	padding: 2rem 1.5rem;
	margin-top: 4rem;
}

.hb-footer p,
.hb-footer a,
.hb-footer .wp-block-navigation-item__content {
	color: var(--wp--preset--color--creme);
}

.hb-footer a:hover,
.hb-footer .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--gold);
}

/* ------------------------------------------------------------------
   Seiten-Rahmen
------------------------------------------------------------------ */
.hb-main {
	padding: 2.5rem 1.5rem 1rem;
}

.hb-article {
	padding: 2.5rem 1.5rem 3rem;
}

.hb-page-title {
	margin-bottom: 2rem;
}

/* ------------------------------------------------------------------
   Karten (Startseite, Archiv, Suche)
------------------------------------------------------------------ */
.hb-card {
	background: var(--wp--preset--color--creme);
	border-radius: var(--hb-radius);
	padding: 1.75rem;
	overflow: hidden;
	height: 100%;
	box-sizing: border-box;
}

.hb-card > * + * {
	margin-top: 0.75rem;
}

/* Farbe je Bereich: WordPress setzt an jede Karte eine Klasse "category-<slug>"
   und an die Artikelseite (body) ebenfalls. Daraus wird die Variable --hb-ton,
   die Karten, Rahmen, Artikelseite und Kommentare nutzen.
   Neuer Bereich = neue Zeile hier. Bei mehreren Bereichen gewinnt die unterste Zeile. */
.wp-block-post.category-kultur, body.single.category-kultur {
	--hb-ton: var(--wp--preset--color--ton-kultur); --hb-linie: #D4AE55; }
.wp-block-post.category-politik, body.single.category-politik {
	--hb-ton: var(--wp--preset--color--ton-politik); --hb-linie: #62B596; }
.wp-block-post.category-soziales, body.single.category-soziales {
	--hb-ton: var(--wp--preset--color--ton-soziales); --hb-linie: #E58F72; }
.wp-block-post.category-wirtschaft, body.single.category-wirtschaft {
	--hb-ton: var(--wp--preset--color--ton-wirtschaft); --hb-linie: #7AA0D6; }
.wp-block-post.category-harburg, body.single.category-harburg {
	--hb-ton: var(--wp--preset--color--ton-harburg); --hb-linie: #A184D3; }

/* Unterbereiche von Harburg: alle Lila, nur in leicht anderen Tönen.
   Stehen unter "harburg", damit sie bei Beiträgen in beiden Bereichen gewinnen. */
.wp-block-post.category-fotos-und-archiv, body.single.category-fotos-und-archiv { --hb-ton: #E6DCF2; --hb-linie: #A184D3; }
.wp-block-post.category-geschichte, body.single.category-geschichte { --hb-ton: #CDBBE6; --hb-linie: #A184D3; }
.wp-block-post.category-persoenlichkeiten, body.single.category-persoenlichkeiten { --hb-ton: #DDCFEE; --hb-linie: #A184D3; }
.wp-block-post.category-stadtteile, body.single.category-stadtteile { --hb-ton: #C4B0E0; --hb-linie: #A184D3; }
.wp-block-post.category-strassennamen, body.single.category-strassennamen { --hb-ton: #D3C3EA; --hb-linie: #A184D3; }

.hb-card {
	background: var(--hb-ton, var(--wp--preset--color--creme));
}

.hb-card .wp-block-post-title {
	margin: 0.4rem 0 0.6rem;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
	line-height: 1.15;
}

.hb-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ueberschrift);
}

.hb-card .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hb-card .wp-block-post-excerpt {
	margin: 0 0 0.5rem;
}

.hb-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.hb-date {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.8;
	margin: 0;
}

.hb-tags {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.hb-tags a {
	font-weight: 700;
	color: var(--wp--preset--color--dunkelgruen);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hb-tags .wp-block-post-terms__separator {
	margin: 0 0.15rem;
}

.hb-card-img,
.hb-card-img img {
	border-radius: var(--hb-radius-small);
	display: block;
	width: 100%;
}

.hb-card-img img {
	object-fit: cover;
}

/* WordPress gibt dem Bild-Link in der Kachel height:100%. Dann rutscht die Bildunterschrift
   (Foto: Name) aus der Kachel und überlappt die Schlagwörter. */
figure.wp-block-post-featured-image a {
	height: auto;
}

/* stehende Karte: Bild oben */
.hb-card-v .hb-card-img {
	margin-bottom: 1rem;
}

/* liegende Karte: Spalten, Abstand */
.hb-card-h .hb-card-cols {
	gap: 2rem;
	margin: 0;
}

.hb-card-h {
	padding: 2rem;
}

.hb-hero {
	margin-bottom: 3.5rem;
}

/* ------------------------------------------------------------------
   Bereiche auf der Startseite
------------------------------------------------------------------ */
.hb-section {
	margin-bottom: 3rem;
}

.hb-section-title {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding-bottom: 0.25rem;
	border-bottom: 3px solid var(--wp--preset--color--gold);
}

.hb-section-title a {
	color: inherit;
	text-decoration: none;
}

.hb-bereich .wp-block-post-template,
.hb-archiv .wp-block-post-template {
	gap: 1.5rem;
}

@media (max-width: 1000px) {
	.hb-bereich .wp-block-post-template.is-layout-grid,
	.hb-archiv .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.hb-bereich .wp-block-post-template.is-layout-grid,
	.hb-archiv .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hb-card,
	.hb-card-h {
		padding: 1.25rem;
	}

	.hb-card-h .hb-card-cols {
		gap: 1.25rem;
	}

	.hb-logo,
	.hb-logo a {
		font-size: 1.5rem;
	}
}

/* ------------------------------------------------------------------
   Artikelseite
------------------------------------------------------------------ */
.hb-article .hb-tags {
	margin-bottom: 0.5rem;
}

.hb-article h1 {
	margin-top: 0;
}

.hb-lead {
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: 1.375rem;
	line-height: 1.45;
	color: var(--wp--preset--color--ueberschrift);
	margin-top: 1rem;
}

.hb-lead p {
	margin: 0;
}

.hb-hero-img {
	margin-top: 2rem;
}

.hb-hero-img img {
	border-radius: var(--hb-radius);
	width: 100%;
	object-fit: cover;
}

.hb-article .hb-date {
	margin: 1rem 0 2rem;
}

/* Seitennummerierung */
.wp-block-query-pagination {
	margin-top: 2rem;
	font-weight: 600;
}

/* Such-Symbol in der Kopfzeile: Beschriftung ausblenden */
.hb-header .wp-block-search__label {
	display: none;
}

/* ------------------------------------------------------------------
   Diskussion unter dem Artikel
------------------------------------------------------------------ */
.hb-comments {
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 3px solid var(--wp--preset--color--gold);
}

.hb-comments > h2 {
	margin-top: 0;
}

.hb-comments .wp-block-comments-title {
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.hb-comment {
	background: var(--wp--preset--color--weiss);
	border-radius: var(--hb-radius-small);
	padding: 1rem 1.25rem;
	margin-top: 1rem;
}

.hb-comment-head {
	gap: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
}

.hb-comment-head .wp-block-avatar img {
	border-radius: 999px;
}

.hb-comment-head .wp-block-comment-author-name {
	font-weight: 700;
}

.hb-comment .wp-block-comment-content p {
	margin: 0.5rem 0;
}

.hb-comment .comment-reply-link {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Antworten: eingerückt, mit Linie */
.wp-block-comment-template ol {
	list-style: none;
	margin: 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--wp--preset--color--creme);
	margin-left: 0.75rem;
}

.wp-block-comment-template,
.wp-block-comment-template li {
	list-style: none;
	padding-left: 0;
}

.hb-comments .comment-respond {
	margin-top: 2rem;
}

.hb-comments input[type="text"],
.hb-comments input[type="email"],
.hb-comments textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(18, 63, 54, 0.35);
	border-radius: 12px;
	padding: 0.6rem 0.8rem;
	font: inherit;
	background: var(--wp--preset--color--weiss);
}

.hb-comments .wp-block-post-comments-form input[type="submit"] {
	background: var(--wp--preset--color--mittelgruen);
	color: var(--wp--preset--color--weiss);
	border: 0;
	border-radius: 999px;
	padding: 0.7rem 1.5rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ------------------------------------------------------------------
   Zwischenüberschriften in Artikeln und Seiten: ruhiger Rhythmus
------------------------------------------------------------------ */
.hb-article .wp-block-post-content h2 {
	font-size: 1.5rem;
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
}

.hb-article .wp-block-post-content h3 {
	font-size: 1.25rem;
	margin-top: 2rem;
	margin-bottom: 0.5rem;
}

.hb-article .wp-block-post-content > :first-child {
	margin-top: 0;
}

/* ------------------------------------------------------------------
   Startseite: Beitraege nacheinander, "Kurz notiert"
------------------------------------------------------------------ */
.hb-stack .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

.hb-stack .wp-block-post-template > li {
	margin: 0;
}

.hb-tagrow {
	gap: 0.15rem 0.6rem;
}

.hb-kurz-strip {
	margin: -1.5rem 0 3rem;
}

.hb-kurz-strip .wp-block-post-template {
	gap: 1rem;
	margin: 0;
	padding: 0;
}

.hb-kurz-item {
	border: 2px solid rgba(18, 63, 54, 0.28);
	border-radius: var(--hb-radius-small);
	padding: 0.9rem 1.15rem 1rem;
	height: 100%;
	box-sizing: border-box;
	background: transparent;
}

.hb-pill {
	display: inline-block;
	margin: 0 0 0.5rem;
	padding: 0.1rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--dunkelgruen);
	color: var(--wp--preset--color--weiss);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hb-kurz-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
}

.hb-kurz-title a {
	color: var(--wp--preset--color--dunkelgruen);
	text-decoration: none;
}

.hb-kurz-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 1000px) {
	.hb-kurz-strip .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------
   Kachel-Strom (Start, Bereiche, Suche)
------------------------------------------------------------------ */
.hb-stream .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hb-stream .wp-block-post-template > li {
	margin: 0;
	grid-column: span 6;
	min-width: 0;
}

.hb-stream .wp-block-post-template > li.hb-span-6 { grid-column: span 6; }
.hb-stream .wp-block-post-template > li.hb-span-4 { grid-column: span 4; }
.hb-stream .wp-block-post-template > li.hb-span-3 { grid-column: span 3; }
.hb-stream .wp-block-post-template > li.hb-span-2 { grid-column: span 2; }

.hb-tagrow {
	gap: 0.15rem 0.6rem;
}

/* normale Karte: Bild oben (halbe Breite) oder Bild rechts (breit) */
.hb-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.75rem;
}

.hb-card > * + * {
	margin-top: 0;
}

.hb-card-body > * + * {
	margin-top: 0.75rem;
}

.hb-card-img {
	margin: 0;
}

.hb-card-img img {
	width: 100%;
	object-fit: cover;
}

.hb-span-6 .hb-card,
.hb-span-4 .hb-card {
	flex-direction: row-reverse;
	align-items: center;
	gap: 2rem;
	padding: 2rem;
}

.hb-span-6 .hb-card .hb-card-img,
.hb-span-4 .hb-card .hb-card-img {
	flex: 0 0 42%;
}

.hb-span-6 .hb-card .hb-card-body,
.hb-span-4 .hb-card .hb-card-body {
	flex: 1 1 0;
	min-width: 0;
}

.hb-span-6 .hb-card .hb-card-img img,
.hb-span-4 .hb-card .hb-card-img img {
	aspect-ratio: 4 / 3;
}

/* Kurzmeldung: nur Rahmen in der Bereichsfarbe, ein Drittel breit */
.hb-kurz-card {
	display: none;
}

.tag-kurz-notiert .hb-card {
	display: none;
}

.tag-kurz-notiert .hb-kurz-card {
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: 1rem 1.25rem 1.1rem;
	border: 3px solid var(--hb-linie, var(--wp--preset--color--mittelgruen));
	border-radius: var(--hb-radius);
	background: transparent;
}

.hb-pill {
	display: inline-block;
	margin: 0 0 0.6rem;
	padding: 0.1rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--dunkelgruen);
	color: var(--wp--preset--color--weiss);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hb-kurz-title {
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
	line-height: 1.25;
}

.hb-kurz-title a {
	color: var(--wp--preset--color--ueberschrift);
	text-decoration: none;
}

.hb-kurz-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 800px) {
	.hb-stream .wp-block-post-template > li,
	.hb-stream .wp-block-post-template > li[class*="hb-span-"] {
		grid-column: span 6;
	}

	.hb-span-6 .hb-card,
	.hb-span-4 .hb-card {
		flex-direction: column;
		padding: 1.25rem;
		gap: 1rem;
	}

	.hb-span-6 .hb-card .hb-card-img,
	.hb-span-4 .hb-card .hb-card-img {
		flex: none;
		width: 100%;
	}
}

/* ------------------------------------------------------------------
   Artikelseite: Tafel in der Bereichsfarbe, Kommentare mit Rahmen
------------------------------------------------------------------ */
.hb-panel {
	background: var(--hb-ton, var(--wp--preset--color--creme));
	border-radius: var(--hb-radius);
	padding: 2.25rem 2rem 2.5rem;
}

.hb-panel .hb-hero-img img {
	border-radius: var(--hb-radius-small);
}

.hb-comments {
	border-top: 0;
	padding-top: 0;
}

.hb-comment {
	background: transparent;
	border: 3px solid var(--hb-linie, var(--wp--preset--color--mittelgruen));
}

@media (max-width: 640px) {
	.hb-panel {
		padding: 1.5rem 1.25rem 1.75rem;
	}
}

/* ------------------------------------------------------------------
   Ganze Kachel anklickbar: der Link der Überschrift wird über die
   ganze Kachel gelegt. Bereichs-Links (#Politik) bleiben extra klickbar.
------------------------------------------------------------------ */
.hb-stream .wp-block-post-template > li {
	position: relative;
}

.hb-stream .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hb-stream .hb-tagrow a {
	position: relative;
	z-index: 2;
}

.hb-stream .wp-block-post:hover .hb-card,
.hb-stream .wp-block-post:hover .hb-kurz-card {
	filter: brightness(0.97);
}

/* Anmelden/Abmelden im Header: gleiche Form wie der Such-Knopf */
.hb-login {
	margin: 0;
}

.hb-login a {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--mittelgruen);
	color: var(--wp--preset--color--weiss);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.hb-login a:hover {
	background: var(--wp--preset--color--dunkelgruen);
}

@media (max-width: 781px) {
	.hb-login a {
		min-height: 48px;
		padding: 0 1.25rem;
	}
}

/* Kurzmeldung neben einem Artikel: nur so hoch wie ihr Inhalt, nicht so hoch wie der Artikel */
.hb-stream .wp-block-post-template > li.hb-solo {
	align-self: start;
}

.hb-solo .hb-kurz-card {
	height: auto;
}

/* leere Platzhalter in Zeile 2 */
.hb-stream .wp-block-post-template > li.hb-spacer {
	min-height: 0;
}

@media (max-width: 800px) {
	.hb-stream .wp-block-post-template > li.hb-spacer {
		display: none;
	}
}

/* Such-Knopf im Header: transparent mit Rand in Mittelgrün, beim Darüberfahren gefüllt */
.hb-header .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--mittelgruen);
	border: 2px solid var(--wp--preset--color--mittelgruen);
}

.hb-header .wp-block-search__button:hover,
.hb-header .wp-block-search__button:focus-visible {
	background: var(--wp--preset--color--mittelgruen);
	color: var(--wp--preset--color--weiss);
}

.hb-header .wp-block-search__button svg {
	fill: currentColor;
}

.hb-header .wp-block-search__button {
	box-sizing: border-box;
	height: 48px;
	padding-top: 0;
	padding-bottom: 0;
}

@media (max-width: 781px) {
	.hb-header .wp-block-search__button {
		height: 48px;
	}
}

.hb-header .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hb-header .wp-block-search__button svg {
	display: block;
	margin: 0;
}

.hb-header .wp-block-search__button svg {
	width: 40px;
	height: 40px;
}

/* ------------------------------------------------------------------
   Profilseite für Leser ([hb_profil])
------------------------------------------------------------------ */
.hb-profil-seit {
	margin: 0 0 1.5rem;
	color: var(--wp--preset--color--mittelgruen);
}

.hb-profil-karte {
	margin: 0 0 1.5rem;
	padding: 1.75rem 2rem;
	border-radius: var(--hb-radius);
	background: var(--wp--preset--color--creme);
}

.hb-profil-karte h2 {
	margin: 0 0 0.25rem;
	font-size: 1.4rem;
}

.hb-profil .hb-hinweis {
	margin: 0 0 1rem;
	font-size: 0.95rem;
}

.hb-profil label {
	display: block;
	margin: 0.9rem 0 0.35rem;
	font-weight: 600;
}

.hb-profil input[type="text"],
.hb-profil input[type="email"],
.hb-profil input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	height: 3rem;
	padding: 0 0.9rem;
	border: 2px solid var(--wp--preset--color--mittelgruen);
	border-radius: 12px;
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--dunkelgruen);
	font: inherit;
}

.hb-profil input:focus {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 1px;
}

.hb-profil-zeile {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

.hb-profil-knopf {
	display: inline-flex;
	align-items: center;
	height: 3rem;
	margin-top: 1.25rem;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--mittelgruen);
	color: var(--wp--preset--color--weiss);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.hb-profil-knopf:hover {
	background: var(--wp--preset--color--dunkelgruen);
}

.hb-profil-meldung {
	margin: 0 0 1.5rem;
	padding: 0.8rem 1rem;
	border-left: 4px solid var(--wp--preset--color--gold);
	border-radius: 12px;
	background: var(--wp--preset--color--weiss);
}

.hb-profil-meldung.hb-fehler {
	border-left-color: #b3402f;
}

.hb-profil-aus {
	display: inline-flex;
	align-items: center;
	height: 3rem;
	padding: 0 1.5rem;
	border: 2px solid var(--wp--preset--color--mittelgruen);
	border-radius: 999px;
	color: var(--wp--preset--color--mittelgruen);
	font-weight: 600;
	text-decoration: none;
}

.hb-profil-aus:hover {
	background: var(--wp--preset--color--mittelgruen);
	color: var(--wp--preset--color--weiss);
}

@media (max-width: 640px) {
	.hb-profil-zeile {
		grid-template-columns: 1fr;
	}

	.hb-profil-karte {
		padding: 1.25rem;
	}
}

.hb-profil .hb-profil-karte > h2 {
	margin-block-start: 0;
	margin-block-end: 0.25rem;
}

/* Kommentare: leerer Avatar-Platzhalter (Avatare sind aus) nimmt keinen Platz mehr ein,
   damit der Name bündig mit dem Kommentartext beginnt */
.hb-comment-head .wp-block-avatar:empty {
	display: none;
}

.hb-kom-regeln {
	margin: 0.25rem 0 1rem;
	font-size: 0.95rem;
}

/* Kürzel (mhs) / (Red.) */
.hb-kuerzel::before {
	content: "\00b7\00a0";
}

.hb-kuerzel-ende {
	margin: 2rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--dunkelgruen);
}

/* ------------------------------------------------------------------
   Straßennamen: Steckbrief-Kasten (Tabellen-Stil "Steckbrief")
------------------------------------------------------------------ */
.wp-block-table.is-style-steckbrief {
	background: #fff;
	border: 3px solid var(--hb-linie, #A184D3);
	border-radius: var(--hb-radius-small);
	padding: 1rem 1.25rem;
	margin: 1.5rem 0 2rem;
}
.wp-block-table.is-style-steckbrief table {
	border-collapse: collapse;
	width: 100%;
	border: 0;
}
.wp-block-table.is-style-steckbrief th,
.wp-block-table.is-style-steckbrief td {
	border: 0;
	border-bottom: 1px solid #E6DCF2;
	padding: .5rem .25rem;
	text-align: left;
	vertical-align: top;
}
.wp-block-table.is-style-steckbrief tr:last-child td { border-bottom: 0; }
.wp-block-table.is-style-steckbrief td:first-child {
	font-weight: 600;
	width: 34%;
	white-space: nowrap;
}
.wp-block-table.is-style-steckbrief thead th {
	font-family: var(--wp--preset--font-family--source-serif-4, serif);
	font-size: 1.15rem;
	border-bottom: 2px solid var(--hb-linie, #A184D3);
}
.wp-block-table.is-style-steckbrief figcaption { display: none; }
@media (max-width: 600px) {
	.wp-block-table.is-style-steckbrief td:first-child { white-space: normal; width: 40%; }
}

/* ------------------------------------------------------------------
   Straßennamen von A bis Z (Seiten-Vorlage)
------------------------------------------------------------------ */
.hb-az-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 1rem 0 2rem;
	padding: 0;
	list-style: none;
}
.hb-az-nav a, .hb-az-nav span {
	display: inline-block;
	min-width: 2.2rem;
	text-align: center;
	padding: .3rem .5rem;
	border-radius: 999px;
	border: 2px solid #A184D3;
	text-decoration: none;
	font-weight: 600;
}
.hb-az-nav span { opacity: .35; border-style: dashed; }
.hb-az-nav a:hover, .hb-az-nav a:focus { background: #D3C3EA; }
.hb-az-gruppe { margin-bottom: 2rem; scroll-margin-top: 1.5rem; }
.hb-az-gruppe h2 {
	border-bottom: 3px solid #A184D3;
	padding-bottom: .25rem;
	margin-bottom: .75rem;
}
.hb-az-liste { list-style: none; padding: 0; margin: 0; columns: 2 18rem; column-gap: 2rem; }
.hb-az-liste li { break-inside: avoid; padding: .3rem 0; }
.hb-az-liste .hb-az-teil { color: #555; font-size: .9em; }
.hb-az-leer { font-style: italic; }

/* ------------------------------------------------------------------
   Untermenü "Harburg" in der Kopfzeile
------------------------------------------------------------------ */
.hb-nav .wp-block-navigation__submenu-container {
	background: #F3EDFA !important;
	border: 2px solid #A184D3 !important;
	border-radius: var(--hb-radius-small);
	padding: .5rem 0;
	min-width: 13rem !important;
	box-shadow: 0 8px 24px rgba(18, 63, 54, .12);
	z-index: 50;
}
.hb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .45rem 1.1rem !important;
	font-weight: 600;
}
.hb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: #D3C3EA;
	text-decoration: none;
	color: var(--wp--preset--color--dunkelgruen);
}
.hb-nav .wp-block-navigation__submenu-icon { margin-left: .2rem; }
/* Handy-Menü: Unterpunkte eingerückt, ohne Kasten */
.hb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0 !important;
	border-right: 3px solid #A184D3 !important;
	border-radius: 0;
	box-shadow: none;
	min-width: 0 !important;
	padding: .25rem .9rem .25rem 0 !important;
	margin-top: .4rem;
	align-items: flex-end;
}
.hb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .3rem 0 !important;
	font-weight: 400;
	text-align: right;
}

/* Link "Alle Straßen von A bis Z" auf der Bereichsseite Straßennamen */
.hb-az-hinweis { margin: 0 0 1.5rem; }
.hb-az-hinweis a {
	display: inline-block;
	padding: .4rem 1rem;
	border: 2px solid #A184D3;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--dunkelgruen);
}
.hb-az-hinweis a:hover { background: #D3C3EA; }

/* Bereichsbeschreibung (z. B. Hinweis auf Rechtsverletzungen) am Seitenende, klein */
.hb-bereich-hinweis {
	margin-top: 3rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(18, 63, 54, .2);
	font-size: var(--wp--preset--font-size--small);
	color: #4a5a55;
	max-width: 52rem;
}
.hb-bereich-hinweis p { margin: 0; }

/* ------------------------------------------------------------------
   Artikel mit Steckbrief (Straßennamen, Stadtteile) – ab 0.5.12
   Nach dem Vorbild der Wiener Zeitung: Die farbige Tafel bleibt breit,
   darin eine mittige Lesespalte. Titelbild über die Spaltenbreite,
   Steckbrief steht im Beitrag am Ende vor der Quellenzeile.
------------------------------------------------------------------ */
.hb-hero-img figcaption.hb-bildnachweis,
.hb-bildnachweis {
	font-size: var(--wp--preset--font-size--small);
	margin: 0.4rem 0 0;
	opacity: 0.85;
}

.wp-block-post-content > .is-style-steckbrief {
	margin-top: 2.5rem;
	margin-bottom: 1.5rem;
	box-sizing: border-box;
}

@media (min-width: 900px) {
	.hb-article .hb-panel:has(.is-style-steckbrief) {
		max-width: var(--wp--style--global--wide-size, 1200px);
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.hb-panel:has(.is-style-steckbrief) > :not(.wp-block-post-content),
	.hb-panel:has(.is-style-steckbrief) > .wp-block-post-content > * {
		max-width: var(--hb-lesespalte);
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box;
	}
	.hb-panel:has(.is-style-steckbrief) > .hb-hero-img,
	.hb-panel:has(.is-style-steckbrief) > .wp-block-post-content > .is-style-steckbrief {
		width: 100%;
	}
}

/* Bilder im Fließtext (Gruppe mit Klasse hb-textbild): Bild links/rechts, Text umfließt, kleine kursive Unterschrift */
.hb-textbild {
	display: flow-root;
}
.hb-textbild .wp-block-image {
	margin-block: 0.3rem 1rem;
}
.hb-textbild > .wp-block-image + * {
	margin-block-start: 0;
}
.hb-quelle {
	font-size: 0.8125rem;
	line-height: 1.35;
}
.hb-textbild .wp-block-image.alignright {
	float: right;
	margin-inline: 1.5rem 0;
}
.hb-textbild .wp-block-image.alignleft {
	float: left;
	margin-inline: 0 1.5rem;
}
.hb-textbild .wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
}
.hb-textbild .wp-block-image figcaption {
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.35;
	margin: 0.35rem 0 0;
	opacity: 0.85;
}
@media (max-width: 600px) {
	.hb-textbild .wp-block-image.alignright,
	.hb-textbild .wp-block-image.alignleft {
		float: none;
		margin-inline: 0;
	}
}

/* Ab Tablet-Breite: Bilder im Text quadratisch und gleich groß, Text läuft
   neben und unter dem Bild weiter. Ausschnitt je Bild über die Klassen
   hb-fokus-oben / hb-fokus-unten am Bild (ohne Klasse: Mitte). */
@media (min-width: 601px) {
	.hb-textbild > .wp-block-image.alignright,
	.hb-textbild > .wp-block-image.alignleft {
		width: 14rem !important;
		max-width: 45%;
		margin-block: 0.35rem 1.25rem;
	}
	.hb-textbild > .wp-block-image.alignright { margin-inline: 1.75rem 0; }
	.hb-textbild > .wp-block-image.alignleft { margin-inline: 0 1.75rem; }
	.hb-textbild > .wp-block-image img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		object-position: 50% 50%;
	}
	.hb-textbild > .wp-block-image.hb-fokus-oben img { object-position: 50% 12%; }
	.hb-textbild > .wp-block-image.hb-fokus-unten img { object-position: 50% 88%; }
	.hb-textbild > :not(.wp-block-image) { max-width: none; }
}

/* Foto-Upload-Formular (nutzt die Profil-Karte) */
.hb-foto-form label {
	display: block;
	font-weight: 600;
}
.hb-foto-form input[type="text"],
.hb-foto-form textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	padding: 0.6rem 0.75rem;
	border: 1px solid currentColor;
	border-radius: 8px;
	margin-top: 0.25rem;
}
.hb-foto-form input[type="file"] {
	margin-top: 0.25rem;
	max-width: 100%;
}
.hb-foto-form .hb-foto-zustimmung {
	font-weight: 400;
	font-size: 0.9375rem;
}
.hb-foto-form .hb-foto-zustimmung input {
	margin-right: 0.5rem;
}

/* Hinweis oben auf der Foto-Übersicht */
.hb-foto-hinweis {
	margin: 0 0 1.5rem;
	font-size: var(--wp--preset--font-size--small);
}

/* Foto-Übersicht: Galerie mit quadratischen Kacheln */
.hb-fotogalerie .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
}
.hb-fotogalerie .wp-block-post-template > li {
	margin: 0;
}
.hb-foto-kachel .hb-foto-bild {
	margin: 0;
}
.hb-foto-kachel .hb-foto-bild img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}
.hb-foto-kachel .hb-foto-titel {
	margin: 0.6rem 0 0;
	font-size: 1rem;
}
.hb-foto-kachel .hb-bildnachweis {
	margin: 0.4rem 0 0;
	font-size: 0.8125rem;
	font-style: italic;
	opacity: 0.85;
}

/* Foto-Ansicht eines einzelnen Foto-Beitrags */
.hb-foto-seite .hb-foto-zurueck {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small);
}
.hb-foto-gross {
	margin: 0 0 0.75rem;
}
.hb-foto-gross img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 12px;
}
.hb-foto-seite .wp-block-post-content .wp-block-image {
	margin: 1.5rem 0;
}
.hb-foto-seite .wp-block-post-content .wp-block-image img {
	max-height: 80vh;
	width: auto;
	max-width: 100%;
	border-radius: 12px;
}
.hb-foto-seite .wp-block-post-content figcaption {
	font-size: 0.8125rem;
	font-style: italic;
}
.hb-foto-seite h1 {
	margin-bottom: 1rem;
}
/* Der Name steht schon in der Bildunterschrift, das Kürzel wäre doppelt */
.hb-foto-seite .hb-kuerzel,
.hb-foto-seite .hb-kuerzel-ende {
	display: none;
}

/* ------------------------------------------------------------------
   Silbentrennung in Überschriften (0.5.11)
   Lange Wörter werden getrennt statt mitten im Wort umzubrechen.
   Für Straßennamen setzt functions.php zusätzlich eine weiche
   Trennstelle vor -straße, -weg usw. (wirkt in jedem Browser).
------------------------------------------------------------------ */
h1, h2, h3,
.wp-block-post-title {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Fließtext mindestens 18 px (0.5.12). WordPress-Standardgrößen gleichen
   Namens überdecken sonst den Wert aus theme.json (14 px auf dem Handy). */
body {
	--wp--preset--font-size--medium: clamp(18px, 1.125rem + ((1vw - 3.2px) * 0.18), 20px);
}