:root { --cassiopeia-color-primary: #014464;}

.lang-active {background-color: red;}

.container-header { background-image: none;}


/* button weiter */

.btn-secondary {
  background-color: #fff;
  border-color: #1560aa;
  color: #353b41;
  margin-left: 120px;}
}

.ampelrot {
    background-color: #F59794;
  	}
.ampelgelb {
    background-color: #F9F576;
  	}
.abschnitt1 {
    color: green; background-color: #F1FE9A;
  	}
.abschnitt2 {
    color: green; background-color: #F1FE9A;
  	}
.abschnitt3 {
    color: green; background-color: #F1FE9A;
  	}
.abschnitt4 {
    color: green; background-color: #F59794;
  	}
.abschnitt5 {
    color: green; background-color: #F1FE9A;
  	}
.abschnitt6 {
    color: green; background-color: #F1FE9A;
  	}

.logboek {
    background-color: #f1f1f1;
    width: 210px;
    height: 117px;
    padding: 1rem 0rem 0.1rem 1.1rem;
    margin: 1.5rem 1rem 0rem 0.4rem;
    border: 3px #bfbfbf solid;
  	font-family: 'courier new', courier;
    font-size: 0.8em;
  	font-weight: bold; 
}

/*

style="background-color: #f1f1f1; width: 80%; height: 10%x; padding: 1rem 0rem 0.1rem 1.1rem; margin: 1.5rem 1rem 1rem 0.4rem; border: 3px #bfbfbf solid; font-family: 'courier new', courier; font-weight: bold; font-size: 0.8em;"


style="background-color: #d6d6d6; width: 100%; height: 70%x; padding: 1.6rem; margin-right: 4rem; margin-bottom: 4rem; border: 3px blue solid; font-family: 'courier new', courier; font-weight: bold;"
*/

.bereich {
    background-color: #d6d6d6;
    width: 400px;
    height: 150px;
    padding: 20px;
    margin: 60px;
    border: 3px blue solid;
}

/* Container Reisen   */
.container-reisen {  display: grid;
  grid-template-columns: 40% 1.0fr 1.0fr 1.0fr;
  grid-template-rows: 0.3fr 1.0fr 1.0fr 1.0fr;
  grid-auto-columns: 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "textr textr textr textr"
    "kartr videor1 videor1 videor1"
    "kartr videor2 videor2 videor2"
    "kartr videor3 videor3 videor3"
    ;
}

.textr { grid-area: textr; }

.kartr { grid-area: kartr; }

.videor1 { grid-area: videor1; }

.videor2 { grid-area: videor2; }

.videor3 { grid-area: videor3; }


/* container für 6 video Verdun   */
.container-verdun {  display: grid;
  grid-template-columns: 40% 1.0fr 1.0fr 1.0fr;
  grid-template-rows: 0.3fr 1.0fr 1.0fr;
  grid-auto-columns: 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "textv textv textv textv"
    "kartv videov1 videov2 videov3"
    "kartv videov4 videov5 videov6";
}

.textv { grid-area: textv; }

.kartv { grid-area: kartv; }

.videov1 { grid-area: videov1; }

.videov2 { grid-area: videov2; }

.videov3 { grid-area: videov3; }

.videov4 { grid-area: videov4; }

.videov5 { grid-area: videov5; }

.videov6 { grid-area: videov6; }


/* Video Berlin */

.container-berlin {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: .6fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "texttour texttour texttour texttour"
    "karte-berlin karte-berlin karte-berlin videob1"
    "videob2 videob3 videob4 videob5"
    "videob6 videob7 videob8 videob9";
}

.texttour { grid-area: texttour; }

.videob2 { grid-area: videob2; }

.videob4 { grid-area: videob4; }

.videob5 { grid-area: videob5; }

.videob6 { grid-area: videob6; }

.karte-berlin { grid-area: karte-berlin; }

.videob1 { grid-area: videob1; }

.videob3 { grid-area: videob3; }

.videob7 { grid-area: videob7; }

.videob8 { grid-area: videob8; }

.videob9 { grid-area: videob9; }

/* Video Antwerpen */
.container-video {  
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr 1.2fr;
  grid-template-rows: 0.6fr 1.1fr 1.1fr;
  grid-auto-columns: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "TextRoute TextRoute TextRoute TextRoute"
    "RouteGrafik video1 video2 video3"
    "RouteGrafik video4 video5 video6";
}

