/* style-jwhistory-blau.css, 4.3! (Schriften wie blau-orange) base jwhde (22:27 26.05.2025) */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

body { margin: 0; padding: 0; background: #E7E7E4; }

/* Text-Schatten für Logo-Banner */
.text-shadow {text-shadow: #c0c0c0 3px 3px 5px;}

/* Überschriften, Absätze, Auflistung jwhistory-BLAU - h1 , h2 blau, h3 von grün auf blau; */

h1 { font: bold 36px 'Trebuchet MS', Tahoma, Verdana; color: #F49D1C; text-align: left; margin: 5px 0 15px 0; }
h2 { font: bold 30px 'Trebuchet MS', Tahoma, Verdana; color: #330066; text-align: left; margin: 25px 0 3px 0; }
h3 { font: bold 22px 'Trebuchet MS', Tahoma, Verdana; color: #0924ba; text-align: left; margin: 25px 0 3px 0; }

/*  vgl. #abs margin-left 20px  */
.tab { margin-left: 40px; }

/* mark = hellblau statt gelb */
mark { background-color: lightblue;
  color: blue; }

/* ANFANG Schriften jwhistory-blau */

/* p (einzeilig), 1a1a1a, nicht eingerückt */
p { font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #1a1a1a; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }

/* BLAU p.p1 (mehrzeilig), p1 (mehrzeilig) */
p.p1 { font: 20px/160% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 12px 0 12px 0; }
p1 { font: 20px/160% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }

/* ORANGE p.p2 wie p (einzeilig), p2 wie p1(mehrzeilig) */
p.p2 { font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #F49D1C; text-align: left; margin: 12px 0 12px 0; }
p2 { font: 20px/140% Tahoma, 'Trebuchet MS', Verdana; color: #F49D1C; text-align: center; margin: 12px 0 12px 0; }

/* GRÜN p.p3 wie p (einzeilig), p3 wie p1(mehrzeilig, BLAU) */
p.p3 { font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0336600; text-align: left; margin: 12px 0 12px 0; }

p3 { font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 12px 0 12px 0; }

/* BLAU p.f (Fußnote, kleiner Zeilenabstand) f = Platzhalter */
p.f { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }
f { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }

/* p.ft (#1a1a1a), Größe wie f (BLAU), ft = Platzhalter */
p.ft { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #1a1a1a; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }
/* ft wie blau-orange */
ft { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }

/* jwhistory-blau 
ft { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #1a1a1a; text-align: left; margin: 12px 0 12px 0;  }
*/

/* BLAU Minischrift einzeilig, mittig, unmerklich "bold" */
ft2 { font: 10px/110% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; font-style: bold; text-align: center; }

/* Quote, Zitat, kursiv, block,  p.q (1a1a1a), Größe wie p + p.p1 (mehrzeilig); q (blau) wie p1 (einzeilig), Einzug 20px */
p.q {font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #1a1a1a; font-style: italic; text-align: justify; margin: 12px 0 12px 0;  text-indent: 20px;}
q {font: 20px/160% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; font-style: italic; text-align: justify; margin: 12px 0 12px 0;  text-indent: 20px; }

/* ENDE Schriften jwhistory-blau */

/* @media gelöscht */
/* figcaption (bisher) gelöscht */
/* blockquote p.q (bisher) gelöscht */
/* blockquote.a (bisher) gelöscht */

/* Liste wie p (einzeilig)  */
ul { margin: 0 15px 10px 15px; }
li { font: 20px/120% 'Trebuchet MS', Tahoma, Verdana; color: #0924ba; text-align: left; }
/* Listen: Kreise und Quadrate für <ul> */
.one {
  list-style: circle;
}
.two {
  list-style: square inside;
}

/* allgemeine Textlinks (alle) jwhistory-BLAU - "font-weight: bold;" gelöscht */

#inhalt a:link, #inhalt a:active, #inhalt a:visited, #footer a:link, #footer a:active, #footer 

a:visited { color: #333; text-decoration: underline; }
#inhalt a:hover, #footer a:visited { background: #F49D1C; color: #E7E7E4; text-decoration: none; }

/* Logo Banner, Blau (#0924ba) statt ORANGE (#F49D1C o. "orange" = heller), width wie style-blau-orange.css) */
#logo { width: 1200px; font: bold 36px 'Trebuchet MS', Tahoma, Verdana; color: #0924ba; font-style: italic; letter-spacing: 1px; word-spacing: 1px; margin: 10px auto; }

#logo_in { line-height: 90px; background-image: url('_images/hintergrund.gif'); border: 0px solid #fff; text-align: center; }

/* horizontales Navigationsmenü jwhistory-BLAU #0924ba (blau) statt #336600 (grün) */

#navi_rahmen { width: 100%; border-top: 10px solid #fff; border-bottom: 10px solid #fff; background: #0924ba; }
#navi_oben a:link, #navi_oben a:active, #navi_oben a:visited { display: block; width: 140px; font: bold 16px/30px 'Trebuchet MS', Tahoma, Verdana; text-decoration: none; color: #fff; background: 
#0924ba; text-align: center; border-left: 1px solid #fff; }

#navi_oben a:hover { text-decoration: none; color: #fff; background: #330066; }

/* Inhalt-Content */
#inhalt { padding: 10px 20px 20px 20px; border-right: 0px solid #fff; }

#abs { margin-left: 20px; }

/* vertikales Navigationsmenü jwhistory-BLAU */
#navi_li_rahmen { padding: 0px 10px; background-image: url('_images/hintergrund.gif') } 

/* Überschrift Submenü */
.navi_ue { display: block; width: 200px; color: #fff; margin: 0px 0px 5px 0px; padding: 5px; font: bold 18px 'Trebuchet MS', Tahoma, Verdana; background: #000; border-bottom: 1px solid #fff; }

.navi_li { background: #330033; }
.navi_li_2 { background: purple; }
.navi_li_3 { background: #330033; }

.navi_li a:link, .navi_li a:active, .navi_li a:visited, .navi_li_2 a:link, .navi_li_2 a:active, .navi_li_2 a:visited, .navi_li_3 a:link, .navi_li_3 a:active, .navi_li_3 a:visited
      { display: block; width: 160px; font: bold 16px/22px 'Trebuchet MS', Tahoma, Verdana; text-decoration: none; color: #fff; margin: 5px 0px 5px 8px; padding-left: 10px; }
.navi_li a:link, .navi_li a:active, .navi_li a:visited { border: 1px solid #330066; }
.navi_li_2 a:link, .navi_li_2 a:active, .navi_li_2 a:visited { border: 1px solid purple; }
.navi_li_3 a:link, .navi_li_3 a:active, .navi_li_3 a:visited { border: 1px solid #330033; }
.navi_li a:hover, .navi_li_2 a:hover, .navi_li_3 a:hover { background: #000; border: 1px solid #fff; }

/* Fußzeile lilablau 330066, bisher font: 12px/40px letter-spacing: 3px; word-spacing: 7px; nicht mehr kursiv */
#footer { font: 12px/20px 'Trebuchet MS', Tahoma, Arial; color: #fff; font-style: normal; text-align: center; 
letter-spacing: 2px; word-spacing: 4px; border-top: 10px solid #fff; border-bottom: 10px solid #fff; background: #330066; }

/* 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;
}

/* boxen "bereich" text [umstellen auf box1-4] */
#bereich1 {
    background-color: lightgrey;
    width: 90%;
    height: 25%;
    padding: 10px;
    margin: 0px;
    border: 3px blue solid;
}
#bereich2 {
    background-color: lightgrey; 
    width: 85%;
    height: 25%;
    padding: 10px;
    margin: 0px;
    border: 3px blue solid;
}

/* box1 (100%, bg lightgrey, border blue) */
#box1 {
    background-color: lightgrey;
    width: 100%;
    height: 25%;
    padding: 20px;
    margin: 20px;
    border: 3px blue solid;
}

/* box2 (100%, bg lightgrey, border green) */
#box2 {
    background-color: lightgrey;
    width: 100%;
    height: 25%;
    padding: 20px;
    margin: 20px;
    border: 3px green solid;
}

/* box3 (75%, bg lightgrey, border green) */
#box3 {
    background-color: lightgrey;
    width: 50%;
    height: 25%;
    padding: 20px;
    margin: 0px;
    text-align: center;
    border: 3px 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); bisherige captionbox, figcaption, figure gelöscht */

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: img mit Rand----------- */

/* 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; }