/* style-blau-orange.css 4.4, home s-w */

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

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

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

/* Überschriften:  H1 (orange #F49D1C), H2 (blau #0924ba), H3 (grün #F49D1C), H4 (Kasten Blau) */

h1 { font: bold 36px Time, Times New Roman, Georgia, serif; color: #F49D1C; text-align: left; margin: 5px 0 15px 0; }

h2 { font: bold 30px Time, Times New Roman, Georgia, serif; color: #0924ba; text-align: left; margin: 10px 0 3px 0; }

h3 { font: 26px Tahoma, 'Trebuchet MS', Verdana, Sans-Serif; color: #336600; text-align: left; margin: 10px 0 3px 0; }

h4 { font: bold 22px Time, Times New Roman, Georgia, serif; color: #0924ba; text-align: center; 
	background-color: lightgrey;
	border-radius: 0 8px 8px;
	border: thin solid #d5d5d5;
	padding: 10px 10px 15px 10px;
	padding-left: 1%; /* 200px */
	padding-right: 1%;
	margin: 25px 0 10px 0; /* 10px auto */

}

/* Absatz 40px eingerückt (p3 = 30px) [vgl. #abs 20px]  */
.tab { margin-left: 40px; }

/* mark (hellblau statt gelb), Schrift BLAU */
mark { 
  background-color: lightblue;
  color: blue;
}

/* ANFANG Schriften style-blau-orange */

/* BLAU p (mehrzeilig), nicht mehr eingerückt */
p { font: 20px/160% Tahoma, 'Trebuchet MS', Verdana, Sans-Serif; color: #0924ba; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }

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

/*  p2 nicht ändern wegen älterer Text-Versionen (nach deren Änderung, kann p2 vll neu vergeben werden */
/* ORANGE p.p2 (mehrzeilig, left), p2, center? (wie früher, nicht löschen) */
p.p2 { font: 20px/160% Tahoma, 'Trebuchet MS', Verdana; color: #F49D1C; text-align: center; margin: 12px 0 12px 0; text-indent: 0px;}
p2 { font: 20px/140% Tahoma, 'Trebuchet MS', Verdana; color: #F49D1C; text-align: center; margin: 12px 0 12px 0; }

/* BLAU p3 (mehrzeilig, eingerückt), GRÜN p.p3, center? [getauscht!] (wie früher, nicht löschen) */
p3 { font: 20px/140% Tahoma, 'Trebuchet MS', Verdana; color: #336600; text-align: justify; text-indent: 0px; margin: 0 0 40px 0; text-indent: 0px; } 

p.p3 { font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #336600; text-align: justify; margin: 12px 100px 12px 30px; }

/* NEU: SCHWARZ statt BLAU p.f (Fußnote, kleiner Zeilenabstand), f (wie früher - nicht löschen) */
p.f { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #1a1a1a; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; text-indent: 0px; }
f { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 12px 0 12px 0; }

/* NEU: BLAU statt SCHWARZ p.ft (Fußnote, kleiner Zeilenabstand), ft (wie früher, nicht löschen, von GRÜN auf BLAU geändert! */
p.ft { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }

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

/* BLAU p.ft2 (Mini-Schrift, mini-einzeilig, center/mittig?, kursiv), ft2 (wie früher, nicht löschen) */
p.ft2 { font: 10px/110% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; font-style: normal; text-align: center; text-indent: 0px; }
ft2 { font: bold 10px/110% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; font-style: normal; text-align: center; }

/* BLAU p.q (Quote einzeilig, kursiv, justify), q, Einzug 20px (wie früher, nicht löschen) */
p.q {font: 19px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; font-style: italic; text-align: justify; margin: 12px 0 12px 0;  text-indent: 0px;}
q {font: 19px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: justify; margin: 12px 0 12px 0; quotes:"\201E" "\201C"; }

/* ENDE style-blau-orange (auch jwhistory-blau base s-w) */

/* kursiv: blockquote-A (BLAU mehrzeilig), blockquote-B (SCHWARZ einzeilig) */
blockquote.a  {font: 20px/160% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; font-style: italic; text-align: left; margin: 12px 0 12px 0;  text-indent: 0px; }
blockquote.b  {font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #1a1a1a; font-style: italic; text-align: left; margin: 12px 0 12px 0;  text-indent: 0px;}

/* Liste wie p (mehrzeilig), Achtung: "list-style: none" in den header der Datei bei Bedarf; Farbe = marker  */

li::marker {
  color: blue;
}
ul { margin: 0 15px 10px 15px; }
li { font: 20px/160% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; }

/* Listen: Kreise und Quadrate für <ul> */
.one {
  list-style: circle;
}
.two {
  list-style: square inside;
}

/* TEXT align center, left, right als - div class="a" */
div.a {
  text-align: center;
}

div.b {
  text-align: left;
}

div.c {
  text-align: right;
} 

div.d {
  text-align: justify;
} 

/* allgemeine Textlinks (alle #0924ba) blau-orange */
/* "font-weight: bold;" gelöscht */

#footer a:link, #footer a:active { color: #fff; font-weight: none; } 

#inhalt a:link, #inhalt a:active { color: #0924ba; text-decoration: underline; }
#inhalt a:visited { color: #0924ba; font-weight: none; }
#inhalt a:hover { background: #F49D1C; color: #0924ba; text-decoration: none; }
#footer a:visited { color: #fff;  font-weight: bold; }
#footer a:hover { background: #0924ba; color: #fff; text-decoration: none; }

/* Logo Banner */
#logo { width: 1200px; font: bold 36px Time, Times New Roman, Georgia, serif; color: #0924ba; font-style: bold;  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; border-top: 0px solid CoCoCo; border-bottom: 0px solid CoCoCo; background: CoCoCo; }
/* bisher standard: width: 140px; */
#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: lightgrey; background: grey; text-align: center; border-left: 0px solid lightgrey; } /* 1px */
#navi_oben a:hover { text-decoration: none; color: #0924ba; background: none; }

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

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

/* vertikale Navigation */
#navi_li_rahmen { padding: 0px 0px; background-image: url('_images/hintergrund.gif'); }

/* Überschrift Submenü; Kasten Breite (width)*/
.navi_ue { display: block; width: 220px; color: blue; margin: 0px 0px 10px 0px; padding: 5px; font: bold 18px 'Trebuchet MS', Tahoma, Helvetica, Arial, Verdana; background: lightgrey; border-bottom: 1px solid #fff; border-top: 2px solid #fff; }

.navi_li { background: grey }
.navi_li_2 { background: #0924ba; }
.navi_li_3 { background:  #8a5a83 }

.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 = Text Darstellung] navi_li LINK display: width 200  (vordem 130, 160, 185) */
      { display: block; width: 200px; 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 #898176;  }

.navi_li_2 a:link, .navi_li_2 a:active, .navi_li_2 a:visited { border: 1px solid #0924ba; } 

.navi_li_3 a:link, .navi_li_3 a:active, .navi_li_3 a:visited { border: 1px solid #898176; } 

.navi_li a:hover { background: #ffa420; border: 1px solid #fff; }

.navi_li_2 a:hover, .navi_li_3 a:hover { background: #ffa420; border: 1px solid #fff; }

/* Fußzeile (bisher lilablau wie jwhistory-blau) (Bisher: statt #003300 dunkelgrün oder lilablau #330066), jetzt "grey" */
#footer { font: 12px/20px 'Trebuchet MS', Tahoma, Arial; color: #fff; font-style: italic; text-align: center; letter-spacing: 2px; word-spacing: 4px; border-top: 10px solid lightgrey; border-bottom: 0px solid lightgrey; background: grey; }

/* ---------- added boxes (Textkasten) ------ */

/* bereich1 = textbox1 (zu Testzwecken - nicht löschen) */
#bereich1 {
    background-color: lightgrey;
    width: 100%;
    height: 25%;
    padding: 10px;
    margin: 0px;
    border: 3px blue solid;
}

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

/* box2 (85%, bg lightgrey, border blue) */
#box2 {
    background-color: lightgrey;
    width: 85%;
    height: 25%;
    padding: 10px;
    margin: 0px;
    border: 3px blue solid;
}

/* box3 (60%, bg lightgrey, border green) */
#box3 {
    background-color: lightgrey;
    width: 60%;
    height: 25%;
    padding: 20px;
    margin: 0px;
    text-align: center;
    border: 3px blue solid;
}
/* box4 (100%, bg lightgrey, border green) */
#box4 {
    background-color: #000;
    width: 100%;
    height: 25%;
    padding: 20px;
    margin: 0px;
    text-align: center;
    border: 3px orange solid;
}

/* added Pop-up details + summary */

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

/* added button (simple) */

button {
        background: lightblue; /* #0e0b22; */
        color: #0924ba;
        padding: 0.0rem; /* 0.6rem */
        margin-top: 0px; /* 20px */
        border: 0;
        border-radius: 4px;
      }

      button:hover {
        cursor: pointer;
        background:  orange; /* #1e1d25; */
      }

/* -------------------- added photos --------------- */

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

/* Bildbeschreibung unter Foto; captionbox-class = Fotoformat */
.captionbox  {
  width: 100%;
  height: auto; }

<!-- --- Fotos: figure, figcaption --- -->

figure {
  position: relative; 
  margin: 0 10px 0 10px;
  padding: 10px; 
/* oder: padding: 10px | vorher .5em  */
  width: 100%;
/*  border: */
  border: 0px; ;
/* oder: 1px solid gainsboro | vorher:  thin solid gainsboro; */
  background: none;
/* vorher background: white; */
}

 @media (min-width: 25em) {
  figure {
    width: 20em;
/*    float: left; */
  position: relative; 
  }

figcaption {
  padding: 0px;
/*  oder padding: 10px | vorher .8em;  */
  font: 16px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: center;  font-style: italic;
  margin: 5px 12px 10px 0; }

/* <figure> Einfügung für alternative Galerie */

.scale-down {
	object-fit: scale-down;
}

/* Ende figure, figcaption */

/* ----- img mit Rand ----------- */

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

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

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

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

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

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

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

/* Fotos mit Rand Breite 400px */
.auto-style8 { border-style: solid; border-width: 1px; margin: 20px; width: 400px; }


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

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

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

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

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

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

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

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

/* TEST! (99) Fotos ohne Rand Breite 25px --- bisher margin: 5px 10px; */
.auto-style99 { border-style: solid; border-width: 0px; margin: 0 0; width: 25px; hight: 15px; }

/* Fotos ohne Rand Breite 400px */
.auto-style88 { border-style: solid; border-width: 0px; margin: 20px; width: 400px; }

/* minigalerie (10.10.20) */

#minigalerie {
  display: table;
  border-spacing: 10px;
}

#minigalerie a {
  display: table-cell;
  vertical-align: left;
}

#minigalerie img {
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
}

#minigalerie img:target {
  width: 300px;
  height: 150px;
}

#minigalerie img {
  background-color: #ffffff;
  padding: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 0 0 7px rgba(100, 100, 100, 1);
  -moz-box-shadow: 0 0 7px rgba(100, 100, 100, 1);
  -webkit-box-shadow: 0 0 7px rgba(100, 100, 100, 1);
}