/*
 * koeln-kollege.de
 * Copyright (c) 2025-2026 Aryan Mirfendereski <aryan@mirfendereski.de>
 * Copyright (c) 2025-2026 Gustaf Mossakowski <gustaf@koenige.org>
 * CSS
 */


/*
fonts

400	All Round Gothic Book
500	All Round Gothic Medium
600	All Round Gothic Demi
700	All Round Gothic Bold
*/

:root {
	--black: #000;
	--green: rgb(88 125 50);
	--green-transparent: rgb(88 125 50 / 10%);
	--orange: rgb(209 129 0);
	--orange-transparent: rgb(209 129 0 / 10%);
	--purple: #8a4299;
	--purple-transparent: rgb(138 66 153 / 10%);
	--red: #af2b3a;
	--red-transparent: rgb(175 43 58 / 10%);
	--turquois: #0a6972;
	--light-gray: #D4D4D4;
	--light-gray-transparent: rgb(212 212 212 / 25%);
	--dark-gray: #4B4B4B;
	/* :visited ignores alpha; mix with white instead of transparency */
	--link-visited: color-mix(in srgb, var(--black) 50%, white);
	--green-visited: color-mix(in srgb, var(--green) 50%, white);
	--orange-visited: color-mix(in srgb, var(--orange) 50%, white);
	--purple-visited: color-mix(in srgb, var(--purple) 50%, white);
	--red-visited: color-mix(in srgb, var(--red) 50%, white);
}

body		{ font-family: "all-round-gothic", sans-serif; font-weight: 400; 
			margin: 0; padding: 0; overflow-x: hidden; line-height: 1.3; }
h1, h2		{ display: flex; align-items: center; }
h1, h2, h3, h4
			{ text-wrap: balance; }
h1			{ font-weight: 700; margin-bottom: 2rem; }
h2			{ font-weight: 500; cursor: pointer; clear: both; margin-bottom: 1rem; }
h3			{ font-weight: 500; font-size: 1rem; text-align: right; clear: both; }
h4			{ font-weight: 700; font-size: 1rem; margin: 1.5rem 0 0; }
p			{ margin: 0 0 1.3rem 0; }
ul			{ margin: 0 0 1.3rem 0; }
ul ul		{ margin-bottom: 0; }
strong		{ font-weight: 500; }

a:visited	{ color: var(--link-visited); }

header		{ display: grid; grid-template-columns: 33% 67%; grid-template-rows: auto; }
@media screen and (max-width: 640px) {
}

main		{ margin-top: 9rem; padding-bottom: 5rem; min-height: 20rem; }
main, main > section > div, footer, .block-wide div, .intro, .text-only,
.block > div > .image-left, .block.panel
			{ display: grid;
			grid-template-columns: minmax(1rem, 1fr) minmax(0, 30rem) minmax(0, 30rem) minmax(1rem, 1fr); }
main > section, main > section div
			{ grid-column: 1 / 5; }
h1, main > section > div > *, footer > div, #zzform, #login, .helptext, .errorpage
			{ grid-column: 2 / 4; }

img			{ max-width: 100%; vertical-align: bottom; }
@media screen and (max-width: 640px) {
	h1			{ font-size: 1.5rem; }
	body main > section > div
				{ display: block; }
}


/* colour schemes */

h2::before, h3::after, a.cta-button::before, a.cta-button::after
			{ background-color: black; }
.block:nth-of-type(even)
			{ background-color: var(--light-gray-transparent); }

.orange h1, .orange h2, .orange h3, .orange a.cta-button
			{ color: var(--orange); }
.orange a.cta-button:visited
			{ color: var(--orange-visited); }
.orange a.cta-button:visited::before, .orange a.cta-button:visited::after
			{ background-color: var(--orange-visited); }
.orange h1::before,
.orange .image-left::before, .orange .image-right::before,
.orange.image-left::before, .orange.image-right::before
			{ border-color: var(--orange); }
.orange h2::before, .orange h3::after,
.orange a.cta-button::before, .orange a.cta-button::after
			{ background-color: var(--orange); }
.orange.block:nth-of-type(even),
.orange .block:nth-of-type(even)
			{ background-color: var(--orange-transparent); }

.green h1, .green h2, .green h3, .green a.cta-button
			{ color: var(--green); }
.green a.cta-button:visited
			{ color: var(--green-visited); }
