@charset "UTF-8";

:root {
  --brauncolor:#8B4513;
  --lightyellowcolor: #ffffe0;
  --greencolor:#455b1f;
  --bordersetcolor:#aacc99;
  --redcolor:red;
  --codecolor:#eaefe8;
}

/* Grundstyling */

html { 
  font-family: Bahnschrift, Arial, sans-serif;
  font-size:1.4vw;
  margin:0; padding:0; border:0;
  background-color:var(--lightyellowcolor);
}

body {
  background-color:var(--lightyellowcolor);
  margin:0;
  padding:0.2rem;
  border:0;
}

/* Normalisierung */

img {
  border:0;
  max-width:100%;
  height:auto;
}

sub.rgs {
  display:inline-block; margin-bottom:-0.5rem;
}

sup.hgs {
  display:inline-block; margin-top:-0.5rem;
}

/* Layout */

.contentcover {
  display:grid;
  grid-template-rows: min-content min-content 1fr;
  grid-template-columns:min-content 1fr;
  grid-template-areas:
   "logoline logoline" 
   "bccontainer bccontainer" 
   "menucolumn pagecontent";

  height:max-content;
   
  background-color:var(--lightyellowcolor);
}

.logoline {
  display:block;
  margin:0; padding:0; border:0;
  grid-area:logoline;
  text-align:center;
  color:white;
  min-height:74px;
  background-color:#848484;
  background-image: url(./nachtwellen-neu.png), url(./schiffnacht-neu.png);
  background-repeat: repeat-x, no-repeat;
  background-position-y: bottom, bottom;

  img.screenlogo { 
    display:inline-block;
    padding-top:10px;
    margin-left:70px;
  }

  img.printlogo { display:none; }
}

h1.seitentitel {
  text-align:center;
  color: var(--greencolor);
  margin-top:0;
  margin-bottom:0.4rem;
  border-bottom: 1pt solid var(--brauncolor);
}

.nobr {
  white-space: nowrap;
}

@media only screen and (max-width:692px)
{
  div.logoline { 
    min-height: 6.61rem;
    background-size: 5.65rem, 20rem;  /* schiff: 23 */

    img.screenlogo {
       width:21.7rem;
       padding-top: 1.12rem;
       margin-left: 6.25rem;
    }
  }
}

