/* HTML5 mit font-size: medium */

/* TODO: Pruefen, ob der Block entfallen kann, wenn 
 *	 die Nav.-Leiste mit "hidden" ausgeblendet wird. 
 *	 Test z.B. mit 401.html 360x760px und bei Foto-Seite
 */
html {
  background-color:	#ffffff;
}

body {
  display:		flex;
  flex-flow:		column;
  background-color:	#ffffff;
  min-height:		calc(100vh - 4px);
  font-family:		Arial,Helvetica,sans-serif;
  font-size:		max(1rem, 1.2vw);
  font-style:		normal;
  line-height:		1.5;
  margin:		0px;
  padding:		2px;
}

body * {
  border-color:	#bbbbbb;
  border-width:	0px;
}

/* Allgemein */

.stdfont {
  font-family:	Arial,Helvetica,sans-serif;
  font-size:	medium;
  font-style:	normal;
  font-weight:	normal;
}

hr {
  border-width:	1px;
}

a {
  color:	#0066cc;
}

/* Externe Links kennzeichnen.
 * Ausnahme: Links mit Symbolen fuer Facebook und Instagram */
a[href^="https://"]:not([href*="stiftung-konkrete-kunst.de"]):not([href*="stiftung.home.arpa"]):not([title$="Facebook"]):not([title$="Instagram"]):after,
a[href^="http://"]:not([href*="stiftung-konkrete-kunst.de"]):not([href*="stiftung.home.arpa"]):not([title$="Facebook"]):not([title$="Instagram"]):after
{
  content:		url('/images/link_ext.svg');
  vertical-align:	bottom;
  padding-left:		0.3ex;
  text-decoration:	none;
  white-space:		nowrap;
}

/* PDF-Symbol bei PDF-Download vor bzw. hinter der URL */
a.pdf_b:before {
  content:		url(../images/pdf_b.gif);
}

a.pdf_an:after {
  content:		url(../images/pdf_a.gif);
  white-space:		nowrap;
}

/* TODO: Pruefen, ob ohne "nowrap" noch notwendig? */
a.pdf_a:after {
  content:		url(../images/pdf_a.gif);
}

/* Verweis auf Fussnote und Anker fuer Fussnote */
a.footnoteRef {
  text-decoration: none;
}

/* Text linksbuendig */
article,
.text,
.img_idx_text,
article > header.report,
.left,
.img_box_n picture:first-of-type {
  text-align:	left;
}

/* Text zentriert */
.center,
#events #nav_r,
.event_date,
.event_artist,
.event_title,
.event_subtitle,
.news_images,
.event_images,
.event_images_n > div {
  text-align:	center;
}

/* Text rechtsbuendig */
.right,
#events p.browse,
.img_box_n picture:last-of-type {
  text-align:	right;
}

/* kein Zeilenumbruch */
.nowrap,
table.artist_list td.artist a {
  white-space:	nowrap;
}


header h1,
.h1_subst {
  font-size:	1.5em;
  font-weight:	bold;
}

header h2,
.subtitle,
#intro article > header .event_artist,
#intro article > header .event_title {
  font-size:	1.3em;
  font-weight:	bold;
}

h1 {
  font-size:	1.3em;
  font-weight:	bold;
}

h3 {
  font-size:	1.1em;
  font-weight:	bold;
}

h4 {
  font-size:	1em;
  font-weight:	bold;
}

ul {
  margin-top:	0ex;
  padding-left:	3ex;
}

li {
  margin-top:	0.5ex;
}

hr {
  margin-top:		1em;	/* = Mindestabstand bei .soc */
  margin-bottom:	1em;
  border-style:		solid none none;
}

img {
  max-width:		100%;
  height:		auto;
  object-fit:		scale-down;
}

ins,
del {
  background-color:	#ff0;
}

td {
  vertical-align: 	top;
}

article {
  margin-top:		0em;
}

article,
p,
.text,
.img_idx_text {
  max-width:		45em;
}


/* mit #events .event_artist, ... bei @media (max-width: 58rem) abgleichen */
p {
  margin-top:		1em;
  margin-bottom:	1em;
}

#nav_l p,
.nav_h,
article > header > p,
.header_subst > p,
.event_hours {
  font-weight:	bold;
}

article,
.img_idx_text,
.img_container p,
.slide_box .text {
  margin-left:		auto;
  margin-right:		auto;
}



.img_container p {
  margin-top:		1ex;	/* TODO: nur aktivieren, wenn der Text dadurch nicht mit .credits kollidiert! */
  margin-bottom:	1ex;
}


/* Ueberschrift der Seite bei Ausstellungen */
/* .header_subst wird wie header formatiert, ist aber fuer die Seitenstruktur
 * keine Ueberschrift. */
article > header,
.header_subst {
  text-align:		center;
  margin-bottom:	1.5rem;
}

article > header > h1,
article > header > h2,
.h1_subst,
.subtitle {
  margin-top:		0.3em;
  line-height:		1.3;
}

article > header figure {
  margin:		1em 0;
}

/* Seitenuebrschrift bei allgemeinen Seiten */
#global article > header {
  text-align:		left;
  margin-bottom:	unset;
  line-height:		unset;
}

article > header h1,
article > header h2,
article > header .subtitle,
article > header .subsubtitle,
.h1_subst,
.header_subst .subtitle {
  clear:		both;
  margin-top:		0.3em;
  margin-bottom:	0;
}

article > header > h1:first-child,
.h1_subst:first-child {
  margin-top:		0.5em;
  line-height:		1.6;	/* TODO: noch notwenig? */
}

article > header > h2:first-child,
article > header > .subtitle:first-child,
.header_subst .subtitle:first-child {
  margin-top:		0.7em;
}

article > header table {
  margin-top:		1em;
}

article > header td > h1 {
  margin-top:		0em;
  margin-bottom:	0.2em;
}

article > header td > .subtitle {
  margin-top:		0em;
  margin-bottom:	0.5em;
}


/* Seitenkopf */

#top_header {
  display:		flex;
  flex-flow:		row nowrap;
  align-items:		center;
  text-align:		center;
  padding-top:		0.2ex;
  border-bottom-style:	solid;
  padding-bottom:	0.2ex;
  line-height:		1.2;
}

