/* Self-hosted fonts (SIL Open Font License, see fonts/LICENSE.txt); latin + latin-ext only */
/* Cormorant Garamond italic, latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond italic, latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant Garamond normal, latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/cormorant-garamond-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond normal, latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/cormorant-garamond-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Kaushan Script normal, latin-ext */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/kaushan-script-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Kaushan Script normal, latin */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/kaushan-script-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Valdeig-Fineart: site styles
   Palette: dark gallery wall (warm near-black), beige text, gold links and accents.
   ========================================================================== */

:root {
	--color-bg:        #14100d;
	--color-bg-soft:   #1d1712;
	--color-panel:     #1b1510;
	--color-panel-dark:#251c15;
	--color-text:      #e9dfc9;
	--color-link:      #e8b95e;
	--color-link-hover:#fff3d6;
	--color-gold:      #e8b95e;
	--color-red:       #b8442f;
	--color-head:      #0e0b09;
	--color-head-2:    #1c140e;
	--color-rule:      rgba(232, 185, 94, 0.22);
	--shadow-image:    0 0 0 1px rgba(232, 185, 94, 0.25), 0 8px 24px rgba(0, 0, 0, 0.6);

	--font-body:   'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
	--font-accent: 'Kaushan Script', 'Brush Script MT', cursive;
	--font-display:'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;

	--sidebar-width: 210px;
	--head-height:   64px;
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.55;
}

a:link,
a:visited {
	color: var(--color-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
a:hover,
a:active {
	color: var(--color-link-hover);
}
a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: 2px;
}

a img {
	border: 0 none;
}

img {
	vertical-align: middle;
}

h1, h2, h3, h4 {
	line-height: 1.25;
	color: var(--color-text);
}
h1 {
	font-family: var(--font-accent);
	font-weight: normal;
	font-size: 2.1rem;
	margin: 0.2em 0 0.6em;
}
h2 {
	font-size: 1.4rem;
	margin: 1.2em 0 0.5em;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid var(--color-rule);
	margin: 1.5em 0;
	padding: 0;
}

blockquote {
	font-style: italic;
	border-left: 3px solid var(--color-gold);
	background: rgba(255, 255, 255, 0.05);
	margin: 1em 2em;
	padding: 0.5em 1em;
}

::selection {
	background: var(--color-gold);
	color: var(--color-head);
	text-shadow: none;
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

textarea {
	resize: vertical;
}

nav ul,
nav ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.skip-link {
	position: absolute;
	left: 8px;
	top: -100px;
	z-index: 1000;
	padding: 8px 14px;
	background: var(--color-gold);
	color: var(--color-head) !important;
	border-radius: 4px;
}
.skip-link:focus {
	top: 8px;
}

/* -------------------------------------------------------------- header */

#pagehead {
	position: relative;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;   /* the logo is centered in the header */
	gap: 16px;
	min-height: var(--head-height);
	padding: 0 20px;
	background: linear-gradient(180deg, var(--color-head) 0%, var(--color-head-2) 100%);
}
#pagehead::after {
	/* thin gold rule, like the gradient line under the logo */
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, var(--color-gold) 30%, var(--color-gold) 70%, transparent 100%);
	opacity: 0.8;
}

#pagehead .logo {
	display: inline-block;
	line-height: 0;
}
#pagehead .logo img {
	max-width: 100%;
	height: auto;
}

.head-links {
	/* left, directly above the main menu, next to each other */
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
}

#pagehead a#onlineshoplink {
	color: var(--color-gold);
	font-family: var(--font-accent);
	font-size: 1.2rem;
	text-decoration: none;
	padding: 2px 4px;
	border-bottom: 1px solid var(--color-gold);
	white-space: nowrap;
}
#pagehead a#onlineshoplink:hover {
	color: #fff;
	border-color: #fff;
}
#pagehead a#amdelink {
	line-height: 0;
}
#pagehead a#amdelink img {
	height: 24px;   /* shop link + Amazon logo have to fit into the 210px menu column */
	width: auto;
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	margin-left: 4px;
	padding: 8px 10px;
	background: transparent;
	border: 1px solid rgba(232, 185, 94, 0.55);
	border-radius: 6px;
	color: var(--color-gold);
	font: inherit;
	font-size: 0.95rem;
	cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--color-gold);
	border-radius: 1px;
	transition: transform 0.2s ease;
}
.nav-toggle-bars {
	position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
	content: '';
	position: absolute;
	left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }
body.nav-open .nav-toggle-bars { background: transparent; }
body.nav-open .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------- layout */

.page {
	display: grid;
	grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
	align-items: start;
}

#leftnav {
	background: var(--color-panel);
	border-radius: 0 0 24px 0;
	padding: 18px 0 32px;
	text-align: center;
	box-shadow: inset -1px 0 0 var(--color-rule);
}

#leftnav nav {
	margin: 0 0 22px;
	font-family: var(--font-accent);
	text-align: left;
}
#leftnav nav li {
	margin: 0;
	font-size: 1.1em;
	line-height: 1.1;
}
#leftnav nav li.space {
	margin-bottom: 12px;
}
#leftnav nav li a {
	display: block;
	padding: 2px 14px 2px 20px;
	border-left: 3px solid transparent;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
#leftnav nav li a:hover {
	background: rgba(232, 185, 94, 0.12);
	color: var(--color-link-hover);
}
#leftnav nav li.active a {
	background: rgba(232, 185, 94, 0.18);
	border-left-color: var(--color-gold);
	color: var(--color-link-hover);
}

