/* ============ */
body {
  background-color:  #ffffff;
  margin-left:       2px;
  margin-right:      2px;
  text-align:        left;
  font-family :      Arial, Helvetica, sans-serif;
  font-size :        medium;
  font-style :       normal;
}

body * {
  border-color:		#aaaaaa;
  border-width:		1px;
}

/* styling to 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:	small;	/* Hack fuer IE11, weil clip-path nicht funktioniert */
  -webkit-clip-path: none;
  clip-path: none;
  z-index: 999;
  background: white;
  text-decoration: none;
  color: #1295e6;
  text-align: left;
  padding:	2ex;
}

#skip_nav_target:focus {
  background: #084367;
  color: white;
}
/* end of skip link styling */


/* Hauptnavigation oben */
#nav_top {
  background-color:  #ffffff;
  padding-left:      0px;
  padding-right:     0px;
}

/* Druck-Ueberschrift nur bei Druck anzeigen */
.print_title {
  text-align:		center;
  display:		none;
}

nav > * > ul {
  list-style-type:  none;
}

/* ============ */
.menu_photos_comp {
  display:             flex;
  margin:              0px;
  padding:             0px;
}

.nav_photos_comp {
  border-bottom-width:    2px;
  border-bottom-style: solid;
}

.menu_photos_comp > li {
  flex:                1 1 0%;
	/* Ausgleich, damit Linie von .nav_photos_comp nicht unter die */
        /* von .nav_photos bzw. .nav_comp gezeichnet wird.             */
  margin-bottom: -2px;
}

/* Text in Nav-Tabelle zur Auswahl Fotos / Rechnertechnik */
.nav_txt_top { 
  background-color:    #e0e0e0;
  padding-left:        5px;
  padding-right:       5px;
  padding-top:         0.5ex;
  padding-bottom:      0.5ex;
  vertical-align:      top;
  text-align:          center;
  border-bottom-style: solid;
}
/* ============ */

/* Bereich "Reisefotos" aktiv, unten keine Linie */
.nav_photos {
  background-color:        #ffffff;
  border-top-left-radius:  1ex;
  border-top-right-radius: 1ex;
  border-width:            2px;
  border-style:            solid solid none solid;

	/* Abstand zwischen den Reitern */
  margin-right:            1px;
}

/* Bereich "Rechnertechnik" inaktiv */
.nav_comp {
  border-top-left-radius:  1ex;
  border-top-right-radius: 1ex;
  border-bottom-width:     2px;
  border-style:            solid;

	/* Abstand zwischen den Reitern */
  margin-left:             1px;
}


/* Neue Navigation */
/* ============ */

.top_photos {
  /* notwendig fuer Position von .menu_box mit "position absolute */
  display: inline-block;
  padding: 10px;
}

/* ============ */
.menu_box, #slide .menu_box {
  position: absolute;	/* Seiteninhalt wird verdeckt */
  top:              0;
  left:             0;

  padding-left:     0px;
/* YYY   background-color: #e0e0e0; */
  display:          none;
}

/* ============ */

.menu {
  border-right-style:	solid;
  border-bottom-style:	solid;
}

.menu , .submenu {
  list-style-type: none;
  padding-left:  0;
  margin:           0;
  background-color: #e0e0e0;
}

.menu > * > a {
  padding-right: 0.8em;
}

.menu > li , 
.submenu > li {
  line-height:         2;
  padding-left:        0.8em;	/* = padding-left ( footer #copy ) */
  white-space:         nowrap; 
	/* Ausgleich, damit Linien nicht nebeneinander sind */
  margin-top:      -1px;
  padding-right:       0px;
  border-top-style:    solid;
  border-bottom-style: solid;
  border-right-style:  solid;
}

.submenu > li {
	/* Ausgleich, damit Linien nicht nebeneinander sind */
  margin-right:       -1px;
}

.menu > li:first-of-type {
  margin-top:      0px;
}

.submenu > li:last-of-type {
  border-bottom-style: none;
}


/* Menu-Button und Fotoleiste */
.top_photos {
  display:             flex;
  background-color:    #e0e0e0;
  min-height:          74px;    /* = Hoehe nav_bg.jpg */
  padding:             0;

  /* Ausgleich des Versatzes der Linien der Nav.-Tabelle Fotos / Technik */
  margin-top:          2px;
}

	/* Checkbox verstecken */