/* mobile first: Menue wird nicht angezeigt; Logo schmal */
#top_header_logo,
#slide #top_header_logo {
  flex:			0 0 5.5em;
  padding-left:		2ex;
  padding-right:	2ex;
  align-self:		stretch;
}

#top_header_logo > div {
  aspect-ratio:		1;
  margin:		0 auto;
  height:		2.5em;
  min-height:		min(100%, 120px);	/* Im Kombination mit "height: 2.5em" begrenzen 100% hier auf die Hoehe von #top_header_text */
}

#top_header_logo img {
  width:		100%;
}

#top_header_text {
  flex:			1 1 90%;
  display:		inline-block;
  padding-left:		1ex;
  padding-right:	1ex;
}

/* Seitenkopf deutsch, 1. Zeile */
#top1_de {
  font-weight:		bold;
  padding-top:		0.1em;
}

/* Seitenkopf deutsch, 2. Zeile */
#top2_de {
  padding-top:		0.3ex;
  padding-bottom:	0.3ex;
}

/* Seitenkopf englisch */
#top1_en {
  font-weight:		bold;
}

#top1_de {
  font-size:	min(3vw, 1.5em);
}

#top2_de,
#top1_en,
#top3_en {
  font-size:	min(3vw, 1.1em);
}

#top2_en {
  font-size:	min(2.5vw, 0.9em);
}

/* Ende Seitenkopf */


/* skip navigation */
.skip_nav {
  font-size:	0.0;	/* Hack fuer IE11, weil clip-path nicht funktioniert */
  -webkit-clip-path:	polygon(0 0,0 0,0 0,0 0);
  clip-path:		polygon(0 0,0 0,0 0,0 0);
  box-sizing:		border-box;
  position:		absolute;
  margin:		0;
  padding:		0;
}

.skip_nav.display-at-top-on-focus {
  top:		0;
  left:		0;
}

.skip_nav.display-at-top-on-focus:focus {
  font-size:	medium;	/* Hack fuer IE11, weil clip-path nicht funktioniert */
  -webkit-clip-path:	none;
  clip-path:		none;
  z-index:		999;
  visibility:		visible;
  background:		#ffffff;
  text-decoration:	none;
  color:		#1295e6;
  text-align:		left;
  padding:		2ex;
}

#skip_nav_target:focus {
  background:		#084367;
  color:		#ffffff;
}

/* skip navigation end */

/* Navigation: Burger */

#hamburger {
  font-size:		1.5em;
  color:		#0066cc;	/* = a color */
  margin-top:		0.1ex;		/* Platz fuer Rahmen bei #menu_close:hover ... */
  margin-bottom:	0.1ex;
  display:		block;	/* TODO: pruefen */
  white-space:		nowrap;
}

#menu_close,
#menu_hamburger {
  margin-left:		0.9ex;
  padding-left:		0.5ex;
  padding-right:	0.5ex;
  line-height:		1.2em;	/* Ausgleich fuer Ueberhoehe des Hamburgers */
  border-radius:	0.2em;
  border-width:		1px;
}

/* Voreinstellung: Hamburger anzeigen */
#menu_hamburger {
  display:		inline;
}

#menu_close {
  padding-left:		0.2ex;
  padding-right:	0.2ex;
  display:		none;
}

#menu_close:hover,
#menu_hamburger:hover,
#menu_close:focus,
#menu_hamburger:focus {
  font-weight:		bold;
  background-color:	#ffffff;
  cursor:		pointer;
  border-style:		solid;
}


/* nach Klick auf Hamburger: */
#toggle_menu,
#toggle_menu:checked ~ #nav_l_box #hamburger #menu_hamburger,
#breadcrumb,
#slide #breadcrumb {
  display:none;
}

#toggle_menu:checked ~ #nav_l_box #hamburger #menu_close {
  display:		inline;
  background-color:	#ffffff;
}

/* Hack fuer IE11, weil :focus-within dort nicht funktioniert.
 *
 * Ein zusaetzlicher Block zum nachfolgenden ist notwendig, weil IE11 
 * Bloecke mit :focus-within auch bei keiner der anderen Bedingungen
 * anwendet. 
 */
#toggle_menu:checked ~ #nav_l_box #nav_l,
#toggle_menu:checked ~ #nav_r {
  background-color:	#ffffff;
  display:		block;
  visibility:		visible;
  z-index:		10;
}

/* Wiederholung des vorherigen Blocks mit allgemein gueltigen Bedingungen */
#nav_l:focus-within,	/* :focus-within funktioniert nicht bei IE11 */
#nav_l:focus-within ~ #nav_r,
#toggle_menu:checked ~ #nav_l_box #nav_l,
#toggle_menu:checked ~ #nav_r {
  background-color:	#ffffff;
  display:		block;
  visibility:		visible;
  z-index:		10;
}

/* Ende Navigation Burger */

/* Navigationsleisten */

#nav_main_box {
  display:		block;
  margin-top:		0.25rem;
  margin-bottom:	0.2rem;
  position:		relative;	/* Bezug fuer #slide main, #nav_l, #nav_r */
  background-color:	inherit;
}

/* Position, damit Breadcrumbs und Sprachauswahl horizontal fluchten */
#nav_l_box {
  position:		absolute;
  top:		0;
}

#nav_l,
#nav_r,
#content_box {
  background-color:	#ffffff;
  padding-bottom:	2em;
}

/* Wenn die Navigation ueber den Hamburger ausgeklappt wird, endet die vertikale Randlinie am Ende von #nav_l bzw. #nav_r */
#nav_l,
#nav_r {
  display:		block;
  z-index:		-1;
  visibility:		hidden;
  position:		absolute;
  top:			2.5em;
  border-bottom-style:	solid;
  border-width:		1px;
}

#nav_l {
  width:		12.4em;	/* auch #nav_l und #top_header_logo flex-basis */
  border-right-style:	solid;
  left:			0;
  padding-left:		0.9em;
  padding-right:	0.7em;
}

#nav_r {
  border-left-style:	solid;
}

nav p {
  margin-top:		1.5ex;
  margin-bottom:	0px;
}

