@charset "utf-8";

:root {
	--mainColor: #222;
	--secondColor: #888;
	--borderColor: #ccc;
		
	--spacing-xs:  0.5rem;
	--spacing-sm:  0.75rem;
	--spacing-md:  1rem;
	--spacing-lg:  1.5rem;
	--spacing-xl:  2rem;
	--spacing-2xl: 3rem;

	--spacing-lg-neg: -1.5rem; /* needs to be exactly the negative of --spacing-lg! */

	--spacing-layout: clamp(0.75rem, 0.5rem + 0.5vw, 20rem);
}

/* ======================= */
/* MAIN LAYOUT & STRUCTURE */
/* ======================= */

body {
	display: grid;
	grid-template-columns: 
		minmax(var(--spacing-layout), 1fr) 
		minmax(0, 1920px) 
		minmax(var(--spacing-layout), 1fr)
	;
	grid-auto-rows: auto;
	overflow-x: hidden;
}
body > * {
	width: 100%;
	grid-column: 2/3;
}
body > .banner,
body > .discover-more,
body > .subnav { 
	grid-column: 1/-1; 
}

body:has(.banner) header { display: none; }

body > main { margin-bottom: var(--spacing-2xl) 0; }


body > main {
	display: flex;
	flex-direction: column;
}

:root {
	--spacing-header: 4rem;
	--spacing-header-half: calc(0.5 * var(--spacing-header));
}
body > .subnav,
article,
.mb-header { 
	margin-bottom: var(--spacing-header-half); 
}
body > header {
	margin-bottom: var(--spacing-header);
}
section:not(:first-of-type) {
	padding-top: var(--spacing-header);
}

body > .page-header {
	margin-bottom: var(--spacing-header-half);
}
.page-header:has(+ .subnav) {
	margin-bottom: 0;
}


@media screen and (min-width: 80rem) { /* lg */
	:root {
		--spacing-header: 7rem;
	}
	body > header {
		margin-bottom: var(--spacing-header-half);
	}
}

section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

/* ========================================================================== */
/* GLOBAL & TYPOGRAPHY */
/* ========================================================================== */
:root {
	--fontFactor: 1.3vw;
	--fontSize:   clamp(1.188rem, var(--fontFactor), 2rem); /* 16px - 32px */

	--fs-2xs: 0.60rem;
	--fs-xs:  0.80rem;
	--fs-sm:  0.90rem;
	--fs-md:  1.00rem;
	--fs-lg:  1.10rem; /* h4 */
	--fs-xl:  1.20rem; /* h3 */
	--fs-2xl: 1.42rem; /* h2 */
	--fs-3xl: 2.20rem; /* h1 */
	--fs-4xl: 2.75rem;
}

@media screen and (min-width: 96rem) {
	:root {
		--fontFactor: 1.25vw;
	}
}
@media screen and (min-width: 112rem) {
	:root {
		--fontFactor: 1.2vw;
	}
}

html {
	font-size: var(--fontSize);
}

body {
	background: #fff;
	color: var(--mainColor);
	font-family: 'Graphik Web', arial, sans-serif;
	font-weight: 400;
	line-height: 1.5;
	font-kerning: auto;
	letter-spacing: normal;
	overflow-wrap: break-word;
	scroll-behavior: smooth;
}

h1, h2, h3, h4 {
	margin-bottom: 0.35em;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	word-wrap: normal;
}
h4 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-2xl); }
h1 { font-size: var(--fs-3xl); }

.page-title {
	font-size: var(--fs-md);
}
.section-title {
	font-size: var(--fs-2xl); 
	margin-bottom: 1.1em;
}

.font-md {
	font-size: var(--fs-lg);
	line-height: 1.35;
}
.font-sm {
	font-size: var(--fs-sm);
	letter-spacing: 0.01em;
}
.font-xs, dt {
	font-size: var(--fs-xs);
	letter-spacing: 0.015em;
}
.font-2xs {
	font-size: var(--fs-2xs);
	letter-spacing: 0.02em;
}
.uppercase {
	text-transform: uppercase;
}

.date {
	font-variant-numeric: tabular-nums;
}

.abst { /* hidden within DB T_T */
	margin-bottom: var(--spacing-2xl);
}


/* ========================================================================== */
/* LINKS & BUTTONS */
/* ========================================================================== */

a {
	cursor: pointer;
	text-decoration: none;
}
a, a:link, a:hover, a:visited { color: currentColor; }

a.active,
.pseudo-link.active {
	text-decoration: underline 1.5px currentColor;
	text-underline-offset: 0.2em;
}
a:hover, .pagelink {
	color: var(--secondColor);
}
.text-secondary {
	color: var(--secondColor) !important;
}

/* Icon / UI Links */
a::after, a::before {
	display: inline-block;
	font-size: var(--fs-xs);
}
a::after { margin-left: 0.5em; }

a.extern,
a.intern {
	color: var(--secondColor);
}