#toggle_menu {
  display:	none;
}


#hamburger {
  flex:                0 1 content;

  display:             inline-block;
  overflow:            visible;

  margin:              5px;
  padding:            10px;
  padding-left:        0.2em;	/* ca.  2 * left (span) + width (span) */
  padding-right:       0.2em;	/* = left (span) */
  text-align:          center;
  text-decoration:     none;
  white-space: nowrap;

  color:               #ffffff;
  background-color:    #000099;  /* wie a:link */
  border:              0.2em solid #000099;
  border-radius:       0.7ex;

  vertical-align:      middle;
  font-size:           1.5em;

  cursor:              pointer;
}


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

.menu_close_symbol {
  font-size: 		105%;
}

#menu_close:hover, #menu_hamburger:hover,
#menu_close:focus, #menu_hamburger:focus {
  border-color:		#ffffff;
  cursor: 		pointer;
}


/* Voreinstellung: Hamburger */
#menu_close {
  display:	none;
}

#menu_hamburger {
  display:	inline;
}


/* nach Klick auf Hamburger: */

/* 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_main_box .menu_box {
  display:	block;
  z-index:	10;
  background-color:  #ffffff;
}

/* Wiederholung des vorherigen Blocks mit allgemein gueltigen Bedingungen */
#nav_main_box div.menu_box:focus-within,	/* :focus-within funktioniert nicht bei IE11 */ 
#toggle_menu:checked ~ #nav_main_box .menu_box {
  display:	block;
  z-index:	10;
  background-color:  #ffffff;
}

#toggle_menu:checked ~ #nav_top #hamburger #menu_close {
  display:	inline;
}

#toggle_menu:checked ~ #nav_top #hamburger #menu_hamburger {
  display:	none;
}

/* ENDE ( nach Klick auf Hamburger ) */



/* Bildleiste in Foto-Navigavtion */
.nav_img { 
  display:             flex;
  flex:                5 5 auto;
  overflow-x:          hidden;
  background-color:    #e0e0e0;
  background-image:    url(../images/nav_bg.jpg);
  background-repeat:   repeat-x;

/* Bilder zwischen den Perforationsrand setzen  */
  padding-top:         12px;
  padding-bottom:       8px;	/* ab 9px ist unten ein grauer Rand - warum auch immer */
}


/* ohne min-width schiebt der IE (von Windows 7) die Bilder uebereinander */
.nav_img a { 
  flex:                1 1 auto;
  padding-left:        2px;
  padding-right:       2px;
  min-width:           79px;
  text-align:        center;
}

.nav_img img {
  width:		75px;
  height:		50px;
}

	/* Container für Nav. links (wenn angezeigt) und Inhalt */
#nav_main_box {
  position:           relative;	/* Basis für position-absolute ( .menu_box ) */

  display: flex; 
}

/* Ende neue Navigation */


footer { 
  padding-top:        1.5ex;
  padding-bottom:     1ex;
  border-top-style:   solid;
}

	/* copyright in der Fusszeile */
footer #copy {
  padding-left:		0.8em;		/* = padding-left ( .menu > li ) */
  text-align:		left;
}
	/* Datenschutz in der Fusszeile */
footer #dprot {
  width:             24%;
  float:             right; 
  text-align:        right;
  padding-left:		1em;
  padding-right:	1ex;
}


	/* Seiteninhalt */
#content_box { 
  flex:               auto;
  margin:		1ex 1ex 2ex 1ex;
  display:            block;
}

/* Start allgemeine Einstellungen */
/* h1: Seitenueberschrift */
h1 {
  font-size: 1.5em;
  font-weight: bold;
  text-align:  left;
}

/* Textblock mittig */ 
article, .img_idx_text, #contact main {
  margin-left:	auto; 
  margin-right:	auto;
  text-align: 	left;
}


/* Textbreite zur besseren Lesbarkeit reduziert. */
article, p, .img_idx_text, .text_img_l, 
#slide main figcaption, #contact main { 
  max-width:      40em;
}

