/*
 * CSS for hpp.com, design 2025
 * design @ 2025 morphoria.com
 * adaption @ 2025-2026 koenige.org
 */


:root		{ --font-size-big: 60px; --font-size-quote: 40px;
			--font-size-subnav: 36px; --font-size-medium: 30px;
			--font-size-filter: 30px; --font-size-body: 19px;
			--font-size-project: 19px;
			--gap: 60px; --gap-half: 30px; --gap-quarter: 15px;
			--margin-x: 50px; --canvas-top: 50px;
			--site-header-top: var(--canvas-top);
			--site-header-bottom: 40px;
			--site-header-logo-height: 52px;
			--site-header-logo-bottom: 10px;
			--site-header-height: calc(var(--site-header-top) + var(--site-header-logo-height)
				+ var(--site-header-logo-bottom) + var(--site-header-bottom));
			--hamburger-height: 43px; --hamburger-width: 46px;
			--hamburger-bar-height: 9px; 
			--project-text: 2.25rem;
			--project-text-margin: .5rem;
			}
@media screen and (min-width: 1200px) and (max-height: 1100px) {
	:root		{
				--canvas-top: 32px;
				--site-header-bottom: 24px;
				}
}
@media screen and (min-width: 960px) and (max-width: 1199px) {
	:root		{
				--font-size-big: 50px; --font-size-quote: 33px;
				--font-size-subnav: 30px; --font-size-medium: 25px;
				--font-size-filter: 25px; --font-size-body: 18px;
				--font-size-project: 18px;
				--canvas-top: 32px;
				--site-header-top: 32px;
				--site-header-logo-height: 44px;
				--site-header-bottom: 24px;
				--hamburger-height: 38px; --hamburger-width: 42px;
				}
}
@media screen and (min-width: 640px) and (max-width: 959px) {
	:root		{
				--font-size-big: 45px; --font-size-quote: 30px;
				--font-size-subnav: 27px; --font-size-medium: 22.5px;
				--font-size-filter: 22.5px; --font-size-body: 17px;
				--font-size-project: 15px;
				--canvas-top: 32px;
				--margin-x: 40px;
				--site-header-top: 28px;
				--site-header-logo-height: 39px;
				--site-header-bottom: 22px;
				--hamburger-height: 34px; --hamburger-width: 38px;
				--project-text: 2.5rem;
				--project-text-margin: .25rem;
				}
}
@media screen and (max-width: 839px) {
	/* breadcrumb flips into second row */
	:root		{
				--site-header-logo-bottom: 0px;
				--site-header-bottom: var(--site-header-top);
				--project-text: 2.5rem;
				--project-text-margin: .25rem;
				}
}
@media screen and (min-width: 481px) and (max-width: 639px) {
	:root		{
				--font-size-big: 40px; --font-size-quote: 27px;
				--font-size-subnav: 24px; --font-size-medium: 20px;
				--font-size-filter: 20px; --font-size-body: 16px;
				--font-size-project: 14px;
				--canvas-top: 32px;
				--margin-x: 24px;
				--site-header-top: 24px;
				--site-header-logo-height: 36px;
				--hamburger-height: 34px; --hamburger-width: 38px;
				}
}
@media screen and (max-width: 480px) {
	:root		{ --font-size-big: 32px; --font-size-quote: 24px;
				--font-size-subnav: 28px; --font-size-medium: 24px;
				--font-size-medium: 20px; --font-size-body: 16px;
				--font-size-project: 12.5px;
				--gap: 40px; --gap-half: 20px; --gap-quarter: 10px;
				--margin-x: 16px; --canvas-top: 32px;
				--site-header-top: 22px;
				--site-header-logo-height: 36px;
				--hamburger-height: 34px; --hamburger-width: 38px;
				--hamburger-bar-height: 8px; }
}

html		{ scroll-padding-top: calc(var(--site-header-height) + 1rem); overflow: auto;
			scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html	{ scroll-behavior: auto; }
}

body		{ font-size: var(--font-size-body); line-height: 1.4; }

h1, h2		{ font-size: var(--font-size-big); line-height: 1.2; }
h1			{ margin: var(--gap) 0 var(--gap-quarter); max-width: 50rem; }
body h2		{ margin: var(--gap) 0 var(--gap-half); }
body h2, h3	{ max-width: 50rem; text-wrap: balance; }
h3			{ font-size: var(--font-size-medium); line-height: 1.3; margin: var(--gap) 0 var(--gap-half); }
h4			{ font-size: var(--font-size-body); line-height: 1.25; }

hr			{ border: 0; border-top: 1px solid black; height: 0; }

p			{ margin: .5rem 0; }
ol li, ul li
			{ margin-bottom: .5rem; }
a			{ hyphens: none; }

main		{ padding: var(--site-header-height) var(--margin-x) 0; margin: 0; z-index: 2;
			position: relative; }
@media screen and (max-width: 480px) {
	h1, h2		{ hyphens: auto; }
}


