body  {
background-image: linear-gradient(to right, #D7ECEC, #8CC3DA,  #8CC3DA, #538184, #AD8C51);
}

/* ===== responsives Layout ===== */
.ga_header1{
  background: var(--me-color0);
  color: var(--me-color2);
  margin-top: 0.2em;
	padding: .5em 1em;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	border-radius: 1em;
  letter-spacing: 0.3em;
}
.ga_header2 {
	background: var(--me-color2);
  color: var(--me-color0);
  margin-top: 0.2em;
	padding: 0.1em 1em;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	border-radius: 1em;
  letter-spacing: 0.2em;
}

.ga_toerndaten  { grid-area: toerndaten; 
                  max-width:14em; 
                  padding-left:0.5em;   
                  font-size:0.95em; 
                  color:darkblue;
                  }
.ga_bilder      { grid-area: bilder; }
.ga_karte       { grid-area: karte; 
                  margin-top:0.3em;
                  padding:0.3em;
                  max-width:14em;
                  text-align:center;
                  }
.ga_karte h4    { color: var(--me-color0); 
                  letter-spacing:0.2em; 
                  }
.ga_kommentar   { grid-area: kommentar; 
                  margin-top:0.2em;
                  padding:0.5em;
                  max-width:14em;
                  }
.kommentar      { margin-top:1em;
                  text-align:justify;
                  font-size:0.95em;
                  }

.container-segeln {
    max-width:60em;
    display: grid;
    grid-gap:0;
    padding:5px;
    grid-template-areas: 
        "toerndaten"
        "karte"
        "kommentar"
        "bilder"
    ;
}

@media screen and (min-width: 30.001em) {
  .container-segeln {
    grid-template-areas:
      'toerndaten bilder bilder bilder bilder bilder bilder'
      'karte bilder bilder bilder bilder bilder bilder'
      'kommentar bilder bilder bilder bilder bilder bilder';
  }
}

.container-segeln > div {
  background-color:none;
  padding-bottom: 0.1em;
}


/* Box der Toerndaten */
toernHeader     {font-size:1.1em; font-weight:bold;}
toernDatum      {vertical-align:middle;}
toernDatum img  {height:30px; float:left; padding-right:0.3em;}
toernYachtName  {font-style:italic;}
toernYachtTyp   {}
toernYachtMasse {}
toernYachtTank  {}
toernYachtKabine  {}
toernCrew       {}
toernRoute      {}
toernStecke     {}



table#ttip th {letter-spacing:0.1em;}
table#ttip td,th {text-align:left;}
table#ttip td.logcomment {text-align:justify; border-top:1px solid grey;}
  .datum  {}
  .hafen  {font-style:italic;letter-spacing:0.1em;}
  
/*  positioniert ie Legende in der (1.) Karte oben rechts */  
#legende-container {
 position:absolute; 
 top:15em;
 right:10em;
}

div#legende-container table {
 font-size:0.8em;
 background-color:var(--me-color2);
 padding:0.2em;
}  
div#legende-container th  {font-weight:normal;
                           letter-spacing:0.01em;
                           border-bottom:1px solid black;}
div#legende-container span.picto-line {line-height:1.0em;}
div#legende-container span.picto      {color:red; font-size:200%; padding-left:0.3em;}
div#legende-container span.picto2     {color:red; font-size:265%; padding-left:0.3em;}