/* **************************************
   FIRMENEMPFEHLUNG * FORMAT * DANIELA JOSS
*************************************** */

/* ****************************************
   GRUNDREGELN
**************************************** */

*,
*::before,
*::after {
  box-sizing:border-box;
}

body {
  margin:0;
  background-color:#1C1C1C;
  color:#8F8F8F;
  font-family:Arial, Verdana, sans-serif;
  overflow-x:hidden;
}


/* ****************************************
   HAUPTKASTEN
**************************************** */

#large {
  max-width:990px;
  margin:0 auto;
  padding:40px;

  background:
    linear-gradient(
      to right,
      #161616 0%,
      #262626 1%,
      #262626 10%,
      #262626 50%,
      #262626 90%,
      #262626 99%,
      #161616 100%
    );

  border-radius:6px;
  overflow:hidden;

  box-shadow:
    inset 30px 0 30px -30px rgba(0,0,0,0.20),
    inset -30px 0 30px -30px rgba(0,0,0,0.20),
    0 10px 10px rgba(0,0,0,0.7);
}


/* ****************************************
   SCHMUCKELEMENTE
**************************************** */

.punkt {
  color:#606d83;
  font-size:14px;
  vertical-align:middle;
  padding:0 6px;
}

.punkt.gross {
  font-size:40px;
  line-height:1;
}

.jahrtitel .punkt {
  margin-right:10px;
}

.titel-blau,
.jahrtitel-blau {
  color:#606d83;
}


/* ****************************************
   TITEL UND TYPOGRAFIE
**************************************** */

.seitenkopf {
  margin-top:20px;
  margin-bottom:40px;

  color:#d4d4d4;
  font-family:"Bodoni MT", Georgia, serif;
  font-size:42px;
  font-variant:small-caps;
  letter-spacing:2px;
  line-height:1.1;
  text-align:right;

  text-shadow:4px 5px 8px rgba(0,0,0,0.7);
  word-break:normal;
  overflow-wrap:break-word;
}

.jahrtitel,
.reisetitel {
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variant:small-caps;
  font-weight:300;
  letter-spacing:1px;
  text-shadow:0 1px 2px rgba(0,0,0,0.30);
}

.jahrtitel {
  margin-top:40px;
  margin-bottom:30px;

  color:#BFBFBF;
  font-size:30px;
  line-height:1.1;
  text-align:right;
}

.reisetitel {
  color:#606D83;
  font-size:25px;
  font-weight:normal;
  text-align:center;
}


/* ****************************************
   TEXTE
**************************************** */

.reisetext {
  max-width:700px;
  margin:22px auto 38px auto;

  color:#8F8F8F;
  font-size:18px;
  line-height:1.65;
  text-align:left;

  text-shadow:1px 1px 2px rgba(0,0,0,0.35);
  overflow-wrap:break-word;
}

.reisetext-zentriert {
  text-align:center;
}


/* ****************************************
   TITELBILD
**************************************** */

.bildkasten {
  width:fit-content;
  max-width:100%;
  margin:50px auto;
  padding:40px;

  background-color:#141414;
  border:1px solid rgba(96,109,131,0.70);
  text-align:center;

  box-shadow:
    inset 0 0 4px rgba(96,109,131,0.5),
    2px 3px 10px rgba(0,0,0,0.6);
}

.bildkasten img {
  display:block;
  max-width:100%;
  height:auto;
}


/* ****************************************
   FIRMENBLÖCKE UND LOGOS
**************************************** */

.firmenblock {
  margin:50px auto;
  text-align:center;
}

.firmenlogo {
  display:block;
  max-width:100%;
  height:auto;
  margin:28px auto 0 auto;
}

.firmenlink {
  margin:18px auto 28px auto;
  text-align:center;
}


/* ****************************************
   RUHIGE LINKS
**************************************** */

.link-dezent {
  color:#8F8F8F;
  text-decoration:none;
  transition:color 0.25s ease;
}

.link-dezent:hover {
  color:#BFBFBF;
}

.seitenlinks {
  margin:55px auto 35px auto;
  text-align:center;
}

.link-navigation {
  display:block;
  width:fit-content;
  margin:6px auto;

  color:#606d83;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing:0.3px;
  text-decoration:none;

  transition:color 0.25s ease;
}

.link-navigation:hover {
  color:#8ea0bf;
}


/* ****************************************
   SIGNATUR
**************************************** */

.signaturbild {
  display:block;
  width:306px;
  max-width:100%;
  height:auto;
  margin:30px auto 0 auto;
}


/* ****************************************
   LINIEN UND TRENNER
**************************************** */

.leiste {
  height:1px;
  margin:28px auto;

  background-color:#606d83;
  box-shadow:0 4px 5px #000;
}

.leiste.leiste-footer {
  margin:20px auto 25px auto;
}


/* ****************************************
   NACH-OBEN-BUTTON
**************************************** */

.up-button {
  display:block;
  width:fit-content;
  margin:40px auto 10px auto;
  padding:8px 18px;

  color:#B1B1B1;
  background-color:#424a58;
  border:1px solid rgba(210,220,235,0.35);
  border-radius:6px;

  font-size:14px;
  letter-spacing:1px;
  text-decoration:none;
}

.up-button:hover {
  color:#FFFFFF;
  background-color:#4b5668;
}


/* ****************************************
   FOOTER
**************************************** */

.footer {
  margin-top:15px;
  margin-bottom:0;

  color:#9A9A9A;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:14px;
  text-align:right;

  text-shadow:0 1px 2px rgba(0,0,0,0.35);
}


/* ****************************************
   HANDY / RESPONSIVE
**************************************** */

@media (max-width:700px) {

  #large {
    width:100%;
    max-width:100%;
    padding:18px 12px;
    border-radius:0;
  }

  .seitenkopf {
    font-size:20px;
    text-align:center;
    letter-spacing:0;
    line-height:1.2;
  }

  .punkt.gross {
    font-size:20px;
    padding:0 2px;
  }

  .bildkasten {
    width:100%;
    margin:25px auto;
    padding:12px;
  }

  .jahrtitel {
    font-size:22px;
    text-align:center;
  }

  .reisetitel {
    color:#606D83;
    font-size:24px;
  }

  .reisetext {
    font-size:16px;
    line-height:1.55;
  }

  .reisetext-zentriert {
    text-align:center;
  }

  .firmenblock {
    margin:38px auto;
  }

  .signaturbild {
    width:240px;
  }

  img {
    max-width:100%;
    height:auto;
  }

}


/* ****************************************
   QUERFORMAT HANDY
**************************************** */

@media (max-width:700px) and (orientation:landscape) {

  .up-button {
    display:block !important;
  }

}