/* kein Zeilenumbruch */
.nowrap {
  white-space:	   nowrap;
}

/* Fehlerseiten */
#error article {
  margin-left:	auto;
  margin-right:	auto;
  line-height:	140%;
}

#error h1 {
  line-height:	140%;
}

@media	(min-width: 40em ) AND (min-height: 25em ) {
  #error article {
    margin-top:	10vh;
  }
}

/* Container fuer Elemente wahlweise neben- oder untereinander */
.flex_container {
  display:	flex; 
  flex-wrap:	wrap;
}

/* Flex-Items */
.flex_item, .flex_item_text {
  flex:			2; 
  margin-left:		auto; 
  margin-right:		auto; 
  margin-bottom:	auto; 
}

/* Flex-Item fuer Text */  
.flex_item_text {
  padding-right:	 2ex;
  min-width:		max(12em, calc(4ex + 300px));	/* Titelbild: b = 300 px */
  max-width:		40em; 
  text-align:		left; 
}

/* Bild auf Textseite einer Reise */
article div.img_title {
  margin-top:		0.2em; /* Ausgleich des Abstands zwischen Absatzrand und oberem Ende der Buchstaben */
  margin-right:		1em; 
  margin-bottom:	1em; 
  float:		left;
}

/* Titelbild im Flex-Item */
.flex_item_text > div.img_title {
  float:		none;
  text-align:		center;
}


table tr {
  vertical-align:	top;
}

@media	screen AND (min-width: 78ex) AND (max-width: 85ex), 
	screen AND (max-width: 60ex) {
  article div.img_title  {
    margin:		0;
    float:		none;
    text-align:		center;
  }

  /* Tabelle auf der Startseite: Bilder und Reisetitel zentriert ueber den Text setzen */
  #start table, #start table tr, #start table tr > td, 
  #start table tbody  {
    display:	block;
  }

  #start table tr {
    border-top-style:        dashed;
  }

  table tr > td {
    padding:	0;
  }

  #start table td > p:first-of-type {
    text-align:		center;
  }
}

a:link, a:visited, a:hover { 
  color:		#000099; 
  text-decoration:	underline;
}

a:active { 
  color:		#000099; 
  text-decoration:	none;
}

/* Externe Links kennzeichnen.
 * Ausnahme: Links mit Symbolen fuer Facebook und Instagram */
a[href^="https://"]:not([href*="iphleps.de"]):not([href*="iphleps.home.arpa"]):after,
a[href^="http://"]:not([href*="iphleps.de"]):not([href*="iphleps.home.arpa"]):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 der URL */
a.pdf_b:before { content:url(../images/pdf_b.gif); }

/* Einstellungen fuer Kontakt */
/* YYY OBSOLET 
table {
  border:		0;
  border-spacing:	0;
  border-width:		0;
  border-collapse:	collapse;
  padding:		0;
  margin:		0;
}

table tr {
  vertical-align:	top;
  padding:		0;
  margin:		0;
  border:		0;
  border-spacing:	0;
  border-width:		0;
}

table td {
  padding:		0;
  margin:		0;
  border:		0;
  border-spacing:	0;
  border-width:		0;
}
 YYY */


/* Zentrierte Bloecke gleicher Breite nebeneinander, bei Bedarf mit Umbruch: */
/* Container    */
.flexContainerCenter {
  display:        flex; 
  flex-direction: row; 
  flex-wrap:      wrap;
}

/* Block mit zentriertem Inhalt: */
.flexContainerCenter > div {
  flex:           1 1 auto; 
  padding-left:   1ex; 
  padding-right:  1ex; 
  margin:         auto; 
  text-align:     center;
}

.flexContainerCenter > div  > p {
  margin:	  0.5ex 0 1.5em 0;
}

/* Ende allgemeine Einstellungen */


/* Startseite */

/* Bei schmalen Fenstern werden Bilder und Reisetitel ueber den Text gesetzt
 * und zentriert. 
 * Grenzen wie article div.img_title 
 */

#start table td {
  padding:		0 1ex 0 1ex;
}

#start table td:first-of-type {
  padding-left:		0;
}

#start table td:last-of-type {
  padding-right:	0;
}