.green a.cta-button:visited::before, .green a.cta-button:visited::after
			{ background-color: var(--green-visited); }
.green h1::before,
.green .image-left::before, .green .image-right::before,
.green.image-left::before, .green.image-right::before
			{ border-color: var(--green); }
.green h2::before, .green h3::after,
.green a.cta-button::before, .green a.cta-button::after
			{ background-color: var(--green); }
.green.block:nth-of-type(even),
.green .block:nth-of-type(even)
			{ background-color: var(--green-transparent); }

.purple h1, .purple h2, .purple h3, .purple a.cta-button
			{ color: var(--purple); }
.purple a.cta-button:visited
			{ color: var(--purple-visited); }
.purple a.cta-button:visited::before, .purple a.cta-button:visited::after
			{ background-color: var(--purple-visited); }
.purple h1::before,
.purple .image-left::before, .purple .image-right::before,
.purple.image-left::before, .purple.image-right::before
			{ border-color: var(--purple); }
.purple h2::before, .purple h3::after,
.purple a.cta-button::before, .purple a.cta-button::after
			{ background-color: var(--purple); }
.purple .block:nth-of-type(even),
.purple.block:nth-of-type(even)
			{ background-color: var(--purple-transparent); }

.red h1, .red h2, .red h3, .red a.cta-button
			{ color: var(--red); }
.red a.cta-button:visited
			{ color: var(--red-visited); }
.red a.cta-button:visited::before, .red a.cta-button:visited::after
			{ background-color: var(--red-visited); }
.red h1::before,
.red .image-left::before, .red .image-right::before,
.red.image-left::before, .red.image-right::before
			{ border-color: var(--red); }
.red h2::before, .red h3::after,
.red a.cta-button::before, .red a.cta-button::after
			{ background-color: var(--red); }
.red .block:nth-of-type(even),
.red.block:nth-of-type(even)
			{ background-color: var(--red-transparent); }


/* navigation */
header nav	{ font-weight: 700; font-size: 2rem; text-transform: uppercase;
			grid-column: 1 / 2; grid-row: 1 / 2; align-self: end; justify-self: start; 
			margin-bottom: -10%; }
header nav ul
			{ list-style-type: none; padding: 0; margin: 0 0 -8px; }
header nav li
			{ padding: 0; margin: 0; position: relative; height: 92px;
			transform: rotate(-45deg); }
header nav svg
			{ width: 100px; height: 90px; z-index: -1; transform: rotate(45deg); }
header nav a, header nav strong
			{ position: absolute; left: 47px; bottom: 44px; z-index: 2;
			line-height: 1; display: block; padding: .1rem .3rem; font-weight: 700; }
header nav a
			{ text-decoration: none; }
header nav strong, header #menu-du a:hover, header #menu-wir a:hover, #menu-koko a:hover
			{ color: white; }
@media screen and (max-width: 640px) {
	header nav	{ grid-column: 1 / 2; grid-row: 2 / 3; padding: 1rem 0; }
}


#menu-du	{ fill: var(--green); }
#menu-du a	{ color: var(--green); }
#menu-du a:visited
			{ color: var(--green-visited); }
#menu-du strong, #menu-du a:hover
			{ background-color: var(--green); }
#menu-wir	{ fill: var(--orange); }
#menu-wir a	{ color: var(--orange); }
#menu-wir a:visited
			{ color: var(--orange-visited); }
#menu-wir strong, #menu-wir a:hover
			{ background-color: var(--orange); }
#menu-koko	{ fill: var(--purple); }
#menu-koko a
			{ color: var(--purple); }
#menu-koko a:visited
			{ color: var(--purple-visited); }
#menu-koko strong, #menu-koko a:hover
			{ background-color: var(--purple); }

footer		{ background-color: var(--light-gray); color: black; overflow: hidden; }
footer nav	{ margin: 1rem 4rem 2.5rem 0; grid-column: 2 / 3; grid-row: 2 / 3; }
footer nav ul
			{ list-style: none; margin: 2rem 0 1rem; padding: 0; }
footer nav ul svg
			{ display: none; }
footer nav li
			{ margin: .25rem 0; padding: 0; }
footer a	{ color: black; text-decoration: none; }
footer a:visited
			{ color: var(--link-visited); }
footer a:hover
			{ text-decoration: underline; }
footer .menu-tools li
			{ font-weight: 500; }