nav ul {
  margin-top:		0.3em;
  padding-left:		2.5ex;
  list-style-type:	circle;
}

nav li {
  margin-top:		0.5em;
}

nav .soc {
  text-align:		center;
  margin-top:		max(15px,1em);	/* analog hr */
  margin-bottom:	max(15px,1em);
}

nav .soc a {
  display:		inline-block;
  min-width:		4em;
}

nav .soc img {
  height:		1.5em;
  min-height:		29px;
  margin-left:		max(15px,1em);
  margin-right:		max(15px,1em);
  object-fit:		unset;		/* bei "scale-down" waere das Instagram-Logo kleiner als das Facebook-Logo! */
}

#copyright {
  margin-top:		0.5em;
  text-align:		center;
}

/* Ende Navigation */

/* Breadcrumbs */

nav.breadcrumb {
  padding-bottom:	0;
  display:		inline-block;
}

#breadcrumb,
.breadcrumb_lang_box > p {
  margin-top:		1ex;
  margin-bottom:	0.5ex;
  max-width:		none;		/* Hack fuer IE11 */
}

#breadcrumb > a {
  text-decoration:	none;
  white-space:		nowrap;
}

#breadcrumb > a:hover,
#breadcrumb > a:focus {
  text-decoration:	underline;
}

.breadcrumb_lang_box {
  display:		flex;
  flex-wrap:		nowrap;
  justify-content:	flex-end;
}

.breadcrumb_lang_box > #breadcrumb {
  flex:			8 8 80%;
  margin-right:		auto;
  padding-right:	2em;
}

@media (min-width: 63.5em) {
  #breadcrumb {
    display:		block;
    padding-left:	1em;
    text-indent:	-1em;
  }

  .slide_box {
    top:		2em;
  }
}	/* Ende @media (min-width: 63.5em) */

/* Ende Breadcrumbs */

/* Sprachauswahl */

/* Sprachauswahl-Element in Container fuer Breadcrumb + Sprachauswahl */
.lang {
  flex:			0 0 content;
  white-space:		nowrap;
  margin-left:		1em;
  margin-right:		1em;
}

.lang:last-of-type {
  margin-right:		0;
}


/* Pseudoelement zur Anzeige der Sprache von Zielseiten mit anderer Sprache */
a[hreflang]:after {
  content:		" (" attr(hreflang) ")";
}

/* Ende Sprachauswahl */

/* Im HTML steht der Navigations-Block mit nav_r vor content_box. 
 * "order" zeigt nav_r rechts von content_box an. */ 
#content_box {
  order:		1;	/* flexbox: #nav_main_box */
  padding-left:		2ex;
  padding-right:	2ex;
}

#nav_r {
  order:		2;
  width:		19ex;
  border-left-style:	solid;
  padding-left:		2ex;
  padding-right:	1ex;
  right:		0;
}

/* Hack fuer IE11, damit Randlinien von #nav_l und #nav_r angezeigt werden, 
 * wenn auch nicht auf voller Hoehe.
 */
#bottom_ie11 {
  height:		0; 
  margin:		0;
  padding:		0;
}


/* Grundstruktur: Uebersicht der Ausstellungen und Veranstaltungen als Tabelle. */
table.event_list {
  width:		100%;
}


/* Uebersicht Ausstellungen und Veranstaltungen allgemein */

.event_list p {
  margin-top:		1ex;	/* TODO: Pruefen, ob hier und bei @media max-width: 58rem margin-top und -bottom = 1ex oder Standard 1em */
  margin-bottom:	1ex;
}

main.news,
table.playbill tr > td p:first-of-type, 
.news_images p:first-of-type,
.event_list td p:first-of-type {
  margin-top:		0;
}

.event_list td p:last-of-type {
  margin-bottom:	1ex;	/* nnn TODO: Pruefen, ob 1em besser */
}

.event_date {
  white-space:		nowrap;
}

.news_images,
.event_images {
/* TODO: Weiter notwendig? 
  padding-left:2ex;
  padding-right:2ex;
  margin-right:0ex;
  margin-left:0ex;
 */
  margin-bottom:	1ex;
}


/* div um img ist notwendig, um Hoehe von quadrat. Fotos oder Hochformat zu begrenzen */
td.event_images div {
  min-width:		180px;
/*  max-width:		min(540px,min(30vw, 60vh)); */
/*  max-width:		540px;	*/
  max-width: 540px;
  margin:		0px auto; 
}

div.news_images img,
td.event_images_n img,
td.event_images img,
td.event_images img.img_x {
	/* Für korrekte Höhe von Quadraten bei Fenster 360 x 760.
	 * Verursacht bei Querformat und Fenster 1076 x 2350 und bei 
	 * img_x und Fenster 320 x 480 px Abstand oben und unten */
  height:		min(60vw, 40vh);
  width:		auto;
  min-height:		120px;
  max-height:		360px;
/*  aspect-ratio:		3/2;	nnn */
}

td.event_images_n img {
	/* Für Fenster 320 x 480 px */
  height:		min(40vw, 40vh);
}

td.event_images img.img_x {
  height:		unset;
}


/* Ende Uebersicht Ausstellungen und Veranstaltungen */


/* Startseite. Passt ggfs. Einstellungen der Ausstellungsuebersicht an. */

article.news {
  display:		block;
  max-width:		calc(40em + min(30vw, 60vh));	/* max-width ( p ) + 30vw fuer Image */
}

article.news > header,
#events article > header {
  margin-top:		0;
  text-align:		left;
  margin-bottom:	0.8em;
}

/* TODO: Wird table.news noch verwendet? */
table.news {
  width:		100%;
  border-spacing:	0px;
}

table.news  td {
  padding-top:		0ex;
  padding-bottom:	2ex;
}

table.news tr > td:last-of-type {
  padding-right:	0ex;
}

/* Ende Startseite */


/* Hauptseite der Ausstellung oder Veranstaltung */

/* Titelbild */
img.event_header {
  max-height:	50vh;
}





/* Ende Hauptseite der Ausstellung oder Veranstaltung */


/* Foto-Uebersicht */

/* Flexbox fuer Seiten mit Bild-Uebersichten, damit der Container 
 * .img_idx_all_images mittig ausgerichtet wird.
 */
