.content {}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { margin: 1.5em 0 0.5em 0; padding: 0; font-weight: bold; }
.content h1 { font-size: 1.5em; }
.content h1:first-of-type { margin-top: 0.75em; }
.content h2 { font-size: 1.25em; }
.content h3 { font-size: 1.125em; }
.content h4 { font-size: 1.125em; }
.content h5, .content h6 { font-size: 1em; }
.content p { margin: 1em 0; padding: 0; /*text-align: justify;*/ }
.content p.no-justify { /*text-align: justify;*/ }
.content ul, .content ol { margin: 1em 0 1em 1.25em; padding: 0; /*text-align: justify;*/ }
.content ul > li, .content ol > li { margin: 0.5em 0; padding: 0; }
.content table { margin: 1em 0; padding: 0; border-spacing: 0; }
.content table th, .content table td { margin: 0; padding: 0.25em 0.5em; }
.content table tbody tr:nth-of-type(2n+1) > td { background: #eee; transition: background-color 0.2s; }
.content table tr:hover > td { background: #ddd !important; }

.content a:hover, .content a:focus, .content a:active { text-decoration: underline; }
.content img { max-width: 100%; }
/* Removed at RTX redesign
.content img { filter: saturate(0); transition: filter 0.2s; }
.content img:not(.gray-only):hover, .content img:not(.gray-only):focus, .content img:not(.gray-only):active { filter: saturate(1); }
*/

.content.startseite { /*color: white; background: black;*/ font-weight: bold; }
.content.startseite h2 { display: none; }

.content.startseite > p.slideshow { margin-top: 0; }
/* In IE11 the layouts use the original height of the images (before their width is constraint).
   The max-height makes sure the img doesn't extend the parent container way to much in IE11. */
.content.startseite > p.slideshow > img { max-height: 425px; }

.content.startseite > p:nth-of-type(2) { display: flex; margin-top: 0; }
.content.startseite > p:nth-of-type(2) > a { flex: 0 1 1; min-width: 10%; margin-right: 1em; }
.content.startseite > p:nth-of-type(2) > a:last-of-type { margin-right: 0; }
.content.startseite > p:nth-of-type(2) > a > img { display: block; width: 100%; max-height: 325px; }

.content.startseite a { color: #333; background: white; text-decoration: none; transition: all 0.2s; }
.content.startseite a > span { display: block; padding: 0.5em; overflow: hidden;
	white-space: nowrap; text-overflow: ellipsis; }
.content.startseite a:hover, .content.startseite a:focus, .content.startseite a:active { color: white; background: #ce1126; }
.content.startseite a:hover img, .content.startseite a:focus img, .content.startseite a:active img { filter: saturate(1); }

/*
.content.startseite > p.slideshow { position: absolute; top: 0; left: 50%; right: 50%; margin: 0 -50vw; }
.content.startseite > p.slideshow > img { object-fit: cover; }

@media (min-width: 768px) {
	.content.startseite > p.slideshow { height: 350px; }
	.content.startseite { padding-top: calc(350px + 0.75em); }
}
@media (max-width: 767px) {
	.content.startseite > p.slideshow { height: 200px; }
	.content.startseite { padding-top: calc(200px + 0.75em); }
}
*/


section.person {}
section.person figure { max-width: calc(64px*4); }
section.person figure img, section.person figure svg { display: block; width: 100%; margin-top: 1.25em;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.25); }
section.person figure p { margin: 0; padding: 0; text-align: left; }
section.person figure p.name { margin: 0.5em 0 0 0; padding: 0; color: #ce1126; font-size: 1.125em;  }
/* Removed at RTX redesign
section.person figure img { filter: saturate(0); transition: filter 0.2s; }
section.person figure img:hover { filter: saturate(1); }
*/


/* Styles for collapsed / opened sections. Only actually collapse them on the final page, don't do it in the editor. */
section.collapse > h2 { padding-left: 0.77em; cursor: pointer; }
section.collapse > h2:hover { color: #ce1126; }
section.collapse > h2::before { content: ''; display: inline-block; width: 0.5em; height: 0.77em; margin-left: -0.77em; margin-right: calc(0.77em - 0.5em);
	background: url('baseline-arrow_right-24px.svg') center center no-repeat; background-size: 1em;
	transform-origin: 50% 50%; transform: rotate(0deg); transition: transform 0.2s; }

body.page section.collapse:not(.open) *:not(h2) { display: none; }
section.collapse.open > h2::before, body:not(.page) section.collapse > h2::before { transform: rotate(90deg); }


/* Give the Google Maps iframe explicit dimensions here instead of HTML attributes */
.content.standort iframe { width: 100%; min-height: calc(64px*5); }


/* General purpose side-by-side layout (figures get to the left, aside to the right) */
@media (min-width: 768px) { /* tablet and desktop only */
	/* 12 column layout grid system, complete width is 768px, each column is 64px */
	.content section { display: grid; grid-template-columns: auto 1fr auto; width: 100%; }
	.content section > * { grid-column: 2; }
	.content section > figure { grid-column: 1; grid-row: 1 / 99; width: calc(64px*3); margin: 0 64px 0 0; padding: 0; }
	.content section > aside { grid-column: 3; grid-row: 1 / 99; width: calc(64px*3); margin: 0 0 0 64px; padding: 0; }
	
	/* Margins don't collapse in a grid layout so we remove the bottom margin as a workaround for that. */
	.content section p, .content section ul, .content section ol,
	.content section h1, .content section h2, .content section h3, .content section h4, .content section h5, .content section h6 {
		margin-bottom: 0; }
	
	/* IE compatibility */
	/* To place grid cells into the implicit grid we have to manually assign them numbers. Doing it for the first 20 elements should be enough. */
	.content section { display: -ms-grid;  -ms-grid-columns: auto 1fr auto; }
	.content section > * { -ms-grid-column: 2; }
	.content section > :nth-child(1) { -ms-grid-row: 1; }
	.content section > :nth-child(2) { -ms-grid-row: 2; }
	.content section > :nth-child(3) { -ms-grid-row: 3; }
	.content section > :nth-child(4) { -ms-grid-row: 4; }
	.content section > :nth-child(5) { -ms-grid-row: 5; }
	.content section > :nth-child(6) { -ms-grid-row: 6; }
	.content section > :nth-child(7) { -ms-grid-row: 7; }
	.content section > :nth-child(8) { -ms-grid-row: 8; }
	.content section > :nth-child(9) { -ms-grid-row: 9; }
	.content section > :nth-child(10) { -ms-grid-row: 10; }
	.content section > :nth-child(11) { -ms-grid-row: 11; }
	.content section > :nth-child(12) { -ms-grid-row: 12; }
	.content section > :nth-child(13) { -ms-grid-row: 13; }
	.content section > :nth-child(14) { -ms-grid-row: 14; }
	.content section > :nth-child(15) { -ms-grid-row: 15; }
	.content section > :nth-child(16) { -ms-grid-row: 16; }
	.content section > :nth-child(17) { -ms-grid-row: 17; }
	.content section > :nth-child(18) { -ms-grid-row: 18; }
	.content section > :nth-child(19) { -ms-grid-row: 19; }
	.content section > figure { -ms-grid-column: 1; -ms-grid-row: 1 !important; -ms-grid-row-span: 99; width: calc(64px*3); margin: 0 64px 0 0; padding: 0; }
	.content section > aside { -ms-grid-column: 3; -ms-grid-row: 1 !important; -ms-grid-row-span: 99; width: calc(64px*3); margin: 0 0 0 64px; padding: 0; }
}
@media (max-width: 767px) { /* mobile only */
	.content section > figure, .content section > aside { margin: 1em auto; max-width: 100%; }
}


/* The align-items: flex-start; is necessary for Chrome to respect the aspect ratio of images when resizing them. */
.content .slideshow { display: flex; align-items: flex-start; overflow: hidden; position: relative; }
.content .slideshow > img { flex: 0 0 100%; object-fit: cover; transform: translateX(0%); transition: all 1s ease-in-out; }

.content .slideshow > ul { position: absolute; right: 1em; bottom: 1em; display: flex; list-style: none; margin: 0; padding: 0; }
.content .slideshow > ul > li { width: 0; height: 0; margin: 0 0 0 0.5em; padding: 0; border: 10px solid gray; border-radius: 10px; position: relative; }
.content .slideshow > ul > li::before { content: ''; position: absolute; left: -10px; right: -10px; top: -10px; bottom: -10px;
	font-size: 16px; line-height: 20px; text-align: center;
	font-family: MaterialIcons; font-weight: normal; font-feature-settings: 'liga'; }
.content .slideshow > ul > li.slideshow-pause::before { content: 'pause'; font-size: 14px; }
.content .slideshow.slideshow-paused > ul > li.slideshow-pause::before { content: 'play_arrow'; }

.content .slideshow > ul > li { border-color: hsla(0, 0%, 0%, 0.2); /*box-shadow: 0 0 0 1px hsl(0, 0%, 50%);*/ color: gray; cursor: pointer; transition: all 0.2s; }
.content .slideshow > ul > li.slideshow-active { border-color: hsla(0, 0%, 15%, 1); }
.content .slideshow > ul > li:hover { border-color: hsla(0, 0%, 0%, 0.75); color: white; }

@media (max-width: 767px) { /* mobile only */
	.content .slideshow > ul { right: 0.5em; bottom: 0.5em; }
}

/* RTX redesign */
main.content.startseite { padding-top: 1em; }

@media (min-width: 768px) { /* tablet and desktop only */
  .content .slideshow { margin: 0 calc((100vw - 768px) / -2 - 0.75em + (100vw - min(82vw, 1350px)) / 2) 1em; width: 82vw; max-width: 1350px; }
}

/*
main.content.startseite { padding-top: 0; }
.content .slideshow { position: absolute; height: 350px; left: 50%; right: 50%; margin: 0 -50vw; }
.content .slideshow + * { margin-top: calc(350px + 1.5em) !important; }
.content .slideshow > img { height: 100%; object-fit: cover; }
*/

.content .slideshow > ul > li { border-color: hsla(0, 0%, 100%, 0.3); color: black; }
.content .slideshow > ul > li.slideshow-active { border-color: hsla(0, 0%, 100%, 0.7); }
.content .slideshow > ul > li:hover { border-color: hsla(0, 0%, 100%, 1); color: black }