/* Local for compliance with EU Data Protection Regulation */
@font-face{font-family:'Open Sans';font-display: fallback;font-style:normal;font-weight:300;
                 src:local('Open Sans Light'), local('OpenSans-Light'), 
                 url(../fonts/Open-Sans-Light-normal-300.woff2) format('woff2');
                 url(../fonts/Open-Sans-normal-300.ttf) format('ttf');
                 url(../fonts/Open-Sans-Regular-400.svg) format('svg');
                 url(../fonts/Open-normal-400.eot) format('eot');
}
@font-face{font-family:'Open Sans';font-display: fallback;font-style:normal;font-weight:400;
                 src:local('Open Sans'), local('OpenSans'), 
                 url(../fonts/Open-Sans-Light-normal-400.woff2) format('woff2');
                 url(../fonts/Open-Sans-normal-400.ttf) format('ttf');
                 url(../fonts/Open-Sans-Regular-400.svg) format('svg');
                 url(../fonts/Open-normal-400.eot) format('eot');
}

font-face{font-family:'Roboto';font-display: auto;font-style:normal;font-weight:400;
                 src:local('Roboto') 
                 url(../fonts/Roboto-Light-normal-300.woff2) format('woff2');
                 url(../fonts/Roboto-normal-300.ttf) format('ttf');
                 url(../fonts/Roboto-normal-400.svg) format('svg');
                 url(../fonts/Roboto-normal-400.eot) format('eot');
}
@font-face{font-family:'Montserrat';font-display: fallback;font-style:normal;font-weight:400;
                 src:local('Montserrat'),  
                 url(../fonts/Montserrat-Light-normal-400.woff2) format('woff2');
                 url(../fonts/Montserrat-normal-400.ttf) format('ttf');
                 url(../fonts/Montserrat-Regular-normal-400.svg) format('svg');
                 url(../fonts/Montserrat-400.eot) format('eot');
}

/* for em usage below */
html{font-size:100%;}
body{font-size:100%;}

@media only screen and (min-width: 960px) {
	/* styles for browsers larger than 960px; */
html{font-size: 110%}
body{font-size: 110%}
}
@media only screen and (min-width: 1440px) {
	/* styles for browsers larger than 1440px; */
html{font-size: 120%}
body{font-size: 120%}
}
@media only screen and (min-width: 1650px) {
	/* KF : styles for browsers larger than 1650px; */
html{font-size: 130%}
body{font-size: 130%}
}
@media only screen and (min-width: 2000px) {
	/* for sumo sized (mac) screens */
html{font-size: 140%}
body{font-size: 140%}
}
@media only screen and (max-device-width: 480px) {
   /* styles for mobile browsers smaller than 480px; (iPhone) */
html{font-size: 90%}
body{font-size: 90%}
}
@media only screen and (device-width: 768px) {
   /* default iPad screens */
html{font-size: 110%}
body{font-size: 110%}
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
html{font-size: 90%}
body{font-size: 90%}
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
html{font-size: 110%}
body{font-size: 110%}
}
	
	

/* some optimazations for better readability and default font. deleted some due to ct2019/18, p.138/139 */
body {
font-feature-settings: "liga" on;
font-family: 'Open Sans', 'Roboto', 'Noto', 'Helvetica Neue', 'Verdana', 'sans-serif';
font-weight: 300;
}

/* generic header style */
h1, h2, h3, h4, h5, h6 {
   font-family: 'Montserrat', 'Open Sans', 'Roboto', 'Noto', 'Helvetica Neue', 'Verdana', 'sans-serif';
   font-weight: 400;
   color: inherit;
}

/* specific header style - scale of headers can be adjusted with help of https://type-scale.com/ */
h1 { font-size: 1.6 em; }
h2 { font-size: 1.5 em; }
h3 { font-size: 1.4 em; }
h4 { font-size: 1.3 em; }
h5 { font-size: 1.2 em; }
h6 { font-size: 1.1 em; }

/* generic listing style */
ol, ul, li {margin: 0; padding: 0; list-style: none;}

p   {
   line-height:   140%;
   margin-top:   .8em;
   margin-bottom:   .8em;
   }