.RouteGrafik { grid-area: RouteGrafik; }

.TextRoute { grid-area: TextRoute; }

.video1 { grid-area: video1; }

.video2 { grid-area: video2; }

.video3 { grid-area: video3; }

.video4 { grid-area: video4; }

.video5 { grid-area: video5; }

.video6 { grid-area: video6; }


/*  Ausbau */
.container-ausbau {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 0.4fr 0.4fr 0.4fr 0.4fr 0.4fr 1fr 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "ausbau-titel ausbau-titel ausbau-titel"
    "stuurstand1 stuurstand2 stuurstand3"
    "stuurhut1 stuurhut2 stuurhut3"
    "kombuis1 kombuis2 kombuis3"
    "voorkajuit1 voorkajuit2 voorkajuit3"
    "achterkajuit1 achterkajuit2 achterkajuit3"
    "bad1 bad2 bad3"
    "deck1 deck2 deck3";
}

.ausbau-titel { grid-area: ausbau-titel; }

.stuurstand1 { grid-area: stuurstand1; }

.stuurstand2 { grid-area: stuurstand2; }

.stuurstand3 { grid-area: stuurstand3; }

.stuurhut1 { grid-area: stuurhut1; }

.stuurhut2 { grid-area: stuurhut2; }

.stuurhut3 { grid-area: stuurhut3; }

.kombuis1 { grid-area: kombuis1; }

.kombuis2 { grid-area: kombuis2; }

.kombuis3 { grid-area: kombuis3; }

.voorkajuit1 { grid-area: voorkajuit1; }

.voorkajuit2 { grid-area: voorkajuit2; }

.voorkajuit3 { grid-area: voorkajuit3; }

.achterkajuit1 { grid-area: achterkajuit1; }

.achterkajuit2 { grid-area: achterkajuit2; }

.achterkajuit3 { grid-area: achterkajuit3; }

.bad1 { grid-area: bad1; }

.bad2 { grid-area: bad2; }

.bad3 { grid-area: bad3; }

.deck1 { grid-area: deck1; }

.deck2 { grid-area: deck2; }

.deck3 { grid-area: deck3; }




/* alt */
.container {  display: grid;
  grid-template-columns: 1.5fr 0.6fr 0.5fr 0.6fr 1.5fr;
  grid-template-rows: 2fr 0.5fr 0.5fr 0.5fr 2fr 0.5fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "foto1 foto1 foto1 text2 foto2"
    "text1 text1 text1 . foto2"
    "foto3 . . . foto2"
    "foto3 . text4 text4 text4"
    "foto3 text3 foto4 foto4 foto4"
    "titel0 titel0 titel0 titel0 titel0";
}

.titel0 { grid-area: titel0; }

.text3 { grid-area: text3; }

.text2 { grid-area: text2; }

.foto1 { grid-area: foto1; }

.text1 { grid-area: text1; }

.foto4 { grid-area: foto4; }

.foto3 { grid-area: foto3; }

.text4 { grid-area: text4; }

.foto2 { grid-area: foto2; }




/*
.container {  display: grid;
  grid-template-columns: minmax(60px, 180px) minmax(60px, 180px) minmax(60px, 180px);
  grid-template-rows: minmax(60px, 180px) minmax(60px, 180px) minmax(60px, 180px);
  grid-auto-rows: 300px;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "foto1 foto1 foto2"
    "foto3 . foto2"
    "foto3 foto4 foto4";
  width: 100%;
  height: 100%;
}

.foto1 {
  justify-self: start;
  grid-area: foto1;
}

.foto2 {
  justify-self: end;
  align-self: start;
  grid-area: foto2;
}

.foto3 {
  justify-self: start;
  align-self: end;
  grid-area: foto3;
}

.foto4 {
  justify-self: end;
  align-self: start;
  grid-area: foto4;
}
*/

body {font-family: "EB Garamond";}
h4, h5, h6 {font-family: "EB Garamond";}