.languages {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 0 0 22px;
}
.languages a {
	display: inline-block;
	line-height: 0;
	padding: 3px;
	border-radius: 3px;
	opacity: 0.75;
}
.languages a:hover,
.languages a.current {
	opacity: 1;
}
.languages a.current {
	box-shadow: 0 0 0 2px var(--color-gold);
}

.sidebar_link {
	margin: 8px 0;
}
.sidebar_link img {
	max-width: 160px;
	height: auto;
}

#content {
	min-width: 0;
}
#contentInner {
	padding: 28px 32px 64px;
	overflow-x: auto; /* wide legacy tables scroll instead of breaking the layout */
}

/* content safety net for legacy pages */
/* Amazon partner link notice at the end of a page (app_frame.php) */
.affiliate-note {
	clear: both;
	margin: 2.5em 0 0;
	padding-top: 0.8em;
	border-top: 1px solid var(--color-rule);
	font-size: 0.85em;
	opacity: 0.75;
}

#contentInner img {
	max-width: 100%;
	height: auto;
}
#contentInner #diashow_js img,
#contentInner .bil_image img {
	max-width: none;
}

/* legacy tables with their own light background (the paper calendars) keep the
   original dark-on-light look: regular text black, links brown */
#contentInner table[bgcolor="#ffffdd" i],
#contentInner table[bgcolor="#ffffff" i] {
	color: #000;
}
#contentInner table[bgcolor="#ffffdd" i] a,
#contentInner table[bgcolor="#ffffff" i] a {
	color: #94420b;
}

/* ------------------------------------------------------------------ news */

.news_area {
	max-width: 760px;
	margin: 0 auto;
}
.news_area > h1 {
	text-align: center;
}
.news_area article {
	padding: 20px 0 24px;
	border-bottom: 1px solid var(--color-rule);
	text-align: left;
}
.news_area article:last-of-type {
	border-bottom: 0;
}
.news_area article header h2 {
	margin: 0 0 4px;
	font-size: 1.35rem;
}
.news-date,
.news_area article header h4 {
	margin: 0 0 12px;
	font-size: 0.9rem;
	font-weight: normal;
	font-style: italic;
	color: var(--color-link);
}
.news_area article p {
	margin: 0 0 10px;
}
.news_area .news {
	font-weight: bold;
	margin: 30px 0 40px;
}

/* ------------------------------------------------------------ biography */

.bio {
	max-width: 820px;
	margin: 0 auto;
}
.bio p {
	margin: 10px 0;
}
.bio table td {
	padding: 4px;
}

/* --------------------------------------------------------- image styles */

.schatten_r {
	background-image: url(../gfx/allgemein/schatten_r.png);
	background-position: 100% 8px;
	background-repeat: no-repeat;
	width: auto;
}
.schatten_u {
	background-image: url(../gfx/allgemein/schatten_u.png);
	background-position: 8px 100%;
	background-repeat: no-repeat;
}
.schatten_ru {
	background-image: url(../gfx/allgemein/schatten_ru.png);
	background-position: 100% 100%;
	background-repeat: no-repeat;
	padding: 8px;
}

/* ------------------------------------------------- Kunstdrucke detail pages */

.print-page {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}
.print-page h1 {
	margin-bottom: 0.1em;
}
/* one heading ("Kunstdrucke Erfurt") shown in two lines: section, then category */
.print-page h1 span {
	display: block;
}
.print-page h1 .print-page-cat {
	margin: 0.1em 0 0.9em;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}
.print-page.postcards {
	max-width: 780px;
}
.print-page.postcards .print-intro {
	text-align: center;
}
/* Grand Canyon page (s_grand_canyon/grand-canyon.htm): text column, then a single column of art prints */
.gc-page {
	max-width: 760px;
}
.gc-text {
	max-width: 44em;
	margin: 0 auto 1.5em;
	text-align: left;
}
.gc-text p {
	margin: 0 0 1em;
}
.gc-photo {
	margin: 0 0 1.6em;
	text-align: center;
}
.gc-photo img {
	max-width: 100%;
}
.gc-heading {
	margin: 1.8em 0 1em;
	font-family: var(--font-display);
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--color-gold);
}
.gc-heading span {
	display: block;
	font-size: 1.15rem;
	color: var(--color-text);
}
.gc-figure {
	margin: 0 0 2.2em;
}
.gc-figure img {
	max-width: 100%;
}
.gc-figure figcaption {
	margin-top: 8px;
	font-size: 0.98rem;
	line-height: 1.4;
}
.gc-pair {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	align-items: flex-end;
	justify-content: center;
}
.gc-pair .gc-figure {
	flex: 0 1 auto;
}

.print-intro {
	max-width: 46em;
	margin: 0 auto 1.8em;
	text-align: left;
}
.print-intro p {
	margin: 0 0 0.8em;
}

/* 3 per row. Every figure spans two grid rows (image, caption) via subgrid, so within one row
   all images sit on the same baseline (bottom) and all captions start at the same height (top). */
.print-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 24px;
}
.print-item {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	row-gap: 0;
	margin: 0;
}
#contentInner .print-item img {
	align-self: end;
	justify-self: center;
	max-width: 100%;
	height: auto;
}
.print-item > a {
	display: grid;
	align-self: end;
	justify-self: center;
	max-width: 100%;
	cursor: zoom-in;
}
.print-item figcaption .print-year {
	white-space: nowrap;
}
.print-item figcaption {
	align-self: start;
	padding: 8px 4px 30px;
	font-size: 0.98rem;
	line-height: 1.4;
}