/* /images/navl_*.jpg */
#start table img {
  width:		180px;
  height:		120px;
}

/* Ende Startseite */

/* Kontakt, Datenschutz */

/* Tabelle ohne Zwischenraum zwischen den Zellen */

#contact table {
  border:		0;
  border-spacing:	0;
  border-collapse:	collapse;
}

#contact table tr {
    /* img ist ein Inline-Element. Die Zeile ist normalerweise um den 
     * Durchschuss hoeher. Dadurch entsteht ein Abstand zwischen den Images.
     * Mit "line-height: 0;" werden die Images ohne Abstand uebereinander
     * gesetzt.
     *
     * Siehe https://stackoverflow.com/questions/11126685/why-does-container-div-insist-on-being-slightly-larger-than-img-or-svg-content
     * und   https://developer.mozilla.org/en/CSS/line-height
     */
  line-height:		0;
}

#contact table td {
  padding:		0;
}

/* Ende Kontakt, Datenschutz */



/* Seite mit Bild-Uebersicht */
/* Index-Seite: */

/* Flexbox, 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:	 	1ex;
}

/* index.html: Container zum Blaettern, Verweis auf Seite mit Bild-Uebersicht */
nav.browse {
  display:		flex;
  flex-flow: 		row wrap;
  justify-content:	space-between;
  align-items:		flex-start;
  margin-top:		1em;	/* Ausgleich fuer margin-top( nav.browse p ) */
  margin-bottom:	2em;
}

/* "zum ersten Bild" oben */
#img_idx nav.browse {
  margin-top:		0;
  margin-bottom:	0;
}

/* "zum ersten Bild" unten */
#img_idx nav.browse_bottom {
  display:		block;
  margin-top:		1ex;
  margin-bottom:	1ex;
  margin-left:		auto;
  white-space:		nowrap; 
}

nav.browse p {
  flex: 		auto;
  margin-top:		0;
  margin-bottom:	0;
}

nav.browse p.browse_idx {
  padding-right:	2em;
  text-align:		left;
}

nav.browse p.browse_first {
  white-space:		nowrap; 
  text-align:		right;
}
  

/* Blaettern auf der Hauptseite oder der Bild-Uebersicht */

nav.browse > a:hover { 
  font-weight:		bold;
}

a.browse_prev, a.browse_next {
  border-width:		2px;
  border-style:		solid;
  border-radius:	0.3em;
  padding-left:		1ex;	/* anstatt width */
  padding-right:	1ex;
  text-align:		center;
  text-decoration:	none;
}

#img_idx nav.browse {
  display:	block;
}

/* nav.browse notwendig zum Abgrenzen zu <a class="browse_next" ...> im Text */
#img_idx nav.browse .browse_prev, 
#img_idx nav.browse .browse_next {
  position: 		absolute;
  top:			0.1ex;	/* ausgerichtet an #img_idx h1  */
}

#img_idx nav.browse .browse_prev {
  left:			0; 
}

#img_idx nav.browse .browse_next {
  right:		0; 
}

/* Seitenueberschrift: Ausrichten an .browse_prev und .browse_next */
#img_idx h1 {
  margin-top:		0;	/* = position top ( .browse_* ) */
  padding-left:		4ex;	/* = Breite ( .browse_* ) */
  padding-right:	4ex;
  text-align:		center;
}

nav.browse, .img_idx_text, .img_idx_all_images {
  max-width:	calc(100vw - 3ex);	/* Hack fuer IE11, weil sonst alle Bilder in einer Zeile erscheinen */
  					/* 2ex = margin-left + margin-right ( #content_box ) */
					/* Mit 3ex hat der IE11 auch Platz fuer den Scrollbalken. */
}
/* div um alle Bilder, damit sie ein vollstaendiges Rechteck besetzen */
.img_idx_all_images {
  min-width:	200px;			/* = width ( .img_idx_item_* ). Sonst sitzen die Images bei sehr schmalen Viewports nicht mehr mittig. */
  display:     inline;
  margin-left: auto;
  margin-right: auto;
  text-align: center; 
}