#img_idx main {
  -ms-flex-align:	center;	/* Hack fuer IE11, damit "margin: auto" funktioniert */
  display:      	flex;	/* notwendig fuer mittige Ausrichtung von .img_idx_all_images */
  flex-direction:	column;
  flex-grow:		1;
  margin-top:	 	1em;
  position:	 	relative;	/* Bezug fuer .browse_prev und .browse_next */
}

#img_idx nav.browse {
  margin-bottom:	3rem;
}


/* "Fotos der ..." und Untertitel der Ausstellung */
.img_idx_hdr_sub{
  line-height:		1.2;
  font-size:		1.1em; 
  text-align:		center;
  margin-bottom:	0.85em;	/* besonders fuer @media print notwendig */
}

/* Name des Kuenstlers und Ausstellungstitel als Teil von img_idx_hdr_sub */
.img_idx_hdr{
  font-weight:		bold;
  padding:		0.4ex 0; 
}



/* Hack fuer IE11, weil sonst alle Bilder in einer Zeile erscheinen */
.img_idx_all_images {
  max-width:	calc(100vw - 4ex);	/* 4ex = #content_box margin-left + margin-right */
}


/* div um alle Bilder, damit sie ein vollstaendiges Rechteck besetzen.
 *
 * .img_idx_all_images_2_col:  Bilder in max. 2 Spalten, z.B. bei 2 x 2 Bildern
 *
 * .img_idx_all_images_3_col_p:  Bilder alle Hochformat in max. 3 Spalten
 */
.img_idx_all_images,
.img_idx_all_images_2_col, 
.img_idx_all_images_3_col,
.img_idx_all_images_3_col_p,
.img_idx_all_images_4_col,
.img_idx_all_images_5_col {
  min-width:		200px;			/* = width ( .img_idx_item_* ). Sonst sitzen die Images bei sehr schmalen Viewports nicht mehr mittig. */
  display:		inline;	/* nnn TODO: Pruefen, ob notwendig */
  margin-left:		auto;
  margin-right:		auto;
  text-align:		center; 
}

/* .img_idx_all_images_2_col wird wegen der besseren Optik weiter unten ueber 
 * einen anderen Weg definiert. */

/* Max. Breite = max. Zahl der Spalten * 300 px */
.img_idx_all_images_3_col,
.img_idx_all_images_3_col_p {
  max-width:	900px;
}

.img_idx_all_images_4_col {
  max-width:	1200px;
}

.img_idx_all_images_5_col {
  max-width:	1500px;
}

/* div fuer Image 3 : 2 */
/* Wenn jedes Bild gleich breit dargestellt werden soll: */
/*   height: 140px; width: 200px;  bei Image height: 120px; width="180" (3:2) */
/*   height: 140px; width: 180px;  bei Image height: 120px; width="160" (4:3) */
.img_idx_item_3_2,
.img_idx_item_3_2_p,
.img_idx_item_4_3 {
  display:		inline-block;
  width:		200px;
  vertical-align:	top;
  text-align:		center;
}

/* .img_idx_item_panorama kann hier nicht sinnvoll verwendet werden, weil 
 * der Text-Absatz darunter entweder nicht in die Zeile der anderen Bilder 
 * passt, oder der Abstand zum Bild nicht gut aussieht. 
 * Fuer den Index muss deshalb ein Bild im Format 3:2 bereitgestellt werden.
 */

/* Korrigierte Breite fuer div fuer Image 4 : 3 */
.img_idx_item_4_3 {
  width:          180px;	/* TODO: sinnvoll? */
}

/* Bilder in max. 2 Spalten, z.B. bei 2 x 2 Bildern */
.img_idx_all_images_2_col > .img_idx_item_3_2, 
.img_idx_all_images_2_col > .img_idx_item_4_3 {
  width:	40%;
  min-width:	200px;
}

/* Bilder in max. 3 Spalten */
.img_idx_all_images_3_col > .img_idx_item_3_2, 
.img_idx_all_images_3_col > .img_idx_item_4_3 {
  width:	30%;
  min-width:	200px;
}

.img_idx_all_images_3_col_p > .img_idx_item_3_2_p, 
.img_idx_all_images_3_col_p > .img_idx_item_4_3_p {
  width:	30%;
  min-width:	140px;
}

.img_idx_item_3_2 > p,
.img_idx_item_3_2_p > p,
.img_idx_item_4_3 > p {
  padding:		0 1ex 1.5em 1ex;
  margin:		0;
/* nnn
  margin-top:		0.5ex;
  margin-bottom:	1.5em;
  margin-left:		1ex;
  margin-right:		1ex;
*/
}

/* Ende Foto-Uebersicht */


/* Foto-Seiten */

#slide,
#slide body,
#slide #content_box {
  background-color:	#eeeeee;
}

.slide_box {
  padding-bottom:	1em;
}

/* Bild ueberdeckt Menues */
#slide main {
  display:	block;
  width:	100%;
/*  height:	98%;	nnn */
  position:	absolute;
  margin:	0;
  padding-top:	0px;	/* = .slide_close top */
  top:		2.5em;	
  left:		0;
  text-align:	center;
}

/* Bild mit weissem Hintergrund */
#slide.slide_bg_white body,
#slide.slide_bg_white #content_box {
  background-color:   #ffffff;
}


nav .browse_prev,
.browse_prev {
  left:		0.5rem;
}

nav .browse_next,
.browse_next {
  right:	0.5rem;
}

.slide_close,
.browse_prev,
.browse_next {
  line-height:		1.2;
  border-radius:	0.2em;
  border-style:		solid;
  border-width:		1px;
  padding-left:		1ex;
  padding-right:	1ex;
  text-decoration:	none;
  text-align:		center;
}

nav .slide_close,
nav .browse_prev,
nav .browse_next {
  border-radius:	0.5rem;
  width:		3rem;
  font-size:		2rem;
  border-width:		2px;
  padding:		0;
}

/* Hack fuer IE11, weil :focus-within dort nicht funktioniert.
 *
 * Ein zusaetzlicher Block zum nachfolgenden ist notwendig, weil IE11 
 * Bloecke mit :focus-within auch bei keiner der anderen Bedingungen
 * anwendet. 
 */
