/**
 * KoelnKlavier|bonnpiano
 *
 * (de) Zentrales Stylesheet für Seiten außerhalb von WordPress
 *
 * @copyright       Copyright 2010-19, mjbEDV
 * @link            http://www.mjbedv.de
 * @version         3.0.1
 *
 */

html, body {
  border: 0;  margin: 0;  padding: 0;
  font-family: "Segoe UI", Helvetica, sans-serif; 
  line-height: 1.3;  
  vertical-align: baseline;
}

body * {
  box-sizing: border-box;
}

/* --- Farben  -------------------------------------------------------------- */
:root {
  --bg-nav: #d6dce4;
  --wide: 1600;
}
body {
  background-color: white;
  color:#222;
}

.bg {
  background-color:#f0f0f0;
}

#topnav, #header, #footer {
  background-color: darkslategray;
  color: white;
}

nav {
  background-color: var(--bg-nav, silver);
  color: darkslategray;
}

#pagina_prev, #pagina_next {padding: 0.5em; margin-left: 1rem;}
#pagina_prev:after {content:"zurück";}
#pagina_next:before {content:"weiter";}

#toc      { background-color: var(--bg-nav, silver); border: 2px dotted silver; }

h1        { color:white; }
h1 a:first-child {font-style: italic;}
h1 a:last-child {font-family: serif;}
h1 a:hover {text-decoration: underline;}
h2        { color:darkslategray; }
h3        { color:darkslategray; }
h4        { color:gray; background-color: var(--bg-nav, silver);}
h5        { color:gray; }
h6        { color:gray; }

a:link    { color:#275614; }
a:visited { color:#275614; }
a:active  { color:red; }

#topnav a:link, #topnav a:visited,
#header a:link, #header a:visited,
#footer a:link, #footer a:visited {
  color: white;
}

.alphabar td { background-color: var(--bg-nav, silver); }
.alpha  { border-top: dotted var(--bg-nav, silver) 1px; }

.quelle {
  background-color: oldlace;
}

.cc {
  background-color: #eee;
  }
small { font-size: 8pt; }

img {
  max-width: 100%;
}

p, blockquote, cite, div, small { line-height: 1.4; }
p, blockquote, cite { margin-bottom:0.6em; }
sub, sup { font-size:91.6667%; line-height:0; }


#topnav {
  text-align: right;
}
#footer {
  text-align: center;
}


#toc {
  /*float:right; width:190px; margin-top:32px; */}

/* --- Listen  -------------------------------------------------------------- */
ul, ol, dl { padding:0px;list-style-position:outside;}
ul, ol, dl { margin:1em .8em 1em 1.8em; }
ul         { list-style-type:disc; }

ul.pagemap, #pagemap ul { list-style-type:none; }

#toc ul    { list-style-type:square; margin:0.5em;}
#toc ul ul { list-style-type:square; margin:0 0.5em 0 0.5em;}

ul.nobull  { list-style-type:none; }
ul ul      { list-style-type:circle; margin-bottom:0; }

ol         { list-style-type:decimal; }
ol.lowerlatin
           { list-style-type:lower-latin; }
ol.upperlatin
           { list-style-type:upper-latin; }
ol.roman   { list-style-type:upper-roman;}
ol ol      { list-style-type:lower-latin; margin-bottom:0; }

ul ol      { margin-top:0.2em; }
li         { margin-left:1em; }

.aus_li    { margin-left:-1.8em; } /* bündig zu li */
.aus_ul    { margin-left:-2.8em; } /* bündig zu ol, ul */

/* das Attribut "start" ist z.Z. nicht definiert, ein Workaround */
.ol_dummy  { visibility: hidden; line-height: 0; }
.ol_dummy + li
           { margin-top: -1em; }

/* --- Tabellen ------------------------------------------------------------- */
tr         { vertical-align:top; }
td         { text-align:left; }

/* --- Sprungmarken "nach oben" --------------------------------------------- */
.up       { text-align:right; font-size:80%; }

/* --- Ueberschriften -------------------------------------------------------- */
h1   { font-weight:normal; }
h1 a { text-decoration: none; font-weight:normal; }
h2, h3 {font-family: "lucida sans unicode";}
h2 { font-size: 110%; letter-spacing:.1em; font-variant:small-caps; line-height: 1.8; }
h3 { font-size: 105%; letter-spacing:.1em; line-height: 1.4; }
h4 {padding: 1em;}
h5, h6 {
  font-family:serif;
  font-size: 9pt;
  font-weight: bold; }

/* --- Navigation rechte Spalte --------------------------------------------- */
#toc    { padding:0.3em;}
#toc em { display:block; font-style:normal; font-weight: 500; }

/* --- Alphabet-Tafeln ------------------------------------------------------ */
.alpha {
  margin-top:1em;
  margin-bottom:0px; }

table.alphabar {  
  border-spacing: 0.5em; 
  margin: 1rem auto;
 
  width: 90%;
}  

.alphabar td {
  padding:.5em;
  text-align:center;
  font-weight:bold; 
}

/* --- allgemeine Klassen --------------------------------------------------- */
.center      { text-align:center; }
.capital     { font-size:200%; color:gray; }
.clear       { clear:both;}
.flex        { display: flex; }
.hidden      { display: none; }
.normal      { font-style:normal; }
.nowrap      { white-space:nowrap; }
.right       { text-align:right; }
.transparent { background:transparent; }
table.center, table.auto { margin:auto; table-layout: auto;}

/* --- Seiten-Layout -------------------------------------------------------- */
/*
  header
  nav
  page
  [ #toc ]
  footer 
*/

#header, nav, #topnav, #page, #footer {
  padding: 1em;
  width: 100%;
}

#page {
  margin: 1em auto;
  max-width: 52em;
}

@media screen and (min-width: 1400px) {
#page {
  margin: 1rem auto;
  padding: 1rem;
}}

p {
  max-width: 42em; 
  margin: 0.6em auto; 
  -webkit-hyphens: auto;
  hyphens: auto; 
  text-align: justify;  
}

#page ol,
#page ul {
  max-width: 42em; 
  margin: 0.6em auto; 
  padding: 0 2em;  
}

.indent, blockquote, cite {
  display: block;
  max-width: 36em; 
  margin: 0.6em auto;
}

blockquote, cite { 
  font-style: italic; 
}

nav {
  position: sticky; 
  top: 0px;
}

@media screen and (min-width: 1400px) {
  .has-toc #toc {
    width: 260px;
    position: fixed; 
    top: calc(100vh / 4);
    left: 32px;
  }
  .has-toc .up { display: none; }
}

.fix-bottom {position: fixed; bottom: 0;}
.fix-top {position: fixed; top: 0; z-index: 3; }