/* Hautüberschrift groß - orange */
h1 {font-family: "EB Garamond";font-size: 2.0rem; font-weight: 700; color: #800000;}
/* Untertitel schwarz */
h2 {font-family: "EB Garamond";font-size: 1.3rem; font-weight: 700; color: #000000;}
/* Untertitel orange */
h3 {font-family: "EB Garamond";font-size: 1.0rem; font-weight: 700; color: #993300;}

/* h1, h2, h3 { border-bottom: 2px solid gray; } */

:root {
  --body-font-size: 1.3rem; 
  --body-line-height: 1.0;
}

/* Menü Schriftgröße */
.nav {font-size: 1.20rem;}

/* Bildunterschift  aktuell */
.wf_caption {
    text-align: center;
    background-color: #dddddd;
	font-size : 1.rem;
}
  




/* eb-garamond-regular - latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/eb-garamond-v26-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/eb-garamond-v26-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/eb-garamond-v26-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/eb-garamond-v26-latin-regular.svg#EBGaramond') format('svg'); /* Legacy iOS */
}
/* eb-garamond-500 - latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/eb-garamond-v26-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/eb-garamond-v26-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/eb-garamond-v26-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/eb-garamond-v26-latin-500.svg#EBGaramond') format('svg'); /* Legacy iOS */
}
/* eb-garamond-600 - latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/eb-garamond-v26-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/eb-garamond-v26-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/eb-garamond-v26-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/eb-garamond-v26-latin-600.svg#EBGaramond') format('svg'); /* Legacy iOS */
}
/* eb-garamond-700 - latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/eb-garamond-v26-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/eb-garamond-v26-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/eb-garamond-v26-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/eb-garamond-v26-latin-700.svg#EBGaramond') format('svg'); /* Legacy iOS */
}
/* eb-garamond-800 - latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/eb-garamond-v26-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/eb-garamond-v26-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/eb-garamond-v26-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/eb-garamond-v26-latin-800.svg#EBGaramond') format('svg'); /* Legacy iOS */
}
/* eb-garamond-italic - latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/eb-garamond-v26-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/eb-garamond-v26-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/eb-garamond-v26-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/eb-garamond-v26-latin-italic.svg#EBGaramond') format('svg'); /* Legacy iOS */
}
/* eb-garamond-500italic - latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/eb-garamond-v26-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/eb-garamond-v26-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/eb-garamond-v26-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/eb-garamond-v26-latin-500italic.svg#EBGaramond') format('svg'); /* Legacy iOS */
}
/* eb-garamond-600italic - latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/eb-garamond-v26-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/eb-garamond-v26-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/eb-garamond-v26-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/eb-garamond-v26-latin-600italic.svg#EBGaramond') format('svg'); /* Legacy iOS */
}
/* eb-garamond-700italic - latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/eb-garamond-v26-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/eb-garamond-v26-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/eb-garamond-v26-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/eb-garamond-v26-latin-700italic.svg#EBGaramond') format('svg'); /* Legacy iOS */
}
/* eb-garamond-800italic - latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/eb-garamond-v26-latin-800italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/eb-garamond-v26-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/eb-garamond-v26-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-800italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/eb-garamond-v26-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/eb-garamond-v26-latin-800italic.svg#EBGaramond') format('svg'); /* Legacy iOS */
}


/* baskervville-regular - latin */
@font-face {
  font-family: 'Baskervville';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/baskervville-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/baskervville-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/baskervville-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/baskervville-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/baskervville-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/baskervville-v13-latin-regular.svg#Baskervville') format('svg'); /* Legacy iOS */
}
/* baskervville-italic - latin */
@font-face {
  font-family: 'Baskervville';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/baskervville-v13-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/baskervville-v13-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/baskervville-v13-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/baskervville-v13-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/baskervville-v13-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/baskervville-v13-latin-italic.svg#Baskervville') format('svg'); /* Legacy iOS */
}


/* libre-baskerville-regular - latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/libre-baskerville-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/libre-baskerville-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/libre-baskerville-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/libre-baskerville-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/libre-baskerville-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/libre-baskerville-v14-latin-regular.svg#LibreBaskerville') format('svg'); /* Legacy iOS */
}
/* libre-baskerville-italic - latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/libre-baskerville-v14-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/libre-baskerville-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/libre-baskerville-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/libre-baskerville-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/libre-baskerville-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/libre-baskerville-v14-latin-italic.svg#LibreBaskerville') format('svg'); /* Legacy iOS */
}
/* libre-baskerville-700 - latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/libre-baskerville-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/libre-baskerville-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/libre-baskerville-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/libre-baskerville-v14-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/libre-baskerville-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/libre-baskerville-v14-latin-700.svg#LibreBaskerville') format('svg'); /* Legacy iOS */
}