nav .slide_close:hover,
nav .browse_prev:hover,
nav .browse_next:hover {
  background-color:	#ffffff;
  font-weight:		bold;
}

/* Wiederholung des vorherigen Blocks mit allgemein gueltigen Bedingungen */
nav .slide_close:focus-within,	/* :focus-within funktioniert nicht bei IE11 */
nav .browse_prev:focus-within,
nav .browse_next:focus-within,
nav .slide_close:hover,
nav .browse_prev:hover,
nav .browse_next:hover {
  background-color:	#ffffff;
  font-weight:		bold;
}

.slide_close {
  position:	absolute;
  top:		0px;
  right:	calc(0.5rem - 4px);
}

nav .browse_prev,
nav .browse_next {
  position:	absolute;
  top:		0rem;
}

/* Blaettern der Bilder mit < bzw. >, Position bei Einzelbild */
.slide_box .browse_prev,
.slide_box .browse_next {
  position:	fixed;
  top:		65vh;
}

@media (min-height: 400px) {
  .slide_box .browse_prev,
  .slide_box .browse_next {
    top:	50vh;
  }
}

/* Hochformat: Position fuer < und > aus der Viewport-Breite ableiten, damit 
 * die Pfeile moeglichst noch neben dem Bild sind. 
 */
@media (orientation: portrait) {
  .slide_box .browse_prev,
  .slide_box .browse_next {
    top:	55vw;
  }
}

@media (orientation: portrait) and (min-width: 600px) {
  .browse_prev,
  .browse_next {
    top:	50vw;
  }
}


/* Container fuer Bild und Beschriftung */
.img_container {
  width:	calc(100vw - 8.5rem);
  margin-left:	auto;
  margin-right:	auto;
  text-align:	center;
}


/* .img_container_ratio_x fuer Bilder mit exotischem Seitenverhaeltnis.
 *
 * Bei mehreren Bildern nebeneinander muss ein div mit .img_box_n
 * als Kind von .img_container_ratio_3_2 bzw. .img_container_ratio_4_3 
 * verwendet werden.
 *
 * Die Beschraenkung von max-height auf 720 px (= max. Bildhoehe) ist fuer 
 * Seiten mit zu schmalen Bildern und Bildnachweis 
 * (z.B. 2020_heinz/heinz_metropolis.html) notwendig, damit der Bildnachweis 
 * bei sehr breiten Fenstern nicht weiter nach rechts rutscht. */
.img_container_ratio_2_1, 
.img_container_ratio_3_2,
.img_container_ratio_4_3,
.img_container_ratio_16_9,
.img_container_ratio_panorama,
.img_container_ratio_x {
  display:	block;
  margin-left:	auto;
  margin-right:	auto;
  max-width:	1080px;		/* width von img 7/* im Querformat */
  max-height:	min(720px, calc(100vh - 15em)); /* header + hamburger + Bildbeschriftung */
  position:		relative;
}

/* Ergänzung für div.img_container_ratio_*, wenn div.img_container_ratio_*
 * einen Bildnachweis .credits* enthält: 
 *
 * Wegen "display: block" von .img_container_ratio_* sitzt .credits* unter
 * dem unteren Rand von .img_container_ratio_*. 
 * .has_credits* schafft Platz für .credits*  */

/* Ergänzung für einzeiligen Bildnachweis .credits*: */
.has_credits {
  margin-bottom: 2em;
}

/* Ergänzung für zweizeiligen Bildnachweis .credits*: */
.has_credits_2 {
  margin-bottom: 3em;
}

/* Ergänzung für vierzeiligen Bildnachweis .credits*: */
.has_credits_4 {
  margin-bottom: 5.5em;
}


/* Panorama-Foto */
.img_container_ratio_panorama {
  width:		100%;
  overflow-x:		scroll;	/* Scrollbalken anzeigen */
  overflow-y:		hidden;
}


/* Image Container mit mehreren Bildern nebeneinander.
 *
 * .img_box_n muss je nach Seitenverhaeltnis mit 
 * als Kind von .img_container_ratio_3_2 oder .img_container_ratio_4_3 
 * verwendet werden. 
 *
 * Die Flexbox kann nicht von .img_container_ratio_* uebernommen werden, weil
 * dann ein eventueller Bildnachweis .credits* ebenfalls Teil der Flexbox 
 * waere und nicht unter den Bilder stehen wuerde, sondern daneben.  */
.img_box_n {
  aspect-ratio:		inherit;
  display:		flex; 
  flex-direction:	row; 
  flex-wrap:		nowrap; 
  justify-content:	space-between;
  width:		unset;
  min-height:		120px;	/* nnn */	/* verhindert Auseinanderdriften bei Fenstern mit zu wenig Hoehe */
}

/* Seitenverhaeltnis 2:1 */
.img_container_ratio_2_1 {
  aspect-ratio:	2/1;
}

.img_container_ratio_panorama,
.img_container_ratio_3_2 {
  aspect-ratio:	3/2;
}

.img_container_ratio_4_3 {
  max-width:	960px;		/* width von img 7/* im Querformat */
  aspect-ratio:	4/3;
}

.img_container_ratio_16_9 {
  max-width:	1280px;		/* width von Video 1280 x 720 mit 16:9 */
  aspect-ratio:	16/9;
}		


.img_box_n picture {
  flex:		auto;
}

.img_container_ratio_panorama picture {
  height:		100%;
}


.img_container_ratio_2_1 img,
.img_container_ratio_3_2 img,
.img_container_ratio_3_2 video,
.img_container_ratio_4_3 img,
.img_container_ratio_panorama img, 
.img_container_ratio_16_9 img,
.img_container_ratio_16_9 video,
.img_container_ratio_x img {
  object-fit:	scale-down; 
  width:	100%;
  height:	auto;
/*  min-width:	180px;	nicht setzen: verschiebt das Foto bei Fenstern mit b < 300 px */
  max-width:	100%;
  max-height:	100%;

/* nnn
  max-height:	100%;
  margin:	auto;
  */
}


/* #events article,	nnn TODO: Pruefen, ob "max-width:unset;" fuer #events article notwendig */
.img_container_ratio_panorama picture img {
  width:	unset;
  max-width:	unset;
}


