/* GEYERLEI GEREIMTES · site.css
 *
 * Aufbau: 01 Grundlagen · 02 Kopf · 03 Kategorien · 04–05 Haus/Fassaden
 *         06 Werkfenster · 07 Eingang · 08 Sitemap · 09 Texte/Navigation
 *         10 Dekoration · 11 Themen · 12 Suche · 13 Footer
 *         14 größere Ansichten · 15 Bewegung/Kontrast/Druck
 *
 * Mobile first: alle Grundregeln gelten bereits für schmale Ansichten.
 * Erweiterungen ausschließlich über min-width: 36rem, 48rem, 62.01rem, 74rem.
 * Layoutmaße in rem; em folgt der lokalen Schrift, cqi der jeweiligen Karte.
 * --house-* bestimmt die gemeinsame Perspektive von Haus und Fußweg.
 * --work-color bleibt die Logofarbe. --work-ui-color ist ihre kontrastreiche
 * Variante für kleine weiße Schrift und Links (keine neue Kategorienfarbe).
 *
 * Neue Regeln beim jeweiligen Bauteil ergänzen; keine Overrides anhängen.
 * Wohnungen sind separat in rooms.css beschrieben. tag-areas.js setzt nur
 * die berechneten Positionen/Flächen der Schlagwortkarte in rem.
 */