/* Link allgemein */
a:link { color:#204f6f; text-decoration:none; }    /* noch nicht besuchte Ziele, darkslategray */
a:visited { color:#204f6f; text-decoration:none; } /* besuchte Ziele , darkslategray */
a:hover { color:#cd853f; text-decoration:none; }   /* Verweise bei "MouseOver", peru */
a:active { color:#b22222; text-decoration:none; }  /* Angeklickte Verweise, firebrick */


.bccontainer {
  grid-area: bccontainer; 

  padding-left: 0.2rem;
  padding-top:0.4rem;
  border-bottom: 1pt solid var(--brauncolor);

  nav.bcmenu {
    .bcdelimiter {
      color:var(--redcolor);
    }
  }
}  /* bccontainer */

.menucolumn {
  grid-area: menucolumn;
  display:block;
}

ul.parmenu {
  list-style-type:none;
    display:block;
    box-sizing:border-box;
    position:relative;
    margin:0.1rem;
    padding:1rem; 
    color:var(--lightyellowcolor);
    background-color:var(--greencolor);
    width:16rem;


  a {
    display: block;
    margin-bottom:0.12rem;
    border: 0.2rem outset var(--bordersetcolor);
    padding: 0.064rem;
    text-decoration: none;
    text-align:center;
    color:var(--greencolor);
    background-color: var(--lightyellowcolor);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  a:before { content: "▲   "; color:var(--redcolor); } 
}


div.menucontainer {
  display:block;
  position: -webkit-sticky; /* das musste sein, auch im Chrome ! */
  position: sticky;
  top:0.2rem;
  margin-top:0.2rem;
  min-width:2rem;
  color:var(--lightyellowcolor);
  z-index: 80;

  input.schalter { display:none; margin:0; }

  label.mylabel { 
    margin:-0.2rem; padding:0;
    display:block; 
    position:absolute;
    top: 0;
    right:0.5rem;
    font-family:monoscript;
    font-size:200%;
    font-weight:bold;
    z-index:99; 
    color:orange;
  }

  nav.stdmenu  {
    display:block;
    box-sizing:border-box;
    position:relative;
    margin:0;
    padding:1rem; padding-top: 2rem;
    color:var(--lightyellowcolor);
    background-color:var(--greencolor);
    width:16rem;
    /* font-size:0.9rem; */
  }
         
  a {
    display: block;
    margin-bottom:0.12rem;
    border: 0.2rem outset var(--bordersetcolor);
    padding: 0.064rem;
    text-decoration: none;
    text-align:center;
    color:var(--greencolor);
    background-color: var(--lightyellowcolor);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  a:active { border: 0.2rem inset var(--bordersetcolor); }
  span.parent a:before { content: "▲   "; color:var(--redcolor); }

  ul {
    margin:0; padding:0; margin:0;
    list-style-type:none;
  }

  summary::marker { color:var(--redcolor); }
  span.title      { font-style:italic;     }
  
  .submenu {
    /* font-size:0.8rem; */
    padding-left:0.8rem;
    padding-right:0.3rem;

    a {
      padding:0.064rem;
    }
  }

  .selfpoint {
    color:orange; 
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  summary.selfpoint { 
    margin-top: 0.3rem;
  }

  span.selfpoint {
    display:block;
    margin-top:0;
  }

} /* menucontainer */


@media only screen and (min-width:800px) {
  /* das Label bleibt am rechten Rand,
     durch die Mindestbreite von .menucontainer an richtiger Stelle */

  .menucontainer input.schalter:checked ~ nav.stdmenu  { 
     display:none;
  }

} /* only screen min 800 */

@media only screen and (max-width:800px)
{
  html { font-size:1.6vw; }

 /* wie vorher checked */
 div.menucontainer nav.stdmenu  { display:none; }

 /* wie vorher unchecked, aber überdeckend */
 div.menucontainer input.schalter:checked ~ nav.stdmenu  { 
    display:block;
    position:absolute;
  }

 /* label richtet sich nach dem letzten relative-Cover 
    und der hat nur eine Breite von 2 rem, daher schieben
    wir das Label nach rechts                              */

 div.menucontainer input.schalter:checked ~  label.mylabel { 
   left:14.4rem;
 }

} /* only screen max 800 */

.pagecontent {
  grid-area: pagecontent;
  display:block;
  margin-left:0.3rem;
  margin-top:0.2rem;
  margin-bottom: 1rem;
  container-type: inline-size;
  background-color: #ffffff;

} /* pagecontent */

/* Content Styling */

.kap {
  display:block;
  /* Schrift bleibt bei jeder Größe proportional zu pagecontent */
  font-size:1.8cqi;
  background-color:#ffffff;
  border-radius:0.61rem;

  .ttl {
    margin:0;
    padding-top:0.2rem;
    color:#455b1f;  /* darkolivegreen, 1 Stufe tiefer */
    background-color:#ffffff;
    text-align:center;
  }
}

pre, .hin {
  border-radius:0.5rem;
}

pre b {
  font-family: monospace;
  font-weight:bolder;
}

hr {
  color:#8b0000; /* darkred */
  border-style:solid;
  margin:0;
  padding:0;
  margin-top:0.2rem;
  padding-bottom:0.2rem;
  border-width:0;
  border-top-width:0.064rem;
}

dl {
  margin-top:0;
  margin-bottom:0.28rem;
}

dd {
  background-color:#ffffff;
  margin-left:1.38rem;
  padding:0.28rem;
}

ul, ol {
  margin-top:0.28rem;
  margin-bottom:0.28rem;
  margin-left:2.8rem;
  padding-left:0.28rem;
}


div.textbeispiel { padding-left:2.8rem; }

/* Menüpunkte und Links */

div.totop {
  display:flex;
  width:10rem;
  margin:auto;
  margin-bottom: 1rem;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius:0.5rem;
  background-color: #455b1f;

  a { 
      color:#ffffe0;
    }

  a.hoch {
    color:orange;
    font-size:1.8rem; 
    font-weight: bold;
    margin-block-start: -0.4rem;
  }
}

a.url {
  .tty { background-color:transparent; }
}
a.url:before { content:"↗"; } /* externer Link */
/*.abt .abs > a.dvw::before, .abt div > a.dvw::before { content:"↘"; } */
a.dvw:before { content:"↘"; }


.textlink {
  background-color:#ffffff;
  text-align:justify;
  padding:0.28rem;
  margin-left:0.28rem;
  margin-right:0.28rem;
  margin-top:0;
  margin-bottom:0;

  border: 0.28rem solid #dddddd;
  border-radius: 0.71rem;
}

/* noch nicht besuchte Ziele */
.textlink a:link { color:#455b1f; text-decoration:none; }
/* besuchte Ziele */
.textlink a:visited { color:#455b1f; text-decoration:none; }
/* besuchte Ziele , darkslategray */
.textlink a:hover { color:#cd853f; text-decoration:none; }
/* Angeklickte Verweise, firebrick */
.textlink a:active { color:#b22222; text-decoration:none; }

/* diverse Klassen */

  .fet {
    letter-spacing: 0.05rem;
  }

.imgwrapper, .bildleft, .bildright, .bildmiddle {
  display:flow-root;
  margin-bottom:0.3rem;

  .bld {
    border-color:var(--bordergreen); /* darkgreen */
    border-width:0.1rem;
    border-style:solid;
    border-radius:0.5rem;
  }

  .leftimg {
    display:block;
    float:left;
    margin-right: 0.5rem;
  }

  .rightimg {
    display:block;
    float:right;
    margin-left: 0.5rem;
  }

  .middleimg {
    display:block;
    margin:auto;
  }
} /* alle Bildwrapper */

.imgwrapper.middleimg {
  text-align: center;
  .abs {
    text-align: center;
  }
} /* speziell für zenrierten Bildwrapper */



/* Bildvergrößerung */
.bildcnt {
  img {
    transition: transform 0.3s;
  }

  img:hover, img:focus {
    transform: scale(1.8);
  }
} /* .bildcnt */

.tbe {
  display: table-cell;
}

.redclr {
  color:#ff3333;
  font-weight:bold;
}

.contentback {
  background-color:#ffffff;
  margin-left:0.61rem;
  padding:0.28rem;
  border-radius:0.61rem;
}


.unt {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness:1pt;
  text-decoration-color: red;
}

.mini {
  font-size:0.68rem;
  line-height:0.68rem;
}

.red {
  color:#FFFF00;
  background-color:#FF0000;
}

.yellow {
  background-color:#FFFF00;
}

.green {
  background-color:#00FF00;
}

.blue {
  background-color:#0000FF;
}


.sym, .eng, .beg {
  font-style:italic;
}

.middle {
  background-color:#ffffff;
  vertical-align:middle;
}

.border {
  border:0.085rem solid #666;
  background-color:#ffffff;
  margin:0.28rem;
}

.screenshot {
  border-width:0.1rem;
  border-style:solid;
  border-color:#006400; /* darkgreen */
  border-radius:0.5rem;
}

/* ausgerichtete Bilder */

.imgwrapper {
  display:flow-root;
  margin-bottom:0.3rem;

  .leftimg {
    display:block;
    float: left;
    padding-left:0.28rem;
    padding-right:0.28rem;
    margin-left:0.68rem;
    margin-right:0.28rem;
    border-radius:0.5rem;
  }

  .rightimg {
    display:block;
    float: right;
    padding-left:0.68rem;
    padding-right:0.28rem;
    border-radius:0.5rem;
  }

  .middleimg {
    display:block;
    margin:auto;
    padding-bottom:0.14rem;
    border-radius:0.5rem;
  }
}

.imgwrapper.middleimg {
  text-align:center;
}
 /* Ende imgwrapper */

.seitendatierung {
  font-style:italic; 
  font-size:80%;
}

/* NoteML-Formatierung */

.dok {
  font-family:sans-serif;
  font-size:1rem;
  line-height:125%;
}

.pagetitle {
  margin-top:0.61rem;
  margin-bottom:0.61rem;
  color:#455b1f;  /* darkolivegreen, 1 Stufe tiefer */
  text-align:center;
  line-height:90%;
}


.dko, .dfu, .kko, .kfu, .ako, .afu {
  margin:0;
  padding:0.28rem;
  background-color:transparent;
}

.unsichtbar, .unsichtbar * {
  display:none;
}

.abt {
  margin-top:0;
  margin-bottom:0.28rem;
  margin-left:0;
  background-color:transparent;
  padding:0.28rem;
  
  .ttl {
    color:#8b4513; /* saddlebrown */
    background-color:transparent;
    margin-top:0;
    margin-bottom:0.28rem;
    text-align:left;
  }
} /* .abt */

.zue {
  margin-top:0.52rem;
  margin-bottom:0.28rem;
  color:#455b1f;  /* darkolivegreen, 1 Stufe tiefer */
  background-color:transparent;
}

.tbl {
 border:0;
 border-collapse:collapse;
 margin-left:0.68rem;
 margin-right:0.28rem;
 margin-top:0.28rem;
 margin-bottom:0.28rem;
 background-color:#ffffff;
}

.tbl tr td{
 padding:0.28rem;
 vertical-align:top;
 text-align:left;
 background-color:#ffffff;
}

/* 3spaltiges Laylout */
.coltab3 {
 border:0;
 border-collapse:collapse;
 margin:0;
 padding:0.064rem;
}

.coltab3 tr td{
 width:33%;
 padding:0.064rem;
 border:0;
 margin:0;
 vertical-align:top;
 text-align:left;
}


.abs {
  background-color:#ffffff;
  text-align:justify;
  padding:0.28rem;
  margin-left:0.28rem;
  margin-right:0.28rem;
  margin-top:0;
  margin-bottom:0;
}

.lis {
  font-size: 1rem;
  box-sizing:border-box;
  /* font-family:Bitstream Vera Sans Mono,sans-serif; */
  margin-top:0.28rem;
  margin-left:0.68rem;
  margin-right:0.28rem;
  margin-bottom:0.28rem;
  border-width:0.1rem;
  border-style:solid;
  border-color:#006400; /* darkgreen */
  background-color:#ffffff;
  padding:0.28rem;
  overflow: auto;
  page-break-inside:avoid;
}

pre.output {
  font-size: 1rem;
  box-sizing:border-box;
  /* font-family:Bitstream Vera Sans Mono,sans-serif; */
  margin-top:0.28rem;
  margin-left:0.68rem;
  margin-right:0.28rem;
  margin-bottom:0.28rem;
  border-width:0.1rem;
  border-style:solid;
  border-color: red;
  background-color:#ffffff;
  padding:0.28rem;
  overflow: auto;
}


.hin {
  margin-top:0.28rem;
  margin-bottom:0.28rem;
  margin-left:0.68rem;
  margin-right:0.28rem;
  padding:0.71rem;
  font-style:italic;
  text-align:justify;
  background-color:#faebd7;
  
}

.ses {
  margin-top:0.28rem;
  margin-left:0.68rem;
  margin-right:0.28rem;
  margin-bottom:0.28rem;
  /* font-family:Bitstream Vera Sans Mono,sans-serif; */
  text-decoration:none;
  font-weight:normal;
  color:#d0d0d0;
  background-color:#000000;
  padding:0.61rem;
  text-align:left;
  page-break-inside:avoid;

  b {
    color:#ffffff;
    font-weight:bold;
  }
}

.cygwin {
  margin-top:0.28rem;
  margin-left:0.68rem;
  margin-right:0.28rem;
  margin-bottom:0.28rem;
  /* font-family:Bitstream Vera Sans Mono,sans-serif; */
  text-decoration:none;
  font-weight:normal;
  color:white;
  background-color:#000000;
  padding:0.61rem;
  text-align:left;
  page-break-inside:avoid;

  b {
    color:#ffffff;
    font-weight:bold;
    letter-spacing: 0.05rem;
  }

  .dir {
    color:#BF9F00;
  }

  .prompt {
    color: #1CA800;
  } /* .prompt */  

} /* .cygwin */

.bspsession {
  margin-top:0.28rem;
  margin-left:0.68rem;
  margin-right:0.28rem;
  margin-bottom:0.28rem;
  /* font-family:Bitstream Vera Sans Mono,sans-serif; */
  text-decoration:none;
  font-weight:normal;
  color:yellow;
  background-color:#008;
  padding:0.61rem;
  text-align:left;
  page-break-inside:avoid;

  b {
    color:yellow;
    font-weight:bold;
  }
}

pre.halb {
  margin-top:0.28rem;
  margin-left:0.68rem;
  margin-right:0.28rem;
  margin-bottom:0.28rem;
  /* font-family:Bitstream Vera Sans Mono,sans-serif; */
  text-decoration:none;
  font-weight:normal;
  color:#d0d0d0;
  background-color:#000000;
  padding:0.61rem;
  text-align:left;
  page-break-inside:avoid;

  font-size:70%;
  /* line_height:0; */

  b {
  color:#ffffff;
  font-weight:bold;
  }
}

.beispiel .menupoint, .beispiel .currpoint {
  border:0;
  text-align:left;
  background-color:white;
}

/* "Festgenagelte" Formatierungen */

hr.kap { margin-left:0.61rem; }
hr.lin.submenu {
  margin-top: 0.3rem;
  margin-bottom: 0.5rem;
  color:orange;
  border-top-width:0.1rem;
}

pre b {
  font-family: monospace;
  font-weight:bolder;
  /* background-color:#eeeecc; */ /* hat sich nicht bewährt */
}

table.tabelle {

  border-collapse:collapse;
  border-spacing:0;
  margin-bottom:0.52rem;
}

table.tabelle  th {
    text-align:center;
    padding-right:0.28rem;
    background-color:#ceb;
    border:0.085rem solid #ceb;
}

table.tabelle  td {
    text-align:left;
    padding-left:0.28rem;
    padding-right:0.28rem;
    border:0.085rem solid #ceb;
    background-color:#ffffe0;
}


table.tableborder td, table.tableborder th {
  border-width:0.064rem;
  border-style:solid;
  border-color:#006400; /* darkgreen */
  text-align:left;
  padding:0.28rem;
  margin-left:0.28rem;
  margin-right:0.28rem;
  margin-top:0;
  margin-bottom:0.28rem;
}

tr.tabrow0 td {
  background-color:#cccccc;
}

tr.tabrow1 td {
  background-color:#eeeeee;
}


pre.win {
  margin-top:0.28rem;
  margin-left:0.68rem;
  margin-right:0.28rem;
  margin-bottom:0.28rem;
  /* font-family:Bitstream Vera Sans Mono,sans-serif; */
  text-decoration:none;
  font-weight:normal;
  padding:0.61rem;
  text-align:left;

  color: #ffff00;
  background-color: #0000ff;
}

ul.beispiel {
  width:7.24rem;
  text-align:left;
}

code {
  padding-left:0.14rem;
  padding-right:0.14rem;
  background-color: var(--codecolor);
  border-radius:0.3rem;
}


/* Live-Referenzen */

table.live-referenz {
  width:100%;
  border: 0.085rem solid green;
  border-spacing:0;
  border-collapse:collapse;
  td,th {
    padding:0.5rem;
    border: 0.085rem solid green;
    pre {
      border-radius:0.37rem;
    }
    code { font-size: 1.3rem; }
  }
  td.codeteil { 
    line-height:0; 
    background-color:#ffffe0;
  } 
  td.normalteil { 
    background-color:#ffffe0;
    max-width:15rem;

    * { max-width:100%; }
  }

}

.ref01 { text-decoration: underline; }

.ref01c {
  text-decoration: underline;
  text-decoration-color: rgba(255,0,0,0.7);
}
.ref01cd {
  text-decoration: underline;
  text-decoration-color: rgba(255,0,0,0.7);
  text-decoration-thickness: 0.61rem;
}
.ref01cda {
  text-decoration: underline;
  text-decoration-color: rgba(255,0,0,0.7);
  text-decoration-thickness: 0.61rem;
  text-underline-offset: 0.68rem;
}

.ref01l {
text-decoration: underline;
text-decoration-skip: spaces;
}

.ref02 { text-decoration: line-through; }
.ref03 { text-decoration: overline; }
.ref03b { text-decoration: blink; }
.ref04 { 
  text-decoration: underline;
  text-decoration-style: dotted;
}
.ref05 { 
  text-decoration: underline;
  text-decoration-style: dashed;
}
.ref06 { 
  text-decoration: underline;
  text-decoration-style: double;
}
.ref07 { 
  text-decoration: underline;
  text-decoration-style: groove;
}
.ref08 { 
  text-decoration: underline;
  text-decoration-style: ridge;
}
.ref09 { 
  text-decoration: underline;
  text-decoration-style: inset;
}
.ref10 { 
  text-decoration: underline;
  text-decoration-style: outset;
}
.ref11 { 
  text-decoration: underline;
  text-decoration-style: wavy;
}


@media print
{
  html { font-size: 2vw; }
  html, body { 
    margin:0; padding:0; border:0;
    background-color:#fff;
  }

  div.contentcover  { 
    display:block;
    margin:0; padding:0; border:0;
    background-color:#fff;
  }
   
  div.logoline {
    display:block;
    block-size:border;
    margin:0; padding:0; border:0;
    background-image: none;
    background-color:#fff;
    min-height:0;
  } 

  div.logoline img.screenlogo {  display:none; }   

  div.logoline  img.printlogo  { 
    display:inline-block;
    margin:0; padding:0; border:0;
    width:10rem;
  } 

  div.menucolumn, div.bccontainer { display: none; }

  div.pagecontent  { 
    margin:0; padding:0; border:0;
    display:block;
  }

} /* print */