/* ---------------------------------------- timeline filter (js/timeline.js, Historisches Erfurt) */
.print-item[hidden],
.timeline [hidden],
.timeline-empty[hidden] {
	display: none;
}
.timeline {
	max-width: 900px;
	margin: 0 auto 34px;
	padding: 14px 18px 8px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--color-rule);
	border-radius: 6px;
	user-select: none;
}
.timeline-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 10px;
}
.timeline-range {
	color: var(--color-gold);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.timeline-count {
	flex: 1;
	font-size: 0.9rem;
	opacity: 0.8;
}
.timeline-reset {
	padding: 3px 12px;
	background: none;
	border: 1px solid var(--color-gold);
	border-radius: 3px;
	color: var(--color-gold);
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}
.timeline-reset:hover {
	background: var(--color-gold);
	color: var(--color-bg);
}
.timeline-track {
	position: relative;
	height: 70px;
	margin: 0 9px;                       /* room for the handles at the ends */
	touch-action: none;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.35);
	border-bottom: 1px solid var(--color-rule);
}
.timeline-bars {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	gap: 1px;
}
.timeline-bar {
	flex: 1 1 0;
	background: var(--color-gold);
	opacity: 0.45;
	min-width: 1px;
}
.timeline-window {
	position: absolute;
	top: 0;
	bottom: 0;
	background: rgba(232, 185, 94, 0.18);
	border-top: 2px solid var(--color-gold);
	border-bottom: 2px solid var(--color-gold);
	cursor: grab;
	touch-action: none;
}
.timeline.is-dragging .timeline-window {
	cursor: grabbing;
}
.timeline-handle {
	position: absolute;
	top: -6px;
	bottom: -6px;
	width: 18px;
	background: var(--color-gold);
	border-radius: 4px;
	cursor: ew-resize;
	touch-action: none;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.timeline-handle::after {                /* grip lines */
	content: '';
	position: absolute;
	top: 28%;
	bottom: 28%;
	left: 6px;
	width: 6px;
	border-left: 2px solid rgba(0, 0, 0, 0.55);
	border-right: 2px solid rgba(0, 0, 0, 0.55);
}
.timeline-handle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.timeline-handle-left  { left: -9px; }
.timeline-handle-right { right: -9px; }
.timeline-scale {
	position: relative;
	height: 24px;
	margin: 6px 9px 0;
}
.timeline-tick {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	padding-top: 6px;
	border-left: 1px solid var(--color-rule);
	font-size: 0.78rem;
	opacity: 0.75;
}
.timeline-tick {
	border-left: 0;
}

/* mouse + big screen: slimmer, more delicate controls (touch devices keep the big handles) */
@media (hover: hover) and (pointer: fine) {
	.timeline {
		padding: 10px 16px 4px;
	}
	.timeline-range {
		font-size: 1.25rem;
	}
	.timeline-track {
		height: 54px;
	}
	.timeline-window {
		border-top-width: 1px;
		border-bottom-width: 1px;
	}
	.timeline-handle {
		top: -3px;
		bottom: -3px;
		width: 7px;
		border-radius: 2px;
		box-shadow: none;
	}
	.timeline-handle::before {           /* invisible, wider grab area */
		content: '';
		position: absolute;
		inset: 0 -5px;
	}
	.timeline-handle::after {
		left: 2px;
		width: 1px;
		border-left: 0;
		border-right: 1px solid rgba(0, 0, 0, 0.5);
	}
	.timeline-handle-left  { left: -4px; }
	.timeline-handle-right { right: -3px; }
	.timeline-track,
	.timeline-scale {
		margin-left: 4px;
		margin-right: 4px;
	}
	.timeline-tick {
		font-size: 0.72rem;
	}
}
.timeline-search {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 4px 9px 10px;
}
.timeline-search[hidden] {
	display: none;
}
.timeline-search-field {
	position: relative;
	flex: 1 1 18em;
	min-width: 0;
	display: flex;
}
.timeline-search-input {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	height: 44px;
	padding: 0 44px 0 14px;                /* room for the clear button */
	background: rgba(0, 0, 0, 0.35);       /* same dark field as the time track */
	border: 0;
	border-bottom: 1px solid var(--color-rule);
	border-radius: 0;
	color: var(--color-text);
	font: inherit;
	font-size: 1rem;
	-webkit-appearance: none;
	appearance: none;
	user-select: text;
}
.timeline-search-input::placeholder {
	color: inherit;
	opacity: 0.55;
}
.timeline-search-input:focus {
	outline: none;
	border-bottom-color: var(--color-gold);
	box-shadow: inset 0 -1px 0 var(--color-gold);
}
.timeline-search-input::-webkit-search-cancel-button {
	display: none;
}
.timeline-search-clear {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 44px;
	padding: 0 0 3px;
	background: none;
	border: 0;
	color: var(--color-gold);
	font: inherit;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.8;
}
.timeline-search-clear:hover,
.timeline-search-clear:focus-visible {
	opacity: 1;
}
.timeline-search-clear:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: -4px;
}
.timeline-search-clear[hidden] {
	display: none;
}
.timeline-search-status {
	min-width: 8em;
	color: var(--color-gold);
	font-size: 0.9rem;
}
.timeline-search.is-loading .timeline-search-status::before {
	content: '…';
}
@media (hover: hover) and (pointer: fine) {
	.timeline-search {
		margin-left: 4px;
		margin-right: 4px;
	}
	.timeline-search-input {
		height: 36px;
		font-size: 0.95rem;
	}
	.timeline-search-clear {
		width: 36px;
	}
}
.timeline-empty {
	text-align: center;
	font-style: italic;
	opacity: 0.8;
}