a.extern::after {
	content: '\e801';
	font-family: 'fontello-rla';
	transform: rotate(-45deg);
}
a.intern::after { 
	content: '\e801';
	font-family: 'fontello-rla';
}

.icon svg {
	height: 1em;
	width: 1em;
}
.icon.l svg {
	height: 1.5em;
	width: 1.5em;
}
.icon.xl svg {
	height: 2em;
	width: 2em;
}

/* Buttons / UI Spans */
.button, .tag, span.more-scrolldown, .dropdown, .pagelink {
	display: inline-block;
	padding: 0.2em 0.6em;
	border: 1px solid currentColor;
	border-radius: 0.8em;
	font-size: var(--fs-sm);
	line-height: 1.1;
}
.tag {
	color: var(--secondColor) !important;
	border-color: var(--secondColor);
}
.dropdown { 
	display: inline-flex;
	flex-direction: row;
	gap: var(--spacing-xs);
	margin-left: var(--spacing-sm); 
}
span.more-scrolldown { margin-left: 0.2em; }
.pagelink a.intern::after { content: ""; }

.pagelink {
	margin: var(--spacing-2xl) 0 0 auto;
	font-size: var(--fs-sm);
}

i {
	height: 100%; min-height: 1em;
	width: 100%;  min-width: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 300ms ease;
}
i.flip {
	transform: rotate(180deg);
}

/* ========================================================================== */
/* CONTENT HELPERS (Wraps, Links, Subtitles) */
/* ========================================================================== */

.location:not(.active) { display: none; }
.location p { margin-bottom: 2em; }

.discover-more {
	display: grid;
	grid-template-columns: subgrid;
	margin-top: var(--spacing-2xl);
}
.discover-more > * {
	grid-column: 2/3;
}
.discover-more h2 {
	margin-bottom: 1.8em;
	color: var(--secondColor);
}

p.hlink { margin-top: 3em; }
p.hlink a:before {
	display: inline-block;
	margin-left: 0.5em;
	margin-right: 0.5em;
	font-family: 'fontello-rla';
	content: '\e803'; 
	transform: rotate(90deg);
}

#mainpart {
	padding-top: var(--spacing-layout);
}
.tags {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
}
@media screen and (min-width: 64rem) { /* xl */
	.tags {
		display: block;
		position: absolute;
		top: var(--spacing-layout); 
		right: 0;
	}
}

.textelement { margin-bottom: 1.6em; }
.textelement .textelement__title { 
	font-size: var(--fs-2xl);
	margin-bottom: 0.3em; 
}
.textelement.separator { margin-top: 5em; }
.textelement.separator .textelement__title { 
	margin-bottom: 1em; 
}

@media screen and (min-width: 64rem) { /* lg */
	.textelement.separator h4 { margin-bottom: 1em; font-size: 1.4em; }
}

#readmore { display: none; }
#readmore-switch { cursor: pointer; }
#readmore-switch:after { content: "..."; }
#readmore-switch.open:after {
	display: inline-block;
	margin-top: 0.5em;
	font-family: 'fontello-rla';
	content: '\e800';
	font-size: var(--fs-xs);
	transform: rotate(180deg);
}

/* FIGURE MODEL */

.figure-wrapper {
	height: fit-content;
}
.figure-wrapper figure {
	margin: 0px;
	overflow: hidden;
}
.figure-wrapper figcaption {
	display: none !important;
}
.figure-wrapper .figure-caption {
	margin: 0.2em 0 0.4em 0;
}
.figure-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 400ms ease-in-out;
}
a.figure-wrapper:hover img {
	transform: scale(1.05);
}
.figure-wrapper.has-overlay .figure-caption {
	color: white;
	position: absolute;
	bottom: 0;
	left: 10px;
	font-size: var(--fs-2xl);
}

/* ========================================================================== */
/* PORTFOLIO & GALLERIES */
/* ========================================================================== */


.galerie {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--spacing-2xl);
}

.galerie figure { aspect-ratio: 1.777; }

#related, .discover-more { border-top: 1px solid var(--borderColor); }
@media screen and (min-width: 64rem) and (max-width: 96rem) { /* lg to 2xl */
	.discover-more .galerie li:nth-child(4) { display: none; }
}

#related .galerie { grid-template-columns: repeat(2, 50%); gap: var(--spacing-xs); }

@media screen and (min-width: 40rem) { /* sm */
	.galerie { grid-template-columns: repeat(2, 50%); }
}
@media screen and (min-width: 64rem) { /* lg */
	.galerie { grid-template-columns: repeat(3, 1fr); }
	#related .galerie { grid-template-columns: repeat(4, 1fr); }
}
@media screen and (min-width: 96rem) { /* 2xl */
	.galerie { grid-template-columns: repeat(4, 1fr); }
	#related .galerie { grid-template-columns: repeat(6, 1fr); }
}


/* ========================================================================== */
/* FILTERS & SEARCH */
/* ========================================================================== */