/* 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_4_3, .img_idx_item_panorama {
  display:        inline-block;
  height:	  140px;
  width:          200px;
  vertical-align: middle;
  text-align:     center;
}

/* notwendig fuer vertikale Zentrierung, speziell bei Panoramen mit height < 120px */
.img_idx_item_3_2 > div, .img_idx_item_4_3 > div, .img_idx_item_panorama > div {
  display:		flex;
  justify-content:	center;
  align-items:		center;
  height:		100%;
}

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

/* Korrigierte Breite fuer div fuer Panorama-Image  */
/* Wenn jedes Bild gleich breit dargestellt werden soll: */
/*   width: = 400px = 2 * .img_idx_item_3_2 */
/* bei Image-Breite = 380 px */
.img_idx_item_panorama {
  width:          400px;
}


/* Ende zu Bild-Uebersicht */


/* Inhalt einer Seite mit Bild */

#slide body {
  background-color:  #222222;
}

/* Fusszeile und Navigation Fotos / Technik ausblenden */
#slide .nav_photos_comp, #slide footer {
  display: none;
}

/* Foto-Navigation kleiner darstellen, damit mehr Platz fuer das Einzelbild bleibt */

@media screen {

  #slide .top_photos {
    min-height:	44px;
  }

  #slide .nav_img { 
    background-size:	6px;
  /* Bilder zwischen den Perforationsrand setzen  */
    padding-top:		8px;
    padding-bottom:	0px;
  }

  #slide .nav_img a {
    padding-left:		 1px;
    padding-right:	 1px;
    min-width:		44px;
  }

  #slide .nav_img img {
    width:		42px;
    height:		28px;
  
  }

  /* bei Seite mit Einzelbildern: Hamburger trotz Breite anzeigen */
  #slide #hamburger {
    display: 	inline-block;
    font-size: 	medium;
    padding:	0.5ex;
    margin:	0.5ex;
    border-radius:       0.8ex;
  }

}	/* Ende @media screen */

#slide main {
  /* Fuer IE11 notwendig, damit Bild bei kleinem Viewport schrumpft */
  display:           block;

  max-width:	calc(1080px + 6rem);	/* = max img + 2 * width ( .browse_next ) */
  margin-left:		auto;
  margin-right:		auto;
}


#slide nav.browse {
  display:		block;
}

.slide_box {
	/* Hack fuer IE11, weil "position: relative" fuer <main> dort 
	 * nicht reicht, um #slide .close und #slide .browse_* mit 
	 * "position: absolute" zu positionieren.
	 */
  position:		relative;
  max-width:		calc(1080px + 10rem);
}


/* damit .close nicht so am Rand klebt und die Pfeile zum 
 * Blaettern mittig sitzen 
 */
#slide .browse a {
  margin-left:		0.25rem;
  margin-right:		0.25rem;
}

/* Box zum Schliessen der Einzelbild-Ansicht */
#slide .close {
  position: 		absolute; 
  top:   		0rem; 
  width: 		2rem; 
  border: 		2px solid white; 
  border-radius:	0.3rem;
  background-color: 	#444444;
}

#slide .browse_prev { 
  left:           0;
}

#slide .browse_next, #slide .close { 
  right:          0;
}

#slide a.close, #slide a.browse_prev, #slide a.browse_next {
  color:  		#ffffff;
  text-decoration:	none;
}

#slide a.close:hover {
  background-color:	#ffffff;
  color:  		#000099;	/* wie a:link */
}


/* Blaettern der Bilder  mit < bzw. > */
#slide .browse_prev, #slide .browse_next { 
  position:     	absolute;
  top:			 8vh;
  height: 		50vh;
  padding-top:		calc(30vh - 2rem);
  padding-left:		0ex;	/* anstatt width */
  padding-right:	0ex;

  border-style:		none;
  font-size:    	4rem;
  width: 		calc(2rem + 4px);	/* = .close ( width + 2 * border-width */
}


/* Hochformat: Position fuer < und > aus der Viewport-Breite ableiten, damit 
 * die Pfeile moeglichst noch neben dem Bild sind. 
 */
@media (orientation: portrait) {
  #slide main .browse_prev, 
  #slide main .browse_next {
    padding-top:	calc(30vw - 2rem);
  }
}


/* Ende Inhalt einer Seite mit Bild */