.img_box_n img {	/* nnn Block notwendig? */
/*  margin:	auto;	nnn */
  width:	unset;
  min-width:	unset;
  max-width:	100%;
  height:	100%;
  max-height:	100%;
}


/* TODO nnn: loeschen? */
/* Nur bei Bildnachweis: Container fuer .img_container_ratio_* und .credits */
.img_credits_box {
  display:		inline-block;
}


/* Absatz "Foto: ...".   .credits_p: Hochformat, .credits_s: Quadrat */
/* TODO: Pruefen, ob "margin-left: auto; margin-right: auto;" hier anstatt 
 * bei .credits_p und .credits_s gesetzt werden kann. 
 * 2024_jodel_goes_south/konzert_dd35.html muesste dann nicht foto_p sein. */
.credits_p,
.credits_s,
.credits {
  margin-left:auto;
  margin-right:auto;
  text-align:right;
  font-size:	0.8em;
  position:	absolute;
  right:	0;
  line-height:	1.3;
}

/* Bildnachweis fuer Bilder im Hochformat */
/* Allgemein: .credits mit
 *
 *     Pos. right = 0,5 - Imagebreite / ( Containerbreite * 2 ) 
 *
 *                = 0,5 - 1 / ratio * Imagebreite / Imagehoehe / 2
 *
 * Wenn die bisherige Breite von .credits in % vorliegt: 
 *
 *     Pos. right = 50% - width_in_% / 2		*/

.img_container_ratio_3_2 .credits_p {
  right:	27.8%;	/* = 0,5 - 2/3 * 240/360 / 2 */
}

.img_container_ratio_4_3 .credits_p {
  right:	21.9%;	/* = 0,5 - 3/4 * 270/360 / 2 */
}

/* Bildnachweis fuer quadrat. Bilder */
.img_container_ratio_3_2 .credits_s {
  right:	16.7%;	/* = 0,5 - 2/3 * 1 / 2 */
}

.img_container_ratio_4_3 .credits_s {
  right:	12.5%;	/* = 0,5 - 3/4 * 1 / 2 */
}



/* Container fuer Bildlegenden: Basis fuer 2 Legenden nebeneinander 
 * .img_caption_container*_p fuer Hochformat */
.img_caption_container, 
.img_caption_container_p,
.img_caption_container_3,
.img_caption_container_3_p {
  width:		100%;
  max-width:		calc(1.5 * min(720px, calc(100vh - 15em)));
  margin-left:		auto;
  margin-right:		auto;
  display:		flex; 
  justify-content:	center; 
  flex-wrap:		nowrap;
}

/* Hochformat: Max. Textbreite ist hier die Breite des quadrat. Formats. 
 * Damit hat der Text etwas mehr Platz. */
.img_caption_container_p,
.img_caption_container_3_p {
/*  max-width:		calc(min(720px, calc(100vh 15em)) * 2 / 3); */
  max-width:		min(720px, calc(100vh - 15em));
}

/* Bildlegende im Container: Basis fuer zwei Legenden nebeneinander */
.img_caption_container > div,
.img_caption_container_p > div,
.img_caption_container_3 > div,
.img_caption_container_3_p > div {
  flex-basis: 		45%;
  margin-left:		1em;
  margin-right:		1em;
}

.img_caption_container_3 > div,
.img_caption_container_3_p > div {
  flex-basis: 		30%;
}


/* Ende Foto-Seiten */


/* Musikal. Programm */

table.playbill {
  margin-top:-2ex;
  border-spacing:2ex;
  margin-left:auto;
  margin-right:auto;
}

table.playbill tr > td p:last-of-type {
  margin-bottom:0;
}
/* Ende Musikal. Programm */

/* Impressum */

table.legal {
  border-spacing:	0 1ex;
}

/* TODO: Pruefen, ob padding-top 1em und 1ex vereinheitlicht werden koennen */
table.legal tr.lg_design {
  padding-top:		1ex;
}

table.legal tr.lg_item > td {
  padding-top:		1em;
}

table.legal td {
  padding-right:	1ex;
}

table.legal td:last-of-type {
  padding-right:	0em;
}

/* Impressum: Tabelle mit Bildnachweisen */
table.legal table {
  border-spacing:	0;
  padding-left:		0;
}

table.legal table td:last-of-type {
  padding-bottom:	1ex;
}
/* Ende Impressum */




/* Fehlerseiten */
#error article {
  max-width:	35em;
  margin-left:	auto;
  margin-right:	auto;
  hyphens:	auto;
}

#error h1 {
  line-height:	1.5;
  text-align:	left;
}

/* Ende Fehlerseiten */

/* Anfang Liste geladener Kuenstler: kuenstler.html  */

/* Links zu alphabet. Ankern */
div.letters { 
  display:		block;
  text-align:		center;
}

table.artist_list td {
  padding-left:		1ex;
  vertical-align:	top;
}

table.artist_list col.item_indent {
  width:		4ex;
}

table.artist_list td.artist,
table.artist_list td > p {
  margin-top:		0.5ex;
  margin-bottom:	0ex;
}

table.artist_list td.artist,
table.artist_list td.artist > p {
  padding-left:		calc(5ex + 1px);
}

table.artist_list td.artist {
  padding-top:		1.3em;
  text-indent:		-5ex;
}

/* Ende Liste geladener Kuenstler: kuenstler.html  */


/* Flexible Anordnung der Seitenelemente je nach Fensterbreite
 *
 * mobile first:  Bei schmalen Fenstern wird die Tabelle als Flexbox angezeigt. */

/* Ausstellungen, Veranstaltungen */	

.event_list tr { 
  display:			flex;
  flex-direction:		column;
  border-top-style:		dashed;
  border-width:			1px;
  padding-top:			2em;
  padding-bottom:		1em;
}

.event_list tr:first-of-type {
  padding-top:		1em;
  border-top-style:	none;
}