/* grid */
.canvas, .footer, .sidebar
			{ margin: 0; padding: 0 var(--margin-x); }
.canvas, .footer, .sidebar, .projects
			{ display: grid; gap: var(--gap); grid-template-columns: repeat(12, 1fr); }


/* header */
.main-header
			{ position: fixed; z-index: 1000; top: 0; left: 0; right: 0;
			display: grid; gap: var(--gap); grid-template-columns: repeat(12, 1fr);
			padding: var(--site-header-top) var(--margin-x) var(--site-header-bottom); margin: 0;
			background: rgb(255, 255, 255, 1); align-items: start;
			box-sizing: border-box; }
.main-header p.breadcrumb, .main-header h1
			{ margin: 0; font-size: var(--font-size-big); line-height: 1;
			font-family: var(--font-bold); align-self: center; }
.main-header p.breadcrumb
			{ grid-column: 3 / 12; grid-row: 1; margin-top: -2px;
			margin-bottom: 0; }
.main-header h1
			{ margin-top: -2px; }
.main-header p.logo
			{ margin: 0; grid-column: 1 / 3; grid-row: 1; }
.main-header a
			{ display: block; text-decoration: none; }
.main-header a:hover
			{ text-decoration: underline; }
.main-header p.logo a, .main-header p.logo img
			{ height: var(--site-header-logo-height); width: auto; padding-bottom: 10px; }
p.breadcrumb-hidden
			{ visibility: hidden; }
@media screen and (min-width: 840px) and (max-width: 1199px) {
	.main-header p.logo
				{ grid-column: 1 / 4; }
	.main-header p.breadcrumb
				{ grid-column: 3 / 12; }
}
@media screen and (max-width: 839px) {
	.main-header
				{ position: static; display: block; margin: 0; padding: 0;
				padding-top: var(--site-header-height);
				background: transparent; z-index: auto; }
	.main-header p.logo
				{ position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
				grid-column: auto; grid-row: auto;
				padding: var(--site-header-top) var(--margin-x) var(--site-header-bottom);
				margin: 0;
				background: rgb(255, 255, 255, 1);
				box-sizing: border-box; }
	.main-header p.logo a, .main-header p.logo img
				{ padding-bottom: 0; }
	.hamburger
				{ height: var(--hamburger-height); }
	.main-header p.breadcrumb
				{ grid-column: auto; grid-row: auto; margin-top: 0; padding-top: 0;
				padding-bottom: var(--gap); background: white;
				padding-left: calc(var(--margin-x) - 2px); padding-right: var(--margin-x);
				/* - 2px for optical matters */ }
	.main-header h1
				{ grid-column: 1 / 3; grid-row: 2 / 3; }
	/* Spacer is only in .main-header (below fixed p.logo); do not repeat full band on main. */
	main
				{ padding-top: 0; padding-left: var(--margin-x); padding-right: var(--margin-x); }
}

.sidebar nav
			{ margin-top: 66px; }


/* formatting */
p.small		{ font-size: 14px; line-height: 1.4; }


/* links */
p a[target="_blank"]::after
			{ display: none; }


/* hamburger */
.hamburger	{ display: block; height: var(--hamburger-height); width: var(--hamburger-width); z-index: 18; display: flex;
			flex-direction: column; justify-content: space-between; }
.hamburger,
.menu_sidebar-toggle-wrap input[type="checkbox"]
			{ position: absolute; top: 0; right: 0; }