/*---------------------------------
// top drop down menu definitions
---------------------------------*/
  .nav-tabs li a {
      color: #777;
  }
  .navbar {
   margin-bottom: 0;
   background: #616387;
   background-color: #616387;
      border: 0;
      font-familiy: 'Montserrat', 'Open Sans', 'Roboto', 'Noto', 'Helvetica Neue', 'Verdana', 'sans-serif';
      font-size: 1em; 
      letter-spacing: 4px;
  }
  .navbar li a, .navbar .navbar-brand { 
      color: #d5d5d5 !important;
  }
  .navbar-nav li a:hover {
      color: #fff !important;
  }
  .navbar-nav li.active a {
      color: #fff !important;
      background-color: #29292c !important;
  }
  .navbar-default .navbar-toggle {
      border-color: transparent;
  }
  .open .dropdown-toggle {
      color: #fff;
      background-color: #555 !important;
  }
  .dropdown-menu li a {
      color: #000 !important;
  }
  .dropdown-menu li a:hover {
      background-color: red !important;
  }


/*---------------------------------
// Triangle page definitions
---------------------------------*/
#triangle {
      background: #3A3C69;
      color: white;
	  padding-top:70px;
}

#triangle-image {
    speak: none;
}

#triangle h2, h3 {
      margin: 10px 0 30px 0;
      letter-spacing: 10px;      
      font-size: 1.4 em;
  }

/* dreiecksseite: verweise, orginaltext -titel */
#triangle h3.dr_sm_vlt, h3.dr_sm_ott
   {font-size: 100%;
   margin-top: 10px;
   margin-bottom: 4px;
    }

/* dreiecksseite: BeitragsListenTitel */
#triangle h3.dr_sm_blt
   {
   margin-top: 10px;
   margin-bottom: 4px;
    }

#triangle ul.dr_sm_aul, ul.dr_sm_vul, ul.dr_sm_otul   {
   margin-top: -5px;
   margin-bottom: 8px;
   }

/* dreiecksseite: artikelliste, orginaltext -listenelemente */
#triangle li.dr_sm_al, li.dr_sm_vl, li.dr_sm_otl {
   line-height: 115%;
   padding-left: 10px;
   }

#triangle .hs  {color: white; font-weight:bold; font-size: 24pt; margin-top: 4px; margin-bottom: 4px;}
#triangle .small {font-size: 12px;}

/* links */
#triangle a:link    {color:#F0E59E;}
#triangle a:visited {color:#C7B767;}
#triangle a:active  {color:#DEC3A9;}
#triangle a:hover   {color:#ffffff; font-weight: bold;}

/*---------------------------------
// Article page definitions
---------------------------------*/

#article{font-size:1em;line-height:1.44;letter-spacing:.03em;
         max-width:37em;display:block;margin:auto;padding:20px;
		background: white;
        background-color: white;
		color: black;
}
#article h1{margin-top:0}
#article ul{margin-bottom:50px;}
#article ul li{margin-left:50px;}
#article ul li a:hover{color:red;}
#article ul li a{cursor:pointer;color:blue;}
.article-title{margin-top:80px;color:rgb(255, 0, 204);}
.article-title-background-black{background-color:black;color:white;}
.article-sub-title{margin:15px 0 40px 0;}
#article-maintext p::first-letter{font-size:1.5em;font-weight:bold;}
.article-comment p{margin:20px 0;}


/* links */
#article-maintexta {  text-decoration: none; font-weight: bold;}
#article-maintext a:link    {color:blue;}
#article-maintext a:visited {color:darkblue;}
#article-maintext a:active  {color:lightblue;}
#article-maintext  a:hover   {color:red; font-weight: bold;}

/*---------------------------------
// Footer definitions
---------------------------------*/

footer {
   background: #616387;
   background-color: #616387;
   color: #f5f5f5;
   padding: 6px;
   text-align: center;
   font-size: 0.9em; !important;
}

/* links */
footer a:link    {color:#F0E59E;}
footer a:visited {color:#C7B767;}
footer a:active  {color:#DEC3A9;}
footer a:hover   {color:#ffffff; font-weight: bold;}