.event_list td {
/*  display:		block;	nnn */
  width:		100%;
/*    text-align:		center;	 nnn */
  padding:		0;
/*
    margin-left:	0ex;
    margin-right:	0ex;
    padding-top:	0.1ex;
    padding-bottom:	0.1ex;
    padding-left:	0ex;
    padding-right:	0ex;
 */

 	/* Hack fuer IE11 gegen Ueberbreite und damit .event_date und 
	 * .event_text zentriert sind. 
	 * 4ex = margin ( content_box ). 
	 * Wert fuer Darstellung ohne Navigation. 
	 * Mit Nav.-Leisten: Weitere Regel unten, @media (min-width: 45em) 
	 */
  max-width:		calc(100vw - 4ex);
}

.event_text {
  order:		2;
/*  min-width:		13em;	nnn */
}

.event_images {
  order:		1;
}

/* fuer mehrere Bilder pro Ausstellung */
header .event_images_n,		/* nnn notwendig ? */
td.event_images_n {
  display:		flex;
  flex-direction:	row;
  flex-wrap:		nowrap;	/* bei ausstellungen/.../index.html */
  justify-content:	space-around;
  align-content:	flex-start;
}

.event_images_n figure,		/* nnn notwendig ? */
.event_images_n > div {
  flex: 		1 0 45%;
  padding-left:		1ex;
  padding-right:	1ex;
}

/* Text zum Bild bei schmalen Viewports ausblenden */
td.event_images p, td.event_n_images_n p {
  display:	none;
}



/* Ende: Flexible Anordnung der Seitenelemente je nach Fensterbreite */

/* Bei ausreichender Breite: 
 *  * Navigation anzeigen, Hamburger ausblenden 
 *  * Startseite: Fotos rechts anordnen, Ausstellung als Tabelle 
 */
/* Bei Aenderung von min-width muss auch min-width der Abfragen fuer 
 * table.playbill und .event_list td angepasst werden! 
 */
@media (min-width: 45em) {

  #top_header {
    border-width:	1px;
  }

  #slide #top_header {
    border-bottom-style:	none;
  }

  #top1_de {
    font-size:	1.5em;
  }

  #top2_de,
  #top1_en,
  #top3_en {
    font-size:	1.1em;
  }

  #top2_en {
    font-size:	0.9em;
  }

  #top_header_logo {
    flex:		0 0 14em;	/* = #nav_l width + padding  */
    padding-right:	1px;		/* = #nav_l border-width */
    padding-left:	0px;
  }


  #hamburger {
    display:		none;
  }

  #slide #hamburger {
    display:		block;
  }

  #nav_main_box {
    display:		flex;
    flex-grow:		1;
    flex-flow:		row nowrap;
    z-index:		10;
  }

  /* Wenn die Navigation dauernd angezeigt wird, endet die vertikalen Linie 
   * an unteren Fensterrand und muss deshalb von #nav_l zu #nav_l_box 
   * wechseln. */
  #nav_l_box {
    position:		unset;
    border-right-style:	solid;
    border-width:	1px;
  }

  #nav_l,
  #slide #nav_l_box {
    border-style:	none;
    border-width:	0;
  }

  #slide #nav_l {
    border-right-style:	solid;
    border-width:	1px;
  }

  #slide #nav_l,
  #slide #nav_r {
    z-index:		-1;
    visibility:		hidden;
  }

  /* TODO: "#toggle_menu:checked ~ #nav_main_box #nav_l" hier weiterhin notwedig? */
  #nav_l_box,
  #toggle_menu:checked ~ #nav_l_box #nav_l {
    flex:	0 0 14em;	/* = #nav_l width + padding */
  }

  #content_box,
  #toggle_menu:checked ~ #content_box {
    flex:	1 1 auto;
  }

  #nav_r,
  #toggle_menu:checked ~ #nav_r {
    flex:	0 0 19ex;
  }

  #events #nav_r {
    flex:	0 0 15ex;
  }

  /* Hack fuer IE11, weil :focus-within dort nicht funktioniert.
   *
   * Ein zusaetzlicher Block zum nachfolgenden ist notwendig, weil IE11 
   * Bloecke mit :focus-within auch bei keiner der anderen Bedingungen
   * anwendet. 
   */
  #nav_l,
  #nav_r,
  #toggle_menu:checked ~ #nav_l_box,
  #toggle_menu:checked ~ #nav_r {
    border-bottom-style:	none;
    display:			block;
    position:			static;
    visibility:			visible;
    z-index:			10;
  }

  /* Wiederholung des vorherigen Blocks mit allgemein gueltigen Bedingungen */
  #slide #nav_l:focus-within,	/* :focus-within funktioniert nicht bei IE11 */
  #slide #nav_r:focus-within,
  #nav_l,
  #nav_r,
  #toggle_menu:checked ~ #nav_l_box,
  #toggle_menu:checked ~ #nav_r {
    border-bottom-style:	none;
    display:			block;
    position:			static;
    visibility:			visible;
    z-index:			10;
  }

  #slide #nav_r {
    margin-top:		2.5em;
  }


  /* Hack fuer IE11 gegen Ueberbreite und damit .event_date und .event_text
   * zentriert sind:
   *  26ex = width ( nav_l)
   *  15ex = width ( nav_r )
   *   4ex = margin ( content_box )
   * Summe: 45ex	Differenz von 6ex ungeklaert. 
   * Weitere Regel fuer Anzeige ohne Nav.: oben, @media (max-width: 50rem)
   */
/* nnn	TODO: Pruefen, ob notwendig 
  .event_list td {
    max-width:		calc(100vw - 51ex);
  }
  */

  /* Startseite: Ausstellung(en) als Tabelle */
  #news .event_list tr { 
    display:			table-row;
    border-style:		none;
    margin:			0;
  }

  #news .event_list td {
    display:			table-cell;
    width:		unset;
  }

  #news .event_date,
  #news .event_artist,
  #news .event_title,
  #news .event_subtitle {
    text-align:	left;
  }

  #news td.event_images p {
    display:	block;
  }

  /* Seite ohne rechte Navigationsleiste, z.B. phleps/presseberichte.html : */
  .nav_r0 .event_list td {
    max-width:		calc(100vw - 30ex);	/* TODO: Pruefen, ob notwendig */
  }