/* ------------------------------------------------ catalog search (hero icon + search page) */
.overview-search {
	position: absolute;
	z-index: 2;
	right: 28px;
	bottom: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--color-gold);
	border-radius: 50%;
	background: rgba(20, 16, 13, 0.55);
	color: var(--color-gold);
	text-decoration: none;
	transition: background 0.15s, color 0.15s, transform 0.15s;
}
.overview-search:hover,
.overview-search:focus-visible {
	background: var(--color-gold);
	color: var(--color-head);
	transform: scale(1.06);
}
.search-form {
	max-width: 760px;
	margin: 0 auto 8px;
}
.search-label {
	display: block;
	margin-bottom: 10px;
	font-family: var(--font-display);
	font-size: 1.25rem;
	text-align: left;
}
.search-label small {
	display: block;
	margin-top: 2px;
	font-family: inherit;
	font-size: 0.95rem;
	opacity: 0.75;
}
.search-field {
	position: relative;
}
.search-field .search-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-gold);
	pointer-events: none;
}
#contentInner .search-field input[type=search] {
	box-sizing: border-box;
	width: 100%;
	padding: 16px 18px 16px 56px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--color-gold);
	border-radius: 6px;
	color: var(--color-text);
	font: inherit;
	font-size: 1.7rem;
	outline: none;
	-webkit-appearance: none;
}
#contentInner .search-field input[type=search]:focus {
	background: rgba(255, 255, 255, 0.09);
	box-shadow: 0 0 0 3px rgba(232, 185, 94, 0.25);
}
.search-status {
	min-height: 1.6em;
	margin: 10px 0 26px;
	text-align: center;
	font-style: italic;
	opacity: 0.85;
}
.search-results {
	transition: opacity 0.15s;
}
.search-results.is-loading {
	opacity: 0.45;
}
.print-item figcaption .print-cat {
	display: block;
	margin-top: 2px;
	color: var(--color-gold);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.search-back {
	margin-top: 30px;
	text-align: center;
}
@media (max-width: 760px) {
	.overview-search {
		right: 14px;
		bottom: 14px;
		width: 46px;
		height: 46px;
	}
	#contentInner .search-field input[type=search] {
		font-size: 1.3rem;
	}
}

/* single item page (Turmreiches Erfurt) */
.print-single {
	margin: 0 auto;
}
.print-single figcaption {
	padding: 14px 0 0;
	line-height: 1.5;
}

@media (max-width: 760px) {
	.print-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
	}
}

/* tile list of captioned images (kalender.htm) */
ul.imagelist {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 28px 20px;
}
ul.imagelist li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.35;
}
ul.imagelist li img {
	max-width: 100%;
	height: auto;
	border-radius: 3px;
	box-shadow: var(--shadow-image);
}

img.gallery_shadow {
	margin: 10px 0;
	box-shadow: var(--shadow-image);
}

/* ------------------------------------------------------------- specials */

.big_item_list {
	list-style: none;
	max-width: 600px;
	margin: 0 auto;
	padding: 0;
}
.big_item_list li {
	background: linear-gradient(to right, var(--color-panel) 0%, var(--color-bg) 100%);
	padding: 4px;
	margin-bottom: 20px;
	border-radius: 4px;
}
.big_item_list li > a {
	display: block;
	background: var(--color-bg);
	color: var(--color-text);
	text-decoration: none;
	text-align: left;
}
.big_item_list .bil_image {
	width: 180px;
	height: 180px;
	float: left;
}
.big_item_list .bil_text {
	display: block;
	margin-left: 190px;
	font-size: 1.2em;
}
.big_item_list .bil_text .reduced {
	font-size: 0.7em;
}

/* ------------------------------------------------- start page slideshow */

#diashow_js {
	width: 450px;
	max-width: 100%;
	height: 363px;
	overflow: hidden;
	position: relative;
}
#diashow_js .inner {
	position: absolute;
	width: 450px;
	height: 363px;
	border-radius: 50%;
	background-image: url(../gfx/intro/01.jpg);
	background-position: 50% 50%;
}
#diashow_js .inner2 {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 452px;
	height: 365px;
	box-shadow: inset 0 0 40px 40px var(--color-bg);
	border-radius: 50%;
}

/* ------------------------------------------------------- start page */

.start-page {
	text-align: center;
}

/* hero: full-bleed across the content column (cancels the #contentInner padding) */
.start-page #diashow_js {
	width: auto;
	max-width: none;
	height: clamp(320px, 62vh, 560px);
	margin: -28px -32px 0;
	background: var(--color-bg);
}
.start-page #diashow_js .inner {
	/* the picture is shown twice by pseudo elements (they inherit the inline background-image):
	   blurred as ambient light, sharp in the middle */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	background-size: 0 0;
}
.start-page #diashow_js .inner::before,
.start-page #diashow_js .inner::after {
	content: '';
	position: absolute;
	background-image: inherit;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.start-page #diashow_js .inner::before {
	inset: -60px;
	background-size: cover;
	filter: blur(44px) saturate(1.25) brightness(0.75);
}
.start-page #diashow_js .inner::after {
	inset: 28px 28px 64px;
	background-size: contain;
	filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.55));
}
.start-page #diashow_js .inner2 {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	pointer-events: none;
	box-shadow: none;
	background:
		linear-gradient(180deg, rgba(20, 16, 13, 0.55) 0%, rgba(20, 16, 13, 0) 22%),
		linear-gradient(0deg, var(--color-bg) 0%, rgba(20, 16, 13, 0) 38%);
}