footer address, footer #map
			{ margin-top: 5rem; }
footer #map	{ background: var(--dark-gray); width: calc(100% + 3rem);
			height: calc(100% - 8.5rem); margin-left: -3rem;
			grid-column: 3 / 5; grid-row: 1 / 3; }
footer address
			{ grid-column: 2 / 3; grid-row: 1 / 2; font-style: normal;
			margin-right: 4rem; }
footer address ul
			{ margin: -1.3rem 0 0; padding: 0; }
footer address li
			{ margin: 0; padding: 0; list-style: none; }
footer address figure
			{ margin: 0 2rem 2rem 0; padding: 0; }
footer .gallery
			{ grid-column: 2 / 4; grid-row: 3 / 4; display: flex; margin: 1.5rem 0 3rem;
			justify-content: space-between; gap: 6rem; width: 100%; }
footer .gallery img
			{ object-fit: contain; max-height: 5rem; }			
@media screen and (min-width: 641px) {
	footer .logo-small
				{ margin-left: -4rem; }
}
@media screen and (max-width: 640px) {
	footer address
				{ grid-row: 1 / 2; grid-column: 1 / -1; margin: 0; padding: 1rem; }
	footer #map	{ grid-row: 2 / 3; grid-column: 1 / -1; margin: 0; min-height: 50vh; }
	footer nav
				{ grid-row: 3 / 4; grid-column: 1 / -1; margin: 0; padding: 1rem; }
	footer .gallery
				{ grid-row: 4 / 5; grid-column: 1 / -1; display: block; }
	footer .gallery img
				{ display: block; margin: 1.5rem auto; }

}


/* logo */
.logo		{ grid-column: 2 / 4; grid-row: 1 / 1; justify-self: start; align-self: end;
			transform: translateX(-36.3%); margin: 0; }
.logo		{ width: 409px; height: 353px; }
.logo img	{ vertical-align: bottom;}
.topimage	{ grid-column: 2 / 4; grid-row: 1 / 1;
			background-color: var(--light-gray); }
.topimage figure
			{ padding: 0; margin: 0; }
.topimage figcaption
			{ background: white; }
.topimage figcaption .figure-title
			{ display: none; }
.topimage figcaption small
			{ text-align: right; display: block; font-size: .8rem;
			color: var(--dark-gray); text-transform: uppercase; padding: .25rem; }
.topimage img
			{ width: 100%; aspect-ratio: 2 / 1; object-fit: cover;
			object-position: center; vertical-align: bottom; }
@media screen and (max-width: 640px) {
	.logo		{ grid-column: 2 / 3; grid-row: 2 / 3; transform: none; padding: 2rem 1rem; 
				width: calc(100% - 2rem); height: auto; }
	.topimage	{ grid-column: 1 / -1; grid-row: 1 / 2; }
}


/* blocks */
.intro, .block
			{ hyphens: auto; }
.block > div
			{ padding: .25rem 0; position: relative; }
@media screen and (max-width: 640px) {
	.block > div
			{ padding: .25rem 1rem; }
	body .block > div div.image
			{ margin-left: -1rem; margin-right: -1rem; }
}


/* arrows */
h1::before, .block h2::before
			{ margin-right: 2rem; margin-left: -3rem; }
h1::before, .block.panel h2::before
			{ content: ""; display: inline-block; flex-shrink: 0; border: 1.25rem solid; border-radius: 50%;
			background: transparent; width: 3.75rem; height: 3.75rem; }
.block h2::before
			{ content: ""; display: inline-block; flex-shrink: 0; margin-right: 2rem;
			transform: rotate(180deg); transition: transform 0.3s ease;
			width: 6.25rem; height: 6.25rem; 
			mask: url("/_layout/koelnkolleg/arrow-up.svg") no-repeat center / contain; }
.block.panel h2::before
			{ border-color: currentColor; background-color: transparent;
			mask: none; transform: none; transition: none; }
@media screen and (max-width: 640px) {
	h1::before, .block h2::before
				{ margin-left: 0; }
	h1::before, .block.panel h2::before
				{ width: 2.5rem; height: 2.5rem; border: .75rem solid; }
	.block h2::before
				{ width: 3rem; height: 3rem; }
}


/* intro */
.intro div, .block.panel > div
			{ font-size: 120%; columns: 2; column-gap: 2rem; margin-bottom: 2rem; 
			display: block; /* disable grid */ grid-column: 2 / 4; }