/* Seite mit Einzelbild */

#slide #content_box {
  margin:		0 auto 0 auto;
  color: 		#ffffff;
  text-align:     center;
}

#slide #breadcrumb {
  display:	none;
}

main {
  position:		relative;	/* OBSOLETE ???? Basis für position-absolute ( .close, .browse_prev und .browse_next ) */
}

/* Bild auf Einzelseite */
#slide main figure { 
  width:	calc(100vw - 6rem);
  max-width:	1080px;		/* width von img 7/* im Querformat */
  margin:         1ex auto 1em auto;
  text-align:     center;
}

/* .img_container_ratio ist veraltet und soll durch .img_container_ratio_3_2
 * ersetzt werden */
.img_container_ratio, .img_container_ratio_3_2, .img_container_ratio_4_3, .img_container_ratio_panorama {
  max-width:	1080px;		/* width von img 7/* im Querformat */
  max-height:	calc(100vh - 3rem - 8em); /* header 2,7rem + Bildbeschriftung */
  aspect-ratio:	3/2;
  margin-left:	auto;
  margin-right:	auto;
}

.img_container_ratio_4_3 {
  aspect-ratio:	4/3;
}

/* Panoramabild */
.img_container_ratio_panorama {
  overflow-x:		scroll;	/* Scrollbalken anzeigen */
  overflow-y:		hidden;
  /* Reihenfolge: Balken Hintergrund, funktioniert nur bei Firefox */
  /* scrollbar-color: black rgba(250, 250, 250, 0.3); */
}

/* aus https://css-tricks.com/the-current-state-of-styling-scrollbars-in-css/ */
/* Foreground */ /*
.img_container_ratio_panorama::-webkit-scrollbar-thumb { 
  background:	black;
}   */

/* Background */ /*
.img_container_ratio_panorama::-webkit-scrollbar-track { 
  background:	rgba(250, 250, 250, 0.3);
}   */

.img_container_ratio_panorama picture {
  height:		100%;
}


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

#slide main .img_container_ratio_panorama picture img {
  max-width:		unset;
}

#slide main figcaption { 
  margin-left:  auto;
  margin-right: auto; 
  margin-top:    0.5em;
  padding:       0.5em;
  margin-bottom: 0.5em;
}

#slide main figcaption > p:first-of-type {
  margin-top:	0;
}

/* Bildtext linksbuendig. Meistens figcaption.left */
.left {
  text-align:     left;
}

/* Bei schmalen Fenstern und entsprechend markierten figcaption-Bloecken: 
 * Automat. Zeilenumbruch */
@media (max-width: 44ex) {
  figcaption.hyphens {
    hyphens: auto;
  }
}

#slide figure a {
  color:		#c0c0ff; 
}

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

/* Text zu Bild 4:3 */
.text_img { 
  max-width:     720px;
  text-align:    center;
  margin-top:    1em;
  margin-bottom: 3em;
}

/* Text zu Bild 3:2 */
/* Wird in 2018_oman/dir.css durch max-width: 40em; (analog .img_idx_text)  */
/* ueberschrieben.  */
/* ZZZ wird durch figcaption ersetzt */
.text_img_3_2 { 
  max-width:     810px;
  text-align:    center;
  margin-top:    1em;
  margin-bottom: 3em;
}

/* Wie .text_img_3_2 in 2018_oman/dir.css, aber linksbündig.	*/
/* Bei Texten mit mehreren Absaetzen soll stattdessen		*/
/*     <div class="img_idx_text"><p> ...				*/
/* verwendet werden.						*/
/* ZZZ wird durch figcaption class="left" ersetzt */
.text_img_l { 
  text-align:    left;
  margin-top:    1em;
  margin-bottom: 3em;
}

/* Text zu Bild im Hochformat  (OBSOLETE) */
.text_img_p { 
  max-width:     540px;
  text-align:    center;
  margin-top:    1em;
  margin-bottom: 3em;
}

/* Absatz "Foto: ..." .foto_p: Hochformat, .foto_s: Quadrat */
div.foto, div.foto_p, div.foto_s { 
  margin-top:   2px; 
  margin-left:	auto;
  margin-right:	auto;
  text-align: right;
  font-size:   80%;
}

