/* ******************************************** */
/*                                              */
/*  Zentrale Datei zur Definition von Formaten  */
/*                                              */
/* ******************************************** */

html {
        box-sizing: border-box;
        }

/* Auskommentiert 2021-04-19      */
/*  *,                            */
/*  ::before,                     */
/*  ::after {                     */
/*          box-sizing: inherit;  */
/*          }                     */

body {
        margin: 5px auto;
        max-width: 1366px;
        font-family: sans-serif;
        color: #113355;
        }

article,
section,
aside {
        border-radius: 0px 0.5em 0px 0.5em;
        border: 1px solid;
        padding: 5px;
        margin: 10px;
        }

header {
		height: 44px;
        border: 1px solid;
		border-radius: 0px 0.5px 0.5em 0.5em;
        padding: 5px;
        margin: 10px;
        background-color: #E4EBF2;
        border-color: #8A9DA8;
        }

header p {
        font-size: 1.0em;
		font-weight: bold;
        line-height: 1.0em;
        margin-top: 8px;
        }

header img {
        width: 8em;
		padding-top: 5px;
		padding-left: 3px;
        margin-right: 18px;
        float: left;
        }

nav {
		border-radius: 0px 0.5em 0.5em 0.5em;
		border: 1px solid;
        padding: 5px;
		margin-bottom: 10px;
		float:left;
        font-size: 1em;
        max-width: 11.4em;
        background-color: #F1F6FC;
        border-color: #8A9DA8;
        }

nav ul {
		padding: 0px;
		margin: 0px;
        }

nav li {
        list-style: none;
        margin: 0;
        padding: 0.1em;
        }

nav a {
        display: block;
        padding: 0.1em 5px;
/*        font-weight: bold;  */
        padding: 5px;
        }

nav ul a:hover,
nav ul a:active {
        background-color: #6688AA;
        color: #EEFFFF;
        }

nav ul a:visited, {
        background-color: #AA8866;
        color: #EEFFFF;
        }

main {
        border-radius: 0px 0.5em 0px 0.5em;
        border: 1px solid;
        padding: 32px;
        margin: 10px;
        display: block;
        background-color: #F1F6FC;
        border-color: #8A9DA8;
    	margin-left: 12.5em;
    	/* min-width: 16em;  Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
        }

section {
        /* background: #F1F3F4; */
        background-color: #F1F6FC;
        border-color: #8A9DA8;
        }

article {
        background: #EEF4FF;
        border-color: #8A9DA8;
        }

aside {
        background-color: #88AACC;
        border-color: #8A9DA8;
        }

footer {
        clear: both;
        background-color: #F1F6FC;
        border: 1px solid;
        border-color: #8A9DA8;
        border-radius: 0.5em 0.5em 0px 0.5px;
        margin: 10px;
        }

footer p {
        padding: 5px;
        }

/* Allgemeine Klasse fuer Schatten fuer alle Bilder */
img {
	box-shadow: 3x 3px 4px #aaa;
}

/* Ausnahme fuer keinen Schatten bestimmte Bilder */
img.no-shadow {
	box-shadow: none;
}

/* Taste-drueck Effekt bei amazon-Bildern */
img.amazon-link {
    box-shadow: 5px 5px 10px grey; 
	margin: 0px 2px 2px 0px;
}

img.amazon-link:hover {
    box-shadow: 3px 3px 10px grey; 
	margin: 2px 0px 0px 2px;
}

/* Klasse zum Testen von Schatten fuer alle Bilder */
img.shadow {
	box-shadow: 3px 3px 5px #aaa;
}

/* Zur Einbindung von Fußzeilen bei den Lightbox-Bildern */

/* für Bilder in Andalusien Reisebericht */
.align-center {
	text-align:center;
}	
	
.outside {
	display: inline-table;
	}
	
.container {
	display:flex;
 	justify-content: center;
 	width:100%;
}

.figure {
    border: thin #c0c0c0 solid;
	text-align-last: center;
/*	align-self: baseline;  */
	padding: 5px;
	margin: 10px;
    border-radius: 5px 5px 5px 5px;
}

/* Schatten-Effect nun bei der Box anstatt bei den amazon-Links */
/* margin um 3 erhöht, damit die Boxen nicht ineinander rutschen beim hover */
.figure-img {
	padding: 5px;
    box-shadow: 3px 3px 5px grey; 
	margin: 3px 5px 5px 3px;
}