.intro div > p, .intro div > ul, .intro div > ol,
.block.panel > div > p, .block.panel > div > ul, .block.panel > div > ol
			{ margin-bottom: 1.5rem; }
.intro p:has(> a.cta-button:only-child),
.block.panel > div p:has(> a.cta-button:only-child)
			{ column-span: all; text-align: right; margin-right: 3rem;
			padding-top: .5rem; }
@media screen and (max-width: 640px) {
	.intro div, .block.panel > div
				{ columns: 1; }
}

/* panel: always-open block (start page); circle heading like h1, intro typography */
.block.panel h2
			{ column-span: all; cursor: default; font-weight: 700; font-size: 2em;
			margin-bottom: 2rem; }
@media screen and (max-width: 640px) {
	.block.panel h2
				{ font-size: 1.5rem; }
}

/* sections */
.block		{ padding-bottom: 2rem; }
.block:not(.text-only) div.bodytext,
.block.text-only > div
			{ word-wrap: break-word; grid-column: 2 / 4; }
.block.text-only div.bodytext
			{ grid-column: auto; }
.block.text-only:not(.js-closed) > div
			{ column-count: 2; column-gap: 2rem; display: block; }
.block.text-only:not(.js-closed) div.bodytext
			{ column-count: auto; display: block; }
.block:not(.text-only):not(.js-closed) div.bodytext
			{ column-count: 2; column-gap: 2rem; display: block; }
.block.panel:not(.js-closed) div.bodytext
			{ column-count: 1; }
/* inline-block keeps column children unbroken in Safari (break-inside alone leaves gaps) */
.intro div > p, .intro div > ul, .intro div > ol,
.block.panel > div > p, .block.panel > div > ul, .block.panel > div > ol,
.block:not(.text-only):not(.js-closed) div.bodytext > p,
.block:not(.text-only):not(.js-closed) div.bodytext > ul:not(.team),
.block:not(.text-only):not(.js-closed) div.bodytext > ol,
.block.text-only:not(.js-closed) > div p, .block.text-only:not(.js-closed) > div ul:not(.team),
.block.text-only:not(.js-closed) > div ol
			{ display: inline-block; width: 100%; vertical-align: top;
			break-inside: avoid; -webkit-column-break-inside: avoid; }
.block:not(.text-only):not(.js-closed) div.bodytext > ul.team,
.block.text-only:not(.js-closed) > div ul.team
			{ display: grid; break-inside: avoid; -webkit-column-break-inside: avoid; }
.block div.bodytext > p + ul, .block.text-only > div p + ul,
.block div.bodytext > p + ol, .block.text-only > div p + ol
			{ margin-top: -1.3rem; }
.block div.bodytext h4, .block.text-only > div h4
			{ break-after: avoid; }
.block.js-closed
			{ padding-bottom: 0; }
.block h2, .block h3, .block .team
			{ column-span: all; break-after: avoid; }
.bodytext > *:first-child
			{ margin-top: 0; }
.block div.bodytext p:has(> a.cta-button:only-child),
.block.text-only > div p:has(> a.cta-button:only-child)
			{ column-span: all; break-after: avoid; text-align: right;
			margin-right: 3rem; padding-top: .5rem; }
@media screen and (max-width: 640px) {
	.block:not(.text-only):not(.js-closed) div.bodytext,
	.block.text-only:not(.js-closed) > div
				{ column-count: 1; }
}

.block figcaption
			{ display: none; }

.block.js-closed *
			{ display: none;}
.block.js-closed > div
			{ display: grid;}
.block.js-closed.text-only > div
			{ display: block;}
.block.js-closed h2
			{ display: flex; }
.block.js-closed h2::before
			{ transform: rotate(90deg); }

.block-wide h2
			{ grid-column: 2 / 4; }
.block-wide:not(.text-only) div.bodytext
			{ grid-column: 1 / 5; column-count: 1; }

.image-left, .image-right
			{ position: relative; }
.image-left .image
			{ grid-column: 1 / 3; margin-right: -3rem; }
.image-right .image
			{ grid-column: 3 / 5; margin-left: -3rem; }
.image-left figure, .image-right figure
			{ margin: 0 0 1rem 0; padding: 0; }
.image-left img, .image-right img
			{ width: 100%; }
.block-intro
			{ grid-row: 2 / 3; align-self: center; }