/* Bildnachweis fuer Bilder im Hochformat */
/* Allgemein: .foto mit width = ( Imagebreite / Imagehoehe ) * 1 / ratio */
.img_container_ratio_3_2 div.foto_p {
  width:                44%;    /* = 2/3 * 2/3 fuer img_container_ratio_3_2 */
}

.img_container_ratio_4_3 div.foto_p {
  width:                56.2%;  /* = 3/4 * 3/4 */
}

/* Bildnachweis fuer quadrat. Bilder */
.img_container_ratio_3_2 div.foto_s {
  width:                66.66%; /* = 1/1 * 2/3 */
}

/* Bildnachweis fuer quadrat. Bilder */
.img_container_ratio_4_3 div.foto_s {
  width:                75%;    /* = 1/1 * 3/4 */
}

/* figcaption fuer Bild mit <div class="foto"> ... </div>  */
/* TODO: 
 * Bei 2025_namibia/020_ue*.html schon verwendet, aber vorerst inaktiv: 
 * Beim Aktivieren muss auch 
 *    templ/templ/template_foto_figcaption.html 
 * aktiviert wrden. 
#slide figcaption.foto {
  margin-top: 1.5em;
}
 */

/* Wenn Breite reicht: Menu-Button verstecken, Navigation immer anzeigen.
 * Mit 78ex werden neben der Nav.-Leiste in der Bild-Uebersicht noch 2 Bilder
 * nebeneinander angezeigt.
 */
@media (min-width: 78ex) {
  #hamburger {
    display: none;
  }

  .menu_box {
    flex:             0 0 content;
    display: block;
    position: static;
    border-right-style:  solid;
  }

  .menu {
    border-right-style:	none;
  }

  nav.browse, .img_idx_text, .img_idx_all_images {
    max-width:		calc(100vw - 30ex);	/* Hack fuer IE11, weil sonst alle Bilder in einer Zeile erscheinen */
  						/* 30ex ist derzeit die Breite von <div class="menu_box"> */
  }

}	/* Ende @media (min-width: 78ex) */


/* --- print --- */
@media print {
  /* Navigationselemente ausblenden */
  .nav_photos_comp, 
  #toggle_menu:checked ~ #nav_main_box .menu_box,
  #toggle_menu:checked ~ #nav_top #hamburger #menu_close, 
  #toggle_menu:checked ~ #nav_top #hamburger #menu_hamburger, 
  .menu_box, #slide .menu_box, #hamburger, 
  main nav, #slide main nav, 
  nav.browse, #img_idx nav.browse_bottom,
  .browse a, 
  footer #dprot {
    display:		none;
  }

  body, #slide body {
    background-color:	white;	/* "unset" funktioniert bei IE11 nicht */
  }

  a:link, a:visited, a:hover, a:active, 
  #slide figure a { 
    color:		#000000; 
    text-decoration:	none;
  }

  .print_title {
    display:	block;
  }

  	/* mit Linie abschliessen, falls Film-Hintergrund nicht angezeigt wird */
  .nav_img { 
    border-bottom-style:	solid;
  }

  .img_idx_all_images {
    max-width:	100vw;		/* Hack fuer IE11, weil sonst alle Bilder in einer Zeile erscheinen */
  }

  #slide #content_box {
    margin:		0 auto 0 auto;
    max-width:		100%;
    color: 		#000000;
  }

  #slide #breadcrumb, #slide footer {
    display:	block;
  }

  /* Panoramabild */
  .img_container_ratio_panorama {
    overflow-x:		hidden;	/* keinen Scrollbalken anzeigen */
    overflow-y:		hidden;
  }

  .img_container_ratio_panorama picture {
    height:		auto;
  }

  #slide main .img_container_ratio_panorama picture img {
    max-width:		100%;
  }

  footer #copy {
    position:		fixed; 	/* am unteren Rand jeder Seite */
    bottom:		0;

    width:		100%;
    padding-top:	1em;
    padding-left:	0;
    padding-right:	0;
    text-align:		center;
  }

  /* Bei Druckausgabe unterdrueckt */
  .print_none {
    display:	none;
  }

}	/* Ende @media print */