/*
Theme Name: FAZ Boersenlexikon
Theme URI: https://www.gaertner.de
Author: GDS
Author URI: https://www.gaertner.de
Description: Theme fuer das Boersenlexikon der F.A.Z.
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@import "mobstyle.css"  screen and (max-width:  767px);
@import "tabstyle.css"  screen and (min-width:  768px) and (max-width: 999px);
@import "dtopstyle.css" screen and (min-width: 1000px);

/*@import "fonts.css";*/       /* dev only */
/* dev only; copied from pre-release of header/footer template */
/* to be removed when header/footer template is released */
/*@import "fonts-pre.css";*/
/*@import "colors-pre.css";*/

/* Some extra color def's */
:root {
    --col-faz-grey-light-50:  rgb(232,237,238,50%);
    --col-faz-grey-dark-50:   rgb(65,84,88,50%);

    --col-mg-dark-light-50:   rgb(33,37,41,50%);
    --col-mg-dark-dark-50:    rgb(255,255,255,50%);

    --mg-dark-light:          var(--col-mg-dark-light);
    --faz-darkblue-light:     var(--col-faz-darkblue-light);
    
    --faz-grey-light:         var(--col-faz-grey-light);
    --faz-grey-light-50:      var(--col-faz-grey-light-50);
    --grey-400-light:         var(--col-grey-400-light);
    
    --white-permanent:        rgb(255,255,255);

}

/* darkmode colors and icons */
:root,
body.darkmode {
    --faz-grey:    var(--col-faz-grey-dark);
    --faz-grey-50: var(--col-faz-grey-dark-50);

    --faz-darkblue: var(--col-faz-darkblue-dark);

    --mg-dark:     var(--col-mg-dark-dark);
    --mg-dark-50:  var(--col-mg-dark-dark-50);

    --grey-400:    var(--col-grey-400-dark);
    --grey-700:    var(--col-grey-700-dark);

    --white:       var(--col-white-dark);
    --black:       var(--col-black-dark);

    --icon-arrow-left:    url('/assets/v2/images/arrow-left-white.svg');
    --icon-search-button: url('/assets/v2/images/search-white.svg');
}

/* lightmode colors and icons */
@media (prefers-color-scheme: light) {
body:not(.darkmode) {
    --faz-grey:     var(--col-faz-grey-light);
    --faz-grey-50:  var(--col-faz-grey-light-50);

    --faz-darkblue: var(--col-faz-darkblue-light);

    --mg-dark:     var(--col-mg-dark-light);
    --mg-dark-50:  var(--col-mg-dark-light-50);

    --grey-400:    var(--col-grey-400-light);
    --grey-700:    var(--col-grey-700-light);

    --white:       var(--col-white-light);
    --black:       var(--col-black-light);
    
    --icon-arrow-left:    url('/assets/v2/images/arrow-left.svg');
    --icon-search-button: url('/assets/v2/images/search-gray.svg');
}
}

:root {
    --default-top-margin:    0;
    --default-bottom-margin: 40px;
}

/*
main.doc-content {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
*/



@media only screen and (max-width: 811px) {
/* Heading/Headline/Headline 2 */
.boerse-headline {
font-family: "SourceSerif";
font-size:   24px;
font-weight: 500;
line-height: 110%;
}
}

@media only screen and (min-width: 812px) {
/* Heading/Headline/Headline 1 */
.boerse-headline {
font-family: "SourceSerif";
font-size:   38px; /* */
font-weight: 500;
line-height: 110%;
}
}

#primary.content-area a,
div.mvp-container a {
  color: var(--mg-dark);
}

#primary.content-area a:hover,
div.mvp-container a:hover {
  opacity: 0.5;
}


/* Heading/Headline/Headline 1 M */
div.lexi_title {
font-family: "SourceSerif";
font-weight: 500;
font-size:   46px;
line-height: 100%;
}

/* Heading/Subhead/Subhead 1 */
a.boerse_uri,
div.navtext a,
.lexi_title_single,
.lexi_title_single h1 {
font-family: "SourceSans";
font-weight: 700;
font-size:   19px;
line-height: 150%;
}
div.navtext {
font-family: "SourceSans";
font-weight: 400;
font-size:   19px;
line-height: 150%;
}

/* Heading/Section/2M */
.mvp-container .mvp-label {
font-family: "SourceSans";
font-style: normal;
font-weight: 600;
font-size: 17px;
line-height: 140%;
}


/* Meta/Meta 1 */
.unused ul#menu-top-menu li a {
font-family: "SourceSans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 140%;
}


/* Meta/Meta 1.5 */
ul#menu-top-menu li a {
font-family: "SourceSans";
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 140%;
}