/* nnn
  td.event_images div {
    width:		min(30vw, 60vh);
  }
  */

  #news td.event_images div,	/* nnnnn NN TODO: loeschen? */
  .news_images {
    width:		min(30vw, 60vh);	/* wie .event_images */
    margin:		0 0 0 1em;
  }

  .news_images {
    float:		right;
  }

  div.news_images img {
    height:		min(20vw, 40vh);
    max-width:		min(540px, min(30vw, 60vh)); /*passend zu height bei 3:2 */
  }

  td.event_images img.img_x,
  td.event_images img,
  td.event_images_n img {
	/* Für korrekte Höhe bei Querformat und Fenster 1076 x 2350 */
    height:		min(18vw, 40vh);
	/* NNN bei Fenster 935 x 960 px wird img_x zu schmal. 
	 * Wurde deshalb nach "@media screen AND (min-width: 58em)" verschoben 
    max-width:		min(540px, min(27vw, 60vh)); /* passend zu height bei 3:2 */
  }

  td.event_images_n img {
    height:		min(15vw, 40vh);
  }

  td.event_images img.img_x {	/* Fotos breiter als 3:2 */
    max-width:		540px;
    height:		auto;
  }
  /* nnn
  .event_date, 
  .event_artist,
  .event_title,
  .event_subtitle {
    text-align:		left;
  }
  */
/* nnn
  .nav_r0 .event_list td.event_images,
  .news_images {
    width:		30vw;
  }

  td.event_images img,
  .news_images img {
    max-width:		100%;
    max-height:		40vh;
    object-fit:		scale-down;
  }
 nnn */

/* nnn 	ggfs. Breite 55ex korrigieren 
  .img_idx_all_images {
    max-width:	calc(100vw - 55ex);	/ * Hack fuer IE11, weil sonst alle Bilder in einer Zeile erscheinen * /
  }

  nnn */

  @media ( min-height: 25rem ) {

	/* Fehlerseiten */
    #error article {
      margin-top:	10vh;
    }
	/* Ende Fehlerseiten */

  }	/* Ende @media ( min-height: 25rem ) */

}	/* Ende @media (min-width: 45em) */


/* Bei schmalem Viewport: Impressum bzw. Musikprogramm verschachteln */
@media screen and (min-width: 45em) and (max-width: 58em), /* mit Menue */
       screen and (max-width: 30em) /* mit Hamburger */ {

  /* Impressum: Tabelle mit Bildnachweisen */
  table.legal table,
  table.legal table tr,
  table.legal table tr > td,
  table.legal table tbody {
    display:    block
  }

  table.legal table td:first-of-type {
    width:		90%;
  }

  table.legal table td:last-of-type {
    margin-left:	2em;
  }


  table.playbill {
    margin-top:			0ex;
  }

  table.playbill,
  table.playbill tr,
  table.playbill tr > td,
  table.playbill tbody {
    display:	block;
    margin:	1ex;
  }

  table.playbill tr {
    border-bottom-style:	dashed;
  }

  table.playbill tr:last-of-type {
    border-bottom-style:	none;
  }

  table.playbill tr > td:first-of-type {
    width:		80%;
    margin-right:	auto;
    margin-top:		1.5ex;
  }

  table.playbill tr > td:last-of-type {
    width:		70%;
    margin-left:	auto;
    margin-bottom:	1.5ex;
  }

}	/* Ende @media screen and (min-width: 45em) and (max-width: 50em),screen and (max-width: 30em) */


/* Liste von Ausstellungen oder Veranstaltungen bei breitem Viewport: Tabelle */
@media screen AND (min-width: 58em),
       print {
 
  /* Ausstellungen, Veranstaltungen */	

  .event_list tr { 
    display:			table-row;
    border-style:		none;
  }

  .event_list td {
    display:		table-cell;
    width:		unset;
    padding:		1.5em 1ex;
  }

  #news td.event_images {
    width:		min(30vw, 60vh);
  }

  #news td.event_images div {
    margin:		0 auto;
  }

  td.event_images_n {
    display:		flex;
  }

  td.event_images img {
    max-width:		min(540px, min(27vw, 60vh)); /* passend zu height bei 3:2 */
  }

  /* Groesse von Fotos nebeneinander reduzieren, damit die Fensterbreite
   * immer ausreicht. */
  td.event_images_n img {
	  /* Notwendig für exhibitions_2019.html bei Fenster 935 x 960 px. 15vw sind hier zu viel */
    height:		min(14vw, 40vh);
    max-width:		min(540px, min(27vw, 60vh));
  }

  td.event_images img.img_x {	/* Fotos breiter als 3:2 */
    width:		min(30vw, 40vh);	/* = h ( td.event_images img ) * 3 / 2  */
    height:		auto;
  }

  .event_text {
    order:		1;
/*    min-width:		13em;	nnn */
  }

  .event_images {
    order:		2;
  }

  .event_list tr > td:first-of-type {
    padding-left: 		0;
  }

  .event_list tr > td:last-of-type {
    padding-right:	0;
  }

  td .event_date, 
  td .event_artist,
  td .event_title,
  td .event_subtitle {
    text-align:		left;
  }

/* ============== Anfang min-width 58em === */

  /* Ausstellung auf der Startseite */ /* TODO: notwendig ? */
/*
  #news .event_list tr {
    display:			block;
  }
*/

  /* === ^ fuer min-width: 58em */

  /* Text zum Bild bei breiten Viewports anzeigen */
  td.event_images p, td.event_n_images_n p {
    display:	block;
  }

}	/* Ende @media screen AND (min-width: 58em), print */


@media screen AND (max-width: 55rem) {

}

@media (max-width: calc(380px + 30em) ) {

}

@media screen AND (min-width: 40em) AND (max-width: 47em),
       screen AND (max-width: 35em) {

}	/* Ende @media screen AND (min-width: 40em) AND (max-width: 47em), screen AND (max-width: 35em) */

@media (min-width: 63.5em) {

}	/* Ende @media (min-width: 63.5em) */

@media (min-height: 400px) {

}

@media (orientation: portrait) {

}

@media (orientation: portrait) and (min-width: 600px) {

}

@media screen and (min-width: 40em) and (max-width: 50em),
       screen and (max-width: 30em) {

}	/* Ende @media screen and (min-width: 40em) and (max-width: 50em), screen and (max-width: 30em) */