/* 01 · Grundlagen, Schriftdateien und gemeinsame Variablen */
@font-face {
	font-family: Crimson;
	src: url(crimson_text/crimson_text.woff2) format('woff2');
	font-display: swap;
}
@font-face {
	font-family: Bahnschrift;
	src: url(bahnschrift/bahnschrift.woff2) format('woff2');
	font-display: swap;
}
:root {
	font: 100%/1.6 Bahnschrift, system-ui, sans-serif;
	color: #242424;
	background: #ededeb;
	--ink: #242424;
	--paper: #f5f4ef;
	--facade: #efeee8;
	--house-width: calc(100% - 3.5rem);
	--house-left: .75rem;
	--house-inset: .75rem;
	--house-depth: 1.5rem;
	--roof-rise: .75rem;
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	background: linear-gradient(#ededeb, #d6d6d2) fixed;
}
[hidden] {
	display: none !important;
}
img {
	display: block;
	max-width: 100%;
	height: auto;
}
a {
	color: inherit;
	text-underline-offset: .2em;
}
a:hover {
	color: #853f2c;
}
:is(a, button, input, select, textarea, summary):focus-visible {
	outline: .1875rem solid #853f2c;
	outline-offset: .25rem;
}
button, input, select {
	min-width: 0;
	max-width: 100%;
	font: inherit;
	padding: .45rem .65rem;
	border: .0625rem solid #929d92;
	border-radius: .125rem;
	background: #f7f7f0;
	color: var(--ink);
}
button {
	cursor: pointer;
	background: #242424;
	color: #f5f5ed;
	border-color: #242424;
}
h1, h2, h3 {
	font-family: Bahnschrift, system-ui, sans-serif;
	line-height: 1.2;
	font-weight: 500;
}
h1 {
	font-size: 1.9rem;
	line-height: 1.08;
	letter-spacing: -.035em;
	overflow-wrap: anywhere;
}
h2 {
	font-size: 1.6rem;
}
p {
	margin: 0 0 1em;
}
dt {
	font-weight: 700;
}
dd {
	margin: 0 0 1.2rem;
}
.skip {
	position: absolute;
	left: -624.9375rem;
}
.skip:focus {
	left: 1rem;
	top: .5rem;
	background: white;
	padding: .6rem;
	z-index: 20;
}
.visually-hidden {
	position: absolute;
	width: .0625rem;
	height: .0625rem;
	overflow: hidden;
	clip-path: inset(50%);
}
a:hover img, a:focus-visible img {
	filter: invert(1);
}

/* 02 · Kopf, Wortmarke und Hauptnavigation */
.site-header {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	width: 100%;
	margin: 0 0 3rem;
	padding: .8rem .75rem;
	background: #faf9f5;
	border-bottom: .1875rem solid #242424;
	box-shadow: 0 .5rem 1rem #24313615;
}
.brand {
	display: flex;
	align-items: center;
	gap: .5rem;
	min-width: 0;
	max-width: 100%;
	font-size: 1.1rem;
	font-weight: 500;
	text-decoration: none;
}
.brand-logo {
	flex: none;
	width: 2.5rem;
	height: 2rem;
	object-fit: cover;
}
.brand-wordmark {
	display: block;
	min-width: 0;
	line-height: 1.15;
}
.brand-wordmark > span {
	display: block;
	width: max-content;
	max-width: 100%;
	letter-spacing: -.025em;
}
.brand-wordmark small {
	display: block;
	width: max-content;
	max-width: 100%;
	white-space: normal;
	font-size: var(--brand-subtitle-size, .7rem);
	font-weight: 400;
	line-height: 1.2;
	margin-top: .05rem;
}
.brand-poetry {
	color: #0f3341;
}
.brand-feelings {
	color: #a7351d;
}
.brand-prose {
	color: #276770;
}
.menu-toggle {
	flex: none;
	padding: .4rem .6rem;
	font-size: .875rem;
}
#hauptmenue {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .65rem;
	width: 100%;
	padding-top: .75rem;
	border-top: .0625rem solid #bdbdb7;
	font-size: .875rem;
}
#hauptmenue > a {
	padding: .45rem .5rem;
	border-bottom: .125rem solid transparent;
	text-decoration: none;
}
#hauptmenue > a[class*="category-"] {
	border-bottom-color: var(--work-color);
}
#hauptmenue > a[aria-current="page"] {
	border-bottom-color: var(--ink);
	font-weight: 600;
}
#hauptmenue > a:hover, #hauptmenue > a:focus-visible {
	color: var(--ink);
	border-bottom-color: var(--ink);
}
#hauptmenue form {
	display: flex;
	gap: 0;
	max-width: 100%;
}
#hauptmenue input {
	width: 8rem;
	border-right: 0;
}
#hauptmenue button {
	border-left: 0;
}
#hauptmenue > a[class*="category-"]:hover, #hauptmenue > a[class*="category-"]:focus-visible, main a[href*="/category/"]:hover, main a[href*="/category/"]:focus-visible {
	background: var(--work-ui-color, #242424);
	color: white;
	border-bottom-color: var(--work-ui-color, #242424);
}
.home-first-word {
	display: inline-block;
}
.overview-subtitle.home-subtitle {
	font-size: var(--subtitle-size, .95rem);
	width: max-content;
	max-width: 100%;
	white-space: normal;
	line-height: 1.4;
}
.bunt {
	--ge-stop: 25.91%;
	--reim-stop: 72.15%;
	display: inline-block;
	color: #cf4c2e;
}
@supports (background-clip: text) {
	.bunt {
		background: linear-gradient(90deg, #0f3341 0 var(--ge-stop), #cf4c2e var(--ge-stop) var(--reim-stop), #378892 var(--reim-stop));
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

/* 03 · Kategorien: Logofarben und bedienbare Farbflächen */
.category-gedichte, a[href*="/category/gedichte"] {
	--work-color: #0f3341;
	--work-ui-color: #0f3341;
}
.category-lieder, a[href*="/category/lieder"] {
	--work-color: #cf4c2e;
	--work-ui-color: #c4482b;
}
.category-prosa, a[href*="/category/prosa"] {
	--work-color: #378892;
	--work-ui-color: #317b84;
}
main a[href*="/category/"] {
	display: inline-block;
	padding: .15rem .45rem;
}

/* 04 · Haus: Fassade, Dach, Tiefe und Seitenkopf */
main {
	position: relative;
	z-index: 1;
	width: var(--house-width);
	min-height: 50vh;
	margin: 0 0 0 var(--house-left);
	padding: var(--house-inset);
	background: var(--house-wall, #f1f0eb);
	border-bottom: 1rem solid #888886;
	box-shadow: 1rem 1.5rem 1rem #29363430;
}
main::before, main::after {
	content: '';
	position: absolute;
	pointer-events: none;
}
main::before {
	left: 0;
	top: calc(0rem - var(--roof-rise));
	width: calc(100% + var(--house-depth));
	height: var(--roof-rise);
	background: linear-gradient(var(--house-roof, #faf9f4) 0 80%, var(--house-roof-edge, #bcbcb8) 80%);
	clip-path: polygon(var(--house-depth) 0, 100% 0, calc(100% - var(--house-depth)) 100%, 0 100%);
}
main::after {
	right: calc(0rem - var(--house-depth));
	top: 0;
	bottom: -1rem;
	width: var(--house-depth);
	transform: skewY(-26.565deg);
	transform-origin: left top;
	border-bottom: 1rem solid #646462;
	background: linear-gradient(90deg, #00000024, transparent 18%), linear-gradient(0deg, var(--house-side, #ababa6) 0 11rem, transparent 11rem calc(100% - 9rem), var(--house-side, #ababa6) calc(100% - 9rem)), linear-gradient(90deg, var(--house-side, #ababa6) 0 22%, transparent 22% 77%, var(--house-side, #ababa6) 77%), repeating-linear-gradient(0deg, transparent 0 5rem, #252525 5rem 5.1875rem), linear-gradient(90deg, var(--house-side, #ababa6) 0 22%, #252525 22% 27%, #48545c 27% 72%, #252525 72% 77%, var(--house-side, #ababa6) 77%);
}
.page-heading {
	position: relative;
	margin: calc(0rem - var(--house-inset)) calc(0rem - var(--house-inset)) 2rem;
	padding: 1.5rem var(--house-inset);
	background: var(--house-fascia, #f8f7f2);
	border-bottom: .375rem solid #292929;
	box-shadow: 0 .625rem 0 #e2b62c;
}
.page-heading h1 {
	margin: 0 0 .5rem;
}
.overview-subtitle {
	max-width: 48rem;
	font-size: .95rem;
	line-height: 1.5;
	margin: 0;
}

/* 05 · Fassaden nach Stand und Verzeichnis */
.stand-steht {
	--status-plaster: #f1ead6;
}
.stand-werkstatt {
	--status-plaster: #d8e2eb;
}
.stand-gebrauch {
	--status-plaster: #eddaa4;
}
.stand-moment {
	--status-plaster: #e9cfc5;
}
.stand-experiment {
	--status-plaster: #d2e4dc;
}
.stand-archiv {
	--status-plaster: #d4d2cf;
}
.directory-all {
	--status-plaster: #cbd9df;
}
.directory-search {
	--status-plaster: #e5c79e;
}
.status-house, .directory-house {
	--house-wall: var(--status-plaster);
	--facade: var(--status-plaster);
	--house-fascia: color-mix(in srgb, var(--status-plaster) 72%, #fffef8);
	--house-roof: color-mix(in srgb, var(--status-plaster) 45%, #fffef8);
	--house-side: color-mix(in srgb, var(--status-plaster) 75%, #525957);
	--house-roof-edge: color-mix(in srgb, var(--status-plaster) 80%, #777b75);
}
.status-houses {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 2.5rem;
	font-size: .8125rem;
}
.status-houses a {
	display: block;
	padding: .35rem .625rem;
	background: var(--status-plaster);
	color: #242424;
	border: .0625rem solid #52595766;
	text-decoration: none;
}
.status-houses a[aria-current="page"] {
	box-shadow: inset 0 -.1875rem 0 #292929;
	font-weight: 600;
}
.status-houses a:hover, .status-houses a:focus-visible {
	outline: .125rem solid #292929;
	outline-offset: .125rem;
}

/* 06 · Werkfenster: Bild, zwei Titelzeilen, fünf Teaserzeilen, Metadaten */
.works-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.work-card {
	position: relative;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: .25rem solid var(--work-color, #292929);
	background: color-mix(in srgb, var(--work-color) 14%, var(--paper));
}
.work-card > dt, .work-card > dd {
	--card-title-size: clamp(1.15rem, 7.5cqi, 1.7rem);
	--card-teaser-size: clamp(.875rem, 4.4cqi, 1rem);
	--card-meta-size: clamp(.75rem, 3.8cqi, .875rem);
	--card-padding: clamp(.9rem, 5cqi, 1.3rem);
}
.work-card > dt {
	flex: none;
	margin: 0;
	padding: 0;
	font-weight: 400;
}
.work-entry-link {
	display: block;
	text-decoration: none;
	background: color-mix(in srgb, var(--work-color) 24%, var(--paper));
}
/* Responsive Bildquellen behalten dieselben Rahmen und Bildausschnitte. */
.responsive-image {
	display: block;
}
.work-card-image > .responsive-image, .room-window > .responsive-image {
	width: 100%;
	height: 100%;
}
.work-neighbour > .responsive-image {
	flex: none;
}
.work-card-image {
	display: block;
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: #292929;
}
.work-card-image::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: inset .25rem .25rem .375rem #0004;
}
.work-card img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}
.work-card-heading {
	display: block;
	padding: 1rem var(--card-padding);
	border-top: .375rem solid var(--work-color);
}
.work-card-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
	height: 2.4em;
	font-size: var(--card-title-size);
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: -.01em;
}
/* Tastaturfokus bleibt ungefiltert, damit der dunkle Ring sichtbar bleibt. */
.work-entry-link:focus-visible {
	filter: none;
	color: inherit;
	outline-color: #242424;
}
.work-entry-link:hover {
	color: inherit;
	filter: invert(1);
}
.work-entry-link:hover .work-card-title, .work-entry-link:focus-visible .work-card-title {
	text-decoration: underline;
}
.work-card > dd {
	hyphens: auto;
	hyphenate-limit-chars: auto 3;
	hyphenate-limit-lines: 2;
	hyphenate-limit-last: none;
}
.work-card > .work-card-description {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 12rem;
	margin: 0;
	padding: 1rem var(--card-padding) var(--card-padding);
	background: color-mix(in srgb, var(--work-color) 14%, var(--paper));
	border-top: .0625rem solid color-mix(in srgb, var(--work-color) 45%, var(--paper));
}
.work-teaser {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
	flex-shrink: 0;
	height: 7.5em;
	min-height: 7.5em;
	font-size: var(--card-teaser-size);
	line-height: 1.5;
	margin: 0;
	color: #393939;
}
.work-card .metadata {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin: auto calc(0rem - var(--card-padding)) calc(0rem - var(--card-padding));
	padding: .5rem var(--card-padding) .625rem;
	flex-shrink: 0;
	background: var(--work-ui-color);
	color: #fff;
	font-size: var(--card-meta-size);
	line-height: 1.5;
}
.work-card .metadata > a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	padding: 0;
	text-decoration: none;
	border: 0;
}
.work-card .metadata > a:hover, .work-card .metadata > a:focus-visible {
	background: var(--paper);
	color: #242424;
	text-decoration: underline;
}
.work-card time {
	white-space: normal;
}
.work-card.blind-window {
	display: none;
	--work-color: #8b958e;
	color: #58665e;
	background: #e2e5dc;
}
.blind-entry {
	display: block;
	background: #d9ded3;
}
.blind-pane {
	background: repeating-linear-gradient(0deg, #a9b3aa 0 .625rem, #87968c .625rem .6875rem, #c2c9bf .6875rem .75rem);
}
.blind-pane::before {
	content: '';
	position: absolute;
	left: calc(50% - .5rem);
	bottom: 1rem;
	width: 1rem;
	height: .25rem;
	background: #e7e9e0;
	box-shadow: 0 .125rem 0 #738479;
}
.work-card.blind-window > .blind-description {
	background: #e2e5dc;
	border-top-color: #b6bfb3;
}
.work-card .perch-window {
	display: block;
	position: absolute;
	z-index: 2;
	pointer-events: none;
	left: 35%;
	right: auto;
	top: auto;
	bottom: calc(100% + .1875rem);
}
.work-entry-link:hover img, .work-entry-link:focus-visible img {
	filter: none;
}

/* 07 · Eingang und Hausnummern */
.house-entry-area {
	margin: 2rem calc(0rem - var(--house-inset)) calc(0rem - var(--house-inset));
	background: var(--facade);
	border-top: .1875rem solid #292929;
}
.results-pagination {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	gap: .375rem;
	margin: 0;
	padding: 1.25rem var(--house-inset) .5rem;
}
.results-pagination > * {
	grid-row: 1;
	min-width: 0;
	justify-self: center;
}
.results-pagination > a[rel="prev"] {
	grid-column: 1;
	justify-self: start;
}
.results-pagination > .house-number {
	grid-column: 2;
}
.results-pagination > a[rel="next"] {
	grid-column: 3;
	justify-self: end;
}
.results-pagination > a, .house-number {
	display: block;
	container-type: inline-size;
	width: min(100%, 7rem);
	padding: .375rem .1875rem;
	background: #282828;
	color: #fffdf5;
	border: .125rem solid #fffdf5;
	outline: .0625rem solid #282828;
	box-shadow: .1875rem .1875rem 0 #aaa;
	text-align: center;
	text-decoration: none;
	font-size: .8125rem;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}
.results-pagination small {
	display: block;
	font-size: min(.75rem, 14cqi);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	white-space: nowrap;
}
.results-pagination strong {
	display: block;
	font-size: min(1em, 18cqi);
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
}
.house-number strong {
	font-size: min(1.25rem, 40cqi);
	line-height: 1.1;
}
.results-pagination > a:hover, .results-pagination > a:focus-visible {
	background: var(--facade);
	color: black;
	text-decoration: underline;
}
.house-entrance {
	position: relative;
	height: 10rem;
	margin: 2rem calc(0rem - var(--house-inset)) calc(0rem - var(--house-inset));
	background: var(--facade);
}
.house-entry-area .house-entrance {
	margin: 0;
}
.house-door {
	position: absolute;
	height: 8rem;
	width: 5rem;
	left: calc(50% - 2.5rem);
	bottom: 1rem;
	border: .375rem solid #292929;
	background: linear-gradient(90deg, transparent 0 47%, #292929 47% 52%, transparent 52%), linear-gradient(#324d77 0 46%, #292929 46% 48%, #b6372b 48%);
}
.house-door::after {
	content: '';
	position: absolute;
	width: .1875rem;
	height: 1.5rem;
	right: .75rem;
	top: 4rem;
	background: #dce0d0;
}
.house-bellboard {
	position: absolute;
	left: calc(50% + 3.25rem);
	bottom: 4rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .125rem .1875rem;
	width: 2.5rem;
	padding: .25rem;
	border: .0625rem solid #777976;
	background: linear-gradient(110deg, #d6d6cf, #efeee7 45%, #c9c9c2);
}
.house-bell {
	position: relative;
	height: .45rem;
}
.house-bell::before {
	content: '';
	position: absolute;
	left: 0;
	right: .3rem;
	top: .0625rem;
	bottom: .0625rem;
	border: .03125rem solid #b2b2aa;
	background: #faf8ec;
}
.house-bell::after {
	content: '';
	position: absolute;
	right: 0;
	top: .125rem;
	width: .1875rem;
	height: .1875rem;
	border-radius: 50%;
	background: #555956;
	box-shadow: inset .03125rem .03125rem 0 #303330;
}
.house-stairs {
	position: absolute;
	width: 8rem;
	height: .5rem;
	left: calc(50% - 4rem);
	bottom: .5rem;
	background: #bdbdb8;
	box-shadow: 0 .5rem 0 #888884, .375rem .875rem .375rem #2223;
}

/* 08 · HTML-Sitemap im fensterlosen Haus */
.sitemap-house::after {
	background: linear-gradient(90deg, #00000024, transparent 18%), var(--house-side, #ababa6);
}
.sitemap-house .page-heading::after {
	display: none;
}
.sitemap-index {
	margin-block: 2rem;
}
.sitemap-group {
	padding-block: 1.25rem;
	border-top: .125rem solid #292929;
}
.sitemap-group h2 {
	margin: 0 0 1rem;
	font-size: 1.5rem;
}
.sitemap-group h2 small {
	font-size: .875rem;
	font-weight: 400;
}
.sitemap-group ul {
	display: grid;
	gap: .5rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	list-style: none;
	padding: 0;
	margin: 0;
}
.sitemap-group a {
	display: inline-block;
	padding-block: .25rem;
	overflow-wrap: anywhere;
}

/* 09 · Lesetext, Über-Seite und Weiterblättern */
.poem-content, .prose {
	font-family: Crimson, Georgia, serif;
	font-size: 1.15rem;
	line-height: 1.65;
	overflow-wrap: break-word;
}
.poem-content {
	color: #232d2c;
}
.poem-content p {
	margin-bottom: 1.4em;
}
.prose {
	max-width: 45rem;
}
.prose section {
	margin-block: 2rem;
	scroll-margin-top: 1rem;
}
.author-portrait img {
	border: .5rem solid #f7f8ef;
	box-shadow: .375rem .5rem 0 #b0b0a7;
}
.breadcrumb {
	font-size: .875rem;
	margin-bottom: 2rem;
	color: #555;
	overflow-wrap: anywhere;
}
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1rem;
	list-style: none;
	padding: 0;
}
.work-pagination {
	margin-top: 3rem;
	border-top: .0625rem solid #aaa;
	padding-top: 1.5rem;
}
.work-pagination h2 {
	margin: 0 0 1rem;
}
.work-neighbours {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}
.work-neighbour {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
	padding: 1rem;
	background: var(--paper);
	box-shadow: .25rem .3125rem 0 #bdbdb7;
	text-decoration: none;
}
.work-neighbour img {
	width: 5rem;
	aspect-ratio: 1;
	object-fit: contain;
	flex: none;
	border: .1875rem solid #273336;
}
.work-neighbour > span {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}
.work-neighbour.older {
	flex-direction: row-reverse;
	text-align: right;
}
.work-neighbour:focus-visible {
	filter: none;
	outline-color: #242424;
}
.work-neighbour:hover {
	color: inherit;
	filter: invert(1);
}
.work-neighbour strong {
	display: block;
	font-size: 1.2rem;
	line-height: 1.3;
	font-weight: 500;
	text-decoration: underline;
}
.neighbour-direction {
	display: block;
	font-size: .875rem;
	margin-bottom: .4rem;
}
.about-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}
.about-layout > .prose {
	min-width: 0;
}
.author-portrait {
	grid-row: 1;
	width: 100%;
	max-width: 20rem;
	margin: .3rem 0 0;
	justify-self: center;
}
.author-portrait img {
	width: 100%;
}
.author-portrait figcaption {
	margin-top: .8rem;
	font-size: .85rem;
}
.portrait-name {
	display: block;
	font-family: Crimson, Georgia, serif;
	font-size: 1.5rem;
	line-height: 1.3;
	margin-bottom: .25rem;
}
.portrait-credit {
	display: block;
}
.metadata {
	font-size: .9rem;
}
.work-neighbour:hover img, .work-neighbour:focus-visible img {
	filter: none;
}

/* 10 · Dekoration: Vögel, Gehweg und Fundstücke */
.house-life {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}
.house-life svg {
	position: absolute;
	display: block;
	overflow: visible;
}
.house-bird {
	width: 2.75rem;
	height: 2.2rem;
}
.bird-navy {
	color: #0f3341;
	left: 12%;
	top: -2.15rem;
}
.bird-orange {
	color: #cf4c2e;
	right: -1.5rem;
	bottom: .2rem;
	transform: scaleX(-1);
}
.bird-teal {
	color: #378892;
	left: calc(50% - 2rem);
	bottom: 8.9rem;
}
.street-item {
	position: absolute;
	z-index: 1;
	display: block;
	pointer-events: none;
	width: 2.75rem;
	height: 2.475rem;
	overflow: visible;
	transform: translateX(-50%) rotate(var(--item-tilt));
	transform-origin: 50% 80%;
}
.house-footpath {
	--walk-left: .75rem;
	--walk-front-width: calc(100cqi - 3.5rem);
	container-type: inline-size;
	position: relative;
	z-index: 0;
	height: calc(9rem + var(--roof-rise));
	margin-top: calc(0rem - var(--roof-rise));
	overflow: hidden;
	background: #a6b08b;
	border-bottom: .25rem solid #899471;
	box-shadow: inset 0 -1rem 2rem #64734c15;
}
.house-footpath::before {
	content: '';
	position: absolute;
	left: -24rem;
	top: var(--roof-rise);
	bottom: 0;
	width: calc(100% + 48rem);
	clip-path: polygon(calc(24rem + var(--walk-left)) 0, calc(24rem + var(--walk-left) + var(--walk-front-width)) 0, calc(24rem + var(--walk-left) + var(--walk-front-width)) 50%, 100% 50%, 100% 100%, 0 100%, 0 50%, calc(24rem + var(--walk-left)) 50%);
	transform: skewX(-63.435deg);
	transform-origin: left top;
	background-color: #d5d4cd;
	background-image: linear-gradient(0deg, #aaa9a2 .0625rem, transparent .0625rem), linear-gradient(90deg, #aaa9a2 .0625rem, transparent .0625rem);
	background-size: 3rem 1.625rem;
	box-shadow: inset .125rem 0 0 #aaa9a2, inset -.125rem 0 0 #aaa9a2;
}
.house-life .perch-roof-left, .house-life .perch-roof-right {
	top: -2.15rem;
	bottom: auto;
	right: auto;
}
.house-life .perch-roof-left {
	left: 12%;
}
.house-life .perch-roof-right {
	left: 74%;
}
.house-life .perch-entrance {
	left: calc(50% - 2rem);
	right: auto;
	top: auto;
	bottom: 8.9rem;
}

/* 11 · Proportionale Schlagwortflächen */
.topics-band {
	width: 100%;
	padding: 1.5rem 0;
	background: #dededa;
}
.topics-band h2, .all-topics-link {
	width: var(--house-width);
	margin-inline: auto;
	padding-inline: var(--house-inset);
}
.topics-band h2 {
	font-size: 1.3rem;
	line-height: 1.2;
	letter-spacing: -.02em;
	margin-block: 0 .5rem;
	text-align: left;
}
.all-topics-link {
	text-align: right;
	margin-block: 1rem 0;
}
.tag-cloud {
	list-style: none;
	max-width: none;
	padding: 0;
	margin: .5rem 0;
}
.topics-band .tag-cloud {
	width: var(--house-width);
	margin: 1rem auto .5rem;
}
.tag-cloud li {
	display: inline-block;
}
.tag-cloud a {
	display: inline-block;
	padding: .25rem .375rem;
	font-size: .875rem;
	text-decoration: none;
}
.cloud-word {
	display: inline-block;
	white-space: nowrap;
	flex-shrink: 0;
}
.tag-cloud.cloud-areas {
	position: relative;
	display: block;
	text-align: left;
	line-height: normal;
}
.tag-cloud.cloud-areas li {
	display: block;
	position: absolute;
	min-width: 0;
	min-height: 0;
	padding: .1875rem;
}
.tag-cloud.cloud-areas a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: .25rem .375rem;
	background: #f2f1ec;
	box-shadow: inset 0 0 0 .0625rem #aaa9a4;
	border-radius: .125rem;
	color: #282828;
	font: 400 .875rem/1.15 Bahnschrift, system-ui, sans-serif;
	text-align: center;
	white-space: nowrap;
}
.tag-cloud.cloud-areas .cloud-word {
	display: block;
}
.tag-cloud.cloud-areas a:hover, .tag-cloud.cloud-areas a:focus-visible {
	background: #fffef8;
	color: #242424;
	box-shadow: inset 0 0 0 .125rem #292929;
	text-decoration: underline;
	outline-color: #292929;
	outline-offset: -.1875rem;
}

/* 12 · Werkverzeichnis, Suchformular und Rückmeldungen */
.work-directory {
	margin-bottom: 2.5rem;
}
.work-search {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	padding: 1rem;
	background: #f6f5ec;
	border: .0625rem solid #9caaa4;
	border-top: .25rem solid #273a3f;
}
.work-search label {
	display: block;
	margin-bottom: .375rem;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .045em;
	text-transform: uppercase;
	color: #4c5753;
}
.work-search :is(input,select) {
	display: block;
	width: 100%;
	min-height: 2.75rem;
	border-color: #abb4a9;
	background: #fffef8;
	border-radius: 0;
}
.work-search input[type="search"] {
	font-size: 1.1rem;
	padding: .625rem .75rem;
	border-color: #465d60;
}
.work-search button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 2.75rem;
	border-radius: 0;
	padding-inline: .875rem;
}
.work-search button:hover {
	background: #3f565a;
}
.directory-feedback {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-top: 1rem;
}
.directory-feedback p {
	margin: 0;
	font-size: .9rem;
}
.directory-feedback strong {
	font-size: 1.4rem;
	font-weight: 500;
}
.directory-feedback > div {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	font-size: .8125rem;
}
.no-results {
	padding: 2rem 1.25rem;
	background: #f6f5ec;
	border-left: .25rem solid #d4af37;
}
.no-results h2 {
	font-size: 1.6rem;
	margin: 0 0 .75rem;
}
.no-results p {
	max-width: 34rem;
}

/* 13 · Footer: Identität, Service, Anderswo und Kontakt */
.site-footer {
	width: 100%;
	margin: 0;
	padding: 1.25rem 1rem .875rem;
	background: #25383d;
	color: #f0eee3;
	font-size: .875rem;
	border-top: .375rem solid #c4c7b9;
}
.footer-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: .75rem;
	width: min(100%, 72rem);
	margin-inline: auto;
}
.footer-identity {
	margin: 0;
}
.footer-brand {
	display: flex;
	align-items: center;
	gap: .75rem;
	text-decoration: none;
	font-size: 1.3rem;
	line-height: 1.2;
}
.footer-brand img {
	flex: none;
	width: 4rem;
	height: 2.5rem;
	object-fit: cover;
	background: #f5f3e9;
	padding: .125rem;
}
.footer-brand > span {
	min-width: 0;
	overflow-wrap: anywhere;
}
.footer-brand small {
	display: block;
	margin-top: .25rem;
	font-size: .75rem;
	color: #cdd3c8;
}
.site-footer .footer-column {
	display: block;
}
.footer-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem 1.5rem;
	min-width: 0;
	container-type: inline-size;
}
.footer-column h2 {
	margin: 0 0 .375rem;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #b7c6c0;
}
.footer-column ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-links .footer-column ul {
	flex-direction: column;
	align-items: flex-start;
}
.footer-links .footer-social ul {
	display: grid;
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	column-gap: .75rem;
}
.footer-column a {
	display: inline-block;
	padding-block: .25rem;
	text-decoration: none;
	white-space: nowrap;
}
.site-footer a:hover, .site-footer a:focus-visible {
	color: #fff8d9;
	text-decoration: underline;
}
.site-footer :is(a, summary):focus-visible {
	outline-color: #f0eee3;
}
.footer-column .footer-feed {
	margin: 0;
}
.footer-bottom {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: .625rem;
	padding-top: .75rem;
	border-top: .0625rem solid #63716d;
	font-size: .8125rem;
}
.footer-bottom > small {
	font-size: inherit;
	color: #c2cbc1;
}
.footer-contact {
	min-width: 0;
	max-width: 100%;
	grid-column: 1 / -1;
}
.footer-contact summary {
	cursor: pointer;
	text-underline-offset: .2em;
}
.footer-contact summary:hover {
	text-decoration: underline;
}
.footer-contact[open] summary {
	margin-bottom: .75rem;
}
.footer-contact > div {
	max-width: 24rem;
	padding: 1rem;
	background: #1b2d32;
	border-left: .125rem solid #b5c5bc;
}
.footer-contact address {
	font-style: normal;
	line-height: 1.6;
}
.footer-contact p {
	margin: 1rem 0 0;
	color: #c2cbc1;
	overflow-wrap: anywhere;
}
.footer-top-link {
	white-space: nowrap;
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
}

/* Bei stark vergrößerter Schrift haben zwei Footer-Spalten keinen Platz mehr.
 * Abhängig vom Bauteil statt vom gesamten Bildschirm umbrechen. */
@container (max-width: 12rem) {
	.footer-links > .footer-column {
		grid-column: 1 / -1;
	}
}

/* 14 · Größere Ansichten: Regeln erweitern die mobile Grundgestaltung. */
@media (min-width: 36rem) {
	.work-search {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 1.5rem;
	}
	.directory-query {
		grid-column: 1 / -1;
	}
	.directory-submit {
		align-self: end;
	}
	.footer-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.footer-bottom {
		grid-column: 1 / -1;
	}
	:root {
		--house-width: calc(100% - 8rem);
		--house-left: 2rem;
		--house-inset: 2rem;
		--house-depth: 3rem;
		--roof-rise: 1.5rem;
	}
	.site-header {
		padding: 1rem 2rem;
		margin-bottom: 5rem;
	}
	.brand {
		font-size: 1.4rem;
		gap: .75rem;
	}
	.brand-logo {
		width: 4rem;
		height: 2.5rem;
	}
	main {
		box-shadow: 2.5rem 3rem 2.5rem -.5rem #29363440;
	}
	h1 {
		font-size: 2.5rem;
	}
	.page-heading {
		padding-block: 2.25rem;
		margin-bottom: 3rem;
	}
	.overview-subtitle {
		font-size: 1rem;
	}
	.works-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.house-entry-area {
		margin-top: 3rem;
	}
	.results-pagination {
		gap: 1rem;
		padding: 1.4rem var(--house-inset) .5rem;
	}
	.results-pagination > a, .house-number {
		font-size: 1rem;
		padding-inline: .75rem;
	}
	.house-number strong {
		font-size: min(1.5rem, 40cqi);
	}
	.house-entrance {
		height: 11rem;
	}
	.poem-content, .prose {
		font-size: 1.3rem;
	}
	.work-neighbours {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
	.work-neighbour {
		gap: .75rem;
	}
	.work-neighbour.older {
		grid-column: 2;
	}
	.bird-orange {
		right: -2.5rem;
		bottom: .7rem;
	}
	.house-footpath {
		--walk-left: 2rem;
		--walk-front-width: calc(100cqi - 8rem);
		height: calc(12rem + var(--roof-rise));
	}
	.house-footpath::before {
		background-size: 5rem 2.125rem;
	}
	.topics-band {
		padding-block: 2rem;
	}
	.topics-band h2 {
		font-size: 1.55rem;
	}
}
@media (min-width: 48rem) {
	.about-layout {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: 2rem;
	}
	.author-portrait {
		grid-row: auto;
		max-width: 25rem;
	}
}
@media (min-width: 62.01rem) {
	.work-search {
		grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
		align-items: end;
	}
	.directory-query {
		grid-column: 1 / -1;
	}
	.footer-inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: .75rem 3rem;
	}
	.footer-identity {
		grid-column: auto;
	}
	.footer-bottom {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
	}
	:root {
		--house-width: min(calc(100% - 14rem), 70rem);
		--house-left: max(3rem, calc((100% - 76rem) / 2));
		--house-depth: 6rem;
		--roof-rise: 3rem;
	}
	.site-header {
		padding-inline: max(3rem, calc((100% - 76rem) / 2 + 2rem));
		margin-bottom: 7rem;
		gap: 1rem;
	}
	.menu-toggle {
		display: none;
	}
	#hauptmenue {
		flex-direction: row;
		align-items: center;
		width: auto;
		padding: 0;
		border: 0;
	}
	#hauptmenue input {
		width: 6rem;
	}
	.page-heading {
		padding-right: 13rem;
	}
	.page-heading::after {
		content: '';
		position: absolute;
		right: var(--house-inset);
		top: 1.25rem;
		bottom: 1.25rem;
		width: 6.5rem;
		border: .25rem solid #282828;
		background: repeating-linear-gradient(0deg, transparent 0 1.25rem, #aaa 1.25rem 1.3125rem), linear-gradient(90deg, #344354 0 48%, #222 48% 51%, #344354 51%);
		pointer-events: none;
	}
	.works-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.work-card.blind-window {
		display: flex;
	}
	.work-neighbour img {
		width: 7rem;
	}
	.bird-orange {
		right: -4.75rem;
	}
	.house-footpath {
		--walk-left: max(3rem, calc((100cqi - 76rem) / 2));
		--walk-front-width: min(calc(100cqi - 14rem), 70rem);
	}
}
@media (min-width: 74rem) {
	.brand {
		font-size: 1.65rem;
		gap: .9rem;
	}
	.brand-logo {
		width: 5rem;
		height: 2.75rem;
	}
	#hauptmenue {
		gap: .8rem;
	}
	#hauptmenue input {
		width: 8rem;
	}
}

/* 15 · Rücksicht auf Bewegung, erzwungene Farben und Papierausgabe. */
@media (prefers-reduced-motion: no-preference) {
	.work-entry-link, .work-neighbour, a img {
		transition: filter 1s ease-in-out;
	}
	#hauptmenue > a, main a[href*="/category/"], .results-pagination > a {
		transition: background-color .3s ease, color .3s ease;
	}
	.tag-cloud a {
		transition: background-color .2s ease, color .2s ease;
	}
}
@media (forced-colors: active) {
	.bunt {
		background: none;
		color: CanvasText;
		-webkit-text-fill-color: CanvasText;
	}
	.house-number, .results-pagination > a {
		border-color: ButtonText;
	}
}
@media print {
	.site-header, .site-footer, .topics-band, .breadcrumb, .work-pagination, .house-entry-area, .house-entrance, .house-life, .house-bird, .house-footpath, .skip, .work-directory {
		display: none !important;
	}
	body, main {
		background: white;
		color: black;
		box-shadow: none;
	}
	main {
		width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
	}
	main::before, main::after, .page-heading::after {
		display: none;
	}
	.poem-content {
		font-size: 1rem;
	}
	a {
		text-decoration: none;
	}
	.bunt {
		background: none;
		color: black;
		-webkit-text-fill-color: black;
	}
}