@media screen and (min-width: 641px) {
	.image-left .block-intro
				{ grid-column: 3 / 4; margin-left: 6.5rem; margin-right: -6.5rem; }
	.image-right .block-intro
				{ grid-column: 2 / 3; margin-right: 6rem; }
}
.image-left::before, .image-right::before
			{ content: " "; width: 18rem; height: 18rem; border: 8rem solid; 
			transform: rotate(45deg); position: absolute; z-index: -1; top: 9rem;
			opacity: 25%;}
.image-left::before
			{ right: -18rem; }
.image-right::before
			{ left: -18rem; }
.image-left.js-closed::before, .image-right.js-closed::before
			{ display: none; }

/* h3 image-left row: full block grid width, outside bodytext */
.block > div > .image-left
			{ grid-column: 1 / -1; grid-auto-rows: min-content; margin-bottom: 3rem; }
.block > div > .image-left .image
			{ grid-column: 1 / 3; margin-right: -3rem; margin-left: 0; }
.block > div > .image-left:has(> .team) > .image
			{ grid-row: 1 / 3; align-self: start; }
.block > div > .image-left > .team
			{ grid-row: 1; align-self: start; }
.block > div > .image-left > .profile
			{ grid-row: 2; align-self: start; }
@media screen and (min-width: 641px) {
	.block > div > .image-left > .team,
	.block > div > .image-left > .profile
				{ grid-column: 3 / 4; }
	.block > div > .image-left > .profile
				{ margin-left: 6rem; }
}


h3			{ position: relative; cursor: pointer; margin-right: 3rem; padding-top: .5rem;
			height: 1.5rem; }

h3::after	{ content: ""; position: absolute; right: -3rem; top: 0; width: 2rem;
			height: 2rem; margin-left: 0.5rem;
			mask: url('/_layout/koelnkolleg/arrow-up.svg') no-repeat center / contain;
			transform: rotate(-90deg); transition: transform 0.3s ease; }

h3:not(:has(+ *[style*="display: none"]))::after
			{ transform: rotate(-180deg); }

h3.js-closed::after
			{ transform: rotate(-90deg); }

h3:has(.cta-button)
			{ margin-right: 0; }
h3:has(.cta-button)::after
			{ display: none; }

h3.js-closed ~ *
			{ display: none; }


/* call-to-action (markdown e.g. ### [label](url){.cta-button}) */
a.cta-button
			{ position: relative; display: inline-flex; align-items: center;
			box-sizing: border-box; min-height: 1.5rem; padding-right: 3.1rem;
			font-weight: 700; font-size: 1rem; text-align: right;
			text-decoration: none; hyphens: none; }
a.cta-button:hover
			{ text-decoration: underline; }
a.cta-button:visited::before, a.cta-button:visited::after
			{ background-color: var(--link-visited); }
a.cta-button::before, a.cta-button::after
			{ content: ""; position: absolute; top: 50%; width: 2rem; height: 2rem;
			margin-top: -1rem;
			mask: url('/_layout/koelnkolleg/arrow-up.svg') no-repeat center / contain;
			transform: rotate(90deg); }
a.cta-button::before
			{ right: 0.85rem; }
a.cta-button::after
			{ right: 0; }


/* team */
.team		{ display: grid; grid-template-columns: repeat(auto-fill, 360px);
			justify-content: center; list-style-type: none; padding: 0; margin: 0 auto;
			width: 100%; }
.team figure
			{ position: relative; width: 360px; margin: 0; }
.team figure::before
			{ content: ""; display: block; height: 216px; width: 216px;
			border: 18px solid var(--orange); border-radius: 50%; margin-bottom: -216px;
			position: relative; z-index: 3; box-sizing: border-box;
			background: transparent; pointer-events: none; }
.team figure img
			{ height: 216px; width: 216px; display: block; position: relative; z-index: 2;
			border-radius: 50%; object-fit: cover; object-position: left; }
.team figcaption
			{ position: absolute; bottom: 72px; right: -.5rem; width: 216px; height: 72px;
			transform: rotate(270deg); z-index: 3; text-align: center; 
			display: block; text-wrap: balance; hyphens: none; }
.team figure div
			{ position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			z-index: 1; background-size: auto 100%; background-repeat: no-repeat;
			mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35.7%, rgba(0,0,0,0.2) 35.7%); }
.team li.offset-left
			{ transform: translateX(50%); }