/* Meta/Meta 2 */
.mvp-container .mvp-grid {
font-family: "SourceSans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 140%;
}


/* Heading/Paragraph/Teaser/Teaser 2 */
div.teaser,
div.boerse_excerpt {
font-family: "SourceSerif";
font-style:  normal;
font-weight: 400;
font-size:   14px;
line-height: 140%;
}


.main-single div.boerse_excerpt {
font-size:   17px;
line-height: 180%;
}


/* Zurück */
/* UI/Button/Button */
button.back-button {
font-family: "SourceSans";
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 110%;
}


a, button {
/* color: #c60000; */
text-decoration: none; 
}
.clearfix::after {
content: "";
clear: both;
display: table;
}

h2.gh-LogoStage_Caption {
font-weight: 400;
}
.cna-GlobalPageWrapper {
background: #FFFFFF;
}

#main {
/* max-width: 962px; */
/* margin: 0 auto 48px auto; */
margin-bottom: var(--default-bottom-margin);
padding-left:  var(--component-indentation);    
padding-right: var(--component-indentation);    
position: relative;
}

.boerse-header {
display: grid;
/* grid-template-columns: 1fr; */
grid-row-gap: 5px;
margin-bottom: 20px;
}

.boerse-headline a {
display: inline-block;
width: 100%;
text-align: center;
}


div.headerimg img {
width: 100%;
}
div.teaser {
text-align: center;
margin-bottom: var(--default-bottom-margin);
}

/* Menu start */
.menu-top-menu-container::after { clear: both; } /* uwe */

ul#menu-top-menu {
list-style: none;
margin-top: 20px;
margin-bottom: 60px;
padding-left: 0;
}


ul#menu-top-menu li a,
a.circled-button {
display: block;
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 50%;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
@media screen and (min-width:  768px) {
ul#menu-top-menu li a:hover,
a.circled-button:hover {
  background: var(--mg-dark-50);
  color: var(--white-permanent);
}
}
ul#menu-top-menu li.current_page_item a {
background: var(--mg-dark);
color: var(--white);
}


div.lexi_content .navi_wrapper a,
div.lexi_content .boerse_wrapper a {
  text-decoration: none;
}
div.lexi_content .navi_wrapper a:hover,
div.lexi_content .boerse_wrapper a :hover{
  opacity: 0.5;
}

div.lexi_title {
text-transform: uppercase;
}
.lexi_title_single {
}
.boerse_wrapper {
margin-top: 25px;
Xmax-width: 90%;
}
.boerse_wrapper h2 {
margin: 4px 0;
}
.boerse_excerpt {
margin-top: 6px;
}
.navi_wrapper {
margin-top: 55px;
margin-bottom: 55px;
}

/* Suche */
.searchbox {
    display: flex;
    justify-content: center;
}
.searchform .text-part .btn-search {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    vertical-align: bottom;
    background-color: transparent;
    background-image: var(--icon-search-button);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    Xfilter: invert(40%);
}
.searchform .text-part {
    float: left;
    padding: 5px 10px;
    border: solid 1px var(--grey-700);
    border-radius: 2px;
}
.searchform input {
    font-family: "SourceSans";
    font-size: 14px;
    font-weight: 600;
    line-height: 140%;
    vertical-align: bottom;
    color: var(--mg-dark);
    background-color: transparent;
    outline: none;
    border: none;
}
.searchform input::placeholder,
.searchform input::-ms-input-placeholder,
.searchform input:-ms-input-placeholder {
    color: var(--grey-400);
}
.searchform input::placeholder {
    color: var(--grey-400);
    opacity: 1; /* Firefox */
}
.searchform > .btn-search {
    font-family: "SourceSans";
    font-size: 14px;
    font-weight: 600;
    line-height: 110%
    color: var(--faz-darkblue-light);
    background-color: var(--faz-grey-light);
    border: solid 1px transparent;
    border-radius: 2px;
}
.searchform > .btn-search:hover {
    background-color: var(--faz-grey-light-50);
}


.lexikonref {
	text-decoration: underline;
}
.lexikonref:hover {
    opacity: 0.5;
}

div.mvp-container {
    padding-left:  var(--component-indentation);
    padding-right: var(--component-indentation);
}

div.mvp-label {
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

div.mvp-grid {
    margin-bottom: var(--default-bottom-margin);
}


button.back-button {
    margin-bottom: var(--default-bottom-margin);
    border: none;
    padding-left: 15px;

    color: var(--mg-dark);
    
    background-image: var(--icon-arrow-left);
    background-position: left;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 0.6em;
}
button.back-button:hover {
    opacity: 0.5;
}