/* hover-Effect nun bei der Box anstatt bei den amazon-Links */
.figure-img:hover {
	padding: 5px;
    box-shadow: 3px 3px 5px grey; 
	margin: 5px 3px 3px 5px;
}

.figure-pano {
	padding: 5px 36px 5px 36px;
	width: 720px;
}

.figcaption {
    color: #222;
    font: italic smaller sans-serif;
	text-align: center;
	font-size: 0.65em;
    padding: 3px;
}

.figcaption-img {
	max-width: 234px;
}

.figcaption-amazon {
	width: 234px;
}

.figcaption-pano {
/*    max-width: 834px;  */
}

.figcaption-pano-amazon {
        font-size: 1em;
        font-weight: bold;
}

.bilder {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}

.example-image-link {
cursor: zoom-in;
}
	
/* zum Einr&uuml;cken von <li>-Element bei /kanarische_inseln/ */
.abstand {
	position: relative;
	padding-left: 20px;
}
	
h1 {
        font-size: 1.5em;
        font-weight: bold;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        }

h2 {
        font-size: 1.35em;
        font-weight: bold;
        margin-top: 1.5em;
        margin-bottom: 0.5em;
        }

h3 {
        font-size: 1.2em;
        margin-top: 1.5em;
        margin-bottom: 0.5em;
        vertical-align: middle;
        }

h4        {
        font-size: 1.1em;
        margin-top: 1.25em;
        margin-bottom: 0.5em;
        }

p {
        font-size: 1em;
		line-height: 1.3em;  
/*		line-height: 135%;   */
        margin-top: 0.05em;
        margin-bottom: 0.5em;
        }

li {
		padding-bottom: 9px;
}

p.lh0{
        line-height: 0.9em;
        }

p.lh1{
        line-height: 1.5em;
        }

p.lh1em{
        line-height: 1em;
        font-style: italic;
        }

p.lh1-5em-center{
        text-align: center;
        line-height: 1.5em;
        font-style: italic;
        }

p.lh2{
        line-height: 2em;
        }

p.lh3{
        line-height: 3em;
        }

p.center{
        text-align: center;
        }

p.zwischenzeile-weiss {
        font-size: 1em;
        background-color: #3D6080;
        color: #FFF;
		padding: 5px;
		margin: 5px 0px 5px 0px;
}

/* responsive google maps - https://www.ithelps-digital.com/de/blog/anleitungen/google-maps-karte-responsive-einbinden */
.responsive_map {
/*		height: 0; */
		height: auto;
		position: relative; 
		overflow: hidden;
/*		padding-bottom: 56%; */
}

.responsive_map iframe {
		height: 100%;
		left: 0;
		position: absolute; 
		top: 0;
		width: 100%;
}

.tabellentext {
		font-size:smaller;
		font-family:"Courier New", Courier, monospace;
}

/* Klasse f&uuml;r Bilder, die &uuml;ber repsonsive automatisch kleiner werden sollen */
.pic {
    max-width: 100%;
    height: auto;
}

span.bold{
        text-align: left;
        font-size: larger;
        font-weight: bold;
        }

span.bold-center{
        text-align: center;
        font-size: larger;
        font-weight: bold;
        }

div.img {
        text-align :center;
		vertical-align: middle;
        border-top: 0.2em;
        border-bottom: 0.5em;
}

a        {
        background-color: #F1F6FC;
        color:#557799;
        font-size: 1em;
/*        margin-top: 0.25em;   */
/*        margin-bottom: 0.3em; */
		cursor:pointer;
        }

a.bold        {
        font-weight: bold;
}

a:visited{color:#557799;text-decoration:none;}

/*a :hover{color:#FFFFFF;background-color:#6688AA;} */

.example-image-link:hover {
    background-color: #F1F6FC;
}

a:active{color:#FFFFFF;background-color:#88AACC;}
a.an{text-decoration:none;}

img.b0none{
        border:none;
        vertical-align:middle;
}

img.super{
        border:none;
        vertical-align:super;
}

img.b1left{vertical-align:middle;border:1px;border-color:#000;float:left;width:140px;height:100px;margin:2px 12px;}
img.b1leftfloat{vertical-align:middle;border:1px;border-color:#000;float:left;width:140px;height:100px;margin:2px 12px;float:left;}

p.caption {
        font-family:"Courier New", Courier, monospace;
        font-size: 0.8em;
        text-align: center;
        line-height: 0.5em;
        margin-top: 0em;
}