.start-intro {
	max-width: 760px;
	margin: 4px auto 36px;
}
.start-intro h1 {
	margin: 0 0 0.45em;
	font-size: clamp(1.7rem, 4vw, 2.5rem);
}
.start-intro p {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.55;
}

.start-quotes {
	display: flex;
	justify-content: center;
	gap: 28px 56px;
	max-width: 980px;
	margin: 12px auto 0;
}
.start-quote {
	position: relative;
	flex: 1 1 0;
	max-width: 440px;
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: 1.45rem;
	font-weight: 500;
	font-style: italic;
	line-height: 1.35;
}
.start-quote::before {
	content: '\201C';
	display: block;
	color: var(--color-gold);
	font-size: 3.4rem;
	line-height: 0.6;
	margin-bottom: 10px;
}
.start-quote p {
	margin: 0 0 1em;
}
.start-quote br {
	display: none;
}
.start-quote .start-quote-source br {
	display: inline;
}
.start-quote .start-quote-source {
	margin-top: 14px;
	color: var(--color-gold);
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-style: normal;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.7;
}
@media (max-width: 860px) {
	.start-page #diashow_js {
		height: clamp(240px, 48vh, 400px);
		margin: -20px -16px 0;
	}
	.start-page #diashow_js .inner::after {
		inset: 16px 16px 40px;
	}
	.start-quotes {
		flex-direction: column;
		align-items: center;
	}
	.start-quote {
		flex: none;
		max-width: 100%;
		font-size: 1.25rem;
	}
}

/* ------------------------------------------------------- bio photo gallery */

.bio-gallery {
	max-width: 1000px;
	margin: 56px auto 0;
}
.bio-gallery > h2 {
	/* same heading style as .overview-group h2 (Kunstdrucke) */
	margin: 0 0 14px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--color-rule);
	color: var(--color-gold);
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-align: left;
	text-transform: uppercase;
}

.gallery-cards,
.gallery-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;   /* incomplete rows are centered, not left-aligned */
	gap: 18px;
}
.gallery-cards {
	align-items: stretch;
}
/* 4 per row in the 1000px column (4 x 236px + 3 gaps = 998px) */
.gallery-cards > li,
.gallery-grid > li {
	flex: 0 0 236px;
	max-width: 100%;
}

/* cards: same look as .overview-cards (Kunstdrucke) */
.gallery-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--color-rule);
	border-radius: 4px;
	background: var(--color-panel);
	text-decoration: none;
	text-align: left;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.gallery-card:hover,
.gallery-card:focus-visible {
	border-color: var(--color-gold);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	transform: translateY(-3px);
}
.gallery-card-img {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--color-panel-dark);
	overflow: hidden;
}
#contentInner .gallery-card-img img {
	/* the id selector beats the generic "#contentInner img { height: auto }" */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.4s;
}
.gallery-card:hover .gallery-card-img img {
	transform: scale(1.05);
}
.gallery-card-title {
	display: block;
	padding: 11px 14px 2px;
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: 1.1rem;
	line-height: 1.25;
	font-weight: 600;
}
.gallery-card:hover .gallery-card-title {
	color: var(--color-link-hover);
}
.gallery-card-meta {
	display: block;
	padding: 0 14px 12px;
	font-size: 0.85rem;
	font-style: italic;
	color: var(--color-link);
}

.gallery-event {
	max-width: 1000px;
	margin: 0 auto;
}
.gallery-event header {
	text-align: center;
	margin: 18px 0 22px;
}
.gallery-event h1 {
	margin-bottom: 0.15em;
}
.gallery-date {
	margin: 0;
	font-style: italic;
	color: var(--color-link);
}

.gallery-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	font-size: 0.95rem;
}
.gallery-nav-bottom {
	margin-top: 28px;
	padding-top: 14px;
	border-top: 1px solid var(--color-rule);
}
.gallery-nav-link {
	display: block;
	line-height: 1.3;
	text-decoration: none;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.gallery-nav-next {
	text-align: right;
}
.gallery-nav-prev::before {
	content: '\2190\00a0';
}
.gallery-nav-next::after {
	content: '\00a0\2192';
}
.gallery-back {
	text-align: center;
	font-family: var(--font-accent);
	font-size: 1.1rem;
}

.gallery-grid {
	align-items: flex-start;
}
.gallery-grid a {
	display: block;
	line-height: 0;
}
.gallery-grid img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 3px;
	box-shadow: var(--shadow-image);
	transition: transform 0.15s ease;
}
.gallery-grid a:hover img,
.gallery-grid a:focus-visible img {
	transform: scale(1.02);
}
.gallery-caption {
	display: block;
	text-align: center;
	margin-top: 6px;
	font-size: 0.85rem;
	line-height: 1.35;
}
.gallery-text {
	max-width: 760px;
	margin: 28px auto 0;
}