.team li.offset-right
			{ transform: none; }
.team li:has(> .profile)
			{ display: flex; flex-direction: row; align-items: center; }
.team li:has(> .profile) > figure
			{ flex-shrink: 0; width: calc(280px + 24px); margin: 0; }
.team li:has(> .profile) figcaption
			{ right: calc(-.5rem - (80px - 24px)); }
.team li > .profile
			{ flex: 1; min-width: 0; }
.block-wide .team
			{ grid-column: 1 / 5; text-align: center; padding: 0 90px;
			width: calc(100% - 180px); }

@media screen and (max-width: 539px) {
	.block-wide .team
			{ padding: 0; width: 100%; }
}
@media screen and (min-width: 540px) and (max-width: 719px) {
	/* 1 column, shift */
	.block-wide .team li:nth-child(2n + 1)
				{ transform: translateX(25%); }
	.block-wide .team li:nth-child(2n + 2)
				{ transform: translateX(-25%); }
}
@media screen and (min-width: 720px) and (max-width: 899px) {
	/* 2 columns, no shift */
	.block-wide .team
			{ padding: 0; width: 100%; }
}
@media screen and (min-width: 900px) and (max-width: 1259px) {
	/* 2 columns */
	.block-wide .team li:nth-child(4n + 1),
	.block-wide .team li:nth-child(4n + 2)
				{ transform: translateX(25%); }
	.block-wide .team li:nth-child(4n + 3),
	.block-wide .team li:nth-child(4n + 4)
				{ transform: translateX(-25%); }
}
@media screen and (min-width: 1260px) and (max-width: 1619px) {
	/* 3 columns */
	.block-wide .team li:nth-child(6n + 1),
	.block-wide .team li:nth-child(6n + 2),
	.block-wide .team li:nth-child(6n + 3)
				{ transform: translateX(25%); }
	.block-wide .team li:nth-child(6n + 4),
	.block-wide .team li:nth-child(6n + 5),
	.block-wide .team li:nth-child(6n + 6)
				{ transform: translateX(-25%); }
}
@media screen and (min-width: 1620px) and (max-width: 1979px) {
	/* 4 columns */
	.block-wide .team li:nth-child(8n + 1),
	.block-wide .team li:nth-child(8n + 2),
	.block-wide .team li:nth-child(8n + 3),
	.block-wide .team li:nth-child(8n + 4)
				{ transform: translateX(25%); }
	.block-wide .team li:nth-child(8n + 5),
	.block-wide .team li:nth-child(8n + 6),
	.block-wide .team li:nth-child(8n + 7),
	.block-wide .team li:nth-child(8n + 8)
				{ transform: translateX(-25%); }
}
@media screen and (min-width: 1980px) and (max-width: 2339px) {
	/* 5 columns */
	.block-wide .team li:nth-child(10n + 1),
	.block-wide .team li:nth-child(10n + 2),
	.block-wide .team li:nth-child(10n + 3),
	.block-wide .team li:nth-child(10n + 4),
	.block-wide .team li:nth-child(10n + 5)
				{ transform: translateX(25%); }
	.block-wide .team li:nth-child(10n + 6),
	.block-wide .team li:nth-child(10n + 7),
	.block-wide .team li:nth-child(10n + 8),
	.block-wide .team li:nth-child(10n + 9),
	.block-wide .team li:nth-child(10n + 10)
				{ transform: translateX(-25%); }
}
@media screen and (min-width: 2340px) and (max-width: 2699px) {
	/* 6 columns */
	.block-wide .team li:nth-child(12n + 1),
	.block-wide .team li:nth-child(12n + 2),
	.block-wide .team li:nth-child(12n + 3),
	.block-wide .team li:nth-child(12n + 4),
	.block-wide .team li:nth-child(12n + 5),
	.block-wide .team li:nth-child(12n + 6)
				{ transform: translateX(25%); }
	.block-wide .team li:nth-child(12n + 7),
	.block-wide .team li:nth-child(12n + 8),
	.block-wide .team li:nth-child(12n + 9),
	.block-wide .team li:nth-child(12n + 10),
	.block-wide .team li:nth-child(12n + 11),
	.block-wide .team li:nth-child(12n + 12)
				{ transform: translateX(-25%); }
}
@media screen and (min-width: 2700px) {
	/* 6 columns */
	.block-wide .team li:nth-child(14n + 1),
	.block-wide .team li:nth-child(14n + 2),
	.block-wide .team li:nth-child(14n + 3),
	.block-wide .team li:nth-child(14n + 4),
	.block-wide .team li:nth-child(14n + 5),
	.block-wide .team li:nth-child(14n + 6),
	.block-wide .team li:nth-child(14n + 7)
				{ transform: translateX(25%); }
	.block-wide .team li:nth-child(14n + 8),
	.block-wide .team li:nth-child(14n + 9),
	.block-wide .team li:nth-child(14n + 10),
	.block-wide .team li:nth-child(14n + 11),
	.block-wide .team li:nth-child(14n + 12),
	.block-wide .team li:nth-child(14n + 13),
	.block-wide .team li:nth-child(14n + 14)
				{ transform: translateX(-25%); }
}
.block-intro:has(> .team),
.block > div > .image-left:has(> .team)
				{ min-height: 100%; }