.hamburger span
			{ display: block; height: var(--hamburger-bar-height); width: 100%; 
			background: #000; }
.hamburger .line1
			{ transform-origin: center; transition: transform 0.4s ease-in-out; }
.hamburger .line2
			{ transition: transform 0.2s ease-in-out; }
.hamburger .line3
			{ transform-origin: center; transition: transform 0.4s ease-in-out; }
.menu_sidebar-toggle-wrap input[type="checkbox"]
			{ display: block; height: 60px; width: 60px; z-index: 25; opacity: 0;
			margin-top: -10px; }
.menu_sidebar-toggle-wrap input[type="checkbox"]:checked ~ .hamburger .line1
			{ transform: translateY(calc((var(--hamburger-height) - var(--hamburger-bar-height)) / 2)) rotate(45deg); }
.menu_sidebar-toggle-wrap input[type="checkbox"]:checked ~ .hamburger .line2
			{ transform: scaleY(0); }
.menu_sidebar-toggle-wrap input[type="checkbox"]:checked ~ .hamburger .line3
			{ transform: translateY(calc((var(--hamburger-height) - var(--hamburger-bar-height)) / -2)) rotate(-45deg); }
.menu_sidebar-toggle-wrap input[type="checkbox"]:checked ~ .overlay-open
			{ transform: translateX(0); }
.menu_sidebar-toggle-wrap input[type="checkbox"]:checked ~ .nav-main--mobile-is-shown
			{ transform: translateX(0); }


/* headline */
.l-header-only-wrap
			{ margin: 0; padding: 0; }
.content-headline
			{ margin: 0; padding: 0; text-align: left; width: 100%; }
.content-headline > h2
			{ margin: var(--gap) 0 var(--gap-half); }
@media screen and (max-width: 480px) {
	.content-headline > h2
				{ margin-bottom: 0; }
}


/* text */
.frame p	{ line-height: 1.4; text-indent: 2rem; max-width: 50rem; hyphens: auto; }
.frame p.text-no-indent
			{ text-indent: 0; }


/* collapsible boxes */
.frame-type-rm_custom_elements_collapsible_boxes_element 
			{ margin: var(--gap-half) 0 var(--gap) 0; }
.template--content-100 .collapsible-boxes
			{ width: 100%; margin: 0; float: none; border-color: #000; }
.collapsible_box
			{ border-color: #000; }
.collapsible_box p, .collapsible_box hr, .collapsible_box dl, .collapsible_box ul
			{ max-width: 50rem; }
.collapsible_box hr
			{ margin-left: 0; }
.collapsible_box__header
			{ margin: 0; padding: .5rem 0; }
.collapsible_box__header__text
			{ font-weight: normal; padding-left: 2rem; font-family: var(--font-regular); 
			position: relative; }
.collapsible_box__content__item
			{ margin: 0 0 1rem; padding: 0; }
.collapsible_box__content__item p:has(+ hr),
.collapsible_box__content__item hr + p
			{ text-indent: 0; }
.collapsible_box__content__item figcaption
			{ padding: var(--gap-quarter) 0; }
blockquote
			{ margin: 1.5rem 0; padding: 0; max-width: 50rem; }
blockquote p
			{ text-indent: 0; max-width: none; text-wrap: balance; hyphens: none; }
blockquote strong
			{ font-size: var(--font-size-quote); line-height: 1.2; }
.collapsible_box__header__icon
			{ display: none; }
/* collapsible boxes open/close */
.collapsible_box__header__text::before,
.collapsible_box__header__text::after
			{ content: ""; position: absolute; top: 50%; left: 0.5rem;
			background-color: currentColor; transition: transform 0.2s ease; }
.collapsible_box__header__text::before /* horizontal line */
			{ width: 1rem; height: 1px; transform: translateY(-50%); }
.collapsible_box__header__text::after /* vertical line */
			{ width: 1px; height: 1rem; margin-left: .45rem; transform: translateY(-50%); }
.is-open .collapsible_box__header__text::after /* hide vertical line */
			{ transform: scaleY(0); }
/* images in collapsible boxes */
.collapsible_box__images
			{ display: grid; gap: var(--gap-quarter); grid-template-columns: repeat(3, 1fr); }
.collapsible_box__images_1
			{ grid-template-columns: 1fr; }
.collapsible_box__images_cols_4
			{ max-width: calc(100% / 3); }
.collapsible_box__images_cols_6
			{ max-width: 50%; }
.collapsible_box__images_cols_8
			{ max-width: calc(100% * 2 / 3); }
.collapsible_box__images a:not([class])
			{ text-decoration: none; font-family: var(--font-regular); }
.collapsible_box__images .cb-img
			{ width: 100%; display: block; background: #CCC; }
.collapsible_box__images .cb-img a
			{ width: 100%; display: block; }
.collapsible_box__images img
			{ width: 100%; height: auto; color: #CCC; }
@media screen and (max-width: 480px) {
	.collapsible_box__images
				{ grid-template-columns: auto; gap: var(--gap-half); }
	.collapsible_box__images_cols_4,
	.collapsible_box__images_cols_6,
	.collapsible_box__images_cols_8
				{ max-width: none; }
}


/* images */
body .l-section	
			{ padding: 0; }
body .l-main-wrap
			{ padding: 0; max-width: none; }
body.project-page .ce-image
			{ margin: 0 0 var(--gap-quarter); }
body .ce-image img
			{ width: 100%; }
body.project-page video
			{ width: 100%; }
body.project-page .template--content-100 .ce-textpic
			{ float: none; margin: 0; width: 100%; }
body.project-page .key-visual figure
			{ margin: 0 calc(-1 * var(--margin-x)); }

.gallery-columns-2 .ce-inner
			{ display: grid; gap: var(--gap-quarter); grid-template-columns: 1fr 1fr; }
.gallery-columns-3 .ce-inner
			{ display: grid; gap: var(--gap-quarter); grid-template-columns: 1fr 1fr 1fr; }
.gallery-columns-4 .ce-inner
			{ display: grid; gap: var(--gap-quarter); grid-template-columns: 1fr 1fr 1fr 1fr; }
@media screen and (max-width: 480px) {
	.gallery-columns-2 .ce-inner,
	.gallery-columns-3 .ce-inner,
	.gallery-columns-4 .ce-inner
				{ grid-template-columns: 1fr; }
}			


/* overlay menu */
.sidebar	{ margin-top: var(--canvas-top); line-height: 1.1; }
.sidebar ul	{ list-style: none; margin: 0 0 3rem; padding: 0; }
.sidebar ul li,
.sidebar ul ul
			{ margin: 0; }
.menu_sidebar-toggle-wrap
			{ left: auto; right: var(--margin-x); top: var(--site-header-top);
			transform: translateY(calc((var(--site-header-logo-height) - var(--hamburger-height)) / 2)); }
.sidebar .nav-sidebar__list__item a,
.sidebar .nav-sidebar__list__item span
			{ padding: .4rem .35rem .3rem; margin: 0 0 0 -.35rem; }
.sidebar .nav-sidebar__list__item--current a
			{ text-decoration: underline; }
body .sidebar nav .nav-sidebar__submenu
			{ line-height: 1.5; }
body .menu_sidebar-toggle-wrap
			{ margin: 0; padding: 0; }
@media screen and (max-width: 480px) {
	body .menu_sidebar-toggle-wrap
				{ top: var(--site-header-top); margin-top: 0; }
}

.sidebar-logo
			{ grid-column: 1 / 3; grid-row: 1 / 2;  }
.sidebar-nav
			{ grid-column: 3 / 10; grid-row: 2 / 3;  }
body .page-wrap__sidebar
			{ z-index: 500; }
.nav-sidebar__list__item span,
.nav-sidebar__list__item a
			{ font-size: var(--font-size-big); }
.nav-sidebar__submenu li a,
.nav-sidebar__submenu li span
			{ font-size: var(--font-size-subnav); }
.sidebar .nav-lang
			{ margin-top: 6rem; grid-column: 3 / 11; }
.sidebar .nav-lang li
			{ margin-right: 1.5rem; }
.nav-lang--desktop .nav-lang__list
			{ margin-left: 0; }
@media screen and (max-width: 480px) {
	/* iOS Safari: 100vh can mismatch the visible viewport until UI chrome settles;
	   stretch with top/bottom, prefer dynamic viewport units, extend into home indicator. */
	.page-wrap__sidebar.page-wrap__sidebar--fixed
				{ top: 0; bottom: 0; height: auto;
				min-height: 100vh; min-height: 100dvh;
				padding-bottom: env(safe-area-inset-bottom, 0px);
				box-sizing: border-box; }
	.sidebar	{ margin-top: var(--site-header-height); 
				grid-template-columns: auto;
				grid-template-rows: 1fr auto;
				height: calc(100vh - var(--site-header-height));
				height: calc(100dvh - var(--site-header-height)); }
	.page-wrap__sidebar
				{ background: white; }
	body .page-wrap__sidebar .page-wrap__sidebar__content
				{ height: 100%; }
	.sidebar-nav
				{ grid-column: 1 / 2; grid-row: 1 / 2;
				overflow-y: auto; }
	.sidebar .nav-lang
				{ grid-column: 1 / 2; grid-row: 2 / 3; 
				font-size: var(--font-size-medium);
				align-self: end; padding-bottom: 4rem; margin-top: 0; }
	body .sidebar nav .nav-sidebar__submenu
				{ line-height: 1.2; }
}


/* footer */
.footer		{ gap: 1.3rem; }
footer ul	{ list-style: none; margin: 0; padding: 0; color: white; }
footer li	{ display: inline-block; margin-right: var(--gap-quarter); }
footer a, footer a:not([class])
			{ color: white; text-decoration: none; font-weight: normal; 
			font-family: var(--font-regular); }

footer .footer-language
			{ grid-column: 1 / 3; grid-row: 1 / 2; }
footer .footer-language #nav-lang
			{ display: none; }

footer .social
			{ grid-column: 4 / 10; grid-row: 1 / 2; text-transform: uppercase; }
footer .footer-menu
			{ grid-column: 4 / 10; grid-row: 2 / 3; }
/* Fluid indents between </li><li> become gaps with inline-block; flex avoids that */
footer .footer-menu ul
			{ display: flex; flex-wrap: wrap; column-gap: var(--gap-quarter); row-gap: 0; }
footer .footer-menu li
			{ display: block; margin-right: 0; }
footer .footer-logo
			{ grid-column: 10 / 13; grid-row: 1 / 3; justify-self: right; }
footer .footer-logo img
			{ height: 74px; width: auto; display: inline-block; }
footer .copyright
			{ grid-column: 4 / 10; grid-row: 3 / 4; }
@media screen and (max-width: 639px) {
	.main-footer
				{ font-size: var(--font-size-body); }
	.footer		{ grid-template-columns: auto; }
	footer ul	{ margin: var(--gap) 0 0; }
	footer .footer-logo
				{ grid-row: 1 / 2; grid-column: 1 / 2; }
	footer .social
				{ grid-row: 2 / 3; grid-column: 1 / 2; }
	footer .social li
				{ display: block; }
	footer .footer-menu
				{ grid-row: 3 / 4; grid-column: 1 / 2; }
	footer .footer-menu ul
				{ display: block; }
	footer .footer-menu li
				{ display: block; }
	footer .footer-menu p
				{ margin-top: var(--gap); }
	footer .footer-language
				{ grid-row: 4 / 5; grid-column: 1 / 2; }
}


/* projects */
p.project-overview-selection
			{ text-indent: 0; margin-bottom: var(--gap-quarter); }
.projects	{ margin: var(--gap-quarter) 0 2rem; gap: var(--gap-quarter); }
.projects figure
			{ grid-column: span 4; }
.projects figure.portrait
			{ grid-row: span 2;
			/* calculate min height on three elements wide = / 3 times two */
			min-height: calc((100vw - 2 * var(--margin-x) - 2 * var(--gap-quarter)) / 3 * 2 * 3 / 4 + var(--project-text) + var(--project-text-margin) + var(--gap-quarter)); }
.projects figure img
			{ width: 100%; height: auto; }
.projects figure div.project-image-missing
			{ background: #CCC; width: 100%; aspect-ratio: 4 / 3; }
.projects figure.portrait img
			{ height: calc(100% - var(--project-text) - var(--project-text-margin));
			object-fit: cover; }
.projects figcaption
			{ height: var(--project-text); }
.projects h2
			{ font-weight: normal; font-size: var(--font-size-project);
			font-family: var(--font-regular); 
			margin-top: var(--project-text-margin); margin-bottom: 0; }
.projects h2 a:not([class])
			{ font-family: var(--font-regular); }
.js-category-hidden
			{ display: none; }
.projects .js-project-hidden,
.projects .js-project-search-hidden
			{ display: none; }
.projects .js-project-filter-no-matches,
.projects .js-project-search-no-results
			{ margin: 0 0 var(--gap-half); max-width: 50rem; text-wrap: balance;
			grid-column: 1 / 13;
			font-size: var(--font-size-medium); font-weight: normal; font-family: var(--font-regular);
			line-height: 1.3; }
.lang-zh .projects .js-project-filter-no-matches,
.lang-zh .projects .js-project-search-no-results
			{ font-weight: 700; }
@media screen and (max-width: 959px) {
	.projects h2
				{ hyphens: auto; line-height: 1.1; }	
}
@media screen and (max-width: 639px) {
	.projects figure
				{ grid-column: span 6; }
	/* calculate min height on two elements wide = / 2 times two = both left out of the equation */
	.projects figure.portrait
				{ min-height: calc((100vw - 2 * var(--margin-x) - var(--gap-quarter)) * 3 / 4 + var(--project-text) + var(--project-text-margin) + var(--gap-quarter)); }
}


/* list filters */
.list-filters
			{ display: grid; min-height: 9rem; grid-template-rows: auto 1fr; 
			grid-template-columns: min-content min-content 1fr; }
.list-filters.team-gallery-filters
			{ min-height: 11rem; }
.list-filters h2
			{ font-size: var(--font-size-medium); margin: 1rem 1.5rem 1.5rem 0; grid-row: 1 / 2; 
			white-space: nowrap; }
.list-filters ul
			{ list-style: none; margin: 1rem 0; padding: 0; 
			grid-row: 2 / 3; grid-column: 1 / 13; line-height: 1.4; }
.list-filters li
			{ display: inline-block; margin-right: 1.5rem; }
.lang-zh .list-filters li
			{ font-weight: 700; }
.list-filters .list-filters-letters li,
.list-filters.team-gallery-filters li
			{ margin-right: .75rem; }
.list-filters li a
			{ text-decoration: none; font-family: var(--font-regular);
			font-weight: normal; }
.list-filters li a:hover
			{ text-decoration: underline; }
.list-filters .project-category__subcategory-label--no-match,
.list-filters .project-decade-label--no-match
			{ opacity: .45; cursor: not-allowed; text-decoration: none; }
.lang-zh .list-filters .project-category__subcategory-label--no-match,
.lang-zh .list-filters .project-decade-label--no-match
			{ font-weight: 700; }
.list-filters h2.current-page a,
.list-filters a.current-page
			{ text-decoration: underline !important; }
@media screen and (max-width: 480px) {
	.list-filters
				{ grid-template-columns: 1fr; grid-template-rows: auto; }
	.list-filters ul
				{ margin: 0; line-height: 1.2; grid-column: auto; grid-row: auto; }
	.list-filters li
				{ display: block; margin: .25rem 0; }
	.list-filters .list-filters-letters li
				{ display: inline-block; margin: 0 1.5rem 0 0; }
	.list-filters h2
				{ grid-row: auto; margin: .5rem 0; }
	.team-gallery-filters
				{ margin-top: 1.5rem; }
}


/* project filters: search form as last item inside subcategory / decade lists */
/* Keep ul as normal block flow (grid expects it); align tall search row with links via vertical-align */
.list-filters li
			{ vertical-align: middle; }
.list-filters .project-search,
.project-search-below-hint .project-search
			{ display: inline-flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; margin: 0; max-width: 20rem; }
.project-search-below-hint
			{ margin-top: 1rem; }
h2.project-search-hint
			{ font-size: var(--font-size-medium); font-weight: normal; font-family: var(--font-regular);
			line-height: 1.3; margin: 1rem 0 0; max-width: 50rem; text-wrap: balance; }
.lang-zh h2.project-search-hint
			{ font-weight: 700; }
/* Match .newsletter-form inputs + inverted-style submit hover (black bg, white symbol) */
.list-filters .project-search input[type="search"],
.project-search-below-hint .project-search input[type="search"]
			{ padding: .2rem 0 0; font: inherit; border: none;
			border-bottom: 1px solid #000; width: 7.5rem;
			background-color: #fff; color: #000;
			-webkit-appearance: none; appearance: none;
			border-radius: 0; box-shadow: none; outline: 0; }
/* iOS/WebKit: extra search-field chrome (cancel, magnifier, rounded “capsule”) */
.list-filters .project-search input[type="search"]::-webkit-search-decoration,
.project-search-below-hint .project-search input[type="search"]::-webkit-search-decoration,
.list-filters .project-search input[type="search"]::-webkit-search-cancel-button,
.project-search-below-hint .project-search input[type="search"]::-webkit-search-cancel-button,
.list-filters .project-search input[type="search"]::-webkit-search-results-button,
.project-search-below-hint .project-search input[type="search"]::-webkit-search-results-button,
.list-filters .project-search input[type="search"]::-webkit-search-results-decoration,
.project-search-below-hint .project-search input[type="search"]::-webkit-search-results-decoration
			{ display: none; }
.list-filters .project-search input[type="search"]:focus,
.project-search-below-hint .project-search input[type="search"]:focus
			{ border-color: #000; }
.list-filters button,
.project-search-below-hint button
			{ display: inline-flex; align-items: center; justify-content: center; padding: 0 .25rem;
			border: none; background: #fff; color: #000;
			cursor: pointer; font: inherit; line-height: 0;
			transition: background .35s, color .35s, border-color .35s; }
.list-filters button .icon,
.project-search-below-hint button .icon
			{ width: 1.25rem; height: 1.25rem; fill: currentColor; }
.list-filters button:hover,
.project-search-below-hint button:hover
			{ background: #000; border-color: #000; color: #fff; }
.list-filters button:focus-visible,
.project-search-below-hint button:focus-visible
			{ outline: 2px solid #000; outline-offset: 2px; }
.list-filters .project-search__reset,
.project-search-below-hint .project-search__reset
			{ display: inline-flex; align-items: center; justify-content: center;
			padding: 0 .25rem; border: none; background: #fff; color: #000;
			cursor: pointer; font: inherit; line-height: 0; text-decoration: none;
			transition: background .35s, color .35s, border-color .35s; }
.list-filters .project-search__reset[hidden],
.project-search-below-hint .project-search__reset[hidden]
			{ display: none !important; }
.list-filters .project-search__reset .icon,
.project-search-below-hint .project-search__reset .icon
			{ width: 1.25rem; height: 1.25rem; fill: currentColor; }
.list-filters .project-search__reset:hover,
.project-search-below-hint .project-search__reset:hover
			{ background: #000; border-color: #000; color: #fff; }
.list-filters .project-search__reset:focus-visible,
.project-search-below-hint .project-search__reset:focus-visible
			{ outline: 2px solid #000; outline-offset: 2px; }
@media screen and (max-width: 480px) {
	.list-filters .project-category__subcategory--search,
	.list-filters .project-decade--search
				{ display: block; margin: .5rem 0 0; }
	.list-filters .project-search,
	.project-search-below-hint .project-search
				{ max-width: none; width: 100%; }
	.list-filters ul.project-category__subcategories
				{ margin-bottom: var(--gap-half); }
}


/* project categories */
.project-categories
			{ margin: 0 0 1rem; list-style: none;
			padding: 0; z-index: 10; position: relative; }
.project-categories li
			{ float: left; padding: 0 var(--gap-quarter) 0 0;
			margin: 0 var(--gap-quarter) 0 0;
			position: relative; }
.project-categories li::after
			{ content: ""; position: absolute; right: 0; top: 15%; height: 70%;
			border-right: 1px solid #000; }
.project-categories li:last-child
			{ padding-left: 0; margin-left: 0; }
.project-categories li:last-child::after
			{ display: none; }
.project-categories a
			{ font-family: var(--font-regular); font-weight: normal; }
@media screen and (max-width: 480px) {
	.project-categories
				{ margin-top: var(--gap-quarter); }
}


/* project profile on project page */
.project-profile
			{ margin: .5rem 0; }
.project-profile dt
			{ font-family: var(--font-bold); float: left; clear: left; 
			padding: 0; margin: 0; }
.project-profile dt:after
			{ content: ":"; margin-right: .5rem; }
.project-profile dd
			{ margin: 0; padding: 0; }
.project-profile dd.services
			{ display: inline-block; }
.project-profile dd.services + dd.services::before 
			{ content: ",\00a0"; }
.project-profile a
			{ font-family: var(--font-regular); font-weight: normal; }

/* team */
body .ext-team-gallery
			{ margin: 0; }


/* removing the funny positioning, making footer available below content */
/* and allowing overlays to live above main-header */
body, html	{ height: auto; }
main		{ position: static; padding-bottom: var(--gap-half); }
.content-wrap, .page-wrap__content
			{ min-height: 0; }
footer.main-footer.is-fixed
			{ z-index: -1; }


/* main top image, 100% width */
.intro-visual
			{ z-index: 2; width: calc(100% + var(--margin-x) + var(--margin-x));
			margin-left: calc(-1 * var(--margin-x));
			margin-right: calc(-1 * var(--margin-x));
			height: calc(100vh - var(--site-header-height)); }
/* News detail: fixed height would clip layout (text overlapped tall images). Grow with image. */
.news-detail__image
			{ z-index: 2; width: calc(100% + var(--margin-x) + var(--margin-x));
			margin-left: calc(-1 * var(--margin-x));
			margin-right: calc(-1 * var(--margin-x));
			min-height: calc(100vh - var(--site-header-height));
			height: auto; }
/* Narrow viewports + portrait tablets: in-flow media so height:auto works (else absolute children → 0 height). */
@media screen and (max-width: 480px),
	screen and (orientation: portrait) and (max-width: 1024px) {
	.intro-visual
				{ width: calc(100% + var(--margin-x) + var(--margin-x));
				margin-left: calc(-1 * var(--margin-x));
				margin-right: calc(-1 * var(--margin-x));
				height: auto; min-height: 0; overflow: hidden; }
	/* Base #page_1 .intro-visual { height: 65vw } wins over .intro-visual without #id — strip fixed hero height so media + auto height match (#f2f2f2 band). */
	#page_1 .intro-visual
				{ height: auto; min-height: 0; }
	/* Video: outer .intro-visual__content wraps video; use in-flow size from media */
	.intro-visual:not(.intro-visual__content--image) > .intro-visual__content
				{ position: relative; top: auto; left: auto;
				height: auto; min-height: 0; }
	.intro-visual .intro-visual__video
				{ position: relative; top: auto; left: auto;
				width: 100%; height: auto; display: block;
				object-fit: contain; }
	/* Image: picture lives in .intro-visual-background */
	.intro-visual.intro-visual__content--image > .intro-visual-background
				{ position: relative; top: auto; left: auto;
				height: auto; min-height: 0; }
	.intro-visual .intro-visual-background picture
				{ display: block; width: 100%; height: auto; }
	.intro-visual .intro-visual__image
				{ position: relative; top: auto; left: auto;
				width: 100%; height: auto; display: block;
				object-fit: initial; }
	.news-detail__image
				{ min-height: 0; }
}
.intro-visual video, .intro-visual img,
.news-detail__image video, .news-detail__image img 
			{ width: 100%; }
@media screen and (max-width: 480px) {
	.news-detail__image
				{ min-height: 0; }
}


/* news latest */
body .news-latest
			{ display: grid; gap: var(--gap-quarter); grid-template-columns: 1fr 1fr 1fr; }
body .news-latest .news-latest__item
			{ margin: 0; width: 100%; display: block; }
body .news-latest .news-latest__item__image
			{ margin: 0; }
body .news-latest h2, body .news-latest a
			{ font-size: 1rem; font-family: var(--font-regular); 
			font-weight: normal; margin: 0; }
body .news-latest__item:not(.news-latest__item--without_image) .news-latest__item__headline a
			{ max-width: none; }
body .news-latest img
			{ width: 100%; }
.news-latest__more, .news-detail__more
			{ margin: var(--gap-quarter) 0 var(--gap); text-align: left; }
.news-latest__more a, .news-detail__more a, .news-list-more a
			{ text-decoration: underline;
			font-family: var(--font-bold); }
@media screen and (max-width: 480px) {
	body .news-latest
				{ grid-template-columns: auto; }
	body .news-latest__item
				{ padding: 0; }
}


/* news list */
.template--content-100 .news-list,
.news-list	{ float: none; margin: 0; width: auto; } /* remove base.css */
.news-list	{ padding: 0; list-style: none; }
.news-list li
			{ padding: 0; margin: 0 0 var(--gap) 0; display: grid; 
			grid-template-columns: 30% 60%; gap: var(--gap-half); }
.news-list time
			{ grid-row: 1 / 2; grid-column: 1 / 3; }
.news-list h2
			{ margin: 0; grid-row: 2 / 3; grid-column: 1 / 3; }
.news-list figure img
			{ width: 100%; height: auto; }
.frame .news-list p
			{ text-indent: 0; max-width: 36rem; }
@media screen and (max-width: 480px) {
	.news-list li
				{ grid-template-columns: 1fr; }
	.news-list time, .news-list h2
				{ grid-column: 1 / 2; }
	.news-list-text
				{ margin-top: -.75rem; }
}


/* news detail */
.news-detail
			{ margin: 0; width: auto; }
.news-detail__image
			{ margin-bottom: 0; }
.news-detail time
			{ margin-top: var(--gap); display: block; }
.news-detail figure, .news-detail figure img
			{ width: 100%; }
.news-detail h1
			{ margin: var(--gap-quarter) 0 0 0; text-wrap: balance; }
.news-detail .text--teaser
			{ font-size: 1rem; }
.news-detail-gallery
			{ display: grid; gap: var(--gap-quarter); grid-template-columns: 1fr 1fr; 
			margin: var(--gap-half) 0; }
.news-detail-gallery figure
			{ display: flex; flex-direction: column; margin: 0; min-height: 0; }
.news-detail-gallery figure > a
			{ display: block; overflow: hidden; }
.news-detail-gallery figure.landscape > a
			{ aspect-ratio: 4 / 3; }
.news-detail-gallery figure.portrait
			{ grid-row: span 2; }
.news-detail-gallery figure.portrait > a
			{ flex: 1 1 auto; min-height: 0; }
.news-detail-gallery figure img
			{ width: 100%; height: 100%; object-fit: cover; display: block; }
@media screen and (max-width: 480px) {
	.news-detail-gallery
		{ grid-template-columns: 1fr; }
}

/* numbers */
body .cce-numbers
			{ display: block; text-align: left; border-bottom: 1px solid black; 
			line-height: 1.6; margin: var(--gap) 0; }
body .cce-numbers__item
			{ display: flex; border-top: 1px solid black; margin: 0; padding: 0 0 0 6rem; 
			position: relative; justify-content: flex-start; flex-direction: row; 
			align-items: center; gap: 1rem; }
body .cce-numbers__item:before
			{ content: "➔"; position: absolute; top: 0; left: 0; }
body .cce-numbers__item:before,
body .cce-numbers__number,
body .cce-numbers__topic
			{ font-size: var(--font-size-big); font-family: var(--font-bold);  }
body .cce-numbers__text,
body .cce-numbers__link
			{ font-size: 24px; font-family: var(--font-regular); font-weight: normal; 
			flex: 0 1 auto; box-flex: 0 1 auto; -moz-flex: 0 1 auto; 
			text-decoration: none; }
body .cce-numbers__link a
			{ font-family: var(--font-regular); }
@media screen and (max-width: 959px) {
	body .cce-numbers
				{ line-height: 1.3; }
	.cce-numbers__item + .cce-numbers__item
				{ margin-top: 0; }
	body .cce-numbers__item:before
				{ top: .5rem; }
	body .cce-numbers__item
				{ display: grid; column-gap: var(--gap-quarter);
				row-gap: 0; padding: .5rem 0 .5rem 3rem;
				grid-template-columns: min-content auto; }
	body .cce-numbers__number
				{ grid-column: 1 / 2; }
	body .cce-numbers__topic
				{ grid-column: 2 / 3; }
	body .cce-numbers__text
				{ grid-column: 1 / 3; margin: 0; font-size: 18px; }
	body .cce-numbers__link
				{ grid-column: 1 / 3; margin: 0; font-size: 18px; font-style: italic; }
	body .cce-numbers__link a
				{ text-decoration: underline; font-style: italic; }
}


/* team gallery */
.ext-team-gallery h2.is-active
			{ border: none; text-decoration: underline; }
@media screen and (max-width: 480px) {
	.ext-team-gallery__item__text__name
				{ hyphens: auto; }
}


/* content boxes */
.contentbox-centered
			{ text-align: center }
.contentbox
			{ display: grid; gap: var(--gap-quarter); width: 100%; margin: var(--gap) 0; }
.contentbox.col-2
			{ grid-template-columns: 1fr 1fr; }
.contentbox.col-3
			{ grid-template-columns: 1fr 1fr 1fr; }
.contentbox.col-4
			{ grid-template-columns: 1fr 1fr 1fr 1fr; }
.contentbox.col-5
			{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
@media screen and (max-width: 480px) {
	.contentbox.col-2,
	.contentbox.col-3,
	.contentbox.col-4,
	.contentbox.col-5
				{ grid-template-columns: 1fr; }
}

.contentbox-item
			{ }
.contentbox-text p
			{ text-indent: 0; }
.contentbox-title
			{ }
.contentbox-title a
			{ font-size: 100%; color: black; font-weight: normal;
			font-family: var(--font-regular); text-decoration: none; }
.contentbox figure img
			{ width: 100%; height: auto; }


/* compact box */
.frame-compact h3
			{ margin: .75rem 0; }

/* spacious box */
.frame-spacious .contentbox
			{ gap: var(--gap-half); }


/* newsletter, via newsletter provider, not TYPO3 */
.newsletter-form h3
			{ display: none; }