@media (max-width: 860px) {
	.gallery-cards,
	.gallery-grid {
		gap: 12px;
	}
	.gallery-cards > li,
	.gallery-grid > li {
		flex-basis: calc(50% - 6px);
	}
	.gallery-nav {
		grid-template-columns: 1fr 1fr;
	}
	.gallery-nav .gallery-back {
		grid-column: 1 / -1;
		grid-row: 1;
		padding-bottom: 6px;
	}
}

/* ------------------------------------------------------ backend preview */

.preview-banner {
	position: sticky;
	top: 0;
	z-index: 50;
	margin: -28px -32px 24px;
	padding: 10px 32px;
	background: var(--color-gold);
	color: var(--color-head);
	font-family: system-ui, sans-serif;
	font-size: 0.9rem;
}

/* -------------------------------------------------------------- helpers */

.hidden {
	display: none !important;
	visibility: hidden;
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.invisible {
	visibility: hidden;
}

.clearfix::before,
.clearfix::after {
	content: ' ';
	display: table;
}
.clearfix::after {
	clear: both;
}

/* -------------------------------------------------------- small screens */

@media (max-width: 860px) {
	:root {
		--head-height: 56px;
	}

	#pagehead {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		padding: 10px 16px;
		gap: 10px;
	}
	#pagehead .logo {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		max-width: calc(100vw - 140px);
	}
	.nav-toggle {
		display: inline-flex;
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		margin: 0;
	}
	.head-links {
		position: static;
		transform: none;
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: start;
		margin: 0 0 4px;
	}

	.page {
		grid-template-columns: minmax(0, 1fr);
	}

	.page {
		position: relative;
	}
	#leftnav {
		/* overlay with the same width as on large screens; the page stays visible beside it */
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 90;
		width: var(--sidebar-width);
		max-width: 85vw;
		border-radius: 0 0 16px 0;
		padding: 12px 0 24px;
		box-shadow: 4px 8px 18px rgba(22, 16, 12, 0.3);
	}
	body.nav-open #leftnav {
		display: block;
		animation: nav-slide-in 0.2s ease-out;
	}
	@keyframes nav-slide-in {
		from { transform: translateX(-100%); opacity: 0.6; }
		to   { transform: translateX(0);     opacity: 1; }
	}
	@media (prefers-reduced-motion: reduce) {
		body.nav-open #leftnav { animation: none; }
	}
	#leftnav nav li a {
		padding: 6px 22px;
	}

	#contentInner {
		padding: 20px 16px 48px;
	}

	/* fixed-width legacy blocks shrink to the screen */
	#contentInner [style*="width"],
	#contentInner table[width],
	#contentInner div[style*="width"] {
		max-width: 100% !important;
	}
	#contentInner table[width] {
		width: 100% !important;
	}

	h1 {
		font-size: 1.8rem;
	}

	.big_item_list .bil_image {
		width: 110px;
		height: auto;
	}
	.big_item_list .bil_text {
		margin-left: 120px;
		font-size: 1em;
	}

	.preview-banner {
		margin: -20px -16px 20px;
		padding: 10px 16px;
	}

	blockquote {
		margin: 1em 0;
	}
}

@media (max-width: 520px) {
	/* icon only, so the logo can stay centered; the word remains the accessible name */
	.nav-toggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

@media (max-width: 480px) {

	}

/* ---------------------------------------------------------------- print */

/* ------------------------------------------------------- overview page (hero + image cards) */

.overview-hero {
	position: relative;
	margin: -28px -32px 0;
	width: calc(100% + 64px); /* definite width, otherwise max-height would shrink it via aspect-ratio */
	/* hero pictures are 960x450 (backend hint); other sizes are cropped to this ratio */
	aspect-ratio: 960 / 450;
	max-height: 520px;
	overflow: hidden;
	background: var(--color-bg);
}
.hero-slides {
	position: absolute;
	inset: 0;
}
.overview-hero img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100% !important;
	object-fit: cover;
}
/* several hero pictures: slow, soft crossfade (js/hero-fade.js sets .is-active) */
[data-hero-fade] .hero-slide {
	opacity: 0;
	transition: opacity 3s ease-in-out;
}
[data-hero-fade] .hero-slide.is-active {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	[data-hero-fade] .hero-slide {
		transition: none;
	}
}
.overview-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(20, 16, 13, 0.5) 0%, rgba(20, 16, 13, 0) 24%),
		linear-gradient(0deg, var(--color-bg) 0%, rgba(20, 16, 13, 0.55) 30%, rgba(20, 16, 13, 0) 62%);
}
.overview-hero-text {
	position: absolute;
	z-index: 1;
	left: 40px;
	right: 40px;
	bottom: 22px;
}
.overview-hero-text h1 {
	margin: 0;
	text-align: left;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}
.overview-hero-text p {
	margin: 4px 0 0;
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-style: italic;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

.overview-group {
	max-width: 980px;
	margin: 30px auto 0;
}
.overview-group h2 {
	margin: 0 0 14px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--color-rule);
	color: var(--color-gold);
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-align: left;
	text-transform: uppercase;
}
.overview-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.overview-cards li {
	margin: 0;
	padding: 0;
}
.overview-cards a {
	display: block;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--color-rule);
	border-radius: 4px;
	background: var(--color-panel);
	text-decoration: none;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.overview-cards a:hover,