.block-intro:has(> .team)
				{ align-self: start; }
.block-intro .team
				{ position: relative; left: calc(-4rem - 108px); top: 0;
				margin: 0 -3rem 3rem 0;
				display: flex; flex-direction: column; align-items: flex-start; gap: 0;
				width: auto; }
.block > div > .image-left > .team
				{ position: relative; left: calc(3rem - 108px); top: 0;
				margin: 0 -3rem 3rem 0;
				display: flex; flex-direction: column; align-items: flex-start; gap: 0;
				width: auto; }
.profile p		{ margin: 0; }
@media screen and (max-width: 640px) {
	.block-intro .team,
	.block > div > .image-left > .team
					{ left: 0; }
	.block > div > .image-left > .profile
					{ margin-left: 0; }
	.team li:has(> .profile)
					{ flex-direction: column; align-items: flex-start; }
	.team li:has(> .profile) > figure
					{ width: 360px; }
	.team li:has(> .profile) figcaption
					{ right: -.5rem; }
}

/*
 * Cascading Style Sheets (CSS)
 * for login form
 *
 * Part of »Zugzwang Project«
 * https://www.zugzwang.org/modules/default
 *
 * @author Gustaf Mossakowski <gustaf@koenige.org>
 * @copyright Copyright © 2025-2026 Gustaf Mossakowski
 * @license http://opensource.org/licenses/lgpl-3.0.html LGPL-3.0
 */


#login		{ max-width: 40rem; margin: 5rem auto;
			--default_login_css_background_color: ;
			--background-color-login: var(--default_login_css_background_color, #FFF); }
#login fieldset
			{ position: relative; border: none; margin: 2.5rem 0 1rem;
			display: grid; grid-template-columns: 9rem 12.5rem; gap: .5rem;
			background: var(--background-color-login) repeat-y 100% 0;
			background-image: url(/_layout/koelnkolleg/zugzwang-stripes.png);
			background-size: 75%; padding: 1.5rem 1rem 1rem; border-radius: 3px; }
#login legend
			{ position: absolute; padding: .75rem 1rem; transform: translateY(-50%);
			background-color: inherit; border-radius: inherit; }
#login form	{ margin: 1rem 0 0; }
#login fieldset p	{ margin: 0; }
#login input[type=submit], p.submit
			{ grid-column: 2 / 3; height: 1.6rem; }
#login .error
			{ grid-column: 1 / 3; text-wrap: balance; }
@media screen and (max-width: 30rem) {
	#login fieldset
				{ background-size: 75%; }
}
@media screen and (max-width: 25rem) {
	#login		{ margin: 1rem auto; }
	#login fieldset
				{ grid-template-columns: auto; background-size: 100%;
				background-position: 4rem 0; }
	#login input[type=submit], p.submit
				{ grid-column: 1 / 2; }
	#login fieldset label
				{ margin-bottom: -.25rem; }
	#login .error
				{ grid-column: 1 / 2; }
}

#login		{ --background-color-login: #d1c4b0; }


/* internal */
@media screen and (min-width: 720px) {
	.col1		{ grid-column: 2 / 3; }
	.col2		{ grid-column: 3 / 4; }
}
@media screen and (max-width: 720px) {
	.col1, .col2
				{ grid-column: 2 / 4; }
}
.mediapool h1 small
			{ grid-column: 2 / 4; }
#zzform .mediatools
			{ grid-column: 3 / 4; grid-row: 1 / 2; }