#filter {
	display: none;
	padding: var(--spacing-header) 0 var(--spacing-xl);
	border-bottom: 1px solid #eee;
	transition: transform 350ms ease-in, height 350ms ease-in;
	line-height: 1.2;
}
#filter.expanded {
	display: grid;
	grid-template-columns: 1fr;
}

@media screen and (min-width: 40rem) {
	#filter.expanded {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (min-width: 64rem) { 
	#filter.expanded {
		grid-template-columns: repeat(4, 1fr);
	}
}

.search-form {
	display: flex;
	flex-direction: row;
	max-width: 500px;
	gap: var(--spacing-lg);
	border: 1px solid transparent;
	border-bottom-color: var(--mainColor);
}
.search-form:has(:focus-within) {
	border-color: var(--mainColor);
}

/* ========================================================================== */
/* LISTS */
/* ========================================================================== */

dd {
	margin-bottom: var(--spacing-sm);
}

.employee:not(.active) .entry-details {
	display: none;
}
.entry-details p { margin: 0; }

.employee .entry-headline {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-md);
}
.employee .entry-details {
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}
@media screen and (max-width: 64rem) { /* lg */
	.employee {
		margin-bottom: var(--spacing-md);
	}
	.employee .entry-headline {
		flex-direction: column;
		gap: 0;
	}
}

.list {
	display: flex;
	flex-direction: column;
	gap: 5rem;
}
.entry-with-image {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-md);
	align-items: center;
}
.entry-with-image figure {
	width: 300px;
}
.entry-with-image img {
	width: 100%;
	object-fit: cover;
}
@media screen and (min-width: 64rem) { /* lg */
	.entry-with-image {
		grid-template-columns: auto 1fr;
		gap: 10vw;
	}
	.entry-with-image.image-right {
		grid-template-columns: 1fr auto;
	}
	.entry-with-image figure {
		width: 10vw;
	}
}

/* ========================================================================== */
/* TIMELINE */
/* ========================================================================== */

.card {
	display: grid;
	grid-template-areas: 
		"image"
		"caption"
		"title"
		"content"
		"footer"
		"."
	;
	grid-template-rows: repeat(5, auto) 1fr;
}
.card .card__image {
	grid-area: image;
}
.card .card__caption {
	grid-area: caption;
}
.card .card__title {
	grid-area: title;
}
.card .card__content {
	font-size: 0.9rem;
	grid-area: content;
}
.card .card__footer {
	font-size: 0.9rem;
	grid-area: footer;
}
.card .card__content {
	margin: 0.4em 0;
}

.timeline {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2xl);
}
.timeline-entry {
	display: grid;
	grid-template-areas: 
		"image"
		"date"
		"title"
		"content"
		"links"
	;
	column-gap: var(--spacing-xl);
	grid-template-columns: 1fr;
	border-top: 1px solid var(--secondColor);
	cursor: pointer;
}
.timeline .date {
	grid-area: date;
}
.timeline-entry__image {
	grid-area: image;
	overflow: hidden;
}
.timeline-entry__title {
	grid-area: title;
}
.timeline-entry__content {
	grid-area: content;
	display: none;
}
.timeline-entry__links {
	grid-area: links;
	display: none;
}
.timeline-entry.active .timeline-entry__content {
	display: block;
}
.timeline-entry.active .timeline-entry__title {
	margin-top: var(--spacing-xs);
}
.timeline-entry.active .timeline-entry__links {
	display: flex;
	flex-direction: column;
}
.timeline figure {
	max-height: 40rem;
}
@media screen and (max-width: 64rem) {
	.timeline-entry {
		padding-top: var(--spacing-sm);
	}
	.timeline-entry:not(.active) .figure-wrapper {
		max-width: 48vw;
	}
}
@media screen and (min-width: 64rem) {
	.timeline-entry.active .figure-wrapper {
		max-width: 48vw;
	}
	.timeline-entry {
		grid-template-areas: "date image title";
		grid-template-columns: auto 15% 1fr;
	}
	.timeline-entry.active {
		grid-template-areas: 
			" date image   . " 
			" date title   . "
			" date content . "
			" date links   . "
		;
		grid-template-columns: auto 1fr 40vw;
		padding-top: var(--spacing-sm);
	}

}

#office-history ul.timeline {
	background-image: url("/website_rla/0_img/icons/strich-grau.svg");
	background-repeat: repeat-y;
	background-position-x: 0px;
	background-size: 30px;
}
#office-history ul .date {
	width: 100px;
}
@media screen and (min-width: 64rem) {
	#office-history ul.timeline {
		background-position-x: 65px;
	}
}


@media screen and (min-width: 64rem) { /* xl */
	.discover-more .entry-content { padding: var(--spacing-md) var(--spacing-xs); }
	.news-text { margin-top: 0.3em; }
}

#search-result b {
	background: yellow;
	font-weight: 400;
}