.overview-cards a:focus-visible {
	border-color: var(--color-gold);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	transform: translateY(-3px);
}
.overview-card-img {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-panel-dark);
}
#contentInner .overview-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}
.overview-cards a:hover .overview-card-img img {
	transform: scale(1.05);
}
.overview-card-title {
	display: block;
	padding: 11px 14px 12px;
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: 1.1rem;
	line-height: 1.25;
	font-weight: 600;
	text-align: left;
}
.overview-cards a:hover .overview-card-title {
	color: var(--color-link-hover);
}

@media (max-width: 860px) {
	.overview-hero {
		margin: -20px -16px 0;
		width: calc(100% + 32px);
	}
	.overview-hero-text {
		left: 16px;
		right: 16px;
		bottom: 10px;
	}
	.overview-hero-text h1 {
		font-size: 1.5rem;
	}
	.overview-hero-text p {
		margin-top: 0;
		font-size: 1rem;
	}
	.overview-cards {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 12px;
	}
}

/* ------------------------------------------------------------ lightbox (js/lightbox.js) */
html.lightbox-open {
	overflow: hidden;
	overscroll-behavior: none;   /* a swipe must not trigger the browser's back gesture */
}
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(12, 9, 7, 0.94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--color-text);
	opacity: 0;
	transition: opacity 0.22s ease;
	overscroll-behavior: contain;
	touch-action: pinch-zoom;    /* swipes are handled by js/lightbox.js */
}
.lightbox.is-open {
	opacity: 1;
}
.lightbox[hidden] {
	display: none;
}
.lb-stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 84px 96px;
	box-sizing: border-box;
	overflow: hidden;
}
.lb-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
	transition: opacity 0.25s ease, transform 0.25s ease;
	user-select: none;
	-webkit-user-drag: none;
}
.lb-img.is-changing {
	opacity: 0;
	transform: scale(0.985);
}
.lb-img:not([src]) {
	visibility: hidden;
}
.lightbox.is-zoomable .lb-img {
	cursor: zoom-in;
}
/* full size: the stage scrolls, the picture is shown 1:1 */
.lightbox.is-zoomed .lb-stage {
	touch-action: pan-x pan-y pinch-zoom;
	display: block;
	padding: 0;
	overflow: auto;
	cursor: zoom-out;
}
.lightbox.is-zoomed .lb-img {
	max-width: none;
	max-height: none;
	margin: auto;
	box-shadow: none;
	cursor: zoom-out;
}
.lightbox.is-zoomed .lb-prev,
.lightbox.is-zoomed .lb-next,
.lightbox.is-zoomed .lb-bar {
	opacity: 0;
	pointer-events: none;
}

.lb-btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid var(--color-rule);
	border-radius: 50%;
	background: rgba(20, 16, 13, 0.55);
	color: var(--color-text);
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.2s;
}
.lb-btn:hover,
.lb-btn:focus-visible {
	color: var(--color-gold);
	border-color: var(--color-gold);
	background: rgba(20, 16, 13, 0.85);
}
.lb-btn:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 3px;
}
.lb-close {
	top: 14px;
	right: 14px;
}
.lb-prev,
.lb-next {
	top: 50%;
	margin-top: -42px;
}
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lightbox.is-single .lb-prev,
.lightbox.is-single .lb-next {
	display: none;
}

.lb-bar {
	position: absolute;
	left: 84px;
	right: 84px;
	bottom: 18px;
	min-height: 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	pointer-events: none;
	transition: opacity 0.2s;
}
.lb-caption {
	margin: 0;
	max-width: 70ch;
	font-family: var(--font-display);
	font-size: 1.2rem;
	line-height: 1.3;
	white-space: pre-line;
}
.lb-caption:empty {
	display: none;
}
.lb-count {
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	color: var(--color-gold);
	opacity: 0.8;
}

.lb-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border: 2px solid var(--color-rule);
	border-top-color: var(--color-gold);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s 0.15s;
	animation: lb-spin 0.8s linear infinite;
}
.lightbox.is-loading .lb-spinner {
	opacity: 1;
}
@keyframes lb-spin {
	to { transform: rotate(360deg); }
}
.lb-error {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
}

@media (max-width: 860px) {
	.lb-stage {
		padding: 60px 8px 120px;
	}
	.lb-btn {
		width: 46px;
		height: 46px;
	}
	/* prev/next sit at the bottom, out of the way of the picture */
	.lb-prev,
	.lb-next {
		top: auto;
		bottom: 18px;
		margin-top: 0;
	}
	.lb-prev { left: 12px; }
	.lb-next { right: 12px; }
	.lb-bar {
		left: 68px;
		right: 68px;
		bottom: 12px;
	}
	.lb-caption {
		font-size: 1.05rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lightbox,
	.lb-img {
		transition: none;
	}
}

@media print {
	* {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}
	#pagehead,
	#leftnav,
	.skip-link,
	.preview-banner {
		display: none !important;
	}
	.page {
		display: block;
	}
	#contentInner {
		padding: 0;
		overflow: visible;
	}
	a,
	a:visited {
		text-decoration: underline;
	}
	img {
		max-width: 100% !important;
	}
	tr,
	img {
		page-break-inside: avoid;
	}
	h2,
	h3 {
		page-break-after: avoid;
	}
	@page {
		margin: 1cm;
	}
}


