/* Lutz Rahn */
:root {
  --bs-body-font-family: 'Lato';
  --bs-body-bg: #f5f5f5;
  --bs-body-color: #46484F;
  --lutz-blue: #202C40;
  --lutz-grey: #46484F;
  --lutz-lightgrey: #999;
}

*                       { color: var(--lutz-grey); }
.logo                   { background: url(../img/logo.svg) no-repeat; width: 150.5px; height: 45px; display:inline-block; background-size: 100%; }
.toggle_left            { background: url(../img/toggle_li.svg) no-repeat; width: 53px; height: 16px; display:inline-block; background-size: 100%; margin: 0 1px 0 4px; cursor: pointer; }
.toggle_right           { background: url(../img/toggle_re.svg) no-repeat; width: 53px; height: 16px; display:inline-block; background-size: 100%; margin: 0 1px 0 4px; cursor: pointer; }
span.lng                { vertical-align: 4px; }
span.lng.active         { color: #000; }
span.lng.inactive       { color: #999; }
body                    { padding-top: 83px; }
.fixed-top              { background-color: var(--bs-body-bg); }

ul.bullets              { list-style: none; margin-left: 0; padding-left: 0.75em; }
ul.bullets > li:before  { display: inline-block; content: "-"; width: 0.75em; margin-left: -0.75em; }
p, li                   { font-weight: 300; font-size: 24px; line-height: 30px; margin-bottom: 8px; }
.w100                   { width: 100%; max-width: 100%; }

.linkedin img {opacity: 0.7; display: inline-block; margin-top: 40px; }
.linkedin img:hover {opacity: 1; }

h1, h2, h2 span, h3, h4   { color: var(--lutz-blue); font-family: 'Cormorant'; }
h2                        { font-size: 130px; line-height: 100px; text-transform: uppercase; /*letter-spacing: -2px;*/ }
h2 span                   { display: block; }
h2 span:nth-child(even)   { padding-left: 72px;}
h3                        { font-family: 'Lato'; font-size: 50px; line-height: 60px; font-weight: normal; }
h3.small                  { font-family: 'Lato'; font-size: 30px; line-height: 40px; font-weight: normal; }
h2.small                  { font-size: 80px; line-height: 60px; }
h2.smaller                { font-size: 50px; line-height: 40px; }
.mb-10                    { margin-bottom: 200px; }
.mb-8                     { margin-bottom: 150px; }
.bluebox                  { background-color: var(--lutz-blue); padding: 90px 75px; }
.bluebox *                { color: var(--bs-body-bg); }
button.action             { border: 1px solid var(--lutz-grey); border-radius: 0; }
a.link                    { text-decoration: none; color: var(--lutz-grey); }
a.link:hover              { text-decoration: underline; }

a.text-muted              { text-decoration: none; font-size: var(--bs-body-font-size); }


.imprintbox                 { background-color: var(--lutz-blue); }
.imprintbox .imprint_info   { color: var(--lutz-lightgrey); }
.imprintbox .imprint_info b,
.imprintbox h2,
.imprintbox h3              { color: var(--bs-body-bg); }
.imprintbox .textbox        { __max-height: calc( 100vh - 300px); __overflow-y: auto; font-size: 14px; color: var(--lutz-lightgrey); }
.imprintbox .textbox b      { color: var(--bs-body-bg); }
.imprintbox .modal-header   { border: 0; }
.close_button               { background: transparent url(../img/close.svg); width: 50px; height: 50px; display: inline-block; background-repeat: no-repeat; background-size: 100%; cursor: pointer; }

/* ------------------------------------------------------------------------------------------
col-sm for phones (<577px); and .col-md for tablets (≥768px);
-------------------------------------------------------------------------------------------*/
/* @media screen and (max-width: 576px) and (min-width: 0px) { */
@media screen and (max-width: 768px) and (min-width: 0px) {
  p, li     { font-weight: 300; font-size: 20px; line-height: 30px; margin-bottom: 8px; }
  h2        { font-size: 70px; line-height: 60px; text-transform: uppercase; letter-spacing: -2px; }
  h2.small  { font-size: 30px; line-height: 20px; }
  h2.smaller{ font-size: 35px; line-height: 25px; }
  h3        { font-family: 'Lato'; font-size: 25px; line-height: 30px; font-weight: normal; }
  h3.small  { font-family: 'Lato'; font-size: 25px; line-height: 15px; font-weight: normal; }
  .mb-10    { margin-bottom: 150px; }
  .mb-8     { margin-bottom: 100px; }

  .bluebox  { padding: 30px 25px; }

}


/* ------------------------------------------------------------------------------------------
.col-md for tablets (≥768px);
-------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) and (min-width: 577px) {

}