/* Version 2.7! - base jwhde [vorher s-wde base2] (11:05 30.06.2025) */

body { font-family: Arial, Helvetica, sans-serif; }

.main { margin-left: 3%; margin-right: 15%; }

p { font: 20px/160% Tahoma, 'Trebuchet MS', Verdana, Sans-Serif; color: #1a1a1a; }

p.datum { font-style: italic; font-size: smaller; margin-top: -15px;
}

p.bio { font-size:20px; line-height: 110%; font-family: "Times New Roman", Times, serif; }

p.navi-extra { color: #337599; line-height: 120%;}

p.ft { font-size: 20px; line-height: 110%; font-family: Tahoma, 'Trebuchet MS', Verdana, Sans-Serif; }

p.mini-img { text-align: center;}

a:link, a:visited {
  color: #337599; /* white; */
  background-color: transparent;
  text-decoration: none;
} 
a:hover {
  color: #337599;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}

h1 { color:#F49D1C; }

/* h1 { font-family: Time, Times New Roman, Georgia, serif; color: #F49D1C; font-style: bold;}  10 0 3 0 */

h2 { color:#337599; }

h3 { color: #337599; }

/* h3 { font: 30px; color: #337599; font-style: bold; font-weight: 700; margin: 10px 0 3px 0; } */

h4 {
	background: #337599;
	border-bottom: thin solid #113;
	border-top: thin solid #113;
	color: #fff;
	font-weight: 700;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 10px;
	position: sticky;
	top: -1px;
}

h4:nth-of-type(even) {
	background: #c82f04;
}

.top-container {
  background-color: #fff;
  text-align: center;
  color: #337599;
}
.top-container a:link a:visited {
  color: #337599;
  background-color: transparent;
  text-decoration: none;
} 
.top-container a:hover {
  color: #337599;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}
.bottom-container {
  background-color: #f1f1f1;
  padding: 1px;
  text-align: center;
}

.bottom-container a:link a:visited {
  color: #337599;
  background-color: transparent;
  text-decoration: none;
} 
.bottom-container a:hover {
  color: #337599;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}
.content a:link {
  color: #337599;
  background-color: transparent;
  text-decoration: none;
} 
.content a:visited {
  color: #337599;
  background-color: transparent;
  text-decoration: underline;
} 
.content a:hover {
  color: #337599;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
}

.header {
  padding: 10px 16px;
  background-color: #f1f1f1;
/*  background: #555; */
  text-color: white;
}

.footer {
  padding: 10px 16px;
  background-color: #f1f1f1;
/*   background: #555; */
  text-align: center;
}

.content {
  padding: 40px; /* 16px */
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}

@media all and (max-width: 35em) {
  #sticky {
    position: static;
  }
}
.text-shadow {text-shadow: #c0c0c0 3px 3px 5px;}

.tab { margin-left: 40px; }

sup { color: 1a1a1a; 
   position: relative;
   vertical-align: baseline;
   top: -0.7em;
   font-size: 10px;
}

mark { background-color: lightblue;
  color: #1a1a1a; }

span.box1 {
  display: inline; /* the default for span */
  width: auto;
  height: 80px;
  border: 1px solid blue;  
  background-color: lightblue; 
  border-color: red;
  font-weight: 500;
}

span.box {
  display: inline; /* the default for span */
  width: auto;
  height: 80px;
  border: 1px solid blue;  
  background-color: lightblue; 
  font-weight: 500;
}

/* boxen: rahmen-blau + typeA-C + kasten1 */

.rahmen-blau {
border: 1px solid #4285f4;
margin: 5px;
padding:1em ;
}
.typA { margin: 0 0 0 40px;
         background-color:#FFFF99; 
         padding: 10px;
}
.typB { margin: 0 0 0 40px; width: 80%;}

.typC { 	background-color: #337599;
	padding: 10px;
	border: thin solid #113;
	color: #fff;
}

.kasten1 {
    background-color: none;
    width: 75%;
    height: 25%;
    padding-top: 0.5%;
    padding-right: 3%;
    padding-bottom: 0.5%;
    padding-left: 3%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    border: 1px blue solid;
}

/* dropdown menü */

.dropbtn {
  background-color: #3498DB; /*  anderes blue/blau #337599 */
  color: white;
  padding: 16px; 
  font-size: 16px;
  border: none;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9; /* gedämpft blau */
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #337599; /* dunkelblau */
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 2;
}

.dropdown-content a {
  color: white;
  margin: 3px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #3498DB;} /* | grey #f1f1f or #ddd */

.dropdown:hover .dropdown-content {display: inline-block;} 

.dropdown:hover .dropbtn { background-color: lightblue; color: white; } /* #3e8e41 */

/* added: Pop-up 45 + summary | details */

details > summary {
	transition: color 1s; color: black;
  padding: 4px;
  width: 250px;
  background-color: #eeeeee;
  border: 2px;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details[open] > summary { color: red; }

details > p {
  background-color: #eeeeee;
  padding: 10px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}

/* ----- Buttons ----- NOT added = simple button) */
/* ------------ Fotos/img -------------- */

/* Foto-class "Infogif" */
.infogif { border-style: solid; border-width: 0px; vertical-align: middle; width: 27px; height: 11px }

/* Bildbeschreibung darunter (neu) */

figure.left-h {
	float: left;
	margin: 0 15px 0 0;  
	width: 20%;
}
figure.left-v {
	float: left;
	margin: 0 15px 0 0;  
	width: 15%; 
}
figure.right-h {
	float: right;
	margin: 0 0 0 15px; 
	width: 20%;
}
figure.right-v { 
	float: right;
	margin: 0 0 0 15px; 
	width: 15%;
}
figcaption { 
	font-style: bold;
	font-size: 11px;
	text-align: left;
	margin-top: 0.8em;
	margin-right: 0em;
	margin-left: 0.5em;
	margin-bottom: 1.5em;
}

.captionbox  {
  width: 100%;
  height: auto; 
}

/* [figure] Einfügung für alternative Galerie */
.scale-down { object-fit: scale-down; }

/* Fotos mit Rand Breite 200px */
.auto-style1 { border-style: solid; border-width: 1px; margin: 5px 10px; width: 200px; }

/* Fotos mit Rand Breite 150px */
.auto-style2 { border-style: solid; border-width: 1px; margin: 5px 10px; width: 150px; }

/* Fotos mit Rand Breite 100px */
.auto-style3 { border-style: solid; border-width: 1px; margin: 5px 10px; width: 100px; }

/* Fotos klein mit Rand Breite 80px (LOGO) */
.auto-style4 { border-style: solid; border-width: 1px; margin: 5px 10px; width: 80px; vertical-align: middle; }

/* Fotos mit Rand Breite 500px */
.auto-style5 { border-style: solid; border-width: 1px; margin: 5px 10px; width: 500px; }

/* Fotos mit Rand Breite 250px */
.auto-style6 { border-style: solid; border-width: 1px; margin: 5px 10px; width: 250px; }

/* Fotos mit Rand Breite 25px */
.auto-style7 { border-style: solid; border-width: 1px; margin: 0 0; width: 25px; }

/* ----- img ohne Rand----------- */

/* Fotos ohne Rand Breite 200px */
.auto-style11 { border-style: solid; border-width: 0px; margin: 5px 10px; width: 200px; }

/* Fotos ohne Rand Breite 150px */
.auto-style22 { border-style: solid; border-width: 0px; margin: 5px 10px; width: 150px; }

/* Fotos ohne Rand Breite 100px */
.auto-style33 { border-style: solid; border-width: 0px; margin: 5px 10px; width: 100px; }

/* Fotos klein ohne Rand Breite 80px */
.auto-style44 { border-style: solid; border-width: 0px; margin: 5px 10px; width: 80px; vertical-align: middle; }

/* Fotos ohne Rand Breite 500px */
.auto-style55 { border-style: solid; border-width: 0px; margin: 5px 10px; width: 500px; }

/* Fotos ohne Rand Breite 250px */
.auto-style66 { border-style: solid; border-width: 0px; margin: 5px 10px; width: 250px; }

/* Fotos ohne Rand Breite 25px (hight: 25px) */
.auto-style77 { border-style: solid; border-width: 0px; margin: 0 0; width: 25px; }