/* ------------------------------------------------------------ Pressespiegel (pressespiegel.htm) */
.press-page {
	max-width: 920px;
	margin: 0 auto;
}
.press-page > h1 {
	text-align: center;
	margin-bottom: 0.2em;
}
.press-lead {
	max-width: 44em;
	margin: 0 auto 1.6em;
	text-align: center;
	opacity: 0.85;
}
.press-card[hidden],
.press-year-group[hidden] {
	display: none;
}
.press-year {
	margin: 1.6em 0 0.7em;
	padding-bottom: 0.15em;
	border-bottom: 1px solid var(--color-rule);
	color: var(--color-gold);
	font-family: var(--font-display);
	font-size: 1.9rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}
.press-card {
	position: relative;                       /* the headline link covers the whole card */
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 22px;
	margin: 0 0 14px;
	padding: 16px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--color-rule);
	border-radius: 6px;
	transition: background-color 0.15s, border-color 0.15s;
}
.press-card:hover,
.press-card:focus-within {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--color-gold);
}
.press-thumb {
	align-self: start;
	display: grid;
	place-items: center;
	padding: 5px;
	background: #ece3cf;                      /* newsprint */
	box-shadow: var(--shadow-image);
}
#contentInner .press-thumb img {
	display: block;
	max-width: 100%;
	height: auto;
	max-height: 230px;
	width: auto;
}
.press-thumb-none {
	min-height: 90px;
	color: #6b5a3c;
	font-family: var(--font-display);
	font-size: 1.1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.press-body {
	min-width: 0;
}
.press-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin: 0 0 4px;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.press-date {
	color: var(--color-gold);
	font-weight: 600;
	white-space: nowrap;
}
.press-sources {
	opacity: 0.8;
}
.press-title {
	margin: 0 0 6px;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
}
.press-title a {
	color: var(--color-text);
	text-decoration: none;
}
.press-title a::after {                      /* stretched link: the whole card is clickable */
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 6px;
}
.press-card:hover .press-title a,
.press-title a:focus-visible {
	color: var(--color-link-hover);
}
.press-title a:focus-visible {
	outline: none;
}
.press-card:focus-within {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}
.press-note {
	margin: 0 0 6px;
	font-size: 0.92rem;
	font-style: italic;
	opacity: 0.8;
}
.press-summary {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 0 0 8px;
	font-size: 0.98rem;
	line-height: 1.45;
	opacity: 0.88;
}
.press-cue {
	margin: 0;
	color: var(--color-gold);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}
.press-card:hover .press-cue {
	text-decoration: underline;
}
.press-card.press-image .press-title a { cursor: zoom-in; }

/* page of one typed-out article */
.press-article .press-back {
	margin: 0 0 0.5em;
	font-size: 0.95rem;
}
.press-article > h1 {
	text-align: left;
}
.press-meta-article {
	margin-bottom: 14px;
}
.press-paper {
	margin: 18px 0;
	padding: 22px 26px;
	overflow-x: auto;
	background: #efe7d3;                      /* newsprint: the old articles bring their own dark text colours */
	color: #1c1612;
	box-shadow: var(--shadow-image);
}
.press-paper table {
	max-width: 100%;
	color: inherit;
	margin-left: auto;
	margin-right: auto;
}
.press-paper td {
	color: inherit;
}
.press-paper a {
	color: #94420b;
}
.press-external {
	margin: 0;
	font-size: 0.95rem;
}

@media (max-width: 620px) {
	.press-card {
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 14px;
		padding: 12px;
	}
	.press-title {
		font-size: 1.25rem;
	}
	.press-summary {
		-webkit-line-clamp: 2;
	}
	.press-paper {
		padding: 14px;
	}
}


@media (max-width: 620px) {
	.timeline-head {
		flex-wrap: wrap;
		gap: 6px 12px;
	}
	.timeline-range {
		font-size: 1.25rem;
		white-space: nowrap;
	}
	.timeline-count {
		order: 3;
		flex: 1 0 100%;
	}
}


/* ---- lightbox: text article between the pictures (Pressespiegel, js/lightbox.js) */
.lb-article {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	padding: 64px 84px 96px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.lb-article[hidden] {
	display: none;
}
.lightbox.is-article .lb-stage {
	display: none;
}
.lb-article-inner {
	max-width: 880px;
	margin: 0 auto;
	outline: none;
}
.lb-article-inner .press-article-title {
	margin: 0 0 6px;
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	color: var(--color-text);
}
.lb-article-inner .press-paper {
	margin: 14px 0;
}
@media (max-width: 860px) {
	.lb-article {
		padding: 60px 8px 120px;
	}
}

/* article page: previous / next article */
.press-pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 26px 0 8px;
}
.press-pager a {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 16px;
	border: 1px solid var(--color-rule);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.03);
	text-decoration: none;
	color: var(--color-text);
	transition: background-color 0.15s, border-color 0.15s;
}
.press-pager a:hover,
.press-pager a:focus-visible {
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--color-gold);
}
.press-pager-next {
	grid-column: 2;
	text-align: right;
}
.press-pager-prev {
	grid-column: 1;
}
.press-pager-label {
	color: var(--color-gold);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.press-pager-title {
	font-family: var(--font-display);
	font-size: 1.2rem;
	line-height: 1.25;
}
.press-pager-date {
	font-size: 0.85rem;
	opacity: 0.7;
}
@media (max-width: 620px) {
	.press-pager {
		grid-template-columns: 1fr;
	}
	.press-pager-next,
	.press-pager-prev {
		grid-column: 1;
		text-align: left;
	}
}