/* style-orange-text-blau.css 1.7 (1.8), base s-w (22.08., 10.08., 5.08, 12.07.20, 13.02., 15.02.21, 30.06.23), copy von master style-orange-css, 4.6 (16.06.20) - GEÄNDERT: Textfarben: h1 (unverändert), h2 #0924ba (statt #336600), h3 (unverändert), p  #0924ba (statt #000), p1 #0924ba (statt #000), p2 (unverändert), p3 (unverändert), ft (unverändert), ft2 #0924ba (statt #336600), q #0924ba (statt #000), li #0924ba (statt #000); logo_in background-image: url('_images/hintergrund.gif') + border: 0px solid; (statt background: #fff, border: 1px solid #fff ); navi_li_rahmen background-image: url('_images/hintergrund.gif') (statt background: #fff). WIE ORANGE: body background #fff; nav_li_2 = BLAU (0924ba); text-shadow; .tab; navi display: width von 130px auf 160px; auto-style (Fotos); figure + captionbox; infogif; #bereich1 (textbox mit Rand), lightgrey; rückgägig [inhalt a:link: text-decoration: none (vorher: underline)]; minigalerie; navi_rahmen ; <p, p1, li> von justify auf left; #bereich0 (FOTOS + textbox ohne Rand); style <f> neu (fussnoten);
*/ 

* { 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, Absätze, Auflistung ORANGE */
h1 { font: bold 36px Time, Times New Roman, Georgia, serif; color: #F49D1C; margin: 5px 0 15px 0; }
h2 { font: bold 30px Time, Times New Roman, Georgia, serif; color: #0924ba; margin: 25px 0 3px 0; }
h3 { font: bold 22px/130% 'Trebuchet MS', Tahoma, Verdana; color: #0924ba; margin: 0 0 0 0; }

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

<!--  p ohne Einzug (div) -->
div { text-indent: initial; }

p   { font: 20px/160% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 12px 0 12px 0; text-indent: 20px; }
p1 { font: 20px/160% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; 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; }
p3 { font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: center; margin: 0 0 40px 0; }

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

ft { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #336600; text-align: justify; margin: 12px 0 40px 0; }
ft2 { font: bold 10px/100% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; font-style: italic; text-align: center; }
q {font: 19px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: justify; margin: 12px 0 12px 0; quotes:"\201E" "\201C"; }

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

/* allgemeine Textlinks (alle) */
#footer a:link, #footer a:active, 
#inhalt a:link, #inhalt a:active { color: #009900; text-decoration: underline; }
#inhalt a:visited { color: #009900; font-weight: bold; }
#inhalt a:hover { background: #E7E7E4; color: #F49D1C; text-decoration: none; }
#footer a:visited { color: #009900;  font-weight: bold; }
#footer a:hover { background: #E7E7E4; color: #000; text-decoration: none; }

/* Logo Banner ORANGE BLAU-LILA */
#logo { width: 1200px; font: bold 36px 'Trebuchet MS', Tahoma, Verdana; color: #0924ba; font-style: italic; letter-spacing: 1px; word-spacing: 2px; margin: 10px auto; }
#logo_in { line-height: 90px; background-image: url('_images/hintergrund.gif'); border: 0px solid; text-align: center; }

/* horizontales Navigationsmenü ORANGE */

#navi_rahmen { width: 100%; border-top: 10px solid #fff; border-bottom: 10px solid #fff; background: #F49D1C; }
/* 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: #fff; background: #F49D1C; text-align: center; border-left: 1px solid #fff; }
#navi_oben a:hover { text-decoration: none; color: #fff; background: #330066; }

/* horizontales Navigationsmenü LILA-BLAU */
/* #navi_rahmen2 { width: 100%; border-top: 10px solid #fff; border-bottom: 10px solid #fff; background: #0924ba; } */
/* #navi_oben2 a:link, #navi_oben a:active, #navi_oben2 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_oben2 a:hover { text-decoration: none; color: #fff; background: #330033; } */

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

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

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

/* BISHER: #navi_li_rahmen { padding: 0px 10px; background: #fff; } */

/* Überschrift Submenü ORANGE F49D1C, heller ffa420, grau #898176 | 2=LILA-BLAU (330033) | 3=GRÜN (336600); lila = #330066; */

.navi_ue { display: block; width: 210px; color: #fff; margin: 0px 0px 5px 0px; padding: 5px; font: bold 18px 'Trebuchet MS', Tahoma, Helvetica, Arial, Verdana; background: #F49D1C; border-bottom: 1px solid #fff; }

/* dunkles orange durch helleres ffa420 u grau 898176 ausgetauscht */
.navi_li { background: #898176; }
.navi_li_2 { background: #0924ba; } <!-- BLAU HINZUGEFÜGT -->
.navi_li_3 { background: #898176; } 

/* weiter mit Überschrift Submenü, alle Farben wie oben in ORANGE */

.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; }
/*  oben = display: width von 130px auf 160px geändert */
.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; }  <!-- BLAU HINZUGEFÜGT -->

.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 */
#footer { font: 12px/40px 'Trebuchet MS', Tahoma, Verdana; color: #fff; font-style: italic; text-align: center; letter-spacing: 3px; word-spacing: 7px; border-top: 10px solid #fff; border-bottom: 10px solid #fff; background: #330066; }

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

/* img, winzige "Info"-Fotos u.a.  */
.infogif { border-style: solid; border-width: 0px; vertical-align: middle; width: 27px; height: 11px }

/* FIGURE Kasten weißer Rand, RECHTS, Bildbeschreibung unter Foto kursiv grün; captionbox-class = Fotoformat */
figure {
  position: relative; 
  margin: 0 0 0 40px;
  padding: 0px; 
/* <!-- oder: padding: 10px | vorher .5em --> */
  width: 100%;
  border: 10px solid white; 
/* <!-- oder: 1px solid gainsboro | vorher:  thin solid gainsboro; --> */
  background: none;
/* vorher background: white; */
}

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

@media (min-width: 25em) {
  figure {
    width: 20em;
    float: right;
  }

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

/* DIV Kasten mit Rand und Innenfarbe (für Texte) */
#bereich1 {
    background-color: lightgrey;
    width: 100%;
    height: 25%;
    padding: 10px;
    margin: 0px;
    border: 3px blue solid;
}

/*  DIV Kasten ohne Rand/Farbe (für FOTOS) */
#bereich0 {
    background-color: none;
    width: 100%;
    height: 25%;
    padding: 10px;
    margin: 0px;
    border: none;
}

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

/* ----- 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 --- bisher margin: 5px 10px; */
.auto-style77 { border-style: solid; border-width: 0px; margin: 0 0; width: 25